HTML5新增

怼烎@ 2023-03-02 13:18 112阅读 0赞

### 文章目录 ###

*   *  HTML5新增语义 标签（二）
     *  新增type类型
     *  HTML5新增表单属性
     *  
     *  综合案例
     *  多媒体标签
     *   *   *  多媒体embed
             *  多媒体audio
             *  多媒体 video

## HTML5新增语义 标签（二） ##

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

## 新增type类型 ##

## HTML5新增表单属性 ##

##  ##

<table> 
 <thead> 
  <tr> 
   <th><strong>属性</strong>****</th> 
   <th><strong>用法</strong>****</th> 
   <th><strong>含义</strong>****</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>placeholder</strong>****</td> 
   <td></td> 
   <td>占位符提供可描述输入字段预期值的提示信息</td> 
  </tr> 
  <tr> 
   <td><strong>autofocus</strong>****</td> 
   <td></td> 
   <td>规定当页面加载时 input 元素应该自动获得焦点</td> 
  </tr> 
  <tr> 
   <td><strong>multiple</strong>****</td> 
   <td></td> 
   <td>多文件上传</td> 
  </tr> 
  <tr> 
   <td><strong>autocomplete</strong>****</td> 
   <td></td> 
   <td>规定表单是否应该启用自动完成功能</td> 
  </tr> 
  <tr> 
   <td><strong>required</strong>****</td> 
   <td></td> 
   <td>必填项</td> 
  </tr> 
  <tr> 
   <td><strong>accesskey</strong>****</td> 
   <td></td> 
   <td>规定激活（使元素获得焦点）元素的快捷键</td> 
  </tr> 
 </tbody> 
</table>

<body>
         用户名: <input type="text"  placeholder="请输入用户名" autofocus/>
         上传头像: <input type="file" multiple/>
         <h4> 自动记录完成 </h4>
         1.autocomplete 首先需要提交按钮 <br/>
         2.这个表单您必须给他名字
         <form action="">
           姓名:  <input type="text" autocomplete="on" name="userName"/>
           <input type="submit"/>
    
         </form>
    
         昵称:  <input type="text" required accesskey="s" />
         //快捷键alt+s
        </body>

## 综合案例 ##

## 多媒体标签 ##

*  embed：标签定义嵌入的内容
 *  audio：播放音频
 *  video：播放视频

#### 多媒体embed ####

优酷，土豆，爱奇艺，腾讯、乐视等等

1.  先上传
2.  在分享

#### 多媒体audio ####

为了浏览器兼容， 我们需要做三种声音文件 ogg mp3  wav
        <audio controls autoplay>
        	<source  src="bgsound.mp3" />
        	<source  src="music.ogg" />
        	您的浏览器不支持播放声音
        </audio>

并且可以通过附加属性可以更友好控制音频的播放，如：

*  autoplay 自动播放
 *  controls 是否显不默认播放控件
 *  loop 循环播放

#### 多媒体 video ####

<body>
        
        我们的视频支持  ogg  mp4  webM 三种视频格式
        <video controls autoplay>
        	<source src="mp4.mp4"/>
        	<source src="movie04.ogg"/>
        	您的浏览器不支持视频播放
        </video>
     </body>

同样，通过附加属性可以更友好的控制视频的播放

*  autoplay 自动播放
 *  controls 是否显示默认播放控件
 *  loop 循环播放
 *  width 设置播放窗口宽度
 *  height 设置播放窗口的高度

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20230208/0b9873f82ba1415e9c4b15f7f469fac1.png