HTML5常用标签及其属性设置
一、Html5的基本结构
二、head标签内常用标签
1、meta标签：设置元数据信息（metadata），用来描述HTML文档的信息，为网页提供用户不可见的信息。常用属性：
⑴charset属性：设置文档的字符集编码格式，一般设置为UTF-8。
例：HTML5中设置编码
⑵http-equiv属性：需要配合content属性使用，提供了content属性的信息/值的HTTP头。
例1：HTML4.01中设置编码
例2：每隔 30 秒刷新一次，content属性的值为时间，单位秒
⑶name属性：使用方法同“http-equiv”，将我们的信息写给搜索引擎看。
⑷content属性：配合http-equiv属性或name属性使用。
2、title标签：浏览器标签页显示的标题
例：
xxx网页标题
3、link标签：链接一个外部样式表，其常用属性有：
⑴rel属性：声明链接文件的类型，此处可选stylesheet或icon
⑵type属性：可以省略
⑶href属性：表示链接文件的路径地址（可以是网络地址）
例：
//设置引用的css文件
//设置网页标签
三、body标签内常用标签
标签的分类：
块级标签：显示为块，会自动换行，一个标签占用一行。
行级标签：按行从左往右逐一显示。
1、常用块级标签：
⑴h1-h6标签：标题标签，自动加粗，h1最大，h6最小。
例：
标题1
⑵hr标签：水平线标签，添加一条水平线
例：
⑶p标签：段落标签
例：
第一段内容
⑷br标签：换行标签
例：
⑸blockquote标签：引用标签，内容在浏览器会左右缩进40像素。cite属性，表明引用的来源，不会显示。
例：
引用的一段内容
⑹pre标签：预格式标签，用于重载代码。浏览器默认显示样式：1、显示为等宽字体，不使用之前设置好的字体。 2、代码中的换行、空格等元素能在浏览器中显示。
例：
//正常情况，内容1内容2会在一行，这里会显示两行
内空1
内容2
2、基于布局的块级标签
列表：无序列表、有序列表、定义列表
⑴ol标签：有序列表
例：
- 列表项1
- 列表项2
⑵ul标签：无序列表
例：
- 列表项1
- 列表项2
⑶dl标签：自定义列表
例：
- 列表标题
- 列表描述项，可以有很多项，内容会缩进
可以用于实现图文混排：
父元素dl使用position:relative;
子元素dt,dd使用position:absolute;设置合适的left,top;
3、常见的行级标签
⑴span标签：文本标签，无实际意义，用于包裹某部分文字，修改特定样式
例：
文字
⑵img标签：图片标签，属于行内块级标签，其常用属性：
src:表示引用图片的地址，路径地址的写法：相对路径。
height和width：图片的高度和宽度。可以用CSS样式代替
title：图片标。当鼠标指上之后显示的文字
alt:当图片无法显示的时候，显示的文字
例：
⑶em标签：表示倾斜强调，显示为倾斜。
⑷strong：表示加粗强调，显示为加粗。
⑸b：显示为加粗。
⑹i：显示为倾斜。
strong、em、b、i的区别
a、Strong、em都能表示强调，Strong为粗体，em为斜体，而Strong的强调程度比em高。
b、Strong和b都能加粗，em和i都能倾斜，但是Strong和em多了一层强调的语义 。H5要求标签尽可能实现语义化。
例：
倾斜强调
加粗强调
加粗
倾斜
⑺q标签：短引用，会自动加上双引号。
例：
被双引号括起来的内容
⑻small/big标签：缩小/放大字体，可以多层嵌套直至上限或下限。
例：
小
小小
⑼a标签：超链接标签，常用属性：
href：超链接的路径，可以是网络链接，也可以是本地文件。
target：跳转页面打开的位置。_self自身页面，_blank新页面。
title：鼠标指在超链接上显示的名称。
rel：指定从源文档到目标文档的关系（上/下一篇），搜索引擎会利用该属性获取更多的有关链接的信息。
rev：指定从目标文档到源文档的关系。
例：
//目标（href指定的文档）是下一篇文档
rel、rev的属性值常用的还有以下几种：
start-集合中的第一个文档。
next-集合中的下一个文档。
prev-集合中的前一个文档。
contents-文档目录。
index-文档索引。
a标签还有一个属性name，用于锚链接，可跳转到指定页面的指定位置。
例：
这里是position1//这里是很长的内容
//#前面可加上url，如list.html#position2
跳转到position1
⑽s标签：有误文本，文字上显示删除线。
例：
带删除线的文字
⑾cite标签：显示为倾斜，常用于书、画作、作品的引用。
例：
引用自xxx作品
⑿code标签：对文档中的文本进行格式化，一般放计算机代码，不保留代码格式。
例：
一段电脑代码
⒀bdo标签：设置文本显示方向，属性：
dir="ltr"表示从左往右，dir="rtl"表示从右往左
例：
12345//显示为54321
⒁kbd标签：表示需要用户用键盘输入的内容，浏览器显示为等宽字体。
例：
请按Esc，退出全屏。
⒂sup标签：上标文本，sub标签：下标文本。可用于数学/化学公式书写。
例：
X2//X的平方
⒃u标签：为文字加上下划线。
例：
带下划线的文字
⒄mark标签：高亮或标记文本，显示为黄色背景。
例：
高亮的文字（黄色前景）
⒅input标签：输入标签，属于行内块级标签，常用属性：
type：输入框类型，可选值：text、password、hidden、checkbox、radio、submit、reset、file、image、button、email、url、date、time、month、week、number、range、color。
name：输入框别名，在form表单提交数据时，用于定位数据。
value：输入框的默认内容。
checked：checked="checked"表示默认选中。
disabled：disabled="disabled"设置控制不能使用（不可点击或不可编辑）。
H5新增属性：
form属性：可以使input不用写在form标签下，也能通过表单提交数据，通过设置form的id确认属于哪个表单。
例：
autocomplete属性：自动完成功能（form标签中使用），记录用户之前输入的内容，并在用户下次输入时提示用户输入。属性值：on/off。
提示：某些浏览器中，可能需要手动启用自动完成功能。
autofocus属性：自动获得焦点，autofocus="autofocus"只能获得一个焦点。
placeholder属性：提示内容，当输入框有value时，提示内容消失。
required：required=“required”，表示必填，否则停止提交。
pattern：使用正则表达式验证input的模式。
例：
//只能输入三个字母的输入框，提交时检查
⒆select标签：下拉选择框
select标签属性：
name属性：写在select标签里，所有选项只有一个name。
子标签option标签，常用属性：
value属性：当option没有value属性时，往后台传递的是中间的文字，当有value属性时，传递的是value的属性值。
title属性：鼠标之上后现实的文字。
selected属性：selected=“selected”，设置为默认选项。可简写为selected。
H5新增属性：
form：规定文本区域所属的一个或多个表单。值：form设置的id。
size：规定下拉列表中可见选项的数目，会影响select控件高度。
name：规定下拉列表的名称。
data-*：用于存储页面或应用程序的私有定制数据。
例：
⒇textarea标签：文本域，其常用属性 ：
cols：文本区内的可见宽度。
rows：文本区内的可见行数。
disabled：禁用文本域，不可编辑。
name：文本域的名称。
readonly：文本域为只读模式。
H5新增属性：
form：规定文本区域所属的一个或多个表单。
maxlength：文本区域的最大字符数。
placeholder：预期值的简短提示。
wrap：表单中提交时，文本区域中的文本如何换行。值：hard或soft。
例：
//显示提示的文本域，标签内容不能有空行，最多只能有一个换行
4、表格标签及属性
⑴table标签：表格的顶级标签，代表一个表格。
⑵th标签：表格的表头，显示为加粗字体，一个th代表有一列。
⑶tr标签：表格的行，一个tr代表一行。
⑷td标签：表格的列，用在tr的下级，一个td代表一列。
属性：
width/heigh：单元格的宽高。
bgcolor：单元格的背景颜色。
align：单元格中的文字水平对齐方式。值：left、center、right。
valign：单元格中的文字垂直对其方式。值：top、center、bottom。
border：表格的边框的宽度，值为数字。这个值>0时，单元格也会出现1 像素宽的边框。
cellspacing：单元格边框的间距，值为数字。
cellpadding：单元格的内边距。
bordercolor：边框颜色。
background：背景图片。可用于th，td。
例：
第一列表头
第二列表头
第一行第一列内容
第一行第二列内容
第二行第一列内容
第二行第二列内容
5、表单
⑴form标签：用于表单提交
form的两个属性：
action-表单提交的服务器地址
method-表单提交数据的方法，值：get或post
get方法：提交的数据跟在url后面，在地址栏可见，长度有限制，无法提交过多数据。
post方法：提交的数据看不到，长度无限制，可提交更多数据。
其它标签
⑴figure标签：组合标签，用于显示图片及图片标题
他有两个子标签：img标签（图片）和figcaption标签（图片标题）
例如：
图1
⑵div标签：分区标签（最常用的标签之一）
例：
⑶aside标签：定义其所处内容之外的内容，aside 的内容应该与附近的内容相关。（H5新标签）
提示：aside标签的内容可用作文章的侧栏。
⑷article标签：规定独立的自包含内容。（H5新标签）
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。