HTML5新增页面元素与属性

1. 结构元素

（1）<header>元素

  HTML5中的header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。其基本语法格式如下：

<header>
   <h1>网页主题</h1>
	...
</header>

效果如下：

---

网页主题

...

---

（2）<nav>元素

  nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。其基本语法格式如下：

<nav>
    <ul>
	<li><a href="#">A</li>
	<li><a href="#">B</li>
	<li><a href="#">C</li>
	<li><a href="#">D</li>
   </ul>
</nav>

效果如下：

---

• A
• B
• C
• D

---

（3）<article>元素

  article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。article元素通常使用多个section元素进行划分，一个页面中article元素可以出现多次。基本语法格式如下：

<article>
	<header>
		<h2>第一章</h2>
	</header>
	<section>
		<header>
			<h2>第1节</h2>
		</header>
	</section>
	<section>
		<header>
			<h2>第2节</h2>
		</header>
	</section>
</article>

效果如下：

---

第一章

第1节

第2节

---

（4）<aside>元素

  aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
  aside元素的用法主要分为两种：

• 被包含在article元素内作为主要内容的附属信息。
• 在article元素之外使用，作为页面或站点全局的附属信息部分。

<article>
	<header>
		<h1>标题</h1>
	</header>
	<section>文章主要内容</section>
	<aside>其他相关文章</aside>
</article>

效果如下：

---

标题

文章主要内容

其他相关文章

---

（5）<section>元素

  section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。在使用section元素时，需要注意以下3点：

• 不要将section元素用作设置样式的页面容器，那是div的特性。section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div。
• 如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。
• 没有标题的内容区块不要使用section元素定义。

<section>
	<h2>评论</h2>
	<article>
		<h3>A</h3>
		<p>内容</p>
	</article>
	<article>
		<h3>B</h3>
		<p>内容</p>
		</article>
</section>

效果如下：

---

评论

A

内容

B

内容

---

注：在HTML5中，article元素可以看作是一种特殊的section元素，它比section元素更具有独立性，即section元素强调分段或分块，而article元素强调独立性。如果一块内容相对来说比较独立、完整时，应该使用article元素；但是如果想要将一块内容分成多段时，应该使用section元素。

（6）<footer>元素

  footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。在HTML5出现之前，一般使用<div id=“footer”></div>标记来定义页面底部，而通过HTML5的 footer元素可以轻松实现。

2. 分组元素

（1）figure和figcaption元素

  figure元素用于定义独立的流内容（图像、图表、照片、代码等等），一般指一个单独的单元。figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。figcaption元素用于为figure元素组添加标题，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个子元素的位置。基本语法格式如下：

<figure>
	<figcaption>标题</figcaption>
	<p>内容</p>
</figure>

效果如下：

---

标题

内容

---

（2）<hgroup>元素

  hgroup元素用于将多个标题（主标题和副标题或者子标题）组成一个标题组，通常它与h1~h6元素组合使用。通常，将hgroup元素放在header元素中。
  在使用hgroup元素时要注意以下几点：

• 如果只有一个标题元素不建议使用hgroup元素。
• 当出现一个或者一个以上的标题与元素时，推荐使用hgroup元素作为标题元素。
• 当一个标题包含副标题、section或者article元素时，建议将hgroup元素和标题相关元素存放到header元素容器中。
• 为了更好的说明各群组的功能，hgroup元素常常与figcaption结合使用。

<hgroup>
	<h1>A</h1>
	<h2>B</h2>
</hgroup>

效果如下：

---

A

B

---

<hgroup>
	<figcaption>《致橡树》</figcaption>
	<p>《致橡树》是舒婷创作于1977年3月的爱情诗。是朦胧诗派的代表作之一，作为新时期文学的发轫之作，《致橡树》在文学史上的地位是不言自明的。 作者通过木棉树对橡树的“告白”，来否定世俗的，不平等的爱情观，呼唤自由，平等独立，风雨同舟的爱情观，喊出了爱情中男女平等，心心相印的口号，发出新时代女性的独立宣言，表达对爱情的憧憬与向往。</p>
	<figcaption>《再别康桥》</figcaption>
	<p>《再别康桥》是现代诗人徐志摩脍炙人口的诗篇，是新月派诗歌的代表作品。全诗以离别康桥时感情起伏为线索，抒发了对康桥依依惜别的深情。语言轻盈柔和，形式精巧圆熟，诗人用虚实相间的手法，描绘了一幅幅流动的画面，构成了一处处美妙的意境，细致入微地将诗人对康桥的爱恋，对往昔生活的憧憬，对眼前的无可奈何的离愁，表现得真挚、浓郁、隽永，是徐志摩诗作中的绝唱。</p>
</hgroup>

效果如下：

---

《致橡树》

《致橡树》是舒婷创作于1977年3月的爱情诗。是朦胧诗派的代表作之一，作为新时期文学的发轫之作，《致橡树》在文学史上的地位是不言自明的。 作者通过木棉树对橡树的“告白”，来否定世俗的，不平等的爱情观，呼唤自由，平等独立，风雨同舟的爱情观，喊出了爱情中男女平等，心心相印的口号，发出新时代女性的独立宣言，表达对爱情的憧憬与向往。

