HTML5新元素

2016-07-04  本文已影响35人  郭子林

New Semantic/Structural Elements(新的语义/结构性元素)####

HTML5为了更好的文档结构提供了新元素

Tag Description
<article> 在文档中定义文章
<aside> 定义页面内容侧边栏的内容
<bdi> 定义文本的文本方向,使其脱离其周围文本的方向设置。
<command> 命令按钮
<details> 元素细节
<dialog> 对话窗或者窗口
<embed> 外部交互内容或者插件
<figcaption> figure元素的标题
<figure> 定义媒介内容的分组,以及它们的标题。
<footer> 定义 section 或 page 的页脚。
<header> 定义 section 或 page 的页眉。
<main> 文档的主要内容
<mark> 被标记或者高亮的文本
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。
<meter> 预定义范围内的度量
<nav> 文档中的导航链接
<progress> 任务进度
<rp> 浏览器不支持ruby注释时显示的内容
<rt> 定义 ruby 注释的解释。
<ruby> ruby注释
<section> 在文档中定义section区块
<summary> 为detail元素定义一个明显的标题
<time> 时间/日期
<wbr> 规定在文本中的何处适合添加换行符。

New Form Elements(新的表单元素)

Tag Description
<datalist> 定义下拉列表
<keygen> 定义生成密钥
<output> 定义输出的类型。

New Input Types(新的Input 类型)

New Input Types New Input Attributes
<ul><li>color</li><li>date</li><li>datetime</li><li>datetime-local</li><li>eamil</li><li>month</li><li>number</li><li>range</li><li>search</li><li>tel</li><li>time</li><li>url</li><li>week</li></ul> <ul><li>autocomplete</li><li>autofocus</li><li>form</li><li>formaction</li><li>formenctype</li><li>formtarget</li><li>formtarget</li><li>height and width</li><li>list</li><li>min and max</li><li>multiple</li><li>pattern</li><li>placeholder</li><li>required</li><li>step</li></ul>

HTML5 ­ New Attribute Syntax(HTML5新的属性语法)

HTML5支持下面四种属性写法,采用哪一种取决于属性的需要。(以Input元素为例)

Tag Description
Empty <input type="text" value="John" disabled >
Unquoted <input type="text" value=John >
Double-quoted <input type="text" value="John">
Single-quoted <input type="text" value='John' >

HTML5 Graphics(制图)

Tag Description
<canvas> 使用JavaScript画图的画布
<svg> 使用SVG画图的图表

New Media Elements(新媒体元素)

Tag Description
<audio> 定义声音或音乐内容
<embed> 定义外部内容或插件
<source> video与audio的sources
<track> video与audio的tracks
<video> 定义视频或电影内容
上一篇 下一篇

猜你喜欢

热点阅读