前端重点知识总结—HTML/HTML5

前端 4,403° Views

1. HTML5新增了哪些新特性?

新元素：

  1. 用于媒介的 video 和 audio 元素
  2. 语意化更好的内容元素,比如 article、footer、header、nav、section
  3. 新的表单控件,calendar、date、time、email、url、search、color
  4. 本地存储 localStorage和sessionStorage
  5. JS绘图 canvas

2.WebSocket的实现和应用

① 什么是WebSocket

WebSocket是html5中的协议，支持持久连接。http协议不支持持久连接。

② WebSocket特点

  1. 基于Http协议，或者说借用了http协议来完成一部分握手。在握手阶段与http是相同的。
  2. 可以取代 Ajax 轮询。
  3. 一个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 标准的组成部分。

  1. ondragstart：事件主体是被拖放元素，在开始拖时触发
  2. ondarg：事件主体是被拖放元素，正在拖放时触发。
  3. ondragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
  4. ondragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
  5. ondragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
  6. ondrop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
  7. 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有哪些缺点？

  1. iframe会阻塞主页面的onload事件
  2. iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
  3. iframe框架结构不好，如果嵌套多个iframe页面的货出现多个滚动条，用户体验差；
  4. iframe不利于搜索引擎优化；
  5. 很多移动设备无法完全显示框架，设备兼容性差；
  6. iframe框架页面会增加很多的http请求，增加服务器负担；
  7. 如果要使用最好是通过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网页中相同的效果(比例缩小)。

  1. width:控制viewport的大小，一般情况下指定为device-width(终端宽度，单位为缩放为100%的CSS像素),也可以指定一个固定的值例如600.
  2. height:和width相应,指定高度。
  3. initial-scal:初始缩放比例,页面第一次load的时候的缩放比例。
  4. maximum-scale:允许用户缩放到的最大比例。
  5. minimum-scale:允许用户缩放到的最小比例。
  6. user-scalable:用户是否可以手动缩放。

本文固定连接：https://code.zuifengyun.com/2018/05/1892.html，转载须征得作者授权。

加载中...
加载中...