一、什么是HTML5
1.1 HTML5 简介
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,作为新HTML语言,具有新的元素、属性和行为
XHTML可扩展超文本标记语言
是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求,基础班学习的是XHTML
HTML5
有更大的技术集,允许更多样化和强大的网站和应用程序
增加了新特性:语义特性,本地存储特性,设备兼容特性,链接特性,网页多媒体特性,三维、图形以及特效特性,性能与集成特性,css特性
1.2 广义的HTML5
广义的HTML5是HTML5本身+CSS+JavaScript
HTML5的一些特性仍让不被某些浏览器支持,但是他是一种发展趋势
二、HTML5新增语义化标签
:头部标签
:导航标签
:内容标签
:块级标签
:侧边栏标签
:尾部标签
![80967d6b8d6a41c7b14cddd50ec343b9.jpg](https://img.136.la/20210515/80967d6b8d6a41c7b14cddd50ec343b9.jpg)
注意:以前经常使用的div标签是没有语义的,
这种语义化标准主要针对搜索引擎的
这些新标签也可以使用多次的
在IE9中,需要把这些元素转换为块级元素
其实我们移动端更喜欢使用这些标签
三、HTML5新增多媒体标签
音频:
视频:
3.1音频标签
1.音频格式
![5d9017df1a5f4597ac3fda575052587c.jpg](https://img.136.la/20210515/5d9017df1a5f4597ac3fda575052587c.jpg)
2.使用方法
您的浏览器不支持audio播放
3.常见属性
![5dda88085f974dd8b183cef319b3b5ae.jpg](https://img.136.la/20210515/5dda88085f974dd8b183cef319b3b5ae.jpg)
谷歌浏览器禁用了autoplay属性
3.2 视频标签
1.视频格式
![609494b46fbd498fbb065eeceadb83e4.jpg](https://img.136.la/20210515/609494b46fbd498fbb065eeceadb83e4.jpg)
2.语法格式
3. 参数属性
![6a871ce64b554abf8af04c93f68032e6.jpg](https://img.136.la/20210515/6a871ce64b554abf8af04c93f68032e6.jpg)
4. 使用方法
多媒体标签总结
- 音频标签与视频标签使用基本一致
- 多媒体标签在不同浏览器下情况不同,存在兼容性问题
- 谷歌浏览器把音频和视频标签的自动播放都禁止了
- 谷歌浏览器中视频添加 muted 标签可以自己播放
- 注意:重点记住使用方法以及自动播放即可,其他属性可以在使用时查找对应的手册
四、HTML5新增input表单、表单属性
![51dad695710c4d3eb93614e23e8b2bfc.jpg](https://img.136.la/20210515/51dad695710c4d3eb93614e23e8b2bfc.jpg)
这些HTML5 的表单大量应用于移动端,PC段不是很常用
新增属性
![17f9ef6e36d5447cb457bf1fc4c0e007.jpg](https://img.136.la/20210515/17f9ef6e36d5447cb457bf1fc4c0e007.jpg)
placeholder和value属性的区别在于:placeholder的字体是灰色的,而且点击输入框可以直接定位到开始,而value属性字体是黑色的,点击框框里面的内容要手动清除
用户名:
![5855c109588941aaba436fac9bba5e15.jpg](https://img.136.la/20210515/5855c109588941aaba436fac9bba5e15.jpg)