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 | 可以多选文件提交。 |