HTML5 常见的几种新特征

矫情吗；* 2022-10-08 13:23 157阅读 0赞

#### 语义标签 ####

html5语义标签，可以使开发者更方便清晰构建页面的布局

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;header&gt;</code></td> 
   <td>定义了文档的头部区域</td> 
  </tr> 
  <tr> 
   <td><code>&lt;footer&gt;</code></td> 
   <td>定义了文档的尾部区域</td> 
  </tr> 
  <tr> 
   <td><code>&lt;nav&gt;</code></td> 
   <td>定义文档的导航</td> 
  </tr> 
  <tr> 
   <td><code>&lt;section&gt;</code></td> 
   <td>定义文档中的节</td> 
  </tr> 
  <tr> 
   <td><code>&lt;article&gt;</code></td> 
   <td>定义文章</td> 
  </tr> 
  <tr> 
   <td><code>&lt;aside&gt;</code></td> 
   <td>定义页面以外的内容</td> 
  </tr> 
  <tr> 
   <td><code>&lt;details&gt;</code></td> 
   <td>定义用户可以看到或者隐藏的额外细节</td> 
  </tr> 
  <tr> 
   <td><code>&lt;summary&gt;</code></td> 
   <td>标签包含details元素的标题</td> 
  </tr> 
  <tr> 
   <td><code>&lt;dialog&gt;</code></td> 
   <td>定义对话框</td> 
  </tr> 
  <tr> 
   <td><code>&lt;figure&gt;</code></td> 
   <td>定义自包含内容，如图表</td> 
  </tr> 
  <tr> 
   <td><code>&lt;main&gt;</code></td> 
   <td>定义文档主内容</td> 
  </tr> 
  <tr> 
   <td><code>&lt;mark&gt;</code></td> 
   <td>定义文档的主内容</td> 
  </tr> 
  <tr> 
   <td><code>&lt;time&gt;</code></td> 
   <td>定义日期/时间</td> 
  </tr> 
 </tbody> 
</table>

#### 表单 ####

*  html5修改一些新的input输入特性，改善更好的输入控制和验证
 *  html5新增了五个表单元素

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;datalist&gt;</code></td> 
   <td>用户会在他们输入数据时看到域定义选项的下拉列表</td> 
  </tr> 
  <tr> 
   <td><code>&lt;progress&gt;</code></td> 
   <td>进度条，展示连接/下载进度</td> 
  </tr> 
  <tr> 
   <td><code>&lt;meter&gt;</code></td> 
   <td>刻度值，用于某些计量，例如温度、重量等</td> 
  </tr> 
  <tr> 
   <td><code>&lt;keygen&gt;</code></td> 
   <td>提供一种验证用户的可靠方法，生成一个公钥和私钥</td> 
  </tr> 
  <tr> 
   <td><code>&lt;output&gt;</code></td> 
   <td>用于不同类型的输出，比如尖酸或脚本输出</td> 
  </tr> 
 </tbody> 
</table>

*  html5新增表单属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>placehoder</td> 
   <td>输入框默认提示文字</td> 
  </tr> 
  <tr> 
   <td>required</td> 
   <td>要求输入的内容是否可为空</td> 
  </tr> 
  <tr> 
   <td>pattern</td> 
   <td>描述一个正则表达式验证输入的值</td> 
  </tr> 
  <tr> 
   <td>min/max</td> 
   <td>设置元素最小/最大值</td> 
  </tr> 
  <tr> 
   <td>step</td> 
   <td>为输入域规定合法的数字间隔</td> 
  </tr> 
  <tr> 
   <td>height/wdith</td> 
   <td>用于image类型标签图像高度/宽度</td> 
  </tr> 
  <tr> 
   <td>autofocus</td> 
   <td>规定在页面加载时，域自动获得焦点</td> 
  </tr> 
  <tr> 
   <td>multiple</td> 
   <td>规定元素中可选择多个值</td> 
  </tr> 
 </tbody> 
</table>

#### 音频和视频 ####

html5 提供了音频和视频文件的标准。

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

<audio controls>    //controls属性提供添加播放、暂停和音量控件。
        <source src="horse.ogg" type="audio/ogg">
        <source src="horse.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 元素。        //浏览器不支持时显示文字
    </audio>

**`<audio>` 标签属性**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>播放音频的URL</td> 
  </tr> 
  <tr> 
   <td>preload</td> 
   <td>预加载</td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>自动播放</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>循环播放</td> 
  </tr> 
  <tr> 
   <td>controls</td> 
   <td>浏览器自带的控制条</td> 
  </tr> 
 </tbody> 
</table>

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

<video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        您的浏览器不支持Video标签。
    </video>

**`<video>` 标签的属性**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>播放视频的URL</td> 
  </tr> 
  <tr> 
   <td>poster</td> 
   <td>视频封面，没有播放时显示的图片</td> 
  </tr> 
  <tr> 
   <td>preload</td> 
   <td>预加载</td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>自动播放</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>循环播放</td> 
  </tr> 
  <tr> 
   <td>controls</td> 
   <td>浏览器自带的控制条</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>视频宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>视频高度</td> 
  </tr> 
 </tbody> 
</table>

#### Canvas （画布） ####

*  canvas 元素用于在网页上绘制图形。
 *  HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
 *  画布是一个矩形区域，可以控制其每一像素。
 *  canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

示例：  
**（1）绘制线条**

<body>
        <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
        </canvas>
        <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script>
    </body>

**（2）绘制圆形**

*  fill() 方法填充当前的图像（路径）。默认颜色是黑色。
 *  arc() 方法创建弧/曲线（用于创建圆或部分圆）：context.arc(x,y,r,sAngle,eAngle,counterclockwise);

![a7bf6ab0a3c499b764ac618bdc697354.png][]

*  中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
 *  起始角：arc(100,75,50,0,1.5\*Math.PI)
 *  结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)
 *  Cxt. beginPath() ：开启路径，开启后可以从新设置相关属性 。 Cxt.closePath(）：关闭一条路径。

**（3）颜色渐变**

*  createLinearGradient() 方法创建线性的渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。
 *  addColorStop() 方法规定 gradient 对象中的颜色和位置。

**（4）把一幅图像放置到画布上**

drawImage() 方法在画布上绘制图像、画布或视频。也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

*  JS语法1：在画布上定位图像：

context.drawImage(img,x,y);

*  JS语法2：在画布上定位图像，并规定图像的宽度和高度：

context.drawImage(img,x,y,width,height);

*  JS语法3：剪切图像，并在画布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

[a7bf6ab0a3c499b764ac618bdc697354.png]: /images/20221005/55cb9ce1918f4f7ba422f3a17a95ecb9.png