HTML5新特性

xulei1998
381 阅读3分钟

HTML5是最新的HTML标准，2014年由W3C制定，使HTML拥有了新的语义标签、对绘制图形以及多媒体播放等功能的增强，我整理了常用的HTML5新特性，主要包括以下内容：

  • 语义标签：article、footer、header、nav、section等。
  • 多媒体播放：video、audio。
  • 绘画：Canvas、SVG。
  • 表单输入：date、time、email、url、search等。

语义标签

原始的标签对网页布局通常为：div class="header/nav/..."

<div class="header">
  <div class="nav">
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
  </div>
</div>

HTML5规定了以下标签：header头部、nav导航、main主体、aside侧边栏、section章节、article文章、footer页脚。这些标签可以根据语义得知它们的功能。现在的网页布局可以写成：

<header>
  <nav>
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
  </nav>
</header>

header头部

image-20220316215714102.png

main 主体

注意：一个文档中只有一个main元素。

image-20220316215329158.png

aside 侧边栏

image-20220316215545564.png

article 文章

页面的独立内容。如评论区

figure 独立内容

独立的图片、图标、代码等。一旦删除，不会影响整个页面的显示。

<figure>
  <img src="image.jpg" alt="大象"/>
   <figcaption>说明文字</figcaption>
</figure>

image-20220317093658455.png

footer 页脚

包含该章节作者、版权数据或者与文档相关的链接等信息。

image-20220317080602575.png

mark 高亮

<p>元素用于<mark>高亮</mark>文本显示</p>

image-20220316214603627.png

progress 进度

<progress max="100" value="70">70%</progress>

image-20220316214548180.png

多媒体播放 video audio

audio 音频

<audio controls="controls" autoplay=“true">
  <source src="1.mp3"></source>
  <source src="2.ogg"></source>
</audio>

常用属性：

  • controls：增加了控制器，控制音频的播放、暂停、音量控制
  • autoplay：自动播放
  • loop：循环播放
  • volume：音量
  • paused：是否停止播放

audio标签内部允许使用多个<source>标签来进行多种类型（mp3/ogg/wav）的兼容，点击播放按钮，浏览器就会从上至下解析，使用第一个支持的音频文件。

video 视频

<video width="800" controls>
  <source src="1.mp4"></source>
</video>

常用属性：

  • width，height：宽高
  • 其余属性同上

绘画 Canvas SVG

Canvas

创建了一个画布，在这个画布上我们可以绘制一些标量图图形。

<canvas width="300px" height="300px" style="border:1px solid red;"></canvas><!--画布大小默认300px-->
<script type="text/javascript">
  let canvas=document.querySelector('canvas');
  let ctx=canvas.getContext('2d');  //画笔对象
  ctx.fillStyle="orange";    //填充颜色
  ctx.strokeStyle="blue"; //描边
  ctx.fillRect(25,25,100,100) //填充矩形：25 25坐标系 100 100是矩形的尺寸，默认颜色是黑色
  ctx.clearRect(50,50,50,50)  //矩形内空心
  ctx.strokeRect(130,130,100,100)  //无填充颜色矩形
</script>

image-20220317084214524.png

绘制图形

  1. 创建路径起始点：beginPath( )
  2. 画笔起始落点moveTo(x1,y1)
  3. 画线lineTo(x2,y2) 、 lineTo(x3,y3) ......
  4. 关闭路径：closePath( )
  5. 通过线条描边stroke( )、填充fill( )
<canvas width="300px" height="300px" style="border:1px solid red;"></canvas>
<script type="text/javascript">
  let ctx=document.querySelector('canvas').getContext('2d');  
  ctx.beginPath();     //开始路径
  ctx.moveTo(45,45);  //落点
  ctx.lineTo(165,45)  //画线1
  ctx.lineTo(45,165)  //画线2
  ctx.closePath()     //关闭路径
  ctx.fillStyle="red";     //填充颜色
  ctx.strokeStyle="green"; //描边颜色
  ctx.lineWidth=10;        //线粗细
  ctx.globalAlpha=0.5      //透明度0——1之间
  ctx.lineJoin="round";    //线条连接为圆角
  ctx.fill()               //填充
  ctx.stroke()             //描边
</script>

image-20220317084445676.png

绘制文本

<canvas width="300px" height="300px" style="border:1px solid red;"></canvas>
<script type="text/javascript">
  let ctx=document.querySelector('canvas').getContext('2d'); 
  ctx.font="30px 微软雅黑";  //填充字体样式
  ctx.fillStyle="red";
  ctx.strokeStyle="green";
  ctx.fillText('Hello world',50,50);  //填充字体
  ctx.strokeText('Hello world',50,100) //描边字体
</script>

image-20220317084913611.png

SVG

矢量图：无论放大多少倍，都不会失真，以下标签都应放在svg标签内。

circle 圆形

设置样式：用class属性来指定CSS类

  • fill：填充色
  • stroke：描边色
  • stroke-width：描边宽度
<svg width="100%" height="100%">  <!--若不指定默认宽为300px高为150px-->
  <circle cx="50" cy="50" r="20"/> <!--绘制圆 坐标x,y,半径-->
  <circle cx="100" cy="50" r="20" class="red"/> 
  <circle cx="150" cy="50" r="20" class="fancy"/>
</svg>
<style>
  .red {
    fill:red;
  }
  .fancy {
    fill:none;
    stroke:green;
    stroke-width:3px; 
  }
</style>

image-20220317093452198.png

line 绘制线条

  • x1 y1：起点横纵坐标
  • x2 y2：终点横纵坐标
  • style：线条的样式
<svg>
  <line x1="10"  y1="10"  x2="200" y2="10" style="stroke:red;stroke-width:3px;/" />
</svg>

image-20220317093509472.png

Canvas VS SVG

定义： Canvas 主要是用笔刷来绘制 2D 图形的。SVG 主要是用标签来绘制不规则矢量图的。

相同点： 都是主要用来画2D 图形的。

不同点：

（1）Canvas 用getcontext画笔画出来的是位图，存储后放大了之后会不清晰，SVG 画的是矢量图，放大不失真。

（2）Canvas 支持引入jpg格式图片，SVG不能引入普通格式图片。

（3）Canvas绘制图形通过js来实现，svg更多的是通过标签来实现。

（4）Canvas 写起来更复杂，性能更好一点，SVG 节点过多时渲染慢。

（5）Canvas 不支持分层和事件，SVG 支持分层和事件。

表单功能增强

input 标签可以输入各种类型从而渲染相应的表单内容
<form action="" method="get">
  <p>邮箱标签: <input type="email"></p>
  <p>数字标签: <input type="number"></p>    
  <p>滑动条标签: <input type="range"></p>
  <p>搜索框标签: <input type="search"></p>
  <p>日期框: <input type="date"></p>
  <p>星期框: <input type="week"></p>
  <p>月份框: <input type="month"></p>
  <p>颜色框: <input type="color"></p>
  <p>网址框: <input type="url"></p>
  <div>
    <input type="submit">
    <input type="reset">
  </div>
</form>

image-20220316214503334.png

image-20220316214515809.png

HTML5的优势

  • SEO友好，方便搜索引擎识别页面结构
  • 新增语义化标签，有助于开发人员定义清晰的结构，易于团队维护。

参考阅读

MDN HTML元素文档

video audio

Canvas SVG

input 表单输入

avatar
文章
阅读
粉丝