1.Doctype作用？HTML5为什么只需要写<!Doctype HTML>？标准模式与兼容模式各有什么区别?
Doctyppe是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型
定义（DTD）来解析文档
<!Doctype>声明必须是HTML文档的第一行，位于html标签之前
HTML5不基于SGML，所以不需要引用DTD。在HTML5中<!Doctype>只有一种
SGML,标准通用标记语言，是现时常用的超文本格式的最高层次标准
标准模式的排版 和 JS 运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
2.行内元素有哪些，块级元素有哪些，空元素有哪些？
行内元素：a、span、img、input、select、b等
块级元素：div、ul、ol、li、h1~h6、p、table等
空元素：常见: br、hr、img、input、link、meta
3.简述一下你对HTML语义化的理解？
简单来说，就是合适的标签做合适的事情，这样具有一下好处：
•有助于架构良好的HTML结构，有利于搜索的建立索引、抓取，利于SEO
•有利于不同设备的解析
•有利于构建清晰的机构，有利于团队的开发、维护
4.常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解
1）Trident内核：IE
2）Gecko内核：NETSCAPE6及以上版本，火狐
3）Presto内核：Opera7及以上。[Opera内核原味：preSto，现为：Blink]
4）Webkit内核：Safari，Chrome等。[Chrome的：Blink（Webkit的分支）]
浏览器的内核又可以分成两部分：渲染引擎和JS引擎。
渲染引擎主要负责取得网页的内容、整理讯息、计算网页的显示方式等。
JS引擎是用来解析JS语言，执行JS语言来实现网页的动态效果。
5.HTML5有哪些新特性？移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
•语义化标签：header、footer、nav、section、article、aside等
•增强型表单：date（从一个日期选择器选择一个日期）、email（包含e-mail地址的输入域）、
number（数值的输入域）、range（一定范围内数值的输入域）、
search（用于搜索域）、tel（定义输入电话号码字段）等等
•视频和音频：audio、video
•Canvas绘图和SVG绘图
•地理定位：Geolocation
•拖放API：drag
•web worker：是运行在后台的JS，独立于其他脚本，不会影响页面的性能
•web storage：locaStorage sessionStorage
•WebSocket:HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议
移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；
支持 HTML5 新标签：
IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，
可以利用这一特性让这些浏览器支持 HTML5 新标签，
浏览器支持新标签后，还需要添加标签默认的样式。
当然也可以直接使用成熟的框架、比如 html5shim;
如何区分 HTML5： DOCTYPE 声明\新增的结构元素\功能元素
6.描述一下cookie，sessionStorage和localStorage的区别
相同点：
都存储在客户端
不同点：
**1.存储大小**
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
就是为解决cookie存储空间不足而诞生的。
**2.有效时间**
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
**3.数据与服务器之间的交互方式**
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
7.如何实现浏览器内多个标签页之间的通信？
•使用localStorage：localStorage.setItem(key,value)、localStorage.getItem(key)
•websocket协议
•webworker
8.HTML5的离线存储怎么使用，解释一下工作原理？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：
HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时，操作window.applicationCache进行需求实现。
9.src与href的区别？
**区别：**
src用于替换这个元素
href用于建立这个标签与外部资源之间的关系
<link rel="stylesheet" href="style.css">
浏览器加载到这里的时候，HTML的渲染和解析不会暂停，css文件的加载是同时进行的
<script src="script.js"></script>
当浏览器解析到这段代码时，页面的加载和解析都会暂停，知道浏览器拿到并执行完这个js文件
10.浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？
在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
11.iframe 有那些缺点？
- iframe 会阻塞主页面的 Onload 事件；
- 搜索引擎的检索程序无法解读这种页面，不利于 SEO;
- iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
- 使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript
- 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题。
12.Label 的作用是什么？是怎么用的？
label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
13.HTML5 的 form 如何关闭自动完成功能？
给不想要提示的 form 或某个 input 设置为 autocomplete=off。
14.如何实现浏览器内多个标签页之间的通信? (阿里)
WebSocket、SharedWorker；
也可以调用 localstorge、cookies 等本地存储方式；
localstorge 另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；
注意 quirks：Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常；
15.webSocket 如何兼容低浏览器？(阿里)
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 编码发送 XHR 、
基于长轮询的 XHR
16.页面可见性（Page Visibility API） 可以有哪些用途？
通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；
17.如何在页面上实现一个圆形的可点击区域？
map+area 或者 svg
border-radius
纯 js 实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
18.实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
19.网页验证码是干嘛的，是为了解决什么安全问题。
区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水；
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。
20.title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？
title 属性没有明确意义只表示是个标题，
H1 则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong 是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：
strong 会重读，
而 b 是展示强调内容。
i 内容展示为斜体，
em 表示强调的文本；
Physical Style Elements -- 自然样式标签
b, i, u, s, pre
Semantic Style Elements -- 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。
21.html 中 title 属性和 alt 属性的区别？
<img src="#" alt="alt信息" />
当图片不输出信息的时候，会显示 alt 信息 鼠标放上去没有信息，当图片正常读取，不会出现 alt 信息。
<img src="#" alt="alt信息" title="title信息" />
当图片不输出信息的时候，会显示 alt 信息 鼠标放上去会出现 title 信息；
当图片正常输出的时候，不会出现 alt 信息，鼠标放上去会出现 title 信息。
22.另外还有一些关于 title 属性的知识：
title 属性可以用在除了 base，basefont，head，html，meta，param，script 和 title 之外的所有标签。
title 属性的功能是提示。额外的说明信息和非本质的信息请使用 title 属性。title 属性值可以比 alt 属性值设置的更长。
title 属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。
23.HTML5为什么只需要写 `` ?
- HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
- 而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
转载：https://blog.csdn.net/qq_37622857/article/details/102570720
查看评论