HTML5新增标签

最新推荐文章于 2022-03-24 16:39:12 发布

即将入土的羸弱老年人

最新推荐文章于 2022-03-24 16:39:12 发布

阅读量509

点赞数

分类专栏： HTML Note Web 文章标签： HTML5 新增标签

本文链接：https://blog.csdn.net/qq_36823300/article/details/100104209

版权

Web 同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

HTML

21 篇文章 1 订阅

订阅专栏

Note

21 篇文章 0 订阅

订阅专栏

在HTML5新规范中，新增了一些便于使用的标签。新标签可分为结构标签、媒体标签、表单控件标签和其他标签四类。

1、结构标签

在HTML5结构标签出现之前，当书写页面的布局结构时，都是采用<div>标签来实现。现在可以采用HTML5提供的结构标签进行布局，而且这些结构标签通常都带有语义化，因此更有利于优先搜索引擎。（这是W3C推荐的方式，未来将通过逐步利用结构标签取代<div>标签的方式实现页面布局）

1）<header>、<footer>标签

<header>和<footer>标签用于描述网页结构中的页眉部分和页脚部分，页眉通常包含布局中的头部信息，页脚通常包含布局中的尾部信息。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增标签</title>
    <style>
        #main {
            width: 480px;
            margin: 0 auto;
            color: white;
            font-size: 40px;
        }
        header {
            height: 100px;
            background: red;
        }
        footer {
            height: 100px;
            background: blue;
        }
    </style>
</head>

<body>
    <div id="main">
        <header>页眉：页面的头部</header>
        <footer>页脚：页面的尾部</footer>
    </div>
</body>

<script>
</script>

</html>

2）<hgroup>、<nav>标签

<hgroup>标签用于标题组合，即一个标题和一个子标题，或者标语的组合。<nav>标签用于页面的导航结构部分。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增标签</title>
    <style>
        .clear:after {
            content: "";
            display: block;
            clear: both;
        }
        #main {
            width: 480px;
            margin: 0 auto;
            color: white;
            font-weight: bold;
        }
        header {
            height: 170px;
            background: red;
            padding: 10px 0;
        }
        footer {
            height: 50px;
            background: blue;
            padding: 10px 0;
        }
        nav li {
            float: left;
            margin-right: 100px;
        }
    </style>
</head>

<body>
    <div id="main">
        <header>
            页眉：页面的头部
            <hgroup>
                <h1>主标题</h1>
                <h2>副标题</h2>
            </hgroup>
            <nav>
                <ul>
                    <li>导航1</li>
                    <li>导航2</li>
                    <li>导航3</li>
                </ul>
            </nav>
        </header>
        <footer>页脚：页面的尾部</footer>
    </div>
</body>

<script>
</script>

</html>

3）<article>、<aside>标签

<article>标签用于描述独立的内容部分，可包含其他语义化标签。<aside>标签定义用于<article>标签以外的内容，一般用于辅助信息或侧边栏。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增标签</title>
    <style>
        .clear:after {
            content: "";
            display: block;
            clear: both;
        }
        #main {
            width: 480px;
            margin: 0 auto;
            color: white;
            font-weight: bold;
        }
        header {
            height: 170px;
            background: red;
            padding: 10px 0;
        }
        footer {
            height: 50px;
            background: blue;
            padding: 10px 0;
            clear: both;
        }
        nav li {
            float: left;
            margin-right: 100px;
        }
        article {
            width: 300px;
            height: 200px;
            color: black;
            border: 1px #000 solid;
            float: left;
            padding: 10px 0;
        }
        aside {
            width: 170px;
            height: 200px;
            color: black;
            border: 1px #000 solid;
            float: right;
            padding: 10px 0;
        }
    </style>
</head>

<body>
    <div id="main">
        <header>
            页眉：页面的头部
            <hgroup>
                <h1>主标题</h1>
                <h2>副标题</h2>
            </hgroup>
            <nav>
                <ul>
                    <li>导航1</li>
                    <li>导航2</li>
                    <li>导航3</li>
                </ul>
            </nav>
        </header>
        <article>主体信息</article>
        <aside>辅助信息</aside>
        <footer>页脚：页面的尾部</footer>
    </div>
