1、什么是HTML语义化？
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
优点：1）页面更好地呈现出很好地内容结构、代码结构。
2）有良好的用户体验。例如title、alt用于解释名词或解释图片信息、label标签的活用；
3）有利于SEO。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
2、块级元素和内联元素的区别
块级元素display：block/table。特点是独占一行，不管内容长度。如 div/hx/p/ul/ol/table/form
内联元素display：inline/inline-block。特点是不会独占一行，会紧跟着排列，只到没有足够的空间。支持外部分样式（不支持宽、高、margin 上下 、padding 上下）。如span/strong/em/label/a/b。
内联块元素：如input/img/textarea/button/select。
以上三种元素可以通过display属性来相互转换。display属性是用来设置元素的类型及隐藏的，常用的属性有：
1）none 元素隐藏切不占位置
2）block 元素以块元素显示
3）inline 元素以内联元素显示
4）inline - block 元素以内联块元素显示
区别：
（1） 格式上，默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
（2） 内容上，默认情况下，行内元素只能包含文本和其他行内元素。而块级元素可以包含行内元素和其他块级元素。
（3） 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置 width 无效，height 无效（可以设置 line-height），设置 margin 和 padding 的上下不会对其他元素产生影响。
3、盒模型的margin
默认div的宽高，都是width+padding+margin。若需要大小为设置的width则需设置box-sizing：border-box属性值。
若两个div都设置了margin，会出现margin合并的现象。以较大的margin为准。
上下排列时，margin-top 负值 元素向上拖拽；margin-left 负值 元素向左拖拽。
左右排列时，margin-bottom 负值 元素本身不变，下边元素上移；margin-right 负值 元素本身不变，右边元素左移。
4、DOCTYPE 的作用是什么？
<!DOCTYPE> 声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。
在 html5 之后不再需要指定 DTD 文档，因为 html5 以前的 html 文档都是基于 SGML（SGML一般指标准通用置标语言。标准通用标记语言（以下简称“通用标言”），是一种定义电子文档结构和描述其内容的国际标准语言） 的，所以需要通过指定 DTD （文档类型定义（DTD，Document Type Definition）是一种特殊文档，它规定、约束符合标准通用标示语言（SGML）或SGML子集可扩展标示语言（XML）规则的定义和陈述。）来定义文档中允许的属性以及一些规则。而 html5 不再基于 SGML 了，所以不再需要使用 DTD。
标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
5、SGML、HTML、XML、和XHTML的区别？
SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。
HTML 是超文本标记语言，主要是用于规定怎么显示网页。
XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML更严格，比如标签必须都用小写，标签都必须有闭合标签等。
6、link标签的定义
link 标签定义文档与外部资源的关系。
link 元素是空元素，它仅包含属性。 此元素只能存在于 head 部分，不过它可出现任何次数。
link 标签中的 rel 属性定义了当前文档与被链接文档之间的关系。常见的 stylesheet 指的是定义一个外部加载的样式表。
7、说一说CSS中link和@import的区别
1）link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性等；@import是CSS提供的语法规则,只有导入样式表的作用。
2）加载页面时，link标签引入的CSS被同时加载；@import引入的CSS将在页面加载完毕后被加载。
3）兼容性问题。link标签作为HTML元素，不存在兼容性问题。而@import是 CSS2.1 才有的语法，老的浏览器不支持。
4）DOM修改。当时用JS控制DOM去改变样式的时候，只能使用link标签。由于 DOM 方法是基于文档的，无法使用@import来控制的（不支持）。
8、谈谈对浏览器的理解
浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是 HTML，也包括 PDF、image 及其他格式。用户用 URI（Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置。
浏览器可以分为两部分，shell 和 内核。其中 shell 的种类相对比较多，内核则比较少。shell 是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。
浏览器内核主要分成：渲染引擎和 JS 引擎。渲染引擎：职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式；
JS 引擎：解析和执行 javascript 来实现网页的动态效果。
9、浏览器的渲染原理
首先解析收到的文档，根据文档定义构建一颗DOM树，DOM树由DOM元素及属性节点组成。然后对CSS进行解析，生成CSSOM规则树。根据DOM树和CSSOM规则树构建渲染树。渲染树的节点称为渲染对象，渲染对象包含颜色和大小等属性的矩形。当渲染对象被创建并添加到树中，它们并没有位置和大小所以当浏览器生成渲染树之后，就会根据渲染树进行布局（也叫回流），这一阶段浏览器要做的事就是弄清楚各个节点在页面的确切位置和大小。也叫自动重排。布局结束后，就是绘制阶段，遍历渲染树并调用渲染对象的paint方法将它的内容显示在屏幕上，绘制使用UI基础组件。
这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
JavaScript 的加载、解析与执行会阻塞文档的解析，也就是说，在构建 DOM 时，HTML 解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性。
（1）脚本没有 defer 或 async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。
（2）defer 属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时 HTML 并未停止解析，这两个过程是并行的。当整个 document 解析完毕后再执行脚本文件，在 DOMContentLoaded 事件触发之前完成。多个脚本按顺序执行。
（3）async 属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行，也就是说它的执行仍然会阻塞文档的解析，只是它的加载过程不会阻塞。多个脚本的执行顺序无法保证。
总结：script 带 async：不会停止（阻塞）dom 树构建，立即异步加载，加载好后立即执行；
script 带 defer：不会停止（阻塞）dom 树构建，立即异步加载。加载好后，如果 dom 树还没构建好，则先等 dom 树解析好再执行；如果 dom 树已经准备好，则立即执行。
网友评论