一.HTML5简介
-
是万维网的核心语言
-
标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。
-
用于取代HTML4与XHTML的新一代标准版本，所以叫HTML5
1. H5新变化
XHTML 可扩展超文本标记语言
XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求
2.关于HTML5
-
HTML5的设计目的是为了在移动设备上支持多媒体。
-
增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3 特性。
-
废弃一些元素和属性比如 font 、center 等
3.H5优势
-
提高可用性和改进用户的友好体验
-
更好的语义化标签
-
可以给站点带来更多的多媒体元素(视频和音频)
-
可以很好的替代FLASH和Silverlight
-
当涉及到网站的抓取和索引的时候，对于SEO很友好；
-
将被大量应用于移动应用程序和游戏
-
可移植性好
4.H5劣势
- 该标准并未能很好的被PC端浏览器所支持
- IE9以下的浏览器几乎都不兼容
5.H5广义狭义
-
狭义的 HTML5 是指 HTML 语言的第 5 个版本。
-
而广义的 HTML5 是 HTML5本身 + CSS3 + JavaScript 技术的综合。
二.HTML5新增语义化标签
-
<header>：头部标签 -
<nav>：导航标签 -
<main>: 主体标签 -
<article>：独立的内容标签 -
<section>：区段标签 -
<aside>：侧边栏标签 -
<footer>：尾部标签
1. 关于新增语义化标签
-
这种语义化标准主要针对搜索引擎的
-
这些新标签页面中可以使用多次的
-
在IE9中，需要把这些元素转换为块级元素
-
移动端更喜欢使用这些标签
三.HTML5新增多媒体标签
1.audio音频标签
| 格式 | MIME-type | IE9 | Firefox3.5 | Opera10.5 | Chrome3.0 | Safari3.0 |
|---|---|---|---|---|---|---|
| Ogg | audio/ogg | √ | √ | √ | ||
| MP3 | audio/mpeg | √ | √ | √ | ||
| Wav | audio/wav | √ | √ | √ |
1.兼容写法
<source src="media/snow.mp3" type="audio/mpeg">
<source src="media/snow.ogg" type="audio/ogg">
您的浏览器版本过低，不支持音频播放
</audio>
2.常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 音频在就绪后马上播放 |
| controls | controls | 向用户显示控件，比如播放按钮 |
| loop | loop | 当音频结束时重新开始播放 |
| preload | preload | 音频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性 |
| src | url | 要播放音频的URL |
2.video视频标签
| 格式 | MIME-type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|---|
| Ogg | video/ogg | 3.5+ | 10.5+ | 5.0+ | ||
| MP4 | video/mpeg | 9.0+ | 5.0+ | 3.0+ | ||
| WebM | video/wav | 4.0+ | 10.6+ | 6.0+ |
1.兼容写法
<video controls width="200px">
<source src="media/video.mp4" type="video/mp4">
<source src="media/video.ogg" type="video/ogg">
您的浏览器版本过低，不支持 video 视频标签
</video>
2.常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频在就绪后马上播放（谷歌浏览器需要添加muted来解决自动播放问题） |
| controls | controls | 向用户显示控件 |
| loop | loop | 当视频结束时重新开始播放 |
| preload | preload | 规定是否预加载视频如果使用autoplay，则忽略该属性 |
| src | url | 要播放的URL |
| width | px | 设置播放器宽度 |
| height | px | 设置播放器高度 |
| poster | imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
3.总结
-
音频标签和视频标签使用基本一致
-
浏览器支持情况不同
-
我们可以给视频标签添加 muted 属性进行自动静音播放视频，音频不可以
-
视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用 controls 控件。
四.HTML5新增表单标签
1.输入标签
| 属性值 | 描述 |
|---|---|
| type="email" | 限制用户输入必须为Email类型 |
| type="url" | 限制用户输入必须为URL类型 |
| type="date" | 限制用户输入必须为日期类型 |
| type="time" | 限制用户输入必须为时间类型 |
| type="month" | 限制用户输入必须为月类型 |
| type="week" | 限制用户输入必须为周类型 |
| type="number" | 限制用户输入必须为数字类型 |
| type="range" | 滑动条 |
| type="tel" | 手机号码 |
| type="search" | 搜索框 |
| type="color" | 生成一个颜色选择表单 |
<datalist>标签
-
标签规定了 元素可能的选项列表。
-
元素包含了一组元素，这些元素表示预定义可选值，在元素输入 过程中，会自动响应元素的值。
-
绑定的标签必须设置 list 属性，属性值等于标签的 id 属性值。
城市：<input type="text" list="list01">
<!-- 预定义一些选项 -->
<datalist id="list01">
<option value="广州">gz</option>
<!-- <option value="广州"> -->
<option value="深圳">sz</option>
<!-- <option value="广州"> -->
<option value="北京">bj</option>
<option value="上海">
</datalist>
2.表单属性
| 属性 | 值 | 描述 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页 面中放1个 |
| autocomplete | off / on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应 该显示出在字段中填写的选项。 默认已经打开，如 autocomplete=”on “ 关闭 autocomplete =”off” -需要放在表单内同时加上name属性 -同时成功提交 |
| multiple | multiple | 可以多选文件提交 |
