【Web前端】 HTML5

今天药忘吃喽~ 2024-04-08 09:35 93阅读 0赞

#### 目录 ####

*  1、什么是HTML5
 *   *  （1） HTML5简介
     *  （2）广义的HTML5
 *  2、H5 新增语义化标签
 *  3、H5 新增多媒体标签
 *   *  （1）\`<audio>\` 音频标签
     *  （2）\`<video>\` 视频标签
 *  4、H5 新增input表单、表单属性

## 1、什么是HTML5 ##

### （1） HTML5简介 ###

**万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。作为新HTML语言，具有新的元素，属性和行为**

*  **`XHTML` 可扩展超文本标记语言**：XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求 。
 *  **`HTML`**：它有更大的技术集，允许更多样化和强大的网站和应用程序。**增加了新特性**：`语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性`。这个集合有时称为HTML5和朋友，通常缩写为HTML5。

### （2）广义的HTML5 ###

*  广义的HTML5 是 HTML5本身 + CSS3 + JavaScript
 *  虽然HTML5的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势
 *  HTML5 MDN 介绍： [https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML][https_developer.mozilla.org_zh-CN_docs_Web_Guide_HTML_HTML]

## 2、H5 新增语义化标签 ##

**标签语义化**：以前布局，我们基本用div 来做。 div 对于搜索引擎来说，是没有语义的。

**新增语义化标签**

*  `<header>`：头部标签
 *  `<nav>`：导航标签
 *  `<article>`：内容标签
 *  `<section>`：块级标签
 *  `<aside>`：侧边栏标签
 *  `<footer>`：尾部标签

**注意：**

*  这种语义化标准主要针对搜索引擎的
 *  这些新标签页面中可以使用多次的
 *  在IE9中，需要把这些元素转换为块级元素
 *  其实，我们移动端更喜欢使用这些标签,HTML5 还增加了很多其他标签

## 3、H5 新增多媒体标签 ##

**多媒体标签包含两个：**

*  音频：`<audio>`
 *  视频：`<video>`

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的 flash 和其他浏览器插件

### （1）`<audio>` 音频标签 ###

**音频格式**

![在这里插入图片描述][9460181ab89b4fbcb0310fb673391cc0.png]

**`<audio>` 音频标签语法格式**

<audio controls="controls" >
    <source src="happy.mp3" type="audio/mpeg" >
    <source src="happy.ogg" type="audio/ogg" >
    您的浏览器暂不支持audio标签。
     </audio>

**`<audio>` 音频标签常见属性**

![在这里插入图片描述][0e5db901d86a4feeae84e4d728abef0c.png]

### （2）`<video>` 视频标签 ###

![在这里插入图片描述][5055ea333e794e89bad2b21aaabc3f48.png]

**`<video>` 视频标签语法格式**

<video controls="controls" width="300">
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的浏览器暂不支持video标签。播放视频
    </video >

**`<video>` 视频标签常见属性**

![在这里插入图片描述][ac3ee1dc98f84065a0ed047dc39012f4.png]

**总结**

*  音频标签和视频标签使用基本一致
 *  浏览器支持情况不同
 *  谷歌浏览器把音频和视频自动播放禁止了
 *  我们可以给视频标签添加 muted 属性可以自定播放视频，音频不可以
 *  视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性

## 4、H5 新增input表单、表单属性 ##

**表一：**

![在这里插入图片描述][1cd0cc4dac9e444890fcd3b0d328b837.png]

**表二：**

![在这里插入图片描述][31bf254da51441b48adc46eda9be51a5.png]

--------------------

看到最后，点个赞吧！

[https_developer.mozilla.org_zh-CN_docs_Web_Guide_HTML_HTML]: https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML
[9460181ab89b4fbcb0310fb673391cc0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/c7528ac5d12149aaa2e0a8eff02a9b04.png
[0e5db901d86a4feeae84e4d728abef0c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/6b3d32d11b34423bae1976536af4495d.png
[5055ea333e794e89bad2b21aaabc3f48.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/31bbbfdc097f4f518e541b36e7bcd371.png
[ac3ee1dc98f84065a0ed047dc39012f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/255adfdfc1254a4aa29f8fead0d0e64a.png
[1cd0cc4dac9e444890fcd3b0d328b837.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/e63b7259fb034e9dba0a159086a740b4.png
[31bf254da51441b48adc46eda9be51a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/f616c0ea0de54078a5591622d5efd9c0.png