HTML考察点1. h5 新增特性标签：新增语义化标签，多媒体标签video、audio。存储：增加 localSt

1. h5 新增特性

标签：新增语义化标签，多媒体标签video、audio。
存储：增加 localStorage、sessionStorage 和 IndexedDB本地存储。
API：增加 SVG绘图、canvas 绘图、WebSocket协议、Web Worker。
属性：meta增加 charset 来设置字符集，script 增加 async 来异步加载脚本。
html5 的类型声明 <!DOCTYPE html>：告诉浏览器用哪种文档标准解析这个文档。

2. 语义化

语义化指的是标签本身就传达了它所包含内容的类型信息，它的用途是什么。

四个优点

清晰的页面结构：没有css也能呈现出很好的页面结构。
有利于 SEO (搜索引擎优化)：爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息。
便于团队开发和维护：语义化使得代码更具有可读性，让其他开发人员容易理解html 结构，减少差异化。
方便其他设备解析：盲人阅读器、屏幕阅读器、移动设备。

怎么知道页面是否语义化 去掉css样式后，html 能否很好的呈现内容结构。
h5 的语义化标签有哪些：6个

3. 块级元素、行内/内联元素、内联块级元素

当给行内元素设置float后，就可以设置宽高、边距等，因为浮动元素会生成一个块级框。

自闭合标签有哪些？<input />、<img />、<link />、<meta />、<br />、<hr />等。

4. 标签 `<a>` 的作用

超链接。
锚点：页面内部定位方式 <h2 id="a"></h2> <a href="#a"></a>
打开新页面。

<a href="" target="_blank">百度</a>，其中 target 的取值有 4 种：
_self：默认值，自身窗口打开链接。
_blank：新窗口打开。
_parent：父窗口打开。
_top：顶层窗口，效果同 _self。

打电话、发邮件

<a href="tel:123456789">拨打电话</a>
<a href="mailto:123456@gmail.com">

5. href 和 src 的区别

<a href="url">链接名</a>
<link href="style.css" rel="stylesheet" type="text/css" />

<img src="url" alt="无法载入图像时会显示的文本" />  // 
<script src="script.js"></script>  // 放在底部

href资源的下载不会阻塞页面的解析，它们是并行的。
src资源的下载会阻塞页面的解析，需要等待资源下载完后才会继续解析页面。

6. canvas(位图) 和 svg(矢量图)

canvas 通过 js 来绘制2D图形，单位是像素。svg 是矢量图，使用 XML 格式定义2D图形，两者的区别：

svg 是矢量图，放大不会失真；canvas 依赖于分辨率会失真。
svg 绘制的图像复杂度高时会减慢渲染的速度，因此不适合图像密集型的游戏。
svg 绘制的只能以.svg格式保存，canvas 绘制的图形可以多种格式jpg、png保存。
svg 支持事件处理器，canvas 不支持。

（1）canvas 绘制圆形、半圆

// canvas 相当于一块画布，操作js在画布上绘制图形。
<body>
  <canvas id="myCanvas" width="200" height="200" style="border:1px solid black"></canvas>
  <script type="text/javascript">
    let c = document.getElementById("myCanvas");
    let cxt = c.getContext("2d");
    //上面的为通用代码
    
    cxt.beginPath();
    // 中心坐标x，y,半径r,起始角0，结束角Math.PI，true逆时针
    cxt.arc(100, 120, 50, 0, 2*Math.PI, true);
    cxt.fillStyle="red";
    cxt.closePath();
    cxt.fill();
  </script>
</body>

（2）canvas 绘制三角形。

cxt.beginPath();
cxt.moveTo(50, 50);  // 落笔处
cxt.lineTo(50, 100);  // 绘制直线
cxt.lineTo(100, 75);  // 三角形只需要指定三个点，然后直接close即可。
cxt.fillStyle="red";
cxt.closePath();
cxt.fill();

（3）canvas 绘制矩形。

cxt.fillStyle="red";
cxt.fillRect(20, 20, 100, 100);

7. meta 标签

meta 用于定义页面的描述、关键字、最后修改日期和其他的元数据，共有两个属性：

name 属性：描述网页。
http-equiv 属性：类似 http头 会向浏览器传回一些信息，例如过期时间Expires、刷新Refresh、cookie等。

＜head＞
＜meta http-equiv="content-Type" content="text/html" charset="gb2312"＞
＜/head＞

charset 定义 html 文档的字符集。

参考文章

HTML考察点