• 欢迎关注我的微信公众号“ frontEnd_Developer ” 右边扫描关注 --->>

HTML5新增标签收集整理 解释与应用

HTML5 神棍 436℃ 0评论

以下标签解释与应用不足之处,望留言指教,如有遗漏标签请留言! H5 大神多多指教!

<header>标签

定义一个页面或一个区域的头部。

<nav>标签

定义导航链接。(注:如果文档中有“前后”按钮,则应该把它放到 <nav> 元素中。)

<section>标签

定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

<article>标签

定义独立的内容,如论坛帖子、报纸文章、博客条目、用户评论等内容。

<aside>标签

定义两栏或多栏页面的侧边栏内容,如联系我们、客服、网站公告等内容。

<footer>标签

定义一个页面或一个区域的页脚。可包含文档的作者姓名、创作日期或者联系信息。

<video>标签

定义视频,比如电影片段或其他视频流。

<video src=”movie.ogg” controls=”controls”>

您的浏览器不支持 video 标签。(注:可以在开始标签和结束标签之间加上此文本内容,这样若浏览器不支持此元素,就可以显示出这个信息。)

</video>

属性:

autoplay 自动播放

Controls 显示控件

Loop     自动重播

Src    视频的URL。

Preload  预备播放。如果使用 “autoplay”,则忽略该属性。

Height   视频播放器的高度  为像素单位

Width    视频播放器的宽度  为像素单位

<audio>标签

定义音频内容,如音乐或其他音频流。属性与用法和 <video> 标签一样

<source>标签

为媒介元素(比如 <video> 和 <audio>)定义媒介资源。

属性:media   定义媒介资源的类型,供浏览器决定是否下载  media query

Src   媒介的 URL

Type    定义播放器在音频流中播放起始位置。默认是从开头播放。

<canvas>标签

定义图形,如图表和其他图像。(注:<canvas> 只是图形容器,我们必须使用脚本来绘制图形。)

属性:height     设置 canvas 的高度

Weight  设置 canvas 的宽度

例子:

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

<time>标签

定义一个日期/时间,该元素能够以机器可读的方式对日期和时间进行编码,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。

属性:datetime   规定日期或时间。否则,由元素的内容给定日期或时间

Pubdate   指示 <time> 元素中的日期或时间是文档的发布日期

例子:

<p>大家都是早上 <time>9:00</time> 上班。</p>

<p><time datetime=”2012-01-01″>元旦</time>晚会。</p>

<ruby>标签

定义 ruby 注释(中文注音或字符)。在东亚使用,显示的是东亚字符的发音。ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 “ruby” 元素时显示的内容。

<progress>标签

定义任务(如下载)的过程,可以使用此标签来显示 JavaScript 中耗费时间的函数的进度。

属性:max    定义完成的值  为数字

Value   定义进程的当前值  为数字

例子:

<progress>

<span id=”progress”>15</span>%

</progress>

<output>标签

定义不同类型的输出,比如脚本的输出。

属性:for     定义输出域相关的一个或多个元素    id of another element

Form   定义输入字段所属的一个或多个表单   formname

Name  定义对象的唯一名称。(表单提交时使用)  unique name

<meter>标签

定义度量衡。仅用于已知最大和最小值的度量。(注:必须定义度量的范围,既可以在元素的文本中,也可以在 min/max 属性中定义。)

属性:high   定义度量的值位于哪个点,被界定为高的值

Low    定义度量的值位于哪个点,被界定为低的值

Max    定义最大值。默认值是 1

Min  定义最小值。默认值是 0

Optimum   定义什么样的度量值是最佳的值。如果该值高于 “high” 属性,则意味着值越高越好。如果该值低于 “low” 属性的值,则意味着值越低越好。

Value     定义度量的值

以上所有的值都为数字

例子:

<meter min=”0″ max=”10″>2</meter>

<meter>2 out of 5</meter>

<meter>10%</meter>

<mark>标签

定义有标记的文本。请在需要突出显示文本时使用此标签。

<p>I like <mark>apple</mark> most.</p>

<hgroup>标签

定义文件中一个区块的相关信息,使用 <hgroup> 标签对网页或区段(section)的标题进行组合。

例子:

<hgroup>

<h1>Welcome my world!</h1>

<h2>This is a title.</h2>

</hgroup>

<keygen>标签

定义表单里一个生成的键值。规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。

属性:autofocus   使 keygen 字段在页面加载时获得焦点   autofocus

Challenge    如果使用,则将 keygen 的值设置为在提交时询问  challenge

Disabled     禁用 keytag 字段      disabled

Form        定义该 keygen 字段所属的一个或多个表单  formname

Keytype      定义 keytype。rsa 生成 RSA 密钥    rsa

Name        定义 keygen 元素的唯一名称,用于在提交表单时搜集字段的值。  Fieldname

例子:

<form action=”demo_keygen.asp” method=”get”>

Username: <input type=”text” name=”usr_name” />

Encryption: <keygen name=”security” />

<input type=”submit” />

</form>

<figure>标签

定义一组媒体内容(图像、图表、照片、代码等)以及它们的标题。如果被删除,则不应对文档流产生影响。

<embed>标签

定义外部的可交互的内容或插件。

属性:height   设置嵌入内容的高度

Width    设置嵌入内容的宽度

Src       嵌入内容的 URL

Type      定义嵌入内容的类型

例子:<embed src=”someone.swf” />

<details>标签

用于描述文档或文档某个部分的细节。

属性: open  定义 details 是否可见

例子:

<details>

<summary>Some title.</summary>

<p>Some details about the title.</p>

</details>

<datalist> 标签

定义选项列表,需与 input 元素配合使用,通过input 元素的 list 属性来绑定,用来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

例子:

<input id=”fruits” list=”fruits” />

<datalist id=”fruits”>

<option value=”Apple”>

<option value=”Banana”>

</datalist>

<command>标签

标记定义一个命令按钮,比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。

属性:checked   定义是否被选中。仅用于 radio 或 checkbox 类型  checked

disabled   定义 command 是否可用

Icon  定义作为 command 来显示的图像的url

Label  为 command 定义可见的 label   text

Radiogroup   定义 command 所属的组名。仅在类型为 radio 时使用   groupname

Type  定义该 command 的类型。默认是 “command”   checkbox  Command  radio

 

重新定义的HTML标签

<b> 代表内联文本,通常是粗体,没有传递表示重要的意思
<i> 代表内联文本,通常是斜体,没有传递表示重要的意思
<dd> 可以同details与figure一同使用,定义包含文本,dialog也可用
<dt> 可以同details与figure一同使用,汇总细节,dialog也可用
<hr> 表示主题结束,而不是水平线,虽然显示相同
<menu> 重新定义用户界面的菜单,配合commond或者menuitem使用
<small> 表示小字体,例如打印注释或者法律条款
<strong> 表示重要性而不是强调符号

话说  棍哥我 整理了一晚上 ,看完了你就不留言指教两句吗?

转载请注明:Falost的小窝 » HTML5新增标签收集整理 解释与应用

如果你觉得这篇文章不错或者对你有帮助,想请我喝一杯咖啡,可以打赏
喜欢 (17)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址