HTML5新增特性

超、凢脫俗 2023-01-02 03:20 126阅读 0赞

故心故心故心故心小故冲啊

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

### 文章目录 ###

*  1.H5 新增语义化标签
 *  2.H5新增多媒体标签
 *   *  2.1 \\ 音频
     *  2.2 \\ 视频标签
 *  3.H5新增input表单、表单属性

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]

# 1.H5 新增语义化标签 #

**<header>：头部标签  
<nav>：导航标签  
<article>：内容标签  
<section>：块级标签  
<aside>：侧边栏标签  
<footer>：尾部标签**  
注意:  
**这种语义化标准主要针对搜索引擎的  
这些新标签页面中可以使用多次的  
在IE9中，需要把这些元素转换为块级元素**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]

# 2.H5新增多媒体标签 #

**音频：<audio>  
视频：<video>**  
**注意:谷歌浏览器把音频和视频自动播放禁止了 我们可以给视频标签添加 muted 属性可以自定播放视频，音频不可以**

## 2.1 <audio> 音频 ##

支持情况  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]

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

常见的属性值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 3]

## 2.2 <video> 视频标签 ##

支持情况  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 4]

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

常见的属性值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 5]  
**总结:**  
音频标签和视频标签使用基本一致  
浏览器支持情况不同  
谷歌浏览器把音频和视频自动播放禁止了 我们可以给视频标签添加 muted 属性可以自定播放视频，音频不可以  
视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性

# 3.H5新增input表单、表单属性 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 6]  
常见属性值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221120/0d48cb5a30af41a39376007b67de42b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]: /images/20221120/8e43453a3172482db138b931f529cbdb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]: /images/20221120/8ccffc8629e942a5b6b232b4ab9591d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 3]: /images/20221120/d0d098690ed84e3baac5a05d6da982f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 4]: /images/20221120/418d0959ddbe4976a8e1c8595b846ee0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 5]: /images/20221120/bfcd13e06e364122af77fcabea09fba5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 6]: /images/20221120/f636f7f5db8b4ffb8b60aa9487193a60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 7]: /images/20221120/7ad0117eaa7b4c26b300b00b6ded3b6d.png