面试整理之HTML

1. HTML语义化

1.1 语义化标签

	<header></header>	/*头部*/
    <nav></nav>			/*导航*/
    <aside></aside>		/*侧边栏*/
    <h1></h1>			/*一号标题*/
    <article></article>	/*文章，博客等*/
    <section></section>	/*章节*/
    <footer></footer>	/*底部*/

1.2 优势：

1. 易于用户阅读，即便页面样式丢失，页面结构依然清晰
2. 有利于SEO，搜索引擎优化，根据标签来确定上下文和各个关键字的权重
3. 有利于其他设备解析，如盲人阅读器根据语义渲染网页
4. 有利于开发和维护，语义化更具有可读性，代码更好维护，与CSS3关系更和谐

2. 关于meta标签

meta 提供了HTML的元数据，虽不会显示在浏览器上，但是会被浏览器解析

2.1 属性

<meta name="" content="" http-equiv="">
/**
name:
author 作者的名字
description 页面的描述
keywords 关键词列表
viewport 移动端的窗口
copyright 版权
robots 定义搜索引擎爬虫的索引方式

http-equiv:
content-type：规定文档的字符编码
refresh：定义文档自动刷新的时间间隔
cache-control 请求和响应遵循的缓存机制
expires 网页到期时间

content：
给出与http-eqiv或name属性相关的值
*/

2.2 关于view-port

移动端视口的通配设置

<meta name="viewport" content="width=device-width,initial-scale=1.0>

3. HTML5新特性

1. 本地存储特性
2. 设备兼容特性
3. 连接特性 WebSockets
4. 网页多媒体特性 支持audio video canvas svg WebGL CSS3

3.1 本地存储特性

HTML5 Web 存储：
数据以 键值对 存在，web网页的数据只允许该网页访问使用

3.1.1 localStorage sessionStorage

客户端存储数据的两个对象为：

• localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
• sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

常用API

1. 保存数据：localStorage.setItem(key,value)
2. 读取数据：localStorage.getItem(key)
3. 删除单个数据：localStorage.removeItem(key)
4. 删除所有数据：localStorage.clear()
5. 得到某个索引的key：localStorage.key(index)

3.2 连接特性 WebSocket

特性：
提供一种在单个TCP连接上进行的全双工通讯协议，只需握手一次，客户端和服务器端就可以创建持久性连接，并进行双向数据传输。
补充：
网站为了实现推送技术，经常使用Ajax轮询。
轮询：是在特定的时间间隔，由浏览器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。
缺点：浏览器需要不断发出请求，而HTTP请求可能会包含较长的头部，而真正有效的数据可能只是很小一部分，会造成宽度等资源的浪费。

关于WebSocket的使用

1.创建WebSocket对象
var Socket = new WebSocket(url,[protocol]);
//url 为指定连接的URL
//protocol为可选的，指定可接受的子协议
2.事件
Socket.onopen 连接建立时触发
Socket.onmessage 客户端接受服务端数据时触发
Socket.onerror 通信发生错误时触发
Socket.onclose 连接关闭时触发
3.方法
Socket.send() 使用连接发送数据
Socket.close() 关闭连接

WebSocket实例：
本质是一个基于TCP的协议
首先客户端向服务器端发起一个HTTP请求，包含一些附加头部信息，其中：Upgrade:WebSocket表明这是一个申请协议升级的HTTP请求，服务器端解析这些附加的头信息然后产生应当信息返回给客户端，客户端和服务器端的连接建立，一直持续存在到某一方主动关闭连接

3.3 网页多媒体特性

3.3.1 canvas画布

const ctx = canvas.getContext('2d')//获取上下文
1. 绘制矩形
ctx.fillStyle = 'orange';//设置笔刷的填充颜色
ctx.fillRect(10,10,100,100);//画矩形等

2. 画一个圆
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI)//参数分别为x,y,r,start,stop
ctx.stroke();

3.3.2 SVG

• 可伸缩矢量图形
• 图像在放大或改变尺寸的情况下图形质量不会有损失
• 使用XML格式定义图形

优势：

1. 可通过文本编辑器来创建和修改
2. 可被搜索，索引，脚本化或压缩
3. 可伸缩的
4. 可在图形质量不下降的情况下被放大

3.3.3 比较Canvas和SVG

SVG	Canvas
使用XML描述的2D图形的语言	通过JS来绘制2D图形
SVG Dom可通过JavaScript操作
SVG对象的属性发生变化，浏览器可自动重现	Canvas是逐像素渲染，所以绘制完成，不会得到浏览器的关注
不依赖分辨率	依赖分辨率

3.3.4 设置拖放

步骤：
1.设置元素为可拖动的

<img draggable = "true">

2.拖动什么——ondragstart setData()

<img id="drag1" draggable= "true" οndragstart="drag(event)">
<script>
//dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(event){
	event.dataTransfer.setData("Text",event.target.id)
}
</script>

3.放到何处——ondragover；进行放置——ondrop

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" draggable= "true" οndragstart="drag(event)">
<script>
//先阻止默认不让拖放的行为
function allowDrop(ev){
	ev.preventDefault();
}
function drop(event){
	ev.preventDefault();//避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
	var data = ev.dataTransfer.getData("Text");//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
	ev.target.appendChild(document.getElementById(data));
}
</script>

3.3.5 video

1. autoplay 布尔属性，是否自动开始播放
2. loop 布尔属性，播放完是否会到开头位置
3. controls 提供用户控制，包括音量，跨帧，暂停，播放等
4. track 字幕
5. poster 封面