HTML5初级教程新增标签学习-职坐标

HTML5初级教程新增标签学习

沉沙 2018-09-20 来源：阅读 1200 评论 0

摘要：本篇教程探讨了HTML5初级教程新增标签学习，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML5初级教程新增标签学习，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

1、article定义独立的内容，可以试论坛帖子、博客条目、报纸文章和用户评论
　　<article>after the announcement of thenew iPhone 4 at </article>
2、aside定义其所处内容之外的内容
　　<aside>after the announcement of thenew iPhone 4 at </aside>
3、audio定义音频
　　<audio src=”fla.wav”></audio>
　　audio属性：
　　autoplay:autoplay   音频在就绪后马上播放
　　proload:proload    音频在页面加载时进行加载，并预备播放
　　controls:controls   向用户显示控件，比如播放按钮
　　loop：loop   每当音频结束时，重新开始播放
4、vedio定义视频
　　vedio属性：
　　autoplay:autoplay   视频在就绪后马上播放
　　proload:proload    视频在页面加载时进行加载，并预备播放
　　controls:controls   向用户显示控件，比如播放按钮
　　loop：loop   每当视频结束时，重新开始播放
　　track 标签为video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
　　default：规定该轨道是默认的，假如没有选择任何轨道。
　　kind：captions、chapters、descriptions、metadata、subtitles。表示轨道属于什么文本类型。
　　label：轨道的标签或标题。
　　src：轨道的URL。
　　srclang：轨道的语言，若kind 属性值是 “subtitles”，则该属性必需的。
　　source 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
　　media：定义媒介资源的类型，供浏览器决定是否下载。
　　src：媒介的URL。
　　type：定义播放器在音频流中的什么位置开始播放。默认，音频从开头播放。
例如：
<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>
5、bdi将内容跟其他隔离
　　内容<bdi>隔离</bdi>内容
6、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>
7、command定义命令按钮比如单选按钮、复选框或按钮，只有位于menu标签内才可用
　　<menu>
　　　　<command onclick=”alert(‘Hello World’)”>Click Me!</command>
　　</menu>
　　目前只有ie9支持command
8、datalist定义input可能的值
　　<input id=”myCar” list=”cars” />
　　　　<datalist id=”cars”>
　　　　　　<option value=”BMW”>
　　　　　　<option value=”Ford”>
　　　　</datalist>
　　</input>
9、details标签用于描述文档或文档某个部分的细节；summary定义details的标题
　　<details>
　　　　<summary>HTML 5</summary>
　　　　<p>All pages and graphics on this website are the property of W3School.</p>
　　</details>
10、figure标签规定独立的流内容（图像、图表、照片、代码等等）
　　figcaption 标签定义 figure元素的标题
　　<figure>
　　　　<figcaption>黄浦江上的的卢浦大桥</figcaption>
　　　　<img src=”shanghai_lupu_bridge.jpg” width=”350″ height=”234″ />
　　</figure>
11、header标签定义页眉；footer标签定义页脚；nav定义导航；time定义日期时间
12、hgroup标签用于对网页或区段（section）的标题进行组合
13、keygen标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
　　<form action=”demo_keygen.asp” method=”get”>
　　　　Username: <input type=”text” name=”usr_name” />
　　　　Encryption: <keygen name=”security” />
　　　　<input type=”submit” />
　　</form>
keygen属性：
autofocus：使keygen 字段在页面加载时获得焦点。
challenge：如果使用，则将keygen 的值设置为在提交时询问。
disabled：禁用keytag 字段。
form：定义该keygen 字段所属的一个或多个表单。
keytype：定义keytype。rsa 生成 RSA 密钥。
name：定义keygen元素唯一名称。
14、meter标签定义度量衡。仅用于已知最大和最小值的度量
　　<meter min=”0″max=”20″>5</meter>
　　<meter>2out of 10</meter>
　　<meter>30%</meter>
meter属性：
high：定义度量的值位于哪个点，被界定为高的值。
low：定义度量的值位于哪个点，被界定为低的值。
max：定义最大值。默认值是1。
min：定义最小值。默认值是0。
optimum：定义什么样的度量值是最佳的值。如果该值高于high属性，则意味着越高越好；如果该值低于low属性的值，则意味着越低越好。
value：定义度量的值。
15、mark标签定义带有记号的文本，可以突出显示文本。
16、output标签定义不同类型的输出，比如脚本的输出。
　　<script type=”text/javascript”>
　　　　function write_sum(){
　　　　　　x=5;
　　　　　　y=3;
　　　　　　document.forms["sumform"]["sum"].value=x+y;
　　　　}
　　</script>
　　<body onload=”write_sum()”>
　　　　<form action=”form_action.asp” method=”get” name=”sumform”>
　　　　　　<output name=”sum”></output>
　　　　</form>
　　</body>
output属性：
for：定义输出域相关的一个或多个元素。
form：定义输入字段所属的一个或多个表单。
name：定义对象的唯一名称。（表单提交时使用）
17、progress标签定义运行中的进度（进程）
　　<progress>
　　　　<span id=”objprogress”>90</span>%
　　</progress>
progress属性：
max：定义完成的值。
Value：定义进程的当前值。
18、section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
　　<section>
　　　　<h1>PRC</h1>
　　　　<p>The People’s Republic of China was born in 1949…</p>
　　</section>
section属性：
cite：section的 URL，例如section 摘自 web 的话
19、ruby标签定义 ruby 注释（中文注音或字符）；rt 标签定义字符（中文注音或字符）的解释或发音；rp定义不支持ruby 元素的浏览器所显示的内容。
　　<ruby>
　　　　漢<rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
　　</ruby>