您的位置：首页 > Web前端 > HTML5

HTML5新增的常用元素

2017-10-12 21:59 621 查看

在HTML5之前，HTML页面只能使用div元素作为结构元素，而HTML5则提供了article、section、nav、aside、header、footer等文档结构元素以及特殊功能元素meter和progress。

1.article

该元素用于代表页面上独立、完整的一篇文章，该元素表示的内容可以是一个帖子、一篇blog文章、一篇短文、一条完整的回复等。总之，只要是一篇独立的文档内容，就应该使用article元素来表示。关于article的简单规则如下：

元素内部可使用header定义文章“标题”部分。

元素内部可使用footer定义文章“脚注”部分。

元素内部可使用多个section把文章内容分成几个“段落”。

元素内部可嵌套多个article作为它的附属“文章”，比如一篇blog文章后面可以有多篇回复文章。

2.section

该元素可用于对页面内容的分块。关于section的简单规则如下：

元素内可以包含多个article元素，表示该“分块”内部包含多篇文章。

元素内可以嵌套section元素，用于表示该“分块”包含多个“子分块”。

可以定义cite属性

3.nav

该元素专门用来定义页面上的“导航条”，包括页面上方的“主导航条”、侧边的“边栏导航”、页面内部的“页面导航”、页面下方的“底部导航”等。

4.aside

该元素专门用于定义当前页面或当前文章的附属信息。

5.header

该元素主要用于为article元素定义文章头部信息，该元素内部既可包含多个h1~h6这样的标题元素，也可以包含hgroup元素，还可以包含普通的p、span等元素。

6.hgroup

该元素主要用于组织多个h1~h6这样的标题元素。当header需要包含多个标题元素时，可以考虑使用hgroup把他们组成一组。

7.footer

该元素主要用于为article元素定义“脚注”部分，包括该文章的版权信息、作者授权信息等。

<body>
<article>
<!--帖子的头部-->
<header>
<h1>学习android必须先学习java吗？</h1>
<div>作者：student</div>
</header>
<p>
学习android必须先学习java吗？
android上的应用程序只能用java编写吗？
</p>
<!--帖子的回复部分，用section表示-->
<section>
<!--每个article代表一个回复-->
<article>
<!--回复的头部-->
<header>
<h2>还是得学习</h2>
<div>作者：Jone</div>
</header>
<p>
虽然Android不一定要用java开发，还可以选择JavaScript<br/>
但java毕竟是Android的主要开发语言<br/>
因此建议学习Android之前还是先学习java
</p>
</article>
<!--每个article代表一个回复-->
<article>
<!--回复的头部-->
<header>
<h2>java是基础</h2>
<div>作者：Tony</div>
</header>
<p>
java是基础，学好java再去学习Android事半功倍。
</p>
</article>
</section>
<!--帖子的“脚注”-->
<footer>
以上帖子和回复只代表个人观点
</footer>
</article>
</body>

8.figure

该元素用于表示一块独立的“图片区域”，该元素内部可以包含一个或多个img元素所代表的图片。除此以外，该元素内部还可包含一个figcaption元素，用于定义该“图片区域”的标题。

9.figcaption

该元素通常放在figure内部，用于定义“图片区域”的标题。

10.meter

用于表示一个已知最大值和最小值的计数仪表。比如电池的剩余电量、速度表等，使用该元素时除了可指定id、style、class、hidden等通用属性外，还可以指定如下属性：

value：指定计数仪表的当前值。默认为0，可以为该属性指定一个浮点小数值。

min：指定计数仪表的最小值。默认为0，可以为该属性指定一个浮点小数值。

max：指定计数仪表的最大值。默认为1，可以为该属性指定一个浮点小数值。

low：指定计数仪表指定范围的最小值。该属性必须大于等于min属性指定的值。

high：指定计数仪表指定范围的最大值。该属性必须小于等于max属性指定的值。

optimum：指定计数仪表指定范围的最佳值。如果该值大于high属性指定的值，则意味着值越大越好；如果该值小于low属性指定的值，则意味着值越小越好。

11.progress

用于表示一个进度条。使用该元素时除了可指定id、style、class、hidden等通用属性外，还可以指定如下属性：

max：指定进度条完成时的值。

value：指定进度条当前完成的值。

<body>

<p>展示给定的数据范围：</p>
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

<p><strong>注意：</strong> IE 浏览器不支持 meter 标签。</p>

下载进度：
<progress value="22" max="100">
</progress>

<p><strong>注意：</strong> IE 9 或者更早版本的 IE 浏览器不支持 progress 标签。</p>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航