Blog

HTML5新增标签的汇总与详解

趁着一点闲暇时间,把HTML5的新增标签整理了一下,用了表格的形式展现,分别归纳了各标签的用法及属性分析。这样方便各位以后在运用HTML5标记遇到疑惑时,直接上来对照看下就明了了,希望对大家有帮助哦。
标签 标记意义及用法分析/示例 属性/属性值/描述
<article> 定义独立的内容,如论坛帖子、报纸文章、博客条目、用户评论等内容。 支持HTML5的全局属性和事件属性。
<aside> 定义两栏或多栏页面的侧边栏内容,如联系我们、客服、网站公告等内容。 支持HTML5的全局属性和事件属性。
<audio> 定义音频内容,如音乐或其他音频流。
autoplay autoplay 自动播放。
controls controls 显示控件。
loop loop 自动重播。
preload preload 预备播放。如果使用 "autoplay",则忽略该属性。
src url 音频的URL。
支持HTML5的全局属性和事件属性。
<audio src="audio.wav"> 您的浏览器不支持 audio 标签。(注:可以在开始标签和结束标签之间加上此文本内容,这样若浏览器不支持此元素,就可以显示出这个信息。) </audio>
<canvas> 定义图形,如图表和其他图像。(注:<canvas> 只是图形容器,我们必须使用脚本来绘制图形。)
height pixels 设置 canvas 的高度。
width pixels 设置 canvas 的宽度。
支持HTML5的全局属性和事件属性。
<canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FFFF00'; ctx.fillRect(0,0,20,30); </script>
<command> 标记定义一个命令按钮,比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。
checked checked 定义是否被选中。仅用于 radio 或 checkbox 类型
disabled disabled 定义 command 是否可用
icon url 定义作为 command 来显示的图像的url
label text 为 command 定义可见的 label
radiogroup groupname 定义 command 所属的组名。仅在类型为 radio 时使用
type checkbox command radio 定义该 command 的类型。默认是 "command"
支持HTML5的全局属性和事件属性。
<menu> <command onclick="alert('Hello!')">Click here.</command> </menu>
<datalist> 定义选项列表,需与 input 元素配合使用,通过input 元素的 list 属性来绑定,用来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。 支持HTML5的全局属性和事件属性。
<input id="fruits" list="fruits" /> <datalist id="fruits"> <option value="Apple"> <option value="Banana"> </datalist>
<details> 用于描述文档或文档某个部分的细节。
open open 定义 details 是否可见
支持HTML5的全局属性和事件属性。
<details> <summary>Some title.</summary> <p>Some details about the title.</p> </details>
<embed> 定义外部的可交互的内容或插件。
height pixels 设置嵌入内容的高度
src url 嵌入内容的 URL
type type 定义嵌入内容的类型
width pixels 设置嵌入内容的宽度
支持HTML5的全局属性和事件属性。
<embed src="someone.swf" />
<figure> 定义一组媒体内容(图像、图表、照片、代码等)以及它们的标题。如果被删除,则不应对文档流产生影响。 支持HTML5的全局属性和事件属性。
<figure> <p>The title of the image.</p> <img src="someimage.jpg" width="100" height="50" /> </figure>
<footer> 定义一个页面或一个区域的页脚。可包含文档的作者姓名、创作日期或者联系信息。 支持HTML5的全局属性和事件属性。
<header> 定义一个页面或一个区域的头部。 支持HTML5的全局属性和事件属性。
<hgroup> 定义文件中一个区块的相关信息,使用 <hgroup> 标签对网页或区段(section)的标题进行组合。 支持HTML5的全局属性和事件属性。
<hgroup> <h1>Welcome my world!</h1> <h2>This is a title.</h2> </hgroup>
<keygen> 定义表单里一个生成的键值。规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。
autofocus autofocus 使 keygen 字段在页面加载时获得焦点
challenge challenge 如果使用,则将 keygen 的值设置为在提交时询问
disabled disabled 禁用 keytag 字段
form formname 定义该 keygen 字段所属的一个或多个表单
keytype rsa 定义 keytype。rsa 生成 RSA 密钥
name fieldname 定义 keygen 元素的唯一名称,用于在提交表单时搜集字段的值。
支持HTML5的全局属性和事件属性。
<form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form>
<mark> 定义有标记的文本。请在需要突出显示文本时使用此标签。 支持HTML5的全局属性和事件属性。
<p>I like <mark>apple</mark> most.</p>
<meter> 定义度量衡。仅用于已知最大和最小值的度量。(注:必须定义度量的范围,既可以在元素的文本中,也可以在 min/max 属性中定义。)
high number 定义度量的值位于哪个点,被界定为高的值
low number 定义度量的值位于哪个点,被界定为低的值
max number 定义最大值。默认值是 1
min number 定义最小值。默认值是 0
optimum number 定义什么样的度量值是最佳的值。如果该值高于 "high" 属性,则意味着值越高越好。如果该值低于 "low" 属性的值,则意味着值越低越好。
value number 定义度量的值
支持HTML5的全局属性和事件属性。
<meter min="0" max="10">2</meter> <meter>2 out of 5</meter> <meter>10%</meter>
<nav> 定义导航链接。(注:如果文档中有“前后”按钮,则应该把它放到 <nav> 元素中。) 支持HTML5的全局属性和事件属性。
<nav> <a href="index.asp">Home</a> <a href="Previous.asp">Previous</a> <a href="Next.asp">Next</a> </nav>
<output> 定义不同类型的输出,比如脚本的输出。
for id of another element 定义输出域相关的一个或多个元素
form formname 定义输入字段所属的一个或多个表单
name unique name 定义对象的唯一名称。(表单提交时使用)
支持HTML5的全局属性和事件属性。
<progress> 定义任务(如下载)的过程,可以使用此标签来显示 JavaScript 中耗费时间的函数的进度。
max number 定义完成的值
value number 定义进程的当前值
支持HTML5的全局属性和事件属性。
<progress> <span id="progress">15</span>% </progress>
<ruby> 定义 ruby 注释(中文注音或字符)。在东亚使用,显示的是东亚字符的发音。ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。 支持HTML5的全局属性和事件属性。
<section> 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
cite URL 当 section 摘自 web 的时候使用
支持HTML5的全局属性和事件属性。
<source> 为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
media media query 定义媒介资源的类型,供浏览器决定是否下载
src url 媒介的 URL
type numeric value 定义播放器在音频流中播放起始位置。默认是从开头播放。
支持HTML5的全局属性和事件属性。
<time> 定义一个日期/时间,该元素能够以机器可读的方式对日期和时间进行编码,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。
datetime datetime 规定日期或时间。否则,由元素的内容给定日期或时间
pubdate pubdate 指示 <time> 元素中的日期或时间是文档的发布日期
支持HTML5的全局属性和事件属性。
<p>大家都是早上 <time>9:00</time> 上班。</p> <p><time datetime="2012-01-01">元旦</time>晚会。</p>
<video> 定义视频,比如电影片段或其他视频流。
autoplay autoplay 自动播放。
controls controls 显示控件。
height pixels 设置视频播放器的高度
loop loop 自动重播。
preload preload 预备播放。如果使用 "autoplay",则忽略该属性。
src url 视频的URL。
width pixels 设置视频播放器的宽度
支持HTML5的全局属性和事件属性。
<video src="movie.ogg" controls="controls"> 您的浏览器不支持 video 标签。(注:可以在开始标签和结束标签之间加上此文本内容,这样若浏览器不支持此元素,就可以显示出这个信息。) </video>

Words translated by CCJK

146,096,379

Request a call or contact us

  •  

    Call ccjk.support for professional assistance

  •  

    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00
  •  
    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

  •  
    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

  •  
    Leave a Message

    Please leave us a message and
    be as detailed as possible

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2018. All rights reserved.
TOP