初识HTML5
HTML5的学习笔记（随便总结，个人使用）
一、认识HTML5的基本格式
1、<!doctype> 标记
<!doctype>标记位于文档的最前端，用于向浏览器说明当前文档使用的是那种HTML标准规范。只有在开头处使用 <!doctype> 声明，浏览器才能将该网页作为有效的HTML文档，并且按照指定的文档类型进行解析。
2、<html> 标记
<html> 标记也称为根标记，用于告知浏览器其自身是一个HTML文档。<html> 标记是成对出现的，开头为 <html> （表示html文档的开始） ，结尾为 </html> （表示html文档的结束）。
3、<head> 标记
<head> 标记用于定义HTML文档的头部信息，也成为了头部标记，紧跟在 <html> 标记之后，只要用来封装其他位于文档头部的标记（就是头部标记代码的一个范围），例如在其中可以书写 <title> 、 <meta> 、 <link> 、 <style> 等。用来描述文档的标题，作者，以及与其他文档的关系等。
（<head> ······ </head> 所封装的部分为头部标记，在网页的正式页面当中是无法看到的！！！）
4、<body> 标记
<body> 标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等重要信息都 <body> 标记内。（<body> ······ </body> 说封装的部分为内容标记部分，此部分在正式的网页中时可以让用户看的到的所有部分！！！）
PS：一个HTML文档只能含有一对<body> ······ </body> 标记 ！！！
并且<body>······</body> 标记必须在<html>······</html> 标记内，
位于<head>······</head> 头部标记之后，
与<head>······</head> 是并列关系
下面是一个HTML的初始完整格式。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <body>
8 </body>
9 </html>
1.2 HTMl 5 的特点
二、HTML 5 的标记分类和属性
1、首先介绍一下双标记和单标记。
双标记：双标记是由开始和结束2个表级符组成的标记。其基本语法格式为：
<标记名> 内容 </标记名>
此语法中 <标记名> 表示该标记的作用开始，一般称为“开始标记”；而 </标记名> 表示改标记的作用结束，一般称为“结束标记”。和开始标记相比，结束标记只是增加了“/”
单标记：单标记也称空标记，是指用一个标记符号即可完整的描述某个功能的标记。起基本语法格式为：
1 <标记名/> 2、注释标记
如果需要在HTML 5 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式为：
<!-- 注释语句 -->3、标记的属性
使用HTML 5 制作网页时，如果想要 HTML 标记提供更多的信息（比如修改文字的字体，颜色，斜体等属性），需要使用HTML 标记的属性加以设置。起基本的语法格式为：
<标记名 属性1="属性值1" 属性2="属性值2" ····> 内容 </标记名>
在上面的语法中，标记可以拥有多个不同的属性，必须写在开始标记中，位于标记名后面。属性之间不分先后顺序，标记名与属性、属性与属性之间均以空格分开。
需要注意的是，在标记的嵌套过程中，必须先结束最靠近内容的标记，再按照由内到外的顺序依次关闭标记。
三、HTMl 5 文档头部相关标记
1、<title>
<title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标记之内。一个HTML文档只能包含一对<title></title>标记。其基本语法格式为：
1 <title>网页标题名称</title>
（在这个标题中的内容就是是我们在浏览器中标签上所看到的内容。）
2·1、<meta/>（单标记）
<meta/>标记用于定义页面的元信息，可重复使用。可以为搜索引擎提供网页的关键字、作者姓名、内容描述、以及定义网页的刷新时间等。
下面介绍<meta/>常用的几组设置。
（1）
1 <meta name ="名称" content="值" />
name属性提供搜索内容，content属性提供对应的搜索内容值。
当name后面的名称为keyword的时候，即定义搜索内容名称为网页关键字；content属性后的值用于定义关键字的具体内容。
PS：此处的为bilibili官方网站的源代码。可以看到后面的值有很多，当我们在搜索引擎中搜索这些关键字时，搜索引擎会从此处查找，所以我们在搜索完这些关键字时才会弹出bilibili。
（2）
<meta name="author" content="xxxx公司" />
当name属性后的名称为author的时候，即定义搜索内容名称为网页作者；content属性后的值用于定义具体的作者信息。
（3）
<meta name="description" content="具体内容">
当name属性后的名称为description，即定义搜索内容名称为网页描述；content属性后的值用于定义描述的具体内容。注意内容不宜过多。
2·2 、<meta http-equiv="名称" content="值">
在<meta>标记中使用此属性，可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关的参数。其中http-equiv属性提供参数类型，content属性提供对应的参数值。
默认会发送<meta http-equiv="Conten-Type" content="text/html"/>通知浏览器发送的文件类型是HTML，具体应用如下：
·（1）设置字符集
<meta http-equiv="Content_Type" content="text/html; charset=utf-8" />
其中http-equiv属性的值为Content-Type，content属性的值为text/html和charset=uft-8，中间用“”;“”隔开，用于说明当前文档类型为HTML，字符集为uft-8（国际化编码）。
（uft-8是目前最常用的字符集编码方式，其他常用的字符集编码方式还有gdk和gb2312）
·（2）设置页面自动刷新与跳转
<meta http-equiv="refresh" content="10; url=http://www.bilibili.com" />其中http-equiv属性的值为refresh,content属性的值为数值和url地址，中间用“”;“”隔开。用于指定在特定的时间后跳转至目标网页，该时间默认以秒为单位。
3、<link/>（单标记）
<link/>标记可以用外部文件，一个HTML 5 页面允许使用多个<link/> 标记引用多个外部文件。其基本语法格式为：
<link 属性="属性值" /><link/>标记的常用属性
| 属性名 | 常用属性值 | 描述 |
| href | URL | 指定引用外部文档的地址 |
| rel | stylesheet | 指定当前文档与引用外部文档的关系，该属性值通常为stylesheet，表示定义一个外部样式表 |
| type |
text/css |
引用外部文档的类型为CSS样式表 |
|
text/javascript |
引用外部文档的类型为JavaScript 脚本 |
4、<style>
<style>标记可以为HTML 5 文档定义样式信息。其基本语法格式为：
<style 属性="属性值">样式内容</style> 在HTML 5 中使用<style>标记时，常常定义其属性为type，相应的属性值为 text/css，表示使用内嵌式的CSS样式。
四、文本控制标记
1、标题标记（双标记）
即标题的等级设置。HTML 5提供了6个等级的标题（分别是：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，并且从1-6重要性递减）。
基本语法格式为：
<hn align="对齐方式">标题文本</hn>
效果如下所示：
PS：（1）一个页面中只能使用一个<h1>标记，尝尝被用在网站的Logo部分。
（2）由于h元素拥有确切的语义，请慎重选择恰当的标记来构建文档结构。禁止仅仅使用<h>标记设置文字加粗或更改文字的大小。
（3）align属性可以设置对其方式，比较常见的对其方式有：left（左对齐（默认）），center（居中对齐），right（右对齐）。
2、<p>······</p>（双标记）
即为分开段落的标记。默认情况下，段落中的文字会根距浏览器窗口的大小自动换行。其基本语法格式为：
<p align="对其方式">段落文本</p>
效果如下所示： 
PS：从上图可以看到，此标记只可以单纯的分段，不会自动换行，即使在代码中有分段或空格符号，在最终的显示页面也不会显示。
4、<hr/>（单标记）
即在网页中创建水平线的标记。可以使得网页文档内容更加清楚，层次分明。其基本语法格式为：
<hr 属性="属性值" />
<hr/>的属性如表所示：
| 属性名 | 含义 | 属性值 |
| align | 设置水平线的对齐方式 | 可以选择lift、right、 center 3种值，默认为center ，居中对齐 |
| size | 设置水平线的粗细 | 以像素(px)为单位，默认为2像素 |
| color | 设置水平线的颜色 | 可用颜色名称、十六进制#RGB 、 rgb（r 、g 、b）表示 |
| width | 设置水平线的宽度 | 可以是确定的像素值，也可以是浏览器窗口的百分比（默认为100%） |
具体的效果图如下，代码也如下图
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>水平线标记的用法和属性</title>
6 </head>
7 <body>
8 <p>苍野的流风，访览堇色华庭的诗文画卷。幽谷的纯光，照亮晦暗渊底的流明一隅。在明如皎镜的水面之上，昔日遗事正逐渐浮现…</p>
9 <hr />
10 <p align="left">流风眷堇庭</p>
11 <hr color="aqua" align="left" size="5" width="600" />
12 <p align="center">原神</p>
13 <hr color="black" align="right" size="2" width="50%" />
14 <p align="right">2.6新版本即将开启</p>
15
16
17 </body>
18 </html>5、<br/>（单标记）
即可以在网页中将文本强制换行显示（注意：在HTML代码中敲击回车，文本是不会进行换行的，只有使用此标记才可以强制换行。）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>使用br标记换行</title>
6 </head>
7 <body>
8 <p>苍野的流风，访览堇色华庭的诗文画卷。幽谷的纯光，<br/>照亮晦暗渊底的流明一隅。在明如皎镜的水面之上，昔日遗事正逐渐浮现…</p>
9 <p>如果在代码中
10 敲击回车，
11 在网页中不会进行换行的</p>
12
13
14 </body>
15 </html>
6、文本格式化标记
在网页中，可以为文字设置粗体、斜体或下划线效果的标记为文本格式标记。常用的文本标记如下表所示：
| 标记 | 显示效果 |
| <b></b>和<strong></strong> | 文本以粗体方式显示（b定义粗体文本，strong定义强调文本） |
| <i></i>和<em></em> | 文字以斜体方式显示（i定义斜体字，em定义强调文本） |
| <s></s>和<del></del> | 文字以加删除线方式显示（HTML 5 不赞成使用s） |
| <u></u>和<ins></ins> | 文本以加下划线方式显示（HTML 5不赞成使用u） |
下面展示一下效果：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>文本格式化标记的使用</title>
6 </head>
7 <body>
8 <p>我是正常的文本</p>
9 <p><b>我是使用b标记定义的加粗文本</b></p>
10 <p><strong>我是使用strong标记定义的文本</strong></p>
11 <p><i>我是使用i标记定义的倾斜文本</i></p>
12 <p><em>我是使用em标记定义的强调文本</em></p>
13 <p><del>我是使用del标记定义的删除线文本</del></p>
14 <p><ins>我是使用ins标记定义的下划线文本</ins></p>
15 </body>
16 </html>
PS：以上文本格式化标记均可使用<span>标记配合CSS样式替代。
7、特殊字符标记
HTML 5 中对于一些特殊字符有着特殊的标记，如下表：
五、图像标记
1、<mig/> 图像标记（单标记）
在网页中想要使用图像，就需要使用图像标记。起基本语法格式为：
<img scr="图像URL" />该语法中src属性用于指定图像文件的路径和文件名，他是<img/>标记的必须属性。在HTML中的<img/>标记还有很多其他的属性，如下表：
| 属性 | 属性值 | 描述 |
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标指针悬停时显示的内容 |
| width | 数字 | 图像的宽度 |
| height | 数字 | 图像的高度 |
| border | 数字 | 图像边框的宽度 |
| vspace | 数字 | 图像顶部和底部的空白（垂直边距） |
| hspace | 数字 | 图像左侧和右侧的空白（水平边距） |
| align | left | 将图像对齐到左边 |
| right | 将图像对其到右边 | |
| align | Top | 将图像的顶端和文本的第一行文字对齐，其他文字居图像下方 |
| middle | 将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方 | |
| bottom | 将图像的底部和文本的第一行文字对齐，其他文字居图像下方 |
1-1图像的替换文本属性alt
在实际的应用中，由于某些原因导致图像可能无法正常显示，替换文本就是在这种情况下替换图片信息。
随着互联网的发展，现在显示不了图像的情况已经很少见了，alt属性又有了新的作用。搜索引擎在收录页面时，会通过alt属性的内容来分析网页的内容。
因此，如果在制作网页时，为页面中的图像都设置清晰明确的替换文本，就可以帮助搜索引擎更好地理解网页内容，从而更有利于搜索引擎的优化。
1-1-2title属性设置提示文字
图像标记<img/>有一个和alt属性十分类似的属性title，title属性用于设置鼠标指针悬停时图像的提示文字。代码具体如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像标记img的alt属性</title>
</head>
<body>
<img src="img/logo.jpg" alt="一个白色的小男孩头像" title="小男孩logo"/>
<!--src=“xxxx.xxx”这是个图片文件的目录，我们想要插入的图片需要存放到img文加下目录下，之后才可以调用；
alt=“xxxx”当中的文字为这个图片无法正常显示时的替换文字；
title="xxxx"当中的文字为图片提示文字-->
</body>
</html>
2、图像的宽度、高度属性width、height
通常情况下，如果不给<lmg/>标记设置宽和高，图像就会按照它原始尺寸显示，，我们此时可以使用这两个属性进行设置。如果同时设置这两个属性，且其比例和原图大小的比例不一致，显示的图像就会变形或失真。
3、图像的边框属性border
默认情况下图像是没有边框的，通过border属性可以为图像添加边框。设置边框的宽度。但边框颜色的调整仅仅通过HTML属性是不可能完成的。
我们用代码编写出来一个网页，效果和源代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像的宽高和边框属性</title>
</head>
<body>
<img src="img/logo.jpg" alt="一个小男孩的头像" title="小男孩头像" border="2"/>
<img src="img/logo.jpg" alt="一个小男孩的头像" width="400" />
<img src="img/logo.jpg" alt="一个小男孩的头像" width="100" height="200
"/>
</body>
</html>
PS：我是用的原图比例为1080x1080，图一注意外圈有边框
我们可以看到在只更改一个高或者宽的情况下，图片会按照比例进行缩减，当我们同时更改两个属性，并且与原图比例不相同时，图片就会变形或失真。
4、图像的边距属性vspace和hspace
在HTML 5 中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。
5、图像的对其属性ailgn
在制作网页时经常需要实现其他的图像和文字环绕效果，如图像居左文字居右等，这就需要使用图像的对齐属性align。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像的边距和对齐属性</title>
</head>
<body>
<img src="img/logo.jpg" alt="一个小男孩的头像" width="400" align="left" border="9"/>
在稻妻不为人知的秘密会馆中，似乎举办着无论是渴求争斗的战士，或是单纯好战的魔物都能接纳的乱斗大会·百人一揆。
编制二人一组的搭档队伍，在场馆中华丽地展现武人的名迹，提高争斗的热度吧。
</body>
</html>
注意：（1）HTML 不赞成图像标记<img/>使用border、vspace、hspace及align属性，可用CSS样式替代。
（2）网页制作中，装饰线的图像都不要直接用<img/>标记插入，而是应通过CSS设置北京图像来实现。
六、绝对路径和相对路径
1、绝对路径
绝对路径就是网页上的文件或目录在硬盘上的真正路径。
网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所需要的文件上传到服务器，这时图像文件可能在服务器的c盘，也可能在任何盘中，也就是说，在更改之后服务器路径可能不再是原来的路径。
2、相对路径
相对路径就是网页中的文件相对于当前HTML文件的路径。相对路径不带有盘符，通常是以HTML网页为起点，通过层级关系描述目标图像的位置。
总结起来，相对路径的设置分为一下三种：
（1）图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.jpg" />
（2）图像文件位于HTML文件的下一级文件：输入文件夹名和文件名，之间用"/"隔开。如：<img src="images/logo.jpg" />
（3）图像文件位于HTML文件的上一级文件夹：在文件名之前加入"../"。如果是上两级，则需要使用"../../"，以此类推，如：<img src="../logo.jpg" />
七、超链接标记
1、<a>……</a>创建超链接
即可以建立超链接，其基本语法格式为：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>具体解释如下：
（1）href：用于指定链接目标的URL地址，当为<a>标记应用href属性时，他就具有了超链接的功能。
（2）target：用于指定链接页面的打开方式，其取值有_self和_blank 2种，其中_self为默认值，以意为在原窗口中打开，_blank为在新窗口中打开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像的边距和对齐属性</title>
</head>
<body>
<a href="https://bbs.mihoyo.com/ys/" target="_self">米游社·原神社区</a> target=“_self”在原窗口打开<br />
<a href="https://bbs.mihoyo.com/ys/" target="_blank">米游社·原神社区</a> target="_blank"在新窗口打开<br />
</body>
</html>
注意：（1）暂时没有确定链接目标是，通常将<a>标记的href属性值定义为"#"（即href="#"），表示该链接暂时为一个空链接。
（2）不仅可以在文本中创建超链接，还可以在各种网页元素（如图像。音频、视频等）中添加超链接。
（3）图像超链接在低版本的IE浏览器中会自动添加边框效果，去掉链接图像的边框只需将边框定义为0即可。
