HTML

1、DOM和BOM有什么区别？

DOM 是 Document Object Model 的缩写。即文档对象模型，遵循 W3C 制定的标准。其本质就是 DOM 元素。
我们最早使用的 document.getElementById 获取到的对象就是 DOM 对象。利用 JS 操作某个 DOM 的颜色、形状、大小都是对 DOM 元素的操作。
在代码上可以理解为 document 开头的方法和属性。

BOM 是 Browser Object Model 的缩写。即浏览器对象模型，这并没有一套规定标准，每个浏览器都有自己的实现。但事实上在大部分主要的功能上都已经形成默契。
BOM 主要操作浏览器的行为，比如 navigator,location,history,storage 都为 BOM 的操作。其根对象是 window，可以理解为 winodw 开头的方法。

借用一张图片来表示 DOM 和 BOM 的关系就是，DOM 在 BOM 之内。

2、说说你对HTML元素的显示优先级的理解

帧元素（frameset) 优先级最高 >>> 表单元素 > 非表单元素，即 input type="radio" 之类的表单控件 > 普通的如 a,div 等元素。

从有窗口和无窗口元素来分，有窗口元素 > 无窗口元素。有窗口元素如 Select 元素、Object 元素。

z-index 属性也可以改变显示优先级，但只对同种类型的元素才有效。

3、html和html5有什么区别呢？

文档声明区别

HTML文档的类型声明为：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
//或
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5文档的类型声明为：

<!DOCTYPE html>

结构语义区别

HTML：没有体现结构语义的标签，如<div id='nav'></div>

HTML5：添加了许多具有语义化的标签，如：<article>、<aside>、<audio>，更利于SEO

相对于HTML，HTML5中新增和修改了一些元素

绘图区别

HTML5：HTML5的canvas素使用脚本（通常使用JavaScript）在网页是绘制图像，可以控制画布上每个像素

音频的视频的支持

HTML：如果不使用Flash播放器支持，它不支持音频和视频

HTML5：使用<audio>和<vedio>标签来支持音频和视频控制。

4、Standards模式和Quirks模式有什么区别？

默认标准模式。用 { box-sizing: border-box; }来修改

标准盒模型：元素内容宽度=width，元素实际宽度=margin2+border2+padding2+width
怪异盒模型：元素内容宽度=width-border2-padding2，元素实际宽度=margin2+border2+padding2+width=margin2+width

5、用一个div模拟textarea的实现

<!DOCTYPE html>
<html>
<head>
    <title>用一个div模拟textarea的实现</title>
</head>
<style>
.edit{
    width: 300px;
    height: 200px;
    padding: 5px;
    border: solid 1px #ccc;
    resize: both;
    overflow:auto;
}
</style>
<body>
    <h3>用一个div模拟textarea的实现</h3>
      <div class="edit" contenteditable="true">
        这里是可以编辑的内容，配合容器的 overflow ，多行截断，自定义滚动条，简直好用的不要不要的。
    </div>
</body>
</html>

演示地址：https://codepen.io/ansonznl/pen/LozrgK

CSS

1、让网页的字体变得清晰，变细用CSS怎么做？

font-weight + font-family
font-weight 来控制粗细还是需要看对应的字体有没有对应的变种字体。因此这就和 font-family 相关。
-webkit-font-smoothing
这个属性是 Chrome 的抗锯齿属性。加上后会显得细一些，但是只针对 webkit 内核的浏览器才有效。

2、说下line-height三种赋值方式有何区别？

line-height 3种设置方式的区别 - 掘金前言：平常写CSS习惯性的写 line-height: 1.5em，也见过类似line-height: 1.5，line-height: 150%这种写法，但是从来没有想过这三者有什么区别，最近突然看到有人提到这个问题，很感兴趣，于是查资料自己尝试了一下。最后的效果是一样的。…https://juejin.cn/post/6844903556739235848