1. HTML5新增了哪些新特性?
新元素：
- 用于媒介的 video 和 audio 元素
- 语意化更好的内容元素,比如 article、footer、header、nav、section
- 新的表单控件,calendar、date、time、email、url、search、color
- 本地存储 localStorage和sessionStorage
- JS绘图 canvas
2.WebSocket的实现和应用
① 什么是WebSocket
WebSocket是html5中的协议，支持持久连接。http协议不支持持久连接。
② WebSocket特点
- 基于Http协议，或者说借用了http协议来完成一部分握手。在握手阶段与http是相同的。
- 可以取代 Ajax 轮询。
- 一个WebSocket握手协议的实现，基本有两个属性，告诉服务器发送的是WebSocket：
upgrade:websocket，connection:Upgrade
② WebSocket使用
// 打开一个 web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function(){
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("数据已接收...");
};
ws.onclose = function(){
// 关闭 websocket
alert("连接已关闭...");
};3.HTML5拖放事件使用
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
ondragstart：事件主体是被拖放元素，在开始拖时触发ondarg：事件主体是被拖放元素，正在拖放时触发。ondragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。ondragover：事件主体是目标元素，在被拖放在某元素内移动时触发。ondragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。ondrop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。ondragend：事件主体是被拖放元素，在整个拖放操作结束时触发
例子
<!--拖动图片到矩形框中:-->
<style>
#div1{width:500px;height:300px;border:2px solid red;}
</style>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<!--draggable="true" 设置元素可被拖放-->
<img id="drag1" width="500" height="300" src="https://code.zuifengyun.com/wp-content/uploads/2021/06/d213d14979c83b01635bb8994fbe46b9f9e6ce84-700x280.jpeg" draggable="true" ondragstart="drag(event)">
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>4.对HTML语义化标签的理解
HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article、header、footer等等标签。
5.用一个div模拟textarea的实现
内容可编辑：给div添加contenteditable=true即可。
<style>
div{
width: 400px;
min-height: 100px;
max-height: 300px;
_height: 100px; //IE6
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto; //超过最大高度就出现滚动条
_overflow-y: visible;
}
</style>
<div contenteditable="true">
.....此处省略.....
</div>6.input与textarea的区别
<input>是单行文本框，不会换行。通过size属性指定显示字符的长度，注意：当使用css限定了宽高，那么size属性就不再起作用。value属性指定初始值，maxlength属性指定文本框可以输入的最长长度。可以通过width和height设置宽高，但是也不会增加行数。
<textarea> 是多行文本输入框，文本区中可容纳无限数量的文本，无value属性，不可通过value进行预设值，但可以使用value获取其值。其中的文本的默认字体是等宽字体（通常是 Courier） ，可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
7.iframe有哪些缺点？
- iframe会阻塞主页面的onload事件
- iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
- iframe框架结构不好，如果嵌套多个iframe页面的货出现多个滚动条，用户体验差；
- iframe不利于搜索引擎优化；
- 很多移动设备无法完全显示框架，设备兼容性差；
- iframe框架页面会增加很多的http请求，增加服务器负担；
- 如果要使用最好是通过js动态给iframe添加src属性值，这样避免页面阻塞。
8.移动端适配之viewport
什么是viewport
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />手机浏览器是把页面放在一个虚拟的窗口-viewport中的,通常情况下这个虚拟的窗口比屏幕宽,这样就不用吧每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），此时虽然显示不完全,但是用户仍可以通过平移和缩放来看网页的内容。viewport就是让网页开发者通过其大小，动态的设置其网页内容中控件元素的大小,从而使得在浏览器上实现和web网页中相同的效果(比例缩小)。
width:控制viewport的大小，一般情况下指定为device-width(终端宽度，单位为缩放为100%的CSS像素),也可以指定一个固定的值例如600.height:和width相应,指定高度。initial-scal:初始缩放比例,页面第一次load的时候的缩放比例。maximum-scale:允许用户缩放到的最大比例。minimum-scale:允许用户缩放到的最小比例。user-scalable:用户是否可以手动缩放。
本文固定连接：https://code.zuifengyun.com/2018/05/1892.html，转载须征得作者授权。
