H5新标签和被H5拥抱的老元素们

事实上，所有元素都能被归类为几个元素内容模型（content model），详情请参考MDN：

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories

这里不大谈内容模型，只不过按照这种思路划分我们的元素，谈谈那些比较广为接受的HTML5新元素和那些被HTML5拥抱的老元素。

元数据内容

base元素

老元素，假如你不是使用前端框架，基本上都可以用到。

base元素为页面上的所有的相对链接规定默认 URL 或默认目标，所以最好放在head元素里比较靠前的位置。

在一个文档中，最多能使用一个 base 元素。base 元素必须位于 head 元素内部。

如果使用了 base 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
 
<body>
<img src="logo.png" width="24" height="39" alt="Stickman">
<a href="http://www.runoob.com">runoob.com</a>
</body>

href属性：规定页面中所有相对链接的基准 URL。

target属性：规定页面中所有的超链接和表单在何处打开。该属性会被每个链接中的 target 属性覆盖。

noscript元素

老元素，浏览器们都支持。

此标签可被用于可识别 noscript 标签但无法支持js脚本的时候，通常写上它也不会有什么损失。

noscript 元素用来定义在脚本未被执行时的替代内容（文本）。

其他“元数据内容”标签的介绍可在此先省略。

章节元素（Sectioning content）

在当前的大纲中创建一个分节，此分节将定义 header元素、footer元素和“标题元素”的范围。

属于此类的H5元素总共有：

article元素

section元素

aside元素

nav元素

都是比较新出的元素，还好IE9及以上都作了基本支持。

用法可参考 demo

article元素

article元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。

如在发布中，它可能是论坛帖子或新闻文章、博客文章、用户提交的评论、交互式组件，或者其他独立的内容项目。

用时要特别注意内容的独立性：一般独立完整的内容才使用article元素，如果只是一段内容的话应该是用section元素。

使用说明：

当 article元素嵌套使用时，则该元素代表与外层元素有关的文章。

例如，代表博客评论的 article元素可嵌套在代表博客文章的 article元素中。

article元素的作者信息可通过 address元素提供，但是不适用于嵌套的 article元素。

article元素的发布日期和时间可通过 time元素表示。

section元素

用于定义文章中的章节(通常应该有标题和段落内容)。

用来定义文档中特定的内容区块，可视为一个区域分组元素。

用一句话来概括它的作用就是：给内容分段，给页面分区。

注意它与div的区别，div强调在形式上的独立性，section强调的是内容上的独立性，注意它的语义。

article和section对比：

1.语义不同：article元素是独立完整的内容，section元素页面内容分块。

2.相同点：本质上都是带有语义的div块元素。

分别可以看做<div id="section">和<div id="article">

aside元素

aside元素通常用来设置侧边栏。
用于定义article元素之外的内容，前提是这些内容与article元素内的内容相关。
同时也可嵌套在article元素内部使用，作为主要内容的附属信息。比如与内容有关的参考资料，名词解释等。

nav元素

用来定义目录、导航栏。
并非所有的超链接都放在nav元素中，通常只把一个文档中的主导航栏放在nav中。

流式元素

header元素和 footer元素都是比较新出的元素，还好IE9及以上都作了基本支持。

用法可参考 demo

header元素表示一组引导性的帮助，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等。

footer元素表示最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

footer元素内的作者信息应包含在 address元素中。

footer元素不是章节内容，因此在outline中不能包含新的章节。

address元素

address元素虽然是老元素，但是一直大受 WHATWG组织青睐，也进入了HTML5行列，浏览器兼容很好，尽量使用。

HTML的 address元素可以让作者为它最近的 <article> 或者 <body> 祖先元素提供联系信息。在后一种情况下，它应用于整个文档。

通常用来说明作者的联系信息，例如名字、E-mail、电话、地址等。
address元素中的内容会以斜体显示。
通常， address元素可以放在当前section的 footer元素中，如果存在的话。
浏览器兼容很好，尽量使用。

HTML5强调多媒体在网页的嵌入：

figure元素和 figcaption元素

video元素

在IE9及之后都可以支持基本的使用。

figure元素

figure元素是一个媒体组合元素，也就是对其他的媒体元素（比如：图像、图标等等）进行组合后代表一段独立的内容。

当它属于主体(main flow)时，它的位置独立于主体。当 figure元素转移到附录中或者其他页面时不会影响到主体。

经常与 figcaption元素配合使用，并且作为一个独立的引用单元。

figcaption元素

是与其相关联的图片的说明/标题，用于描述其父节点 figure元素里的其他数据。