</body>

<script>
</script>

</html>

4）<section>、<figure>标签

<section>标签用于描述页面上的板块，划分页面上的不同区域。<figure>标签用于描述图像或视频，其包含的一个子标签<figcaption>用于描述图像或视频的标题部分。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增标签</title>
    <style>
        .clear:after {
            content: "";
            display: block;
            clear: both;
        }
        #main {
            width: 480px;
            margin: 0 auto;
            color: white;
            font-weight: bold;
        }
        header {
            height: 170px;
            background: red;
            padding: 10px 0;
        }
        footer {
            height: 50px;
            background: blue;
            padding: 10px 0;
            clear: both;
        }
        nav li {
            float: left;
            margin-right: 100px;
        }
        article {
            width: 300px;
            height: 150px;
            color: black;
            border: 1px #000 solid;
            float: left;
            padding: 10px 0;
        }
        aside {
            width: 170px;
            height: 150px;
            color: black;
            border: 1px #000 solid;
            float: right;
            padding: 10px 0;
        }
        section {
            width: 140px;
            height: 70px;
            border: 1px #000 solid;
            float: left;
            margin: 4px;
        }
        figure {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        figure img {
            width: 100%;
            height: 50%;
        }
    </style>
</head>

<body>
    <div id="main">
        <header>
            页眉：页面的头部
            <hgroup>
                <h1>主标题</h1>
                <h2>副标题</h2>
            </hgroup>
            <nav>
                <ul>
                    <li>导航1</li>
                    <li>导航2</li>
                    <li>导航3</li>
                </ul>
            </nav>
        </header>
        <article>
            <section>
                <figure>
                    <img src="images/picture.jpg" alt="">
                    <figcaption>图片简介信息</figcaption>
                </figure>
            </section>
            <section>板块2</section>
            <section>板块3</section>
            <section>板块4</section>
        </article>
        <aside>辅助信息</aside>
        <footer>页脚：页面的尾部</footer>
    </div>
<script>
</script>
</body>

</html>

2、媒体标签

媒体标签用于描述网页中的音频或视频元素，可以在网页中添加音频或视频文件，并增加一些与音频、视频有关的属性和方法。

1）<audio>音频标签

<audio>音频标签通过src属性添加音频的地址，支持常见音频格式，如MP3、OGG等。默认不显示音频的控件，通过controls属性对控件进行显示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增标签</title>
    <style>
    </style>
</head>

<body>
    <audio controls src="music/Maroon 5 - Maps.mp3"></audio>
<script>
</script>
</body>

</html>

在默认情况下，音频的初始状态是暂停状态，通过autoplay属性可进行自动音频播放；在默认情况下，音频播放结束就会停止，如果想循环播放可通过添加loop属性来实现。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增标签</title>
    <style>
    </style>
</head>

<body>
    <audio controls autoplay loop src="music/Maroon 5 - Maps.mp3"></audio>
<script>
</script>
</body>

</html>

2）<video>视频标签

<video>视频标签与<audio>音频标签类似，通过src属性添加视频的地址，支持常见视频格式，如MP4、OGV等。同样需要controls属性添加和显示播放控件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增标签</title>
    <style>
    </style>
</head>

<body>
    <video controls src="video/video.mp4"></video>
<script>
</script>
</body>

</html>

<video>视频标签同样也支持autoplay属性和loop属性，而且可添加width、height属性来控制控件的尺寸。

3、表单控件标签

1）email、url、tel值

当<input>标签的type属性值为email时，表示用于邮箱地址的文本字段。当提交的内容不是正确的email值时，默认会有提示信息产生。

当<input>标签的type属性值为url时，表示用于链接地址的文本字段。当提交的内容不是正确的url值时，默认会有提示信息产生。

当<input>标签的type属性值为tel时，表示用于电话号码的文本字段。当输入错误值时不会产生提示信息，在移动端中会展现对应的数字键盘。

2）range、color值

当<input>标签的type属性值为range时，展示为滑块拖动的效果。当<input>标签的type属性值为color时，展示为获取颜色值的效果，当单击颜色按钮时，会弹出获取颜色的面板层。

3）search、number值

当<input>标签的type属性值为search时，表示用于搜索的文本字段。与文本输入框效果相似，当输入搜索内容时，会显示带有关闭按钮的效果。

当<input>标签的type属性值为number时，表示用于微调数字的文本字段。在输入框中会显示带有上下单击按钮的效果。

4）date、week、month、time值

当<input>标签的type属性值为date、week、month、time、datetime、datetime-local时，表示用于日期和时间的文本字段。

date：用于选取年月日。
week：用于选取周和年。
month：用于选取月和年。
time：用于选取时间（小时和分钟）。
datetime：用于选取时间、日、月、年（UTC时间）。
datetime-local：用于选取时间、日、月、年（本地时间）。

下面介绍一些HTML5表单控件里新添加的属性操作

（1）placeholder属性

placeholder属性用来规定帮助用户填写输入字段的提示信息。

（2）autocomplete属性

autocomplete属性用于规定是否启用自动完成功能表单，默认值为on，规定启用自动完成功能，off值规定禁用自动完成功能。启动自动完成功能即当再次输入提交过的内容时会显示自动完成提示层。禁止自动完成即不会显示自动完成提示层。

（3）autofocus属性

autofocus属性规定加载完页面输入框时会自动获取光标。

（4）required属性

required属性规定在提交时输入框的内容不能为空，如果内容为空，单击提交按钮时会显示提示信息层。
（5）pattern属性

pattern属性规定输入字段值的模式和格式，如pattern="[0-9]"表示输入值必须是0~9的数字。当输入的字段与规定不一致时，会显示提示信息层。

4、其他标签

（1）<mark>标签

<mark>标签用于描述突出显示部分的文本。默认情况下会添加黄色的背景色。

（2）<progress>标签

<progress>标签用于定义运行中的进度或进程。一般需要配合JavaScript来展示进度条的动态效果。有两个可选的属性，max属性表示完成的值，value属性表示当前的值。

（3）<time>标签

<time>标签用于描述日期或时间，其datetime属性定义元素的日期和时间。如果未定义该属性，则必须在元素的内容中规定日期或时间。显示效果与普通的<span>标签相同，<time>属于语义化标签，没有默认样式。

（4）<ruby>标签

<ruby>标签用于定义注解，一般用在中文注音中。其中有一个配套的<rt>子标签，用来添加注解。

（5）<canvas>标签

<canvas>标签用于定义图形，例如图表和其他图像。通常利用<canvas>标签绘制一些HTML所不能绘制的图形，但<canvas>标签需要配合JavaScript才能使用。

（6）<details>标签

<details>标签用于描述文档或文档某个部分的细节。与<summary>标签配合使用可以为details定义标题。标题是可见的，当用户单击标题时，会显示出details的内容。

（7）<datalist>标签

<datalist>标签用于定义选项列表，与input元素配合使用，定义input可能的值。datalist及其选项不会被显示出来，仅仅是合法的输入值列表，需使用input元素的list属性来绑定datalist。这种方式的好处是增强了用户体验，同时可提示用户完成输入。

（8）<output>标签

<output>标签用于定义执行计算后的显示结果，配合简单的JavaScript进行操控。在<form>表单上定义一段JavaScript操作用来计算结构。在<output>标签上定义一个for属性用于指定一个或多个相关的元素。

（9）<meter>标签

<meter>标签用于定义度量衡，仅用于已知最大和最小值的度量。浏览器会使用图形方式表现<meter>标签。<meter>标签的属性说明如下。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style>
    </style>
</head>

<body>

    <meter min="0" max="20" value="5"></meter>
    <br>
    <meter value="0.1"></meter>
    <br>
    <meter value="0.3" optimum="1" high="0.9" low="0.1" max="1" min="0"></meter>
    <span>30%</span>
    <br>
    <meter min="0" max="100" value="80"></meter>
    <br>
    <meter min="0" max="100" value="100"></meter>

    <script>
    </script>

</body>

</html>