前端面试题整理-HTML
HTML
-
Doctype作用？严格模式与混杂模式如何区分？它们有何意义？
Doctype用来告诉浏览器以严格模式（非怪异模式）或混杂模式（怪异模式）解析文档。
严格模式是按 W3C标准 解析文档，混杂模式是按 浏览器的方法解析文档。
存在严格模式和混杂模式的意义是兼容旧的网站。
混杂模式举例：
- IE 中实际 width 包含 padding 和 border（IE 盒模型）
- 可以给行内元素设置高度
- IE下 margin: 0 auto 失效
- 图片 padding 失效
- Table 中字体属性不能继承
- white-space: pre 失效
-
HTML5 为什么只需要写 < !DOCTYPE html > ？
由于HTML5不基于SGML，不需要对DTD进行引用，但需要doctype规范浏览器行为,所以要写< !DOCTYPE html >
SGML用来定义文档的结构和指示文档结构的标签，SGML是一个包含超文本链接的综合语言，在Web上使用的HTML格式是使用固定标签集的一种SGML文档。
DTD为组织文档的文档元素提供一个框架，为文档元素之间的相互关系指定了规则，可以确保文档的一致性。
-
HTML5 有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
新特性： article、aside、footer、header、nav、bdi、canvas、command、datalist、details、embed、figcaption、figure、hgroup、keygen、mark、meter、output、progress、rp、rt、ruby、section、source、summary、time、track、audio、video
移除元素： acronym、applet、basefont、big、center、dir、font、frame、frameset、isindex、noframes、s、strike、tt、u
兼容问题：使用document.createElement方法产生，或引入html5.js文件
兼容性查询网站（Can I Use）：https://caniuse.com/
区分：根据DocType和语义化进行区分
-
HTML5的离线储存是什么？
HTML5离线存储是把需要离线存储在本地的文件列在一个manifest配置文件中，这样即使在离线情况也能正常使用网页
在线情况下，浏览器发现html头有manifest属性，会请求xx.manifest文件，如果是第一次访问就按照文件内容下载资源，如果不是第一次，首先按照离线资源加载页面，然后对比cache.manifest有无更改，若未更改则页面不变，若已更改重新下载文件中的资源并进行离线存储。
使用方法：
<html manifest = "cache.manifest">
对于xx.manifest文件，CACHE表示要离线存储的资源列表（包含manifest文件的页面自动离线存储，因此不需要列出页面自身）
NETWORK下列出的资源需在线访问，不会被离线存储。会被CACHE覆盖
FALLBACK表示如果访问第一个资源失败，就用第二个资源替代它
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css resourse/logo.png NETWORK: js/app.js FALLBACK: //offline.html
-
iframe有哪些缺点
- 页面调试麻烦，出现多个滚动条
- 浏览器后退按钮失效
- 增加服务器HTTP请求
- 移动设备不好适配
- 多个页面不宜管理
- 阻塞页面onload加载
- 消耗链接池资源，占用cookie等个数
-
Label的作用是什么？是怎么用的？
Label标签是用来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上
<label for="Name">xx</label><input type="text" name="A" id="Name" /> <label>xx<input type="text" name="B" /></label>
-
HTML5的form如何关闭自动完成功能？
设置form 的autocomplete为on或off
设置输入框的autocomplete为on或off
-
如何实现浏览器内多个标签页之间的通信? （同域名）
localstorage
cookie
-
webSocket如何兼容低浏览器
websocket类似HTTP协议，是为了弥补通信只能由客户端发起，服务器无法主动向客户端推送的缺陷。
协议建立在TCP上，服务器端实现容易，与HTTP协议有良好的兼容性，握手阶段采用HTTP协议，能够通过各种HTTP代理服务器，数据格式轻量，性能开销小，能够发生文本和二进制数据，无同源限制，客户端可以与任意服务器通信。协议标识符：ws
ws://localhost:80/
兼容方法：引用WebSocket.js文件兼容低版本浏览器，WebSocket.swf放在页面相同的目录下。
-
页面可见性（Page Visibility API） 可以有哪些用途？
页面可见性：页面显示还是隐藏。
API：document.hidden=true,页面可见。document.hidden=false，页面隐藏。
切换页面触发visibilitychange事件，document.visibilityState表示页面所处的状态。取值：visible，hidden
document.addEventListener("visibilitychange", function(){ if(document.hidden){ document.title ="hidden"; }else { document.title = "visibile"; } })可使动画、视频在页面显示时打开，隐藏时关闭。
-
如何在页面上实现一个圆形的可点击区域？
-
map+area：
<img src="t.jpg" width="1366" height="768" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="circle" coords="821,289,68" href="www.baidu.com" target="_blank" /> </map> -
div+css+js
<div style="border-radius:50%;width:100px;height:100px;background:#333;" onclick="console.log('abc')"> -
js
document.onclick=function(e){ var r=50;//圆的半径 var x1=100,y1=100,x2= e.clientX;y2= e.clientY; //计算鼠标点的位置与圆心的距离 var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2))); if(len<=50){ console.log("内") }else{ console.log("外") } }
-
-
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
因为inline元素间的换行符转换为空格，产生间距。
解决方法：（1）font-size:0 (2)将li的结束标签写在下一行（3）设置负边距
