美文网首页前端是万能的让前端飞Web 前端开发
HTML5 增加的新的标签

HTML5 增加的新的标签

作者: 肆意木 | 来源:发表于2017-07-24 16:45 被阅读14次

    <h5>1.header :表示一个节的头部</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header>test</header>
<div>test1</div>
<div>test2</div>
</body>
</html>

    <h5>2.section :定义一个通用的文档或者应用程序节。它可以和 h1-h6 一起使用来表示文档结构,类似分章节</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<section>
    <h1>第一节</h1>
    <p>this is one</p>
</section>
<section>
    <h1>第二节</h1>
    <p>this is two</p>
</section>
</body>
</html>

    <h5>3.article :定义文档内容的一个独立块，比如博客条目或者报纸上的文章</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<article>
    <h1>test</h1>
    <p>test1 </p>
</article>
</body>
</html>

    <h5>4.aside :标签中包含的内容与页面主要内容相关，但不是该页面的一部分。这有点类似于使用括弧对正文进行注释（就像这样）</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>This is an body for the first blog post. </p>

<aside>
    <p>This is an aside for the first blog post. </p>
</aside>
</body>
</html>

    <h5>5.footer :定义一个节的脚注，可以包含作者，版权等信息</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<footer>
    <p>Posted </p>
    <p>Contact information</p>
</footer>
</body>
</html>

    <h5>6.nav :定义导航链接的部分</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<nav>
    <a href="test1">test1</a>
    <a href="test2">test2</a>
    <a href="test3">test3</a>
</nav>
</body>
</html>

    <h5>7.dialog :定义对话框或窗口</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1">
    <tr>
        <th>test1 <dialog open>这是打开的对话窗口</dialog></th>
        <th>test2</th>
        <th>test3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
</body>
</html>

    <h5>8.figure :用于关联标题和某些嵌入内容，比如图表和视频</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<figure>
    <p>拍摄者：haha 拍摄时间：2010 年 10 月</p>
    ![](/img.jpg)
</figure>
</body>
</html>

    <h5>9. wbr :软换行在用 nobr 时用 </h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    <nobr>
        天上星河转，人间帘幕垂。凉生枕簟泪痕滋。起解罗衣聊问、夜何其。翠贴莲蓬小，金销藕叶稀。旧时天气旧时衣。只有情怀不似、旧家时。
        <wbr>
        天空中银河不断转动、星移斗转，人世间的帘幕却一动不动的低低下垂。枕席变凉，泪水更多的流淌，一片湿滋滋。和衣而睡，醒来脱去绸缎外衣，随即问道：“夜已到何时？”
        这件穿了多年的罗衣，用青绿色的丝线绣成的莲蓬已经变小；用金线绣制的荷叶颜色减退、变得单薄而稀疏。每逢秋凉，还总是还上这件罗衣。唯独人的心情不像从前舒畅适时。
    </nobr>
</p>
</body>
</html>

    <h5>10.video :定义视频，比如电影片段或其他视频流。</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video src="/movie.ogg" controls="controls">
    your browser does not support the video tag
</video>

</body>
</html>

    <h5>11.track :定义用在媒体播放器中的文本轨道(暂时所有浏览器都不支持此标签)。</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video width="320" height="240" controls="controls">
    <source src="forrest_gump.mp4" type="video/mp4" />
    <source src="forrest_gump.ogg" type="video/ogg" />
    <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
    <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>

</body>
</html>

    <h5>12.time :定义日期/时间。</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    我在
    <time datetime="2010-02-14">情人节</time>
    有个约会。
</p>


</body>
</html>

    <h5>13.summary :为 <details> 元素定义可见的标题。</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<details>
    <summary>test</summary>
    This document teaches you everything you have to learn about HTML 5.
</details>

</body>
</html>

    <h5>14.source :定义媒介源</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
</body>
</html>

    <h5>15.ruby :定义 ruby 注释, rt :定义 ruby 注释的解释, rp :定义若浏览器不支持 ruby 元素显示的内容</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ruby>
    ruby注释 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
</body>
</html>

    <h5>16.progress :定义任何类型的任务的进度。</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
下载进度：
<progress value="22" max="100">
</progress>
<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持
    <progress> 标签。</progress>
</p>
</body>
</html>

    <h5>17.output :输出的一些类型。</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =
    <output name="x" for="a b"></output>
</form>
</body>
</html>

    <h5>18.audio :定义声音内容</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<audio src="/horse.ogg" controls="controls">
    Your browser does not support the audio element.
</audio>
</body>
</html>

    <h5>19.bdi :定义文本的文本方向，使其脱离其周围文本的方向设置</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>test1
        <bdi>test1</bdi>
        test2
    </li>
</ul>
</body>
</html>

    <h5>20.canvas :定义图形</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>

    <h5>21.command :定义命令按钮(大多数浏览器不支持)</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<menu>
    <command onclick="alert('Hello World')">
        Click Me!
    </command>
</menu>
</body>
</html>

    <h5>22.datalist :定义下拉列表</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input list="test"/>
<datalist id="test">
    <option value="test1">
    <option value="test2">
    <option value="test3">
</datalist>
</body>
</html>

    <h5>23.details :定义元素的细节</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<details>
    <summary>test</summary>
    <p>testtest.</p>
</details>
</body>
</html>

    <h5>24.embed :定义外部交互内容或插件</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<embed src="helloworld.swf"/>
</body>
</html>

    <h5>25.figcaption :定义 figure 元素的标题, figure :定义媒介内容的分组，以及它们的标题。</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<figure>
    <figcaption>test</figcaption>
    ![](test.jpg)
</figure>
</body>
</html>

    <h5>26.keygen :定义生成密钥</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/example/html5/demo_form.asp" method="get">
    用户名：<input type="text" name="usr_name"/>
    加密：
    <keygen name="security"/>
    <input type="submit"/>
</form>

</body>
</html>

    <h5>27.mark :定义有记号的文本。</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>

    <h5>28.meter :定义预定义范围内的度量</h5>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>显示度量值：</p>
<meter value="3" min="0" max="10">3/10</meter>
<br>
<meter value="0.6">60%</meter>
</body>
</html>

    相关文章

      网友评论

        本文标题：HTML5 增加的新的标签

        本文链接：https://www.haomeiwen.com/subject/issbkxtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        前端是万能的

        让前端飞

        Web 前端开发

        关于我们|服务条款|联系我们|HTML5 增加的新的标签|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！