HTML5

冷不防 2022-11-16 15:23 196阅读 0赞

### HTML5 ###

*  常用的语义化标签
 *  \`\`视频标签
 *   *   *  常见属性
 *  \`\`音频标签
 *   *   *  常见属性
 *  \`\`表单的新增
 *   *   *  新增的input类型
         *  新增的表单属性

# 常用的语义化标签 #

语义化标签对搜索引擎比较友好，但是语义化标签存在兼容性问题，IE9+，如果不考虑兼容性问题可以大量使用。

*  `<header>`:头部标签
 *  `<nav>`：导航栏标签
 *  `<section>`：定义文档某个区域，相当于一个`<div>`标签
 *  `<aside>`：侧边导航栏标签
 *  `<footer>`：尾部标签

上述语义化标签的常规布局（可以用在不同的地方，没有强制性，可以多次使用）  
![语义化标签的常规布局][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70]

# `<video>`视频标签 #

支持`mp4`、`ogg`、`webm`三种视频格式，尽量使用`mp4`格式

或

<video width="320" height="240" controls="controls">
    	<source src="movie.mp4" type="video/mp4">/*如果mp4格式加载不了就会转向下面的标签*/
    	<source src="movie.ogg" type="video/ogg">/*如果ogg格式加载不了就会显示下面的话*/
    	你的浏览器不支持<video>标签。
    </video>

### 常见属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>autoplay</td> 
   <td>视频就绪自动播放（谷歌浏览器需要另外设置muted属性才能自动播放）</td> 
  </tr> 
  <tr> 
   <td>controls</td> 
   <td>是否显示控制组件</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>设置播放器（视频）宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>设置播放器（视频）宽度</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>播放完毕后是否循环播放</td> 
  </tr> 
  <tr> 
   <td>preload</td> 
   <td>规定是否预先加载视频，auto（预先加载）none（不预先加载），如果设置了autoplay就自动忽略这个属性</td> 
  </tr> 
  <tr> 
   <td>src</td> 
   <td>视频url地址</td> 
  </tr> 
  <tr> 
   <td>poster</td> 
   <td>未加载完毕时显示的图片</td> 
  </tr> 
  <tr> 
   <td>muted</td> 
   <td>是否静音播放</td> 
  </tr> 
 </tbody> 
</table>

# `<audio>`音频标签 #

支持`mp3`、`ogg`、`wav`三种音频格式，尽量使用`mp3`格式

或

<audio controls="controls">
    	<source src="music.mp3" type="audio/mpeg">/*如果mp3格式加载不了就会转向下面的标签*/
    	<source src="music.ogg" type="audio/ogg">/*如果ogg格式加载不了就会显示下面的话*/
    	你的浏览器不支持<audio>标签。
    </video>

### 常见属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>autoplay</td> 
   <td>音频就绪自动播放（谷歌浏览器除外，可以通过JS解决）</td> 
  </tr> 
  <tr> 
   <td>controls</td> 
   <td>是否显示控制组件</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>播放完毕后是否循环播放</td> 
  </tr> 
  <tr> 
   <td>src</td> 
   <td>视频url地址</td> 
  </tr> 
 </tbody> 
</table>

# `<form>`表单的新增 #

### 新增的input类型 ###

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type=“email”</td> 
   <td>限制用户输入必须是邮箱类型</td> 
  </tr> 
  <tr> 
   <td>type=“url”</td> 
   <td>限制用户输入必须是URL类型</td> 
  </tr> 
  <tr> 
   <td>type=“search”</td> 
   <td>搜索框</td> 
  </tr> 
  <tr> 
   <td>type=“number”</td> 
   <td>限制用户输入必须是数字类型</td> 
  </tr> 
  <tr> 
   <td>type=“date”</td> 
   <td>限制用户输入必须是日期类型</td> 
  </tr> 
  <tr> 
   <td>type=“time”</td> 
   <td>限制用户输入必须是时间类型</td> 
  </tr> 
  <tr> 
   <td>type=“mouth”</td> 
   <td>限制用户输入必须是月类型</td> 
  </tr> 
  <tr> 
   <td>type=“week”</td> 
   <td>限制用户输入必须是周类型</td> 
  </tr> 
  <tr> 
   <td>type=“tel”</td> 
   <td>限制用户输入必须是手机号码</td> 
  </tr> 
  <tr> 
   <td>type=“color”</td> 
   <td>颜色选择表单</td> 
  </tr> 
 </tbody> 
</table>

### 新增的表单属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>required</td> 
   <td>required</td> 
   <td>表单如果拥有该属性表示为必填项</td> 
  </tr> 
  <tr> 
   <td>palceholder</td> 
   <td>要提示的文本</td> 
   <td>表单的提示信息</td> 
  </tr> 
  <tr> 
   <td>autofocus</td> 
   <td>autofocus</td> 
   <td>页面加载完自动聚焦到指定表单</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzU4NDUzNg_size_16_color_FFFFFF_t_70]: /images/20221022/a5ba20e439b6422cbbdd8e4da50b9f8a.png