HTML5 增加的新的标签

<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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342

推荐阅读更多精彩内容

  • html5新增标签
    HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 4,034评论 1赞 25
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1赞 92
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,580评论 18赞 139
  • 标签大全!
    http://www.w3school.com.cn/tags/index.asp 按字母顺序排列New : HT...
    繁华乱世沧桑了谁的容颜阅读 277评论 0赞 1
  • 关于HTML/HTML5（二）
    接上 关于HTML/HTML5（一）http://www.jianshu.com/p/33fc7840c079 学...
    Amyyy_阅读 776评论 0赞 4