首页 > 代码库 > html-5
html-5
一、<article> 标签：标签规定独立的自包含内容，
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源：
- 论坛帖子
- 报纸文章
- 博客条目
- 用户评论
<article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p></article>
二、<aside> 标签：
标签定义其所处内容之外的内容、aside 的内容应该与附近的内容相关、<aside> 的内容可用作文章的侧栏。
<p>Me and my family visited The Epcot center this summer.</p><aside><h4>Epcot Center</h4>The Epcot Center is a theme park in Disney World, Florida.</aside>
三、<audio> 标签：
1、Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <audio> 标签。
注释：Internet Explorer 8 以及更早的版本不支持 <audio> 标签。
2、<audio> 标签定义声音，比如音乐或其他音频流。
3、可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
4、<audio src="http://www.mamicode.com/someaudio.wav">
您的浏览器不支持 audio 标签。</audio>
四、<bdi> 标签：把用户名从周围的文本方向设置中隔离出来：
1、定义和用法
bdi 指的是 bidi 隔离。
<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。
在发布用户评论或其他您无法完全控制的内容时，该标签很有用。
2、属性dir:
- ltr
- rtl
- auto
- 以上三个可选内容、规定 <bdi> 元素内的文本的文本方向。默认值：auto。
五、<canvas> 标签：
1、定义和用法
<canvas> 标签定义图形，比如图表和其他图像。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
2、width：高度 ；height：宽度；PX
3、如何通过 canvas 元素来显示一个红色的矩形：
<canvas id="myCanvas"></canvas><script type="text/javascript">var canvas=document.getElementById(‘myCanvas‘);var ctx=canvas.getContext(‘2d‘);ctx.fillStyle=‘#FF0000‘;ctx.fillRect(0,0,80,100);</script>六、<command> 标签：
1、定义和用法：
command 元素表示用户能够调用的命令。
<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。
只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。
2、
| checked | checked | 定义是否被选中。仅用于 radio 或 checkbox 类型。 |
| disabled | disabled | 定义 command 是否可用。 |
| icon | url | 定义作为 command 来显示的图像的 url。 |
| label | text | 为 command 定义可见的 label。 |
| radiogroup | groupname | 定义 command 所属的组名。仅在类型为 radio 时使用。 |
| type |
| 定义该 command 的类型。默认是 "command"。 |
3、
实例
标记一个按钮：
<menu><command onclick="alert(‘Hello World‘)">Click Me!</command></menu>
七、<datalist> 标签：
1、定义和用法
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
2、实例：下面是一个 input 元素，datalist 中描述了其可能的值：
<input id="myCar" list="cars" /><datalist id="cars"><option value="http://www.mamicode.com/BMW"> <option value="http://www.mamicode.com/Ford"> <option value="http://www.mamicode.com/Volvo"></datalist>
八、<details> 标签：
1、定义和用法
<details> 标签用于描述文档或文档某个部分的细节。
2、与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
3、open：定义 details 是否可见。
4、关于文档的细节：
<details><summary>Copyright 2011.</summary><p>All pages and graphics on this web site are the property of W3School.</p></details>
九、<dialog> 标签：
1、定义和用法：<dialog> 标签定义对话框或窗口
2、open：规定 dialog 元素是活动的，用户可与之交互
3、使用 <dialog> 元素：
<table border="1"><tr> <th>一月 <dialog open>这是打开的对话窗口</dialog></th> <th>二月</th> <th>三月</th></tr><tr> <td>31</td> <td>28</td> <td>31</td></tr></table>
十、<embed> 标签：
1、定义和用法
<embed> 标签定义嵌入的内容，比如插件。
2、
| height | pixels | 设置嵌入内容的高度。 |
| src | url | 嵌入内容的 URL。 |
| type | type | 定义嵌入内容的类型。 |
| width | pixels | 设置嵌入内容的宽度。 |
3、
实例
<embed src="http://www.mamicode.com/helloworld.swf" />
十一、<figcaption> 标签：
1、定义和用法
<figcaption> 标签定义 figure 元素的标题（caption）。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
2、用作文档中插图的图像，带有一个标题：：
<figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="http://www.mamicode.com/shanghai_lupu_bridge.jpg" width="350" height="234" /></figure>十二、<figure> 标签：
1、定义和用法
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
2、请使用 <figcaption> 元素为 figure 添加标题（caption）。
3、用作文档中插图的图像：
<figure> <p>黄浦江上的的卢浦大桥</p> <img src="http://www.mamicode.com/shanghai_lupu_bridge.jpg" width="350" height="234" /></figure>
html-5