《再别康桥》

《再别康桥》是现代诗人徐志摩脍炙人口的诗篇，是新月派诗歌的代表作品。全诗以离别康桥时感情起伏为线索，抒发了对康桥依依惜别的深情。语言轻盈柔和，形式精巧圆熟，诗人用虚实相间的手法，描绘了一幅幅流动的画面，构成了一处处美妙的意境，细致入微地将诗人对康桥的爱恋，对往昔生活的憧憬，对眼前的无可奈何的离愁，表现得真挚、浓郁、隽永，是徐志摩诗作中的绝唱。

---

（3）<details>和<summary>元素

  details元素用于描述文档或文档某个部分的细节。summary元素经常与details元素配合使用，作为details元素的第一个子元素，用于为details定义标题。标题是可见的，当用户点击标题时，会显示或隐藏details中的其他内容。基本语法格式如下：

<details>
	<summary>显示列表</summary>
	<ul>
		<li>列表1</li>
		<li>列表2</li>
	</ul>
</details>

效果如下：

---

---

（4）<progress>元素

  progress元素用于表示一个任务的完成进度。这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。
  progress元素的常用属性值有两个，具体如下：

• value：已经完成的工作量。
• max：总共有多少工作量。

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

效果如下：

---

---

（5）<meter>元素

  meter元素用于表示指定范围内的数值。例如，显示硬盘容量或者对某个后选者的投票人数占投票总人数的比例等，都可以使用meter元素。
  meter元素有多个常用的属性，如下表所示。

属性	说明
hign	定义度量的值在哪个点被界定为高的值
low	定义度量的值在哪个点被界定为低的值
max	定义最大值，默认值为1
min	定义最小值，默认值为0
optimum	定义什么样的度量值是最佳的值。如果该值高于high属性，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好
value	定义度量的值

<h1>学生成绩列表</h1>
<p>
	A：<meter value="55" min="0" max="100" low="60" high="80" title="65分" optimum="100">55</meter><br/>
	B：<meter value="60" min="0" max="100" low="60" high="80" title="80分" optimum="100">60</meter><br/>
	C：<meter value="75" min="0" max="100" low="60" high="80" title="75分" optimum="100">75</meter><br/>
	D：<meter value="80" min="0" max="100" low="60" high="80" title="75分" optimum="100">80</meter><br/>
	E：<meter value="85" min="0" max="100" low="60" high="80" title="75分" optimum="100">85</meter><br/>
	F：<meter value="100" min="0" max="100" low="60" high="80" title="75分" optimum="100">100</meter><br/>
</p>

效果如下：

---

---

3. 文本层次语义元素

（1）<time>元素

  time元素用于定义时间或日期，可以代表24小时中的某一时间。
  time元素有两个属性：

• datetime：用于定义相应的时间或日期。取值为具体时间（例如：14:00）或具体日期（例如2019—10—24），不定义该属性时，由元素的内容给定日期 / 时间。
• pubdate：用于定义time元素中的日期/时间是文档（或article元素）的发布日期。取值一般为“pubdate”。

<p>我们早上<time>9:00</time>开始上班</p>
<p>今年的<time datetime="2015—10—01">十一</time>我们准备去旅游</p>
<time datetime="2015—08—15" pubdate="pubdate">
本消息发布于2015年8月15日

效果如下：

---

我们早上9:00开始上班

今年的十一我们准备去旅游

本消息发布于2015年8月15日

---

（2） <mark>元素

  mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。该元素的用法与em和strong有相似之处，但是使用mark元素在突出显示样式时更随意灵活。基本语法格式如下：

<p>在文本中<mark>高亮显示</mark>某些字符</p>

效果如下：

---

在文本中高亮显示某些字符

---

（3）<cite>元素

  cite元素可以创建一个引用标记，用于对文档参考文献的引用说明，一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。基本语法格式如下：

<p>也许愈是美丽就愈是脆弱,就像盛夏的泡沫。</p>
<cite>——明晓溪《泡沫之夏》</cite>

效果如下：

---

也许愈是美丽就愈是脆弱,就像盛夏的泡沫。

——明晓溪《泡沫之夏》

---

4. 全局属性

（1）draggable属性

  draggable属性用来定义元素是否可以拖动，该属性有两个值：true和false，默认为false，当值为true时表示元素选中之后可以进行拖动操作，否则不能拖动。

<p draggable=true>这段语句可以拖动</p>
<p draggable=false>这一段不可以拖动</p>

效果如下：

---

这段语句可以拖动

这一段不可以拖动

---

（2）hidden属性

  在HTML5中，大多数元素都支持hidden属性，使内容隐藏，元素中的内容是通过浏览器创建的，页面装载后允许使用JavaScript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也及时显示出来。

<p hidden=true>这段语句隐藏</p>

效果如下：

---

---

（3）contenteditable属性

  contenteditable属性规定是否可编辑元素的内容，但是前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。该属性有两个值，如果为true表示可编辑，为false表示不可编辑。

<h3>可编辑列表</h3>
<ul contenteditable="true">
	<li>列表1</li>
	<li>列表2</li>
	<li>列表3</li>
</ul>

效果如下：

---

---