1，语法结构
1.1，HTML5语法的改变
HTML5中的标记方法
（1）内容类型：HTML5文件的扩展名和内容类型（ContentType）没有发生变化。即扩展名还是“.html”或“.htm”，内容类型（ContentType）是”.text/html”。
（2）DOCTYPE声明：要使用HTML5标记，必须先进行如下的DOCTYPE声明。不区分大小写。语法如下：<!DOCTYPE html> 。另外，当使用工具时，也可以在DOCTYPE声明方式中加入SYSTEM标识。（不区分大小写。此外还可将双引号换为单引号来使用），声明方法如下面的代码：<!DOCTYPE HTML SYSTEM "about:legacy-compat">
（3）字符编码的设置：字符编码的设置方法也有些新的变化。以前，设置HTML文件的字符编码时，要用到如下<meta>元素，如下所示：<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> ；在HTML5中，可以使用<meta>元素的新属性charset来设置字符编码。<meta charset="UTF-8">（从HTML5开始，文件的字符编码推荐使用UTF-8）
HTML5可以省略标签的元素：
（1）不允许写结束标记（只允许使用<元素/>或<元素>的形式进行书写）的元素有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。
（2）可以省略结束标签：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
（3）可以省略整个标签（即连开始标签都不用写明，虽然这些元素可以省略，但实际上却是隐式存在的）：html、head、body、colgroup、tbody。
取得 boolean 值的属性：例如disabled和readonly等，通过省略属性的值来表达“值为true”。如果要表达“值为false”，则直接省略属性本身即可。此外，在写明属性值来表达“值为true”时，可以将属性值设为属性名称本身，也可以将值设为空字符串。
<!-- 以下的checked属性值皆为true --> <input type="checkbox" checked> <input type="checkbox" checked="checked"> <input type="checkbox" checked="">
省略属性的引用符：设置属性值时，可以使用双引号或单引号来引用。HTML5语法则更进一步，只要属性值不包含空格、“<”、“>”、“‘”、“””、“`”、“=”等字符，都可以省略属性的引用符。
<!—请注意type属性的引用符 --> <input type="text"> <input type='text'> <input type=text>
1.2，HTML5新增元素
结构标签：
文本标签：
应用和辅助标签：
进度标签：
交互性实验：
文档、应用标签：
<rudy>标签：
其他标签：
全局属性：
（1）contentEditable属性
功能：允许用户编辑元素中的内容。
功能说明：该元素必须是可以获得鼠标焦点的元素，而且在点击鼠标后要向用户提供一个插入符号，提示用户该元素中的内容允许编辑。
注意： contentEditable是一个布尔类型属性，因此可以将其设置为true或false。
说明：该属性还有个隐藏的inherir（继承）状态，属性为true时，元素被指定为允许编辑；属性为false时，元素被指定为不允许编辑；未指定true或false时，则由inherir状态来决定，如果元素的父元素是可编辑的，则该元素就是可编辑的。另外，除了contentEditable属性外，元素还具有一个iscontentEditable属性，当元素可编辑时，该属性为true；当元素不可编辑时，该属性为false。
（2）designMode[moud]属性：
功能：用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上文所述的contentEditable属性的元素都变成了可编辑状态。
注意：designMode属性只能在JavaScript脚本里被编辑修改。
designMode属性的两个值：该属性有两个值——“on”与“off”。当属性被指定为“on”时，页面可编辑；被指定为“off”时，页面不可编辑。使用JavaScript脚本指定designMode属性的方法如下所示：document.designMode=”on”。
（3）hidden属性：
适用范围：在HTML5中，所有的元素都允许有一个hidden。
作用：hidden属性类似于aria-hidden，它告诉浏览器这个元素的内容不应该以任何方式显示。但是元素中的内容还是浏览器创建的，也就是说页面装载后允许使用JavaScript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也即时显示出来。
类型：Hidden属性是一个布尔值的属性，当设为true时，元素处于不可见状态；当设为false时，元素处于可见状态。
（4）spellcheck属性：
- 适用范围：spellcheck属性 是HTML5针对input元素（type=text）与textarea这两个文本输入框提供的一个新属性
- 功能：为对用户输入的文本内容进行拼写和语法检查。
- 类型：Spellcheck属性是布尔型 ，具体true和false两种值，但是它在书写时有一个特殊的地方，就是必须明确声明属性值为true或false，书写方法如下所示：
- 注意：如果元素的readOnly属性或disabled属性设为true，则不执行拼写检查。
<!--以下两种书写方法正确--!> <textarea spellcheck="true"> <input type=text spellcheck=false /> <!--以下书写方法为错误--!> < textarea spellcheck >（5）data-*属性：HTML5提供了data-*属性让你能使用自定义属性的方式来存储数据。data-*在使用时非常自由，只需要在属性前加上data-前缀即可，值可以是任意字符串。
使用data-*属性的好处是所有浏览器都支持，可以在所有浏览器中使用getAttribute[əˈtrɪbjuːt]方法来获取data-*属性的值，setAttribute方法来设置值。
（6）draggable和dropzone：
- draggable属性使得所有元素都有能力被拖曳。
- dropzone属性给元素提供了放置被拖曳元素的能力。
（7）contextmenu
- contextmenu的作用是指定右键菜单。
- contextmenu 属性的值是要打开的 <menu> 元素的 id。
- contextmenu属性能够让所有元素都拥有自己的上下文（即右键）菜单和菜单（menu）元素。menu元素可以定义一个未排序的列表，包含菜单或者命令选项，可以指定label属性以定义菜单的标签。type则表示菜单的类型，目前有context、toolbar和list三种。
- menu元素可以嵌套，中间也可以包含li元素或者menuitem元素。用于定义命令的列表或菜单，或者用于上下文菜单、工具栏以及用于列出表单控件和命令。
虽然contextmenu很有用，但支持并不广泛，目前只有Firefox部分支持它，建议在需要contextmenu的场景下依然使用模拟的右键菜单实现，几乎各大UI组件库都包含现成代码。
Window事件（针对window对象触发的事件）：
Form事件（由HTML表单的动作触发的事件）：
Mouse事件（由鼠标或类似用户动作触发的事件）：
1.3，HTML5废除元素
【能使用css代替的元素】对于basefont、big、center、font、s、strike、tt、u这些元素，由于他们的功能都是纯粹为画面展示服务的，而在HTML5中提倡把画面展示性功能放在css样式表中统一编辑，所以将这些元素废除，并使用编辑css样式表的方式进行替代。
【不再使用frame框架】对于frameset元素、frame元素与nofranes元素，由于frame框架对页面可以性存在负面影响，在html5中已不再支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的复合页面的形式，同时将以上三个元素废除。
【只有部分浏览器支持的元素】对于applet、bgsound、blink、marguee等元素，由于只有部分浏览器支持这些元素，所以在HTML5中被废除。其中applet元素可由embed元素替代，bgsound元素可由audio元素替代，marquee可以由JavaScript编程的方式所替代。
2，基本标签
2.1，头部标签
head标签：<head>元素是所有头部元素的容器。<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script>以及 <style>。
title标签：<title>元素在所有 HTML/XHTML 文档中都是必需的。
- 定义浏览器工具栏中的标题。
- 提供页面被添加到收藏夹时显示的标题。
- 显示在搜索引擎结果中的页面标题。
base标签：<base>标签为页面上的所有链接规定默认地址或默认目标（target）通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。<base> 标签必须位于 head 元素内部。
假设图像的绝对地址是：<img src="http://www.w3school.com.cn/i/pic.gif" /> 现在我们在页面中的 head 部分插入 <base> 标签，规定页面中所有链接的基准 url： <head><base href="http://www.w3school.com.cn/i/" /></head> 在上例中的页面上插入图像时，我们必须规定相对的地址，浏览器会寻找文件所使用的完整 URL：<img src="pic.gif" /> target属性，有四个值：_blank、_parent、_self、_top，描述在何处打开页面上的链接。该属性会被每个链接中的 target 属性覆盖。link标签：<link>标签定义文档与外部资源之间的关系。<link>标签最常用于连接样式表：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
style标签：用于为HTML文档定义样式信息。
script标签：用于定义客户端脚本，比如JavaScript
2.2，元信息标记
meta元素：元信息标记，提供网页的相关信息，如：关键字、作者、描述、网页过渡时间等多种信息。<meta>标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是：meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta>标签始终位于head元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词）或其他Web服务。
元标记分HTTP标题信息（HTTP-EQUIV）和页面描述信息（NAME）两种：
【NAME】用于描述网页，对应网页内容（Content)，以便搜索引擎查找和分类。
（1）关键词：name和content属性的作用是描述页面的内容。
<meta name="keywords" content="HTML, CSS, XML" />（2）描述
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />（3）robots：搜索引擎爬虫的索引方式，用来告诉爬虫哪些页面需要索引，哪些页面不需要索引；
<meta name="robots" content="none">content的参数有：
- none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
- noindex : 搜索引擎不索引此网页。
- nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
- all（默认）: 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
- index : 搜索引擎索引此网页。
- follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。
（4）author：用于标注网页作者。
<meta name="author" content="your information">（5）copyright：标准版权。
<meta name="copyright" content="版权归属">（6）generator：说明网站的采用的什么软件制作。
<meta name="generator" content="PCDATA | FrontPage">（7）revisit - after：用来告诉蜘蛛何时再来访问当前页面。你可以自定义是1天，一周，一个月或是任何你希望的访问频率。
<meta name=“revisit – after” content=“7days”>（8）viewport（移动端）：手机浏览器把页面放在一个虚拟的窗口(viewport)中，这样就不会把每个网页都挤在一个很小的窗口中，从而破坏哪些没有经过优化的页面布局。用户可以通过滑动和缩放来查看页面的内容。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /> Width:指定窗口宽度,device-width为当前设备的宽度 Height:指定高度 Initial-scale:初始的缩放比例,1为原始比例 Minimum-scale:允许用户缩放最小比例 Maximum-scale:允许用户缩放到的最大比例 User-scalable:用户是否可以手动缩放 target-densitydpi: device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。 high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。 medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 低像素密度设备相应缩小。 这是默认的target density. low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。（9）format-detection（移动端）：主要对移动端网页一些链接进行检测识别。主要有一下几种：
① 将数字显示为拨号链接：<meta name="format-detection" content="telephone=no"> telephone = no 禁止把数字转为拨号链接； telephone = yes 开启数字转拨号链接，默认是开启的，可以不用写。 ② 对邮箱的自动识别：<meta name="format-detection" content="email=no"> email = no 禁止作为邮箱地址。 email = yes 看做邮箱地址，默认下开启。 ③ 跳转地图：<meta name="format-detection" content="adress=no"> adress=no禁止跳转至地图！ adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启！ 这几种格式设置可以连着写：<meta name="format-detection" content="telephone=no,email=no,adress=no">（10）添加到主屏后的标题（IOS6新增）：
<meta name="apple-mobile-web-app-title" content="标题">（11）是否启用 Web App 全屏模式：
<meta name="apple-mobile-web-app-capable" content="yes" />（12）设置状态栏的背景颜色：
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 只有在 "apple-mobile-web-app-capable" content="yes" 时生效 content 参数： default 默认值。 black 状态栏背景是黑色。 black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
【HTTP-EQUIV】HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。
（1）Content-Type和Content-Language：设定页面使用的字符集，用以说明主页制作所使用的文字已经语言，浏览器会根据此来调用相应的字符集显示page内容。
<meta http-equiv="Content-Type" Content="text/html; Charset=gb2312"> <meta http-equiv="Content-Language" Content="zh-CN"> Content-Type的Content还可以是text/xml等文档类型。（2）Refresh：让网页多长时间（秒）刷新自己或在多长时间后让网页自动链接到其它网页。
<meta http-equiv="refresh" content="30"> <meta http-equiv="refresh" content="5;url=http://www.baidu.com"> 其中的5是指停留5秒钟后自动刷新到URL网址。（3）Expires：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。时间必须使用GMT格式。
<meta http-equiv=Expires Content=0> <meta http-equiv=Expires Content=Wed, 26 Feb 2019 08:21:57 GMT>（4）Pragma：禁止浏览器从本地机的缓存中调阅页面内容。网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。
<meta http-equiv="Pragma" Content="No-cach">（5）set-cookie：如果网页过期，那么存盘的cookie将被删除。
＜meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/"＞（6）Window-target：强制页面在当前窗口以独立页面显示。这个属性可以防止其他人在框架里调用你的页面。
＜meta http-equiv="Window-target" content="_top"＞ Content选项：_blank、_top、_self、_parent。（7）Pics-label：在IE的Internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过该参数来设置的。
<meta http-equiv="Pics-label" Contect=" (PICS－1.1' http://www.rsac.org/ratingsv01.html' I gen comment 'RSACi North America Sever' by 'inet@microsoft.com' for ' http://www.microsoft.com' on '1997.06.30T14:21－0500' r(n0 s0 v0 l0)) ">（8）Page-Enter、Page-Exit：这个是页面被载入和调出时的一些特效。
<meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)"> <meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)"> blendTrans是动态滤镜的一种，产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果： <meta http-equiv="Page-Enter" Content="revealTrans(duration=x,transition=y) "> <meta http-equiv="Page-Exit" Content="revealTrans(duration=x,transition=y) "> duration表示滤镜特效的持续时间（单位：秒）。 transition滤镜类型。表示使用哪种特效，取值为0-23。（9）MSThemeCompatible：是否在IE中关闭 xp 的主题。关闭 xp 的蓝色立体按钮系统显示样式，从而和win2k 很象。
<meta http-equiv="MSThemeCompatible" Content="Yes">（10）IE6：页面生成器generator，是ie6。
<meta http-equiv="IE6" Content="Generator">（11）Content-Script-Type：这是近来W3C的规范，指明页面中脚本的类型。
<Meta http-equiv="Content-Script-Type" Content="text/javascript">
2.3，页面标签
【标题标签】标题（Heading）是通过<h1> ~ <h6>等标签进行定义的。<h1>定义最大的标题，<h6>定义最小的标题。请确保将heading标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。
【文字标签】
（1）<font>：用来设置文字的颜色、字体和大小。
<font face=字体 size=字体字号 color=字体颜色>（2）<b>和<strong>：粗体文字。
<b>这是粗体</b> <strong>这是粗体</strong>（3）<i>和<em>：斜体文字。
<i>这是斜体</i> <em>这是斜体</em>（4）<u>和<strike>：下划线和删除线。
<u>添加了一条下划线</u> <strike>删除线</strike>（5）<sup>和<sub>：上标和下标。
<sup>上标</ sup > <sub>下标</sub>
【段落标签】
（1）<p>：用来划分文本段落。
<p>段落文字</p>（2）<br>：文本分行。
<br> 网页中如果某一行的文本过长，浏览器会自动换行；如果想取消这个功能，可以使用<nobr>来禁止自动换行（3）<hr>：水平线。
【列表标签】
（1）<ol> <li>：有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签，每个列表项始于<li>标签，列表项使用数字来标记。
（2）<ul> <li>：无序列表也是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
（3）<dl> <dt> <dd>：自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
（4）<menu> <li>：菜单列表标记menu，<menu>标签可以定义一个菜单列表。菜单列表在浏览器中的显示效果和无序列表是相同的。menu标签是成对出现的，以<menu>开始，</menu>结束。目前主流浏览器并不支持 <menu> 标签。
【iframe标签】定义内联框架。
<iframe src="/index.html"></iframe>
【layer标签和ilayer标签】可以用<layer>和<ilayer>标签可以出现在文档的流程的任何地方，在Navigator的一个页面上精确地定位一个层。
属性
说明
above
在文档中所有层的z-order中较高的Layer对象（如果层是最顶的，为null）
background
用作层的背景图的URL
below
在文档中所有层的z-order中较低的Layer对象（如果层是最低的，为null）
bgcolor
层的背景色
clip
定义剪切长方形。这个长方形是层的常见区域，区域之外的任何东西都被人为的从视野中剪掉
height
以像素为单位的层的高度
left
以像素为单位的层相对于它的父层区域的X轴的位置
name
层的名字
src
层的内容来源的URL
top
以像素为单位的层相对于它的父层区域的Y轴的位置
visibility
层的可见属性。show显示层，hide隐藏层，inherit继承它的父层的可见性
width
以像素为单位的层的宽度
Z-index
层相对于它的兄弟元素和父元素的相对z-order
3，结构标签
3.1，HTML5的文档结构
为了增强网页的实用性，在HTML5中新增了几个与页眉、页脚、内容区块等文档结构相关联的文档结构标签，通过使用这些新增的文档结构标签对HTML文档进行标识，能够使HTML文档的结构更加清晰明确。
<body> <!--文档的主体内容区域--> <header>HTML5文档的头部区域</header> <nav>HTML5文档的导航区域</nav> <section>HTML5文档的主要内容区域</section> <aside>HTML5文档的主要内容区域的侧边导航或菜单区</aside> <article>HTML5文档的主要内容区域的内容区</article> <section></section> <aside></aside> <article > <header></header> <footer></footer> </article> </section> </body>
3.2，标识文章<article>
网页中常常出现大段的文章内容，通过文章结构元素可以将网页中大段的文章内容标识出来，使网页的代码结构更加整齐。
- article元素表示文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或者其他任何独立的内容。
- article强调文章区块，一种特殊的div。
- 除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。
- article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的arcticle元素被包含在表示整体内容的article元素里面。
- article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。
3.3，标识章节<section>
Section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。
- div与section：<div>关注结构的独立性，而<section>关注内容的独立性，<section>标签包含的内容通常是一段独立的内容，可以单独将该段内容单独存储。
- article元素与section元素的区别：在HTML5中，article元素可以看成是一种特殊种类的section元素，它比section元素更强调独立性。即section元素强调分段或分块，而article强调独立性。总结来说，如果一块内容相对来说比较独立、完整的时候，应该使用article元素，但是如果你想将一块内容分成几段的时候，应该使用section元素。
【问题】是否可以用<article>和<section>取代div?
【答案】答案是否定的。<div>在HTML5中工作更纯正，就是用来布局大块的，而在不同的内容块中按照需求添加<article>和<section>。
3.4，标识导航<nav>
Nav元素是一个可以用做页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是链接的每一个集合都是一个nav，只需要将主要的、基本的链接组放进nav元素即可。例如，在页脚中通常会有一组链接，包括服务条款、版权声明、联系方式等。对于这些footer元素就足够放置了。一个页面中可以拥有多个nav元素，作为页面整体或不同部分的导航。
nav除了表达了导航的语义之外，也是区块元素的一员，从级别上来说，和section元素是一样的，只是它还表达了导航的语义。
Nav元素可以用于以下这些场合：
- 传统导航条：现在主流网站上都有不同层级的导航条，其作用是将当前页面跳转到网站的其他主要页面上去。
- 侧边框导航：现在主流博客网站及商品网站上都有侧边栏导航，其作用是将页面从当前文章或当前商品跳转到其他文章或其他商品页面上去。
- 页内导航：页内导航的作用是在本页面几个主要的组成部分之间进行跳转。
- 翻页操作：翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。
注意：在HTML5中不要用menu元素代替nav元素。因为menu元素是用在一系列发出命令的菜单上的，是一种交互性的元素，或者更确切地说是使用在web应用程序中的。
3.5，标识辅助内容<aside>
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。
aside元素主要有以下两种使用方法：
- 被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关信息、名词解释，等等。
- 在article元素之外使用，可以作为页面或站点全局的附属信息部分。最典型的形式就是侧边栏，其中的内容可以是友情链接，博客中其他文章列表、广告单元等。
注意：不要将 <aside> 元素去标记括号内的文本，因为这种类型的文本（即括号内的文本）被认为是其内容流的一部分。
3.6，页眉<header>和页脚<footer>
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其内容。例如搜索表单或相关的logo图片。
顾名思义，整个页面的标题应该放在页面的开头，我们可以用如下所示的形式书写页面的标题：
<header><h1>页面标题</h1></header>
- <header>标签定义文档或者文档的一部分区域的页眉。
- <header> 元素应该作为介绍内容或者导航链接栏的容器。
- 在一个文档中，可以定义多个 <header> 元素。
在HTML5中，一个header元素通常包括至少一个heading元素（h1~h6），也可以包括hgroup、table、from、nav
注意：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。<footer> 元素应该包含它所包含的元素的信息。在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。
3.7，标识文章发布日期<time>标签
time标签对于布局是没有任何影响，这个标签主要的主要原因就是在蜘蛛爬取的时候可以爬取到，知道这是时间，进而可以得到相关的流量。
- time元素是HTML5新增的元素
- time元素可以被定义很多格式的日期和时间
- datetime属性中日期与时间之间要用”T”文字分割，“T”代表时间，如果时间上加了Z文字表示机器编码时使用UTC标准时间，表示向机器编码利益地区时间，如果有时间差就在时间后面加上时差。
- pubdate属性是个可选标签，加上它搜索引擎/浏览器就可以很方便的识别出那个日期时文章或新闻发布的日期。
3.8，联系信息<address>标签
address 元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address应该不只是用来呈现电子邮箱或真实地址，还应用来展示跟文档相关的联系人的所有联系信息。通常出现在footer中。
扫一扫
1366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
