HTML5新增的常用元素

最新推荐文章于 2022-12-26 15:24:37 发布

学习中的技术小白

最新推荐文章于 2022-12-26 15:24:37 发布

阅读量592

点赞数

分类专栏：前端 html5 文章标签： html5

本文链接：https://blog.csdn.net/qq_37111953/article/details/78220387

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html5

2 篇文章 0 订阅

订阅专栏

在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>