1.doctype(文档类型) 的作用是什么？
声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。有以下两个值：
-
怪异模式，浏览器使用自己的怪异模式解析渲染页面。
-
标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明,浏览器按照自己的方式解析渲染页面（怪异模式），在不同的浏览器就会显示不同的样式。
注意以下几点：
-
声明不是 HTML 标签；
-
声明必须是 HTML 文档的第一行，位于 标签之前。
-
不区分大小写
-
HTML 5的doctype声明是<!DOCTYPE html>
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。 HTML5 不基于 SGML，所以不需要引用 DTD。
2.浏览器标准模式和怪异模式有什么区别？
两者的区别：
-
盒模型的解析上： 在strict mode中 ：width是内容宽度 在quirks mode中 ：width则是元素的实际宽度 ，而内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)
-
图片元素垂直对齐方式 在strict mode中 ：vertical-align 属性默认取值为 baseline 在quirks mode中 ：vertical align 属性默认为 bottom，因此，在图片底部会有几像素的空间。
-
< table >元素中的字体 Quirks Mode 下，对于 table 元素，字体的某些属性将不会从 body 或其他封闭元素继承到 table 中，特别是 font-size 属性。
-
内联元素的尺寸
在 Standards Mode 下，non-replaced inline 元素无法自定义大小，而在 Quirks Mode 下，定义这些元素的 width 和 height 属性，能够影响该元素显示的大小尺寸。
-
元素的百分比高度
当一个元素使用百分比高度时，在 Standards Mode 下，高度取决于内容的变化，而在 Quirks Mode 下，百分比高度则被正确应用。
-
元素溢出的处理
在 Standard Mode 下，overflow 取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 Quirks Mode 下，该溢出被当做扩展 box 来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容
3.请解释 <script>、<script async> 和 <script defer> 的区别
通过script标签加载js文件时，如果加载过慢，或者出错，有可能会阻塞整个页面的加载，这时就需要js的异步加载，两个属性可支持异步加载：
-
defer 和 async 的共同点:都是可以并行加载JS文件，不会阻塞页面的加载，
-
defer 和 async 的不同点:defer的加载完成之后， JS会等待整个页面全部加载完成了再执行， 而async是加载完成之后，会马上执行JS， 所以假如对JS的执行有严格顺序的话，那么建议用 defer加载。
4.为什么通常推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 之前？你知道有哪些例外吗？
css放在head中：
-
css放在head中， 是因为浏览器解析html文档是自上而下的，如果放底部的话，页面结构出来了，css还没开始渲染，可能会看到只有结构的页面。
-
CSS 应当写在 head 中，以避免页面元素由于样式确实造成瞬间的白页或者给用户闪烁感。
js放在/body之前：
-
JS可能会改变DOM树，也可能依赖css样式。如果放在前面，那么DOM和css可能还未加载，这样容易报错。
-
性能：js放前面，页面会先去加载他，拖慢了时间，使用户在一定时间内看不到网页内容。
例外：js如果需要先加载后运行可以写在头里（当脚本使用 defer 方式加载的时候可以不用约束放置的位置。）
5.什么是渐进式渲染 (progressive rendering)？
渐进式渲染是指浏览器不用等待所有页面资源都渲染好之后再呈现给用户看，而是边下载边渲染，所以用户打开一个网页的时候往往不能第一时间看到所有的内容，但是能够看到一个大概的样子，后续的内容浏览器会慢慢补上形成一个完整的页面。这个有点像 bigpipe。
6.请解释下什么是语义化的HTML？
语义化的好处：
-
去掉或样式丢失的时候能让页面呈现清晰的结构：html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；< strong > 是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
-
屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
-
PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.
-
搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
-
你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
-
便于团队开发和维护
语义化的HTML就是：标题用h1-h6，文字段落用p，列表用ul li，大致如此
7. <image>标签上title属性与alt属性的区别是什么？
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
8.分别写出以下几个HTML标签：文字加粗、下标、居中、字体
加粗：<b>、<strong>
下标：<sub>
居中：<center>
字体：<font>、<basefont>
9.请写出至少5个html5新增的标签，并说明其语义和应用场景
section：定义文档中的一个章节
nav：定义只包含导航链接的章节
header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
10. 请阐述table的缺点
a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
11. 简述一下src与href的区别
src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接
12.Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
（1）<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
13.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，
比如div默认display属性值为“block”，成为“块级”元素；
span默认display属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span input select strong（强调的语气）
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：
<hr><img><link><meta><embed>
14.CSS盒子模型是什么？
盒子模型分为标准模型和IE盒子模型，其中
标准模型「默认：box-sizing: content-box」由四部分组成，从内到外依次是：
内容区域「content」：可以放置元素的区域如文本，图像等，一般设置宽高度指的是这个内容的宽高；
内边距区域「padding」：内容与边框之间的距离
最低0.47元/天 解锁文章
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
