HTML常见题目
01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？
<!DOCTYPE> 声明帮助浏览器正确地显示网页
提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
作用：
声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式 -- 浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
02、HTML5为什么只需要写<!doctype html>？
html5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）
而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
ps: 1 SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。
BUT，HTML5不是的。
2 DTD：文档类型定义(Document Type Definition)是一套关百于标记符的语法规则。
03、行内元素有哪些？块级元素有哪些？空(void)元素有那些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote 空元素：没有内容的HTML元素，例如：br、meta、hr、link、input、img
04、页面导入样式时，使用link和@import有什么区别？
1 link是XHTML标签,它不仅可以引入css文件，还可以引入网站图标或者设置媒体查询。
@import是CSS提供的语法规则，只能用来加载css。
@import一定要写在除@charset外的其他任何 CSS 规则之前，如果置于其它位置将会被浏览器忽略。而且，在@import之后如果存在其它样式，则@import之后的分号是必须书写，不可省略的。
2 //引入css
<link href="main.css" rel="stylesheet">
//引入图标
<link rel="icon" href="favicon.ico">
//设置媒体查询
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">3 link引入css文件，页面载入同时载入css文件，@import在页面完全载入之后载入css文件，在网络较慢情况下一开始会没有css样式。
4 link在浏览器中没有兼容问题。@import在css2.1中提出，低版本浏览器会不支持。
5 link中的css可以被javascript获取进而控制DOM，而@import不支持。示例： 使用@import导入css
<style> @import url(style.css); <style>或者在css文件中使用
@charset "utf-8"; @import url(style.css); *{ margin:0; padding:0;}
05、介绍一下你对浏览器内核的理解？
主要分成两个部分：渲染引擎(Render Engine)和JS引擎。
渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎：解析和执行JavaScript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向与只指渲染引擎。
1.什么是浏览器的内核？
浏览器最重要或者说最核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
2.它在浏览器中的作用是什么？
浏览器内核对于浏览器而言，是基础，是依托。如果没有了浏览器内核，那么浏览器是无法独立存在且产生作用的。它的存在，决定了网页的呈现的内容、格式以及效果。所以说，一个好的浏览器，一定是基于有一个稳定、高端、作用明显的浏览器内核的。
06、常见的浏览器内核有哪些？
四大浏览器内核：
(1)WebKit内核
Webkit:是苹果公司自主研发的内核，也是Safari浏览器使用的内核。 Webkit引擎包含渲染引擎WebCore和javascript引擎JSCore，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。Google Chrome、360极速浏览器以及搜狗高速浏览器高速模式也使用Webkit作为内核。
(2)Gecko内核
Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器也很多，这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。Gecko 内核的浏览器仍然还是Firefox (火狐) 用户最多，所以有时也会被称为Firefox内核。Gecko核心设计的相对成熟，在无法获取源码的情况下，开放程度仅次于IE。
(3)Trident内核
该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到IE11，也被普遍称作”IE内核”。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器(壳浏览器)涌现。由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大。
Trident内核的常见浏览器有：IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）、2345浏览器等。
(4)Presto内核
Presto是一个由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。实际上它是一个动态内核，与其它几个内核的最大的区别就在脚本处理上，Presto有着天生的 优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行Javascrīpt的时候有着最快的速度，根据在同等条件下的测 试，Presto内核执行同等Javascrīpt所需的时间仅有Trident和Gecko内核的约1/3（Trident内核最慢，不过两者相差没有多大）
07、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
新特性：
1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术webworker, websocket, Geolocation
移除的元素：
1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
2. 对可用性产生负面影响的元素：frame，frameset，noframes；
HTML5新标签的浏览器兼容问题是浏览器不能识别HTML5新标签而不能使用，解决办法有两种：
- 方法1：实现标签被识别
通过document.createElement（tagName）方法即可让浏览器识别新标签，浏览器支持新标签后，还可以为新标签添加CSS样式。
- 方法2：JavaScript解决方案
A）使用html5shim：
在<head>中调用以下代码：
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
当然也可以直接把这个文件下载到自己的网站上，但这个文件必须在head标签中调用。
B）使用kill IE6
在</body>之前调用以下代码：
<!--if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
<![endif]-->
08、如何区分HTML和HTML5？
1.DOCTYPE声明变化：
HTML4中需要指明是HTML的哪个版本，HTML5不需要，只使用<!DOCTYPE html>即可。
2. 新增的元素和废除的元素
新增元素：heade、footer、nav（表示页面中导航部分）、article、 video 、 audio、hidden属性
去除元素：frame（只是有iframe）
09、简述一下你对HTML语义化的理解？
1.什么是HTML语义化？
根据内容的语义化（内容结构化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码，同时让浏览器的爬虫和机器很好的解析。
2.为什么要语义化？
- 为了在没有css的情况下，页面也能呈现出很好的内容结构和代码结构。
- 为了提升用户体验，如：title，alt用于解释名词或解释图片信息，lable标签的活用。
- 有利于和搜索引擎建立良好的沟通。
- 方便其他设备解析（如屏幕阅读器，盲人阅读器，移动设备），以意义的方式来渲染网页。
- 便于团队的开发和维护，语义化更具有可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
3.写HTML代码是应注意什么？
- 尽可能少的使用无语义的标签div和span
- 在语义不明显时，既可以使用div或者时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利。
- 不要使用纯样式的标签，如：b，font，u等，改用css设置。
- 需要强调的文本，可以包含在strong（加粗）或者em（斜体）标签中（浏览器预设样式，能用css样式就不用它们）
- 使用表格，标题要用caption，表头用thead，主体部分用tbody包围，尾部要tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td
- 表单域要用fieldset标签包起来，并用legend标签说明标签的用途。
- 每个input标签对应的文本框都需要使用label标签，并且通过为input设置id属性，在label标签中设置for=someID来说明文本和相对应的input关联起来
简单来说就是：
用正确的标签做正确的事情。html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；
即使在没有css样式的情况下，也以一种文档格式显示，并且是容易阅读的；
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
HTML5离线存储存储功能非常强大，它的作用是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，自动更新缓存数据。
原理：
HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。原文链接：https://blog.csdn.net/weixin_41258179/article/details/97820275
希望有所收获！
503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
