HTML5新标签学习笔记

文章相关

<article> ：定义文章
<aside>:定义页面内容之外的内容。(侧边栏)
<bdi>：定义文本的文本方向，使其脱离其周围文本的方向设置。
浏览器支持：IE不支持
<details>：指定了更多细节,元素的内容可以查看或隐藏。
<dialog>：定义了一个对话框或窗口。元素很容易创建网页上弹出对话框和模态窗口
浏览器支持：IE不支持
<figcaption>：定义 figure 元素的标题。
<figure>：定义了自包含的内容,如插图、图表、照片、代码清单等。
默认动作：

figure { 
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}

<footer>:定义 section 或 page 的页脚。
<header>:定义 section 或 page 的页眉。
<main>:标记指定文档的主要内容。
元素中的内容应该是惟一的文档。它不应该包含任何内容重复等文件栏,导航链接、版权信息、网站标志,搜索表单。
不能超过一个<主要>元素在文档中。<main>元素不能是<article>, <aside>, <footer>, <header>, or <nav>元素的后代
<mark>:定义有记号的文本。
默认动作：

mark {
    background-color: yellow;
    color: black;
}

<menuitem>：定义一个命令/菜单项弹出菜单,用户可以调用。
浏览器支持：仅firefox8.0支持
<meter>：定义了一个已知的范围内的标量测定（量规），不应该用来显示进度(如一个进度条)。进度条,使用<进展>标记。
<nav>：定义导航链接。
<progress>：定义了任务的进展
<rp>：定义若浏览器不支持 ruby 元素显示的内容。
<rt>：定义 ruby 注释的解释。
默认动作：

rt {
    line-height: normal;
}

<ruby>：定义了一个ruby注释
<section>：定义在文档,如章节、页眉,页脚,或任何其他文档的部分。
<summary>：为 <details> 元素定义可见的标题
浏览器支持：IE不支持
<time>：定义日期/时间。
<wbr>：为指定的文本添加一个换行符。

新的表单元素

标签	描述
< datalist >	定义下拉列表
< keygen >	定义生成密钥
< output >	定义输出的一些类型

浏览器支持：IE不支持 (以上三个)

新的输入类型

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

新输入属性

autocomplete //指定一个表单或输入字段是否应该自动完成。
autofocus //自动对焦(布尔属性)
form //表单属性指定一个或多个<input>元素属于形式。
formaction //指定一个文件的URL,将处理表单提交时输入控件
formenctype //指定应该如何编码的格式提交到服务器时(只对<form method='post'>)。
formmethod //定义以HTTP方法发送表单数据到action URL。
formnovalidate //指定<input>元素不应提交时验证(布尔属性)
formtarget //指定一个名称或关键字,显示提交表单后,接收到的响应。
height and width
list //< datalist >元素包含预定义的选项出现在<input>元素里。
min and max
multiple //指定用户可以输入多个值
pattern (regexp) //指定一个正则表达式,检查<input>元素输入的值
placeholder
required //表格提交前必须输入一个字段
step //指定输入的间隔，如数量，日期等

More HTML Input Types.
More HTML Input Attributes

HTML5-新的属性语法

HTML5允许四种不同的语法属性:
这个例子演示了在<input>标签的不同语法形式：

标签	举例
Empty（空）	< input type="text" value="John" disabled >（disabled 禁用）
Unquoted（未加引号）	< input type="text" value="John" >
Double-quoted（双引号）	< input type="text" value="John Doe" >
Single-quoted（单引号）	< input type="text" value='John Doe' >

在HTML5，所有四个语法可以使用，这取决于什么是属性的需要

HTML5 Graphics(HTML5图形)

标签	描述
< canvas >	定义使用JavaScript图形绘制图形。
< svg >	定义使用矢量图绘制图形。

阅读更多关于HTML5 canvas
阅读更多关于HTML5 SVG

New Media Elements(新媒体元素)

标签	描述
< audio >	定义声音内容
< embed >	定义外部交互内容或插件。
< source >	定义媒体资源
< track >	定义用在媒体播放器中的文本轨道。
< video >	定义视频。

阅读更多关于HTML5 <video>

阅读更多关于HTML5 <audio>