结构元素
- header
- footer
- section 部分,如章节、页眉、页脚等,配合h1~h6使用
- acticle
- aside
- nav
- main
- figure 表示文档主流内容中的一个独立单元,可以使用figcaption元素为figure元素组添加标题
功能元素
<video controls="controls"></video>
<audio controls="controls"></audio>
- embed 用来插入各种多媒体 格式可以使Midi、Wav、AIFF、AU、Mp3等
<embed src = "horse.wav">
- mark 主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字
- dialog 定义对话窗口 open 打开 close 关闭
<dialog open></dialog>
- bdi 定义文本的文本方向,使其脱离其周围文本的方向设置
- figcaption 定义figure的标题
<figure>
<figcaption>黄浦江上的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
<p>
我们在每天早上 <time>9:00</time> 开始营业。
</p>
<p>
我在 <time datetime="2010-02-14">情人节</time> 有个约会。
</p>
- canvas 画布
- output 表示不同类型的输出,比如脚本的输出
<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>
- source 为媒介元素(比如<video> 和 <audio>)定义媒介资源
拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件
<audio controls>
<source src="/i/horse.ogg" type="audio/ogg">
<source src="/i/horse.mp3" type="audio/mpeg">
您的浏览器不支持音频文件。
</audio>
- menu 菜单列表。当希望列出表单控件时使用该标签
<menu>
<li><input type="checkbox" />RED</li>
<li><input type="checkbox" />BLUE</li>
</menu>
- ruby 表示ruby注释(中文注音或字符)
- rt 表示字符的解释或发音
- rp 表示 在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
- wbr 表示软换行,与br的区别在于,br是在某一处必须换行,而wbr意思是浏览器或者父级窗口的宽度足够是就没必要换行。
- command 表示命令按钮,如单选按钮,复选框或按钮
浏览器支持情况较差
- details 表示用户要求得到并且可以得到的细节信息吗,它可以与summary元素配合使用。summary提供标题或图例。标题是可见的,单击标题时会显示细节信息
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
- detalist 表示元素可选的数据列表,与input元素配合使用,可以制作出输入值的下拉列表
<input list="cars" id="myCar">
<datalist id="cars">
<option value="bmm"></option>
<option value="bmm1"></option>
<option value="bmm2"></option>
</datalist>
- datagrid 表示可选数据的列表,它以树形列表的形式来显示。
- keygen 表示生成秘钥
<form action="/example/html5/demo_form.asp" method="get">
用户名:<input type="text" name="usr_name" />
加密:<keygen name="security" />
<input type="submit" />
</form>
- progress 表示运行中的进程,可以使用它来显示js中耗费时间的函数的进程,也可以用来表示进度
<progress value="22" max="100"></progress>
<meter value="3" min="0" max="10"></meter>
- track 定义用在媒体播放器中的文本轨道,播放带有字幕的视屏
<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>
表单元素
- tel 电话
- search 搜索
- url 地址
- email 邮箱
- datetime 表示日期时间的文本框
- date 表示日期
- month
- week
- time
- datetime-local 本地时间
- number
- range范围文本框
- color 颜色文本
- fieldset 标签将表单内容的一部分打包,生成一组相关表单的字段 <legend> 标签为 fieldset 元素定义标题。
<form>
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
</form>
网友评论