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