标签 | 描述 |
---|---|
<article> | 定义文档内的文章。 |
<aside> | 定义页面内容之外的内容。 |
<bdi> | 定义与其他文本不同的文本方向。 |
<details> | 定义用户可查看或隐藏的额外细节。 |
<dialog> | 定义对话框或窗口。 |
<figcaption> | 定义 <figure> 元素的标题。 |
<figure> | 定义自包含内容,比如图示、图表、照片、代码清单等等。 |
<footer> | 定义文档或节的页脚。 |
<header> | 定义文档或节的页眉。 |
<main> | 定义文档的主内容。 |
<mark> | 定义重要或强调的内容。 |
<menuitem> | 定义用户能够从弹出菜单调用的命令/菜单项目。 |
<meter> | 定义已知范围(尺度)内的标量测量。 |
<nav> | 定义文档内的导航链接。 |
<progress> | 定义任务进度。 |
<rp> | 定义在不支持 ruby 注释的浏览器中显示什么。 |
<rt> | 定义关于字符的解释/发音(用于东亚字体)。 |
<ruby> | 定义 ruby 注释(用于东亚字体)。 |
<section> | 定义文档中的节。 |
<summary> | 定义 <details> 元素的可见标题。 |
<time> | 定义日期/时间。 |
<wbr> | 定义可能的折行(line-break)。 |
HTML 5 视频
如需在 HTML5 中显示视频,您所有需要的是:
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
control 属性供添加播放、暂停和音量控件。
包含宽度和高度属性也是不错的主意。
使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放,即是否循环。 |
preload | preload |
如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
HTML 5 音频
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
control 属性供添加播放、暂停和音量控件。
使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器,音频文件必须是 MP3 或 Wav 类型。
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:
Internet Explorer 8 不支持 audio 元素。在 IE 9 中,将提供对 audio 元素的支持。
拖放(Drag 和 drop)是 HTML5 标准的组成部分。
HTML 5 应用程序缓存
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
-
浏览器支持
所有主流浏览器均支持应用程序缓存,除了 Internet Explorer。
-
如需启用应用程序缓存,请在文档的 <html> 标签中包含 manifest 属性:
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html
-
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
manifest 文件的建议的文件扩展名是:".appcache"。
HTML 5 服务器发送事件
- 所有主流浏览器均支持服务器发送事件,除了 Internet Explorer。
-
实例
var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br />"; };
-
例子解释:
- 创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
- 每接收到一次更新,就会发生 onmessage 事件
- 当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中
HTML5 Input 类型
1、<input type="email" name="user_email" />
2、<input type="url"
name="user_url" />
3、<input type="number"
name="points" min="1" max="10" />
请使用下面的属性来规定对数字类型的限定:
属性 | 值 | 描述 |
---|---|---|
max | number | 规定允许的最大值 |
min | number | 规定允许的最小值 |
step | number | 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等) |
value | number | 规定默认值 |
4、<inputtype="range"
name="points" min="1" max="10" />
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。可添加的属性值和number相同
5、<input type="date"
name="user_date" />
输入类型 "month"
输入类型 "week"
输入类型 "time"
输入类型 "datetime"
输入类型 "datetime-local"
HTML5 表单属性
1、
autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注释:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
2、
autofocus 属性
autofocus 属性规定在页面加载时,域自动地获得焦点。
注释:autofocus 属性适用于所有 <input> 标签的类型。
实例
User name: <input type="text" name="user_name" autofocus="autofocus"
/>
form 属性
form 属性规定输入域所属的一个或多个表单。
注释:form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id:
<form action="demo_form.asp" method="get" id="user_form"> First name:<input type="text" name="fname" /> <input type="submit" /> </form> Last name: <input type="text" name="lname"form="user_form"
/>
Last name写在表单之外,但仍然是表单的一部分
height 和 width 属性
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注释:height 和 width 属性只适用于 image 类型的 <input> 标签。
<input type="image" src="img_submit.gif"width="99"
height="99"
/>
min、max 和 step 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)。
注释:min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。
下面的例子显示一个数字域,该域接受介于 0 到 10 之间的值,且步进为 3(即合法的值为 0、3、6 和 9):
实例
Points: <input type="number" name="points"min="0"
max="10"
step="3"
/>
multiple 属性
multiple 属性规定输入域中可选择多个值。
注释:multiple 属性适用于以下类型的 <input> 标签:email 和 file。
实例
Select images: <input type="file" name="img" multiple="multiple"
/>
multiple 属性
multiple 属性规定输入域中可选择多个值。
注释:multiple 属性适用于以下类型的 <input> 标签:email 和 file。
实例
Select images: <input type="file" name="img" multiple="multiple"
/>
placeholder 属性
placeholder 属性提供一种提示(hint),描述输入域所期待的值。
注释:placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:
实例
<input type="search" name="user_search" placeholder="Search W3School"
/>
required 属性
required 属性规定必须在提交之前填写输入域(不能为空)。
注释:required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
实例
Name: <input type="text" name="usr_name" required="required"
/>