HTML5新增特性

• 广义的HTML5

  • 狭义的HTML5是指HTML语言的第五个版本

  • 而广义的HTML5是（HTML5 + CSS3 + JavaScript） 技术的综合

HTML5新增语义化标签

======================================================================

• 以前制作网页布局，我们基本用div来做。div就是一个普通的块级标签，对于搜索引擎来说，是没有语义的

<div class="header"></div>

<div class="nav"></div>

<div class="content"></div>

<div class="footer"></div>

• ： 头部标签
• ： 导航标签
• ： 主题标签

• ： 独立的内容标签

• ： 区段标签
• ： 侧边栏标签
• ： 尾部标签

注意事项

• 这种语义化标准主要针对搜索引擎的

• 这些新标签页面中可以多次使用

• 在IE9中，需要把这些元素转换为块级元素

• 其实，移动端更喜欢用这些标签

• HTML5还有很多其他标签

HTML5新增多媒体音频标签

========================================================================

HTML5在不适用插件的情况下也可以原生的支持音频格式文件的播放，当然支持的格式是由限的

• 音频格式：

| 格式 | MIME-type | IE9 | Firefox3.5 | Opera10.5 | Chrome3.0 | Safari3.0 |

| — | — | — | — | — | — | — |

| Ogg | audio / mpeg | | √ | √ | √ | |

| MP3 | audio / ogg | √ | | | √ | √ |

| Wav | audio / wav | | √ | √ | | √ |

• 音频标签语法格式

<audio src="文件地址" controls="controls"></audio>



<!-- H5中，如果标签的属性名与属性值相同，那么可以省略属性值不写 -->

<audio src="文件地址" controls></audio>



<!-- 兼容写法 -->

<audio controls="controls">

  <source src="xl.mp3" type="audio/mpeg"></source>

  <source src="xl.ogg" type="audio/ogg"></source>

  您的浏览器暂不支持audio标签

</audio>

• 音频标签常见属性

| 属性 | 值 | 描述 |

| — | — | — |

| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放 |

| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |

| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放 |

| preload | preload | 如果出现该属性，则音频在页面加载时进行预加载，并预备播放。如果使用"autoplay"，则忽略该属性 |

| src | url | 要播放的音频的URL |

HTML5新增多媒体视频标签

========================================================================

HTML5在不使用插件的情况下也可以原生的支持视频格式文件的播放，当然支持格式是由限的

• 视频格式

| 格式 | MIME-type | IE | Firefox | Opera | Chrome | Safari |

| — | — | — | — | — | — | — |

| Ogg | video/ogg | x | 3.5+ | 10.5+ | 5.0+ | x |

| MP4 | video/mp4 | 9.0+ | x | x | 5.0+ | 3.0+ |

| WebM | video/webm | x | 4.0+ | 10.6+ | 6.0+ | x |

<video src="文件地址" controls="controls"></video>



<!-- H5中，如果标签的属性名与属性值相同，那么可以省略属性值不写 -->

<video src="文件地址" controls></video>



<!-- 兼容写法 -->

<video controls="controls">

  <source src="xl.mp4" type="audio/mpeg"></source>

  <source src="xl.ogg" type="audio/ogg"></source>

  您的浏览器暂不支持audio标签

</video>

• 视频标签常见属性

| 属性 | 值 | 描述 |

| — | — | — |

| autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题） |

| controls | controls | 向用户显示播放控件 |

| loop | loop | 放完是否继续播放该视频，循环播放 |

| preload | auto(预先加载视频)；none(不应加载视频) | 规定是否预加载视频（如果有了autoplay就忽略该属性） |

| src | url | 视频url地址 |

| width | pixels(像素) | 设置播放器宽度 |

| height | pixels(像素) | 设置播放器高度 |

| poster | Imgurl | 加载等待的画面图片 |

| muted | muted | 静音播放 |

<video src="文件地址" controls muted width="200px" height="200px" poster="xl.jpg"></video>

总结

• 音频标签和视频标签使用基本一致

• 浏览器支持情况不同

• 我们可以给食品标签添加muted属性进行自动静音播放视频，音频不可以

• 视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用controls控件

HTML5新增input表单

========================================================================

H5新增表单类型

| 属性值 | 描述 |

| — | — |

| type=“email” | 限制用户输入必须为Email类型 |

| type=“url” | 限制用户输入必须为URL类型 |

| type=“date” | 限制用户输入必须为日期类型 |

| type=“time” | 限制用户输入必须为时间类型 |

| type=“month” | 限制用户输入必须为月类型 |

| type=“week” | 限制用户输入必须为周类型 |

| type=“number” | 限制用户输入必须为数字类型 |

| type=“range” | 滑动条 |

| type=“tel” | 手机号码 |

| type=“search” | 搜索框 |

| type=“color” | 生成一个颜色选择表单 |

<from action="">

  姓名：<input type="text">

  <br/>

  邮箱：<input type="email">

  <br/>

  个人网站：<input type="url">

  <br/>

  生日：<input type="date">

  <br/>

  时间：<input type="time">

  <br/>

#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/0df6b59783e15e80a4a49f621f4c0ed3.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/609004fcccb6556fb6bd35f438ddfba4.png)

![](https://img-blog.csdnimg.cn/img_convert/c0e2bca70a4273c8d80122c4e5dd065b.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
1469)]

[外链图片转存中...(img-vDYpguhd-1714865181470)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**