转自https://github.com/poetries/FE-Interview-Questions/blob/master/HTML.md
1.HTML标签的语义化是指什么？
- 通过使用包含语义化的标签（如H1-h6）恰当的表示文档结构
2.CSS命名的语义化是指什么？
- 为html标签添加有意义的class
3.为什么要语义化？
- 去掉样式后页面展现清晰的结构；
- 盲人使用阅读器更好地阅读；
- 有利于搜索引擎更好的理解页面，利于收录；
- 便于团队项目的可持续运作与维护。
4.简述一下你对HTML语义化的理解。
- 用正确的标签做正确的事；
- html语义化让页面内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
- 即使在没有css的情况下也可以以一种文档格式显示，并且是同样容易阅读的；
- 搜索引擎的爬虫依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
- 使阅读源代码的人更容易将网站分块，便于阅读维护理解
5.Doctype作用？标准模式与兼容模式各有什么区别?
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于<html>标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现- 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作
6.HTML为什么只需要写？
- HTML5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为；
- HTML4.0基于SGML，因此需要对DTD进行引用，才能告知浏览器文档所使用的文档类型；
7.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？
- 行内元素：a 、b、span、input、select、strong、img；
- 块级元素：div、ul、li、dd、dt、ol、dl、h1、h2、h3、h4、....p；
- 空元素：<br>、<hr>、<img>、<input>、<link>、<meta>
8.页面导入样式时，使用link和@import有什么区别？
- <link>属于XHTML标签，除了加载css以外，还能用于定义RSS，定义rel连接属性等作用，而@import是css提供的只能用于加载css；
- 页面被加载时，link会同时被加载，但是@import引用的css会等到页面被加载完成再加载；
- @import是css2.1提出的，只有在IE5以上才能被识别，而Link是XHTML标签，无兼容问题；
9.介绍一下你对浏览器内核的理解。
- 浏览器内核分为渲染引擎(
layout engineer或Rendering Engine)和JS引擎； - 渲染引擎：负责取得网页内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后输出至打印机或者显示器。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同，所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。
- JS引擎：解析和执行js来实现网页的动态效果。
- 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎
10.常见的浏览器内核有哪些？
- Trident内核：IE，MaxThon，TT，The World,360，搜狗浏览器等；
- Gecko内核：
Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等； - Presto内核：Opera7以上 [
Opera内核原为：Presto，现为：Blink;]； - Webkit内核：Safari、chrome等 [
Chrome的Blink（WebKit的分支）]。
11.html5有哪些新特性、移除了哪些元素？如何处理html5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
- HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加；
- 绘画canvas；
- 用于媒介回放的video和audio元素
- 本地离线存储localStorage长期存储数据，浏览器关闭以后数据不丢失；
- sessionStorage的数据在浏览器关闭后自动删除；
- 语义化更好的内容元素：比如 article、footer、header、nav、section；
- 表单控件：calendar、date、time、email、url、search；
- 新的技术webworker、websocket、Geolocation;
- 移除的元素：
- 纯表现的元素：basefont，big，center，font, s，strike，tt，u
- 对可用性产生负面影响的元素：frame，frameset，noframes
- 支持HTML5新标签：
- IE8/IE7/IE6支持通过docuement.createElement方法产生的标签；
- 可以利用这一特性让这些浏览器支持HTML5新标签；
- 浏览器支持新标签后，还需要添加默认的样式；
- 当然也可以直接使用成熟的框架、比如html5shim
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com
/svn/trunk/html5.js"</script><![endif]-->
- 如何区分HTML5： DOCTYPE声明新增的结构元素功能元素
12.HTML5的离线储存怎么使用，工作原理能不能解释一下？
- 在用户没有链接因特网时，可以正常访问站点或应用；在用户链接上因特网时，更新用户机器上的缓存文件；
- 工作原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制（不是存储技术），通过这个文件的解析离线缓存数据，就像cookie一样被存储了下来。当之后网络处于连线状态时，浏览器会通过被离线存储的数据进行页面展示。
- 如何使用：
- 页面头部像下面一样加入一个manifest的属性；
- 在cache.manifest文件的编写离线储存的资源；
- 在离线状态下，操作window.applicationCache进行需求实现。
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html13.浏览器是怎么对HTML5的离线存储资源进行管理和加载的呢？
-
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
-
离线的情况下，浏览器就直接使用离线存储的资源。
14.Label的作用是什么？ 怎么用的？
- label标签定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到相关的表单控件。
15.HTML5的form如何关闭自动完成功能？
- 给不想要提示的form或某个input设置为autocomplete=off。
16.如何实现浏览器内多个标签页之间的通信？（阿里）
- websocket、sharedworker；
- 也可以调用localStorage、cookies等本地存储方式。
17.webScoket如何兼容低浏览器？（阿里）
- Adobe Flash Socket 、
- ActiveX HTMLFile(IE)、
- 基于multipart编码发送XHR、
- 基于长轮训的XHR。
18.页面可见性（Page Visibility API）可以有哪些用途？
- 通过visibilityState的值检测页面当前是否课件，以及打开网页的时间等；
- 在页面切换到其他后台进程的时候，自动暂停视频或音乐的播放；
19.如何在页面上实现一个圆形的可点击区域？
- 通过map+area；
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521834645978&di=367175b9d3e20fa46279b4aaa136131e&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201601%2F05%2F20160105191928_fWuPi.jpeg" alt="我十元" usemap="#map"> <map name="#map"> <area shape="circle" coords="600,400,500" href="https://www.baidu.com" alt="" title="十元" target="_blank"> </map>
- 通过border-radius
<style type="text/css"> .y1{ width: 300px; height: 300px; background-color:#000; border-radius: 50%; cursor: pointer; left: 50%; top:50px; line-height: 100px; text-align: center; color: white; } </style> <div class="y1">圆形可点击区域</div>
- 纯js实现：
document.onclick = function (e) { var r = 500;//圆的半径 var x1 = 500; //圆心x轴位置 var y1 = 500; //圆心y轴位置 var x2 = e.ClientX;//鼠标点击位置 var y2 = e.clientY; var len = Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));//计算鼠标点击位置与圆心距离 if (len<=500) { console.log("inner"); }else{ console.log("outer"); } }
20.实现不使用border画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致。
<div style="height:1px;background-color:red;"></div>
21,.网页验证码是干嘛的，是为了解决什么安全问题？
- 网页验证码用来区别用户是计算机还是人的公共全自动程序，可以有效防止恶意破解密码，刷票，论坛灌水。
- 有效防止黑客对某一注册用户用暴力用特定程序暴力破解方式不断进行尝试登陆
22.title与h1的区别，b与strong的区别，i与em的区别？
- title属性没有明确意义只是个标题，H1则表示层次明确的标题，对页面抓取信息有很大的帮助；
- strong是标明重点内容，具有强调语气，使用阅读设备网络时，会重读，二是展示强调内容；
- i内容是斜体，em表示强调的文本；
23.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
-
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
-
cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递
-
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存 -
存储大小：
cookie数据大小不能超过4ksessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
-
有期时间：
localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据sessionStorage数据在当前浏览器窗口关闭后自动删除cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
24.iframe有那些缺点？
- iframe会阻塞主页面的Onload事件
- 搜索引擎的检索程序无法解读这种页面，不利于SEO
- iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
- 使用
iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题