曰本做爰l网站,企业建站免费模板,广告设计需要学什么专业,产品做网站1 何为HTML
用来描述网页的一种语言超文本标记语言(Hyper Text Markup Language)不是一种编程语言#xff0c;而是一种标记语言 (markup language)
2 HTML标签
HTML 标签是由尖括号包围的关键词#xff0c;比如 html 作用是为了“标记”页面中的内容#xff0c;使…1 何为HTML
用来描述网页的一种语言超文本标记语言(Hyper Text Markup Language)不是一种编程语言而是一种标记语言 (markup language)
2 HTML标签
HTML 标签是由尖括号包围的关键词比如 html 作用是为了“标记”页面中的内容使浏览器能够识别设计者的要求正确的在网页中显示出来HTML 标签通常是成对出现的比如 b 和 /b标签对中的第一个标签是开始标签第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签
3 HTML文档结构 3.1 文档类型
在HTML中文档类型DOCTYPE是一种指令它告诉浏览器文档的类型和版本从而使浏览器能够正确地渲染文档。DOCTYPE处于HTML文档的首行位于html标签之前。
!DOCTYPE html当前最常用的文档类型声明用于HTML5文档
3.2 开始标签
在HTML文档中html 标签是一个根元素包围着整个文档的其它所有HTML元素。所有的HTML元素必须被这个标签包裹起来这也意味着html标签是HTML文档的最外层元素
!DOCTYPE html
htmlhead!-- head部分的内容 --/headbody!-- body部分的内容 --/body
/html3.2.1 lang属性
html标签也可以包含lang属性来定义文档的语言。
html langen!-- 页面内容 --
/html在这个例子中langen 属性告诉浏览器这个文档是用英语编写的。不同的语言代码会表示不同的语言例如“es”为西班牙语“zh”为中文等。
3.3 头标签 头标签对象
在HTML文档中head标签用于包含文档的元数据metadata以及链接到脚本和样式表的引用。head标签通常包括如下一些子元素
3.3.1 title
title标签定义了文档的标题这个标题会显示在浏览器的标题栏或标签上
title这是页面标题/title3.3.2 meta
meta标签用于提供关于文档的元数据如字符集、页面描述、关键词和作者信息等。
meta charsetUTF-8
meta namedescription content这是一个示例网页
meta namekeywords contentHTML, CSS, JavaScript
meta nameauthor contentAuthor Name3.3.3 link
link标签用于链接外部资源通常是链接样式表CSS文件
link relstylesheet typetext/css hrefstyles.css3.3.4 script
script标签用于嵌入或引用执行脚本代码通常是JavaScript。
script srcscript.js/script3.3.5 style
style标签用于包含文档的内部样式信息CSS。
stylebody {background-color: lightblue;}
/style3.3.6 base
base标签用于为页面上所有的相对URL设置一个基础URL。这个标签必须有href或target属性。
base hrefhttps://www.example.com/ target_blank3.3.7 noscript
noscript标签用于定义在浏览器不支持脚本时显示的替代内容。
noscript您的浏览器不支持JavaScript/noscript4 正文中的HTML标签
4.1 段落 P…/P
左对齐 left右对齐right 中间对齐center
!DOCTYPE html
html langen
headtitle这是页面标题/titlestylebody {background-color: lightblue;}/stylenoscript您的浏览器不支持JavaScript/noscript
/head
bodyp这是一个段落/pp alignright右对齐的段落/p p alignleft右对齐的段落/p p aligncenter右对齐的段落/p
/body
/html本节下面的内容将隐去head部分的内容
4.2 折行 br/
p This isbr / a parabr /graph with line breaks /p 4.3 HTML标题
h1This is heading 1/h1
h2This is heading 2/h2
h3This is heading 3/h3
h4This is heading 4/h4
h5This is heading 5/h5
h6This is heading 6/h6 4.4 文字风格
pfont size“2” color“purple” 这是一个段落。/font/p 4.4.1 HTML中的颜色 4.4.2 其他文字标签
b粗体字
/bri斜体字/i
/brstrong 粗体字同bstrong
/brem斜体表强调/em
/brdel文字加横线/del
/brsub下标字(subscript)/sub
/brsup上标字(superscript)/sup
/brbig 大字/big
/brsmall 小字/small
/bru下划线 /u 4.4.5 特殊字符 lt
/br gt
/br copy 5 文本列表
5.1 无序列表
无序列表以ul标签开始至/ul标签结束。
在ul标签中还需要使用li标签来定义列表的每一行
ulli……/lili……/lili……/li
/ul 5.2 有序列表
有序列表中的条目按照顺序依次排列。
它和无序列表的唯一的区别体现代码上即有序列表使用ol标签以ol开始到/ol结束。
有序列表中同样使用li标签来定义列表的每一行
olli……/lili……/lili……/li
/ol 5.3 自定义列表
使用dl来创建自定义列表。在列表中使用dt来定义页面中的每一行。
与有序列表和无序列表不同的是在定义列表中列表中会添加缩进行来展示这个列表的条目使用dd标签来定义缩进行。
h3镜头画面的剪辑/h3
dldt分剪/dtdd一个镜头分成两个镜头或者两个以上的镜头使用。/dddt挖剪/dtdd将一个完整镜头中的动作、人和物运动镜头在运动中的某一部位上的多余的部分挖剪去。/dd
/dl 5.4 列表嵌套
无论是无序列表嵌套还是有序列表嵌套或者是无序列表和有序列表的混合嵌套列表它们的代码写法都是一个原则就是遵从HTML代码的使用规则将一个列表的标签完全放入在另一个标签内。这是一种父子级的关系。这种方法常用来表示复杂的导航应用广泛。
ul li olli1.1li1.2/olli2
/ul 6 嵌入图片
p aligncenterimg srcjiuzhai.jpg height200 width300/ 6.1 图像文本对齐
在编辑图像的时候图像不同于文本的意义在于图像都是一个个分开的整体。而编辑图像时如果设计者想在图片的旁边放入文本内容就需要考虑如何处理文本和图像对齐方式
stylevertical-align:text-top使图像的顶部和同一行的文本对齐stylevertical-align:middle使图像的中部和同一行的文本对齐stylevertical-align:text-bottom使图像的底部和同一行文本对齐
p aligncenterimg srcjiuzhai.jpg height200 width300/ stylevertical-align:text-top这是一张拍摄于2020年的九寨沟照片。p aligncenterimg srcjiuzhai.jpg height200 width300/ stylevertical-align:middle这是一张拍摄于2020年的九寨沟照片。p aligncenterimg srcjiuzhai.jpg height200 width300/ stylevertical-align:text-bottom这是一张拍摄于2020年的九寨沟照片。6.2 图像和文本的距离
hspace——和左边的距离vspace——和上面的距离
p aligncenterimg srcjiuzhai.jpg height200 width300/ hspace30这是一张拍摄于2020年的九寨沟照片。p aligncenterimg srcjiuzhai.jpg height200 width300/ vspace30这是一张拍摄于2020年的九寨沟照片。6.3 添加边框
border表示边框宽度
p aligncenterimg srcjiuzhai.jpg height200 width300/ border5这是一张拍摄于2020年的九寨沟照片。6.4 嵌入网图
!DOCTYPE html
html langen
headtitle这是页面标题/title
/head
body img srchttps://www.sanguosha.cn/storage/uploads/images/8jzgfkyzAOH7lY7QHHtfH3vIkzQ6cVmNuVCmNeEd.jpeg
width1000/body
/html7 body 改变背景色
7.0 优先级
!DOCTYPE html
html langen
headtitle这是页面标题/titlestylebody {background-color: lightblue;}/stylenoscript您的浏览器不支持JavaScript/noscript
/head
body bgcolorred p aligncenterimg srcjiuzhai.jpg height200 width300/ border5这是一张拍摄于2020年的九寨沟照片。/body
/htmlbody标签的背景色(bgcolor)被设置为红色red而在style标签中body的背景色被设置为浅蓝色lightblue。通常来说CSS样式无论是内联样式、内部样式还是外部样式会覆盖HTML标签的属性。
所以如果浏览器按照现代标准解析这段HTML代码背景色应该是浅蓝色即lightblue。这是因为CSS样式通常比HTML属性有更高的优先级。 这一小节后续部分中我们会去掉head中style的部分
7.1 纯色
背景颜色属性将背景设置为某种颜色。
属性值可以是十六进制数、RGB 值或颜色名。 body bgcolor#000000 body bgcolorrgb(0,0,0) body bgcolorblack
!DOCTYPE html
html langen
headtitle这是页面标题/title
/head
body bgcolorlightgreen p aligncenterimg srcjiuzhai.jpg height200 width300/ border5这是一张拍摄于2020年的九寨沟照片。/body
/html7.2 图像
背景属性将背景设置为图像。属性值为图像的URL。
如果图像尺寸小于浏览器窗口那么图像将在整个浏览器窗口进行复制。
7.2.1 本地图像
!DOCTYPE html
html langen
headtitle这是页面标题/title
/head
body backgroundjiuzhai.jpg 这是一张拍摄于2020年的九寨沟照片。/body
/html7.2.2 网络图像
!DOCTYPE html
html langen
headtitle这是页面标题/title
/head
body backgroundhttps://www.sanguosha.cn/storage/uploads/images/jFRfaD6OGALMzUHw4bxO0kN4HN3vNpeaFU2YaTTy.jpeg font colorwhite三国杀 貂蝉-舞惑群心/body
/html7.2.3 调整图像大小
背景图太大了我们进行调整此时需要在head中进行调整
!DOCTYPE html
html langen
headtitle这是页面标题/titlestylebody {background-image: url(https://www.sanguosha.cn/storage/uploads/images/jFRfaD6OGALMzUHw4bxO0kN4HN3vNpeaFU2YaTTy.jpeg);background-size: cover; /*控制背景图像的尺寸,cover 保证背景图像覆盖整个元素*/background-position: center;/*center 使背景图像在元素中居中*/background-repeat: no-repeat;/*no-repeat 指定背景图像不要平铺重复*/height: 100vh; /* 设置body高度为视口的100% */margin: 0; /* 移除边距 */}/style
/head
body font size30 colorwhite三国杀 貂蝉-舞惑群心/body
/html8 网页链接
8.1 链接到外网
HTML中的链接语法 a href“链接对象的路径”链接锚点对象 /a
这个路径所指的不仅仅只是一个页面地址也可能是一个文件地址、一个邮箱地址
!DOCTYPE html
html langen
headtitle这是页面标题/title
/head
body a hrefhttps://www.sanguosha.cn/storage/uploads/images/GX9UMBsFtZChnFngjPNNsVQuJuA3TRjxfzR3k8VE.jpeg
三国杀-关银屏-步步生花
/a/body
/html点进去后 8.2 链接到本网页的其他位置
页面除了和页面之外的文件或者程序链接外而且也可以和同一页面中的内容进行链接 1要确定链接的锚点对象不同于页面和外部文件链接的方式在于链接的路径由于在同一页面内这里需要使用“#”来引用同一页面中的内容。代码写为 a href#... /a2需要在页面中设定出链接到的目标。使用的就是“id”属性。 a id…/a点击href处的内容跳转到id处的内容
!DOCTYPE html
html langen
headtitle这是页面标题/title
/head
body html……a href#link链接到网页的其他位置/aimg srchttps://www.sanguosha.cn/storage/uploads/images/4Ku8dzet4pub91dMLvuRbfc50TI1qdmlnjAPgMtg.jpeg width1400a idlink/a从上面链接过来…/html/body
/html点击红色区域就会跳转到绿色区域
’
8.3 跳转到新网页
在先前的所有链接中页面都是在同一页面中跳转有时候设计者希望链接的页面在新的窗口中打开这时只要在a标签中添加“target_blank”就行了。
!DOCTYPE html
html langen
headtitle这是页面标题/title
/head
body htmla hrefhttps://www.sanguosha.cn/storage/uploads/images/3SPA2wJ5R3IL8nbaZncvtdzFL52XNRndGSIG8YP7.jpeg target_blank诸葛瞻-绵竹之殇/a/html/body
/html‘