这意味着 figcaption元素是 figure元素块里的第一个或者最后一个。

同时，该元素是可以使用，也可以不使用的。

<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">	
  <figcaption>Fig1. MDN Logo</figcaption>
</figure>

video元素

该元素的各个属性才是研究的重点，需要大家去深入总结。

短语元素

time元素

浏览器的支持非常差，最好把它当做一个有“时间”语义的 span标签来用。尽量不使用它的属性。

<p>The concert starts at <time>20:00</time>.</p>

mark元素

HTML5中的全新标签，需要IE9及以上的浏览器。不过低版本浏览器用了也无妨，只不过该标签没有默认的CSS样式而已。

突出一段文字，这段文字通常是被外部引用/需要被搜索引擎搜索获得/用来方便读者的某种特定的审阅。

虽然 mark元素本身有高亮效果，但是不要为了语法高亮而使用 mark元素，这时候应该使用 strong元素达到语法高亮。

mark元素通常用于标注用来衔接上下文关系的文本，而strong元素用来标注在该大段文字中的重要语句。

cite元素

老元素，通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

按照惯例，引用的文本将以斜体显示。

cite标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。

表单相关内容

HTML5推崇新的表单控件，以及表单相关的老元素的更合理的使用， 这些老元素中常用的有：

form元素

fieldset元素

legend元素

label元素

用法可参考 demo

form元素

和表单相关的元素都由 form元素包着，一个form代表一个表单。

fieldset元素

通常用来对表单的相关元素进行分组，如果不需要分组就可以直接不用fieldset这一层。

HTML5 中新增了一些 fieldset元素的新属性：disabled、form、name，而HTML 4.01 中不支持这些属性。

目前，这些新属性被浏览器们支持得都很差。不建议fieldset使用任何属性。

legend元素

legend元素代表一个用于表示它的父元素<fieldset> 的内容的标题。

<form>
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>

label元素

label元素表示用户界面中项目的标题。

<form>
  <label for="GET-name">Name:</label>
  <input id="GET-name" type="text" name="name">
  <input type="submit" value="Save">
</form>

使用 label配合控件使用：

在下面这个例子中，点击label会选中对应的input控件。靠的就是 for属性和 id属性产生的联系。

<label for="User">Click me</label>
<input type="text" id="User" name="Name" />

progress元素

需要IE10及以上的浏览器。

标示任务的进度：

<progress value="22" max="100"></progress>

// 提高HTML代码性能的几点建议：

语义化标记

语义指意义相关的事物，HTML 可从页面内容中看出语义：元素和属性的命名一定程度上表达了内容的角色和功能。HTML5 引入了新的语义元素，如<header>，<footer>及<nav>。

选择合适的元素来编写代码可保证代码的易读性：

使用<h1>(<h2>,<h3>…)表示标题，<ul>或<ol>实现列表
注意使用<article>标签之前应添加<h1>标签；
选择合适的HTML5语义元素如<header>，<footer>,<nav>,<aside>;
使用<p>描述Body 文本，HTML5 语义元素可以形成内容，反之不成立。
使用<label>元素，输入类型，占位符及其他属性来强制验证。
将文本和元素混合，并作为另一元素的子元素，会导致布局错误。
img元素记得加alt属性。

i/b/em/strong元素

<em> 用于对文本内容进行强调，强调位置的不同通常会改变句子的含义。如果仅仅在语态或语气上为了突出某一个文本，那应该使用<i>。

但如果为了突出某一部分的重要性、严重性或紧急性，那应该使用 <strong>。根据 W3C 对 <b>元素的说明，<b>元素应当是在其他标签都不合适的情况下最后一个考虑使用的标签。

相同的，在考虑使用 <i> 之前，也要想想是否用<em>、<strong>、<dfn> 或 <mark> 等元素更合适。

布局

要提高HTML代码的性能，要遵循HTML 代码以实现功能和为目标，而不是样式。

使用<p>元素修饰文本，而不是布局；默认<p>是自动提供边缘，而且其他样式也是浏览器默认提供的。
避免使用<br>分行，可以使用block元素或CSS显示属性来代替。
避免使用<hr>来添加水平线，可使用CSS的border-bottom 来代替。
不到关键时刻不要使用div标签。
尽量少用Tables来布局。
可以多使用Flex Box
使用CSS 来调整边距等。

// 被嫌弃的H5标签们：

command标签：

目前只有IE支持。

hgroup标签：

用来表明标题的集合，这样功能就比较鸡肋了，在最新的 HTML5.1 版中被废除了。

keygen标签：

IE和Safari都不支持。

meter标签：

IE不支持。