HTML5
1. HTML5的新特性
HTML5的新增特性主要是针对以前的不足,添加了一些新标签、新的表单和新的表单属性等。
1.1 HTML5新增的语义化标签
<header>:头部标签。 |
<nav>:导航标签。 |
<article>:内容标签。 |
<section>:定义文档某个区域。 |
<aside>:侧边栏标签。 |
<footer>:尾部标签。 |
注意:
这种语义化标准主要是针对搜索引擎的,在新标签页面中可以使用多次。在IE9中,需要把这些元素转换为块级元素。
1.2 HTML5新增多媒体标签
使用它们可以很方便的在页面中嵌入音频和视频,而不在去使用flash和其他浏览器插件。
HTML5在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然,支持的格式是有限的。
1.2.1 视频<video>
视频<audio>元素支持三种音频格式:
浏览器 |
MP4 |
WebM |
Ogg |
Internet Explorer |
YES |
NO |
NO |
Chrome |
YES |
YES |
YES |
Firefox |
YES 从 Firefox 21 版本开始 |
YES |
YES |
Safari |
YES |
NO |
NO |
Opera |
YES 从Opera 25版本开始 |
YES |
YES |
语法:
<video src="文件地址" controls="controls"></video > <video controls="controls" width="300"> <source src="move.ogg" type="video/ogg" > |
视频<video>——常见属性
属性 |
值 |
描述 |
autoplay |
autoplay |
视频就緒自动插放(谷歐浏览器需要添加muted来解 |
controls |
controls |
向用户量示播放控件。 |
width |
pixels(像素) |
设置播放器宽度。 |
height |
pixels(像素) |
设置插放噐高庋。 |
loop |
loop |
播放完是否继续播放该视频,循环播放。 |
preload |
auto(预先加载视频) none(不应加载视频) |
规定是否预加载视频(如果有了autoplay 就忽路该属 |
src |
url |
视频ur地址。 |
poster |
Imgurl |
加载等待的画面图片。 |
muted |
muted |
静音播放。 |
1.2.2 音频<audio>
<audio>元素支持三种音频格式:
浏览器 |
MP3 |
Wav |
Ogg |
Internet Explorer |
YES |
NO |
NO |
Chrome |
YES |
YES |
YES |
Firefox |
YES |
YES |
YES |
Safari |
YES |
YES |
NO |
Opera |
YES |
YES |
YES |
语法:
<audio src="文件地址" controls="controls"></audio> < audio controls="controls"> <source src="happy .mp3" type="audio/mpeg"> <source src="happy.ogg" type="audio/ogg"> |
音频<audio>——常见属性
属性 |
值 |
描述 |
autoplay |
autoplay |
如果出现该属性,则音频在就绪后马上播放。 |
controls |
controls |
如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop |
loop |
如果出现该属性,则每当音频结束时重新开始播放。 |
src |
url |
要播放的音频的 URL。 |
1.3 HTML5 新增的 input 类型
属性值 |
说明 |
type="email" |
限制用户输入必须为Email类型。 |
type="url" |
限制用户输入必须为URL类型。 |
type="date" |
限制用户输入必须为日期类型。 |
type="time" |
限制用户输入必须为时间类型。 |
type="month" |
限制用户输入必须为月类型。 |
type="week" |
限制用户输入必须为周类型。 |
type="number" |
限制用户输入必须为数字类型。 |
type="tel" |
手机号码。 |
type="search" |
搜索框。 |
type="color" |
生成一个颜色选择表单。 |
1.4 HTML5 新增的表单属性
属性 |
值 |
说明 |
required |
required |
表单拥有该属性表示其内容不能为空,必填。 |
placeholder |
提示文本 |
表单的提示信息,存在默认值将不显示。 设置方式修改placeholder里面的字体颜色: input::placeholder {
}
|
autofocus |
autofocus |
自动聚焦属性,页面加载亮成自动聚焦到指定表单。 |
autocomplete |
off / on |
当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。 |
multiple |
multiple |
可以多选文件提交。 |