[持续整理当中...(留言催更,很懒)](www.yuque.com/docs/share/… 《2021前端面试题—HTML、CSS篇》)
HTML
- DTD的作用是什么？什么是怪异模式？什么是标准模式？
- HTML5是什么？有哪些新特性？新增了哪些语义化标签？新增了哪些表单元素？
- 你是如何理解 HTML 语义化的？
- meta viewport 是做什么用的，怎么写？
- HTML 和 XHTML 有什么区别？
- 使用 data-* 属性有什么用？
- 白屏和FOUC是什么？为什么通常推荐将 CSS 放置在 之间，而将 JS 之前？有没有例外的情况？
- 浏览器渲染机制？什么是回流(reflow)、重绘(repaint)？
附赠答案：
DTD的作用：
文档类型声明，在 HTML 中，文档类型 doctype 的声明是必要的。在所有文档的头部，你都将会看到"" 的身影。这个声明的目的是防止浏览器在渲染文 档时，切换到我们称为“怪异模式(兼容模式)”的渲染模式。确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。
什么是怪异模式:
使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式。其与网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相关的方式加载网页并显示，忽略DTD声明，将使网页进入怪异模式（quirks mode）。在怪异模式下，盒模型为IE模型。 height = border-top + border-bottom + padding-top + padding-bottom + content width = border-left + border-right + padding-left + padding-right + content
HTML5是什么
是一个新版本的HTML语言，具有新的元素，属性和行为，它有更大的技术集，允许构建更多样化和更强大的网站和应用程序。这个集合有时称为HTML5和它的朋友们，不过大多数时候仅缩写为一个词 HTML5。 语义：能够让你更恰当地描述你的内容是什么。 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。 设备访问 Device Access：能够处理各种输入和输出设备。 样式设计: 让作者们来创作更加复杂的主题吧！
有哪些新特性？
语义化标签：多媒体 video/audio 画布 canvas 通信 websocket/webworker/Server-sent events 缓存 localStorage/sessionStorage 拖拽 drag/dragstart/dragover/dragleave/drop
新增了哪些语义化标签？
p 块、article 文章、nav 导航、header 头部、footer 页脚main 主要、aside 侧边栏
什么是标准模式
按照 W3C 标准解析执行，在标准模式下，行为即（但愿如此）由 HTML 与 CSS 的规范描述的行为。盒模型为标椎模型
height = content
width = content
新增了哪些表单元素
<form method="get" id="test">
<input type="text" name="name"/>
<input type="password" name="password"/>
<input type="submit" value="提交">
</form>
<input type="text" name="confirm" form="test">
<input type="email" name="email"/>
<input type="url" name="url"/>
<input type="number" name="number" min=2 max=100 step=5 value="15"/>
<input type="range" name="range" min=20 max=200 value="60"/>
<input type="date" name="date"/>
<input type="month" name="month"/>
<input type="week" name="week"/>
<input type="time" name="time"/>
<input type="datetime" name="datetime"/>
<input type="datetime-local" name="datetime-local"/>
<input type="search" name="search" result="s"/>
<input type="tel" name="tel" />
<input type="color" name="color"/>
<input type="text" name="name" pattern="[A-z0-9]{8}"/>
什么是语义化
就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么，我们以后再开发的过程中，一定要注意了，尽量使用官方的有语义的标签，不要再使用一堆无意义的标签去堆你的结构。 怎么知道，自己的页面结构是否语义化，那就要看你的HTML结构，在去掉CSS样式表之后，是否，依然能很好的呈现内容的结构，代码结构。也就是说，脱掉css的外衣，依然头是头，脚是脚。赤裸裸的完整的一篇文档。这也就是，语义化之后文档的效果。
meta viewport 是做什么用的，怎么写
meta标签的作用是让当前viewport的宽度等于设备的宽度·
<meta name="viewport" content="width=device-width,initial-scale=1">
meta viewport 的6个属性：
width设置layout viewport的宽度，为一个正整数，或字符串"width-device"
initial-scale设置页面的最大缩放值，为一个数字，可以带小数
minimum-scale允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale允许用户的最大缩放值，为一个数字，可以带小数
height设置layout viewport的高度，这个属性并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes"
HTML 和 XHTML 有什么区别？
HTML（超文本标记语言）
XHTML（可扩展超文本标记语言） XHTML必要点：
- 标签与属性都要小写
- 别用
name用id - 标签不能重叠,但可以嵌套
- 标签都要有始有终,要么以
</p>形式结束,要么以 - 每个属性都要有属性值,并且属性值要在双引号中
使用 data-* 属性有什么用？
称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。 通过 element.dataset[属性名字] 获取对应的值。
<script></script>
不带属性，加载到 script 脚本立即下载执行，阻塞后续渲染的执行。
<script async></script>
与后续元素渲染异步执行，乱序执行，若js文件之间存在依赖关系，容易产生错误，
只适用于完全没有依赖的文件，文档解析过程中异步下载，下载完成之后立即执行。
<script defer></script>
与后续渲染异步执行，延迟到界面文档解析完成之后执行，即为立即下载，延迟执行。所有执行均在DOMContentLoaded 事件触发之前完成。
<script></script>
不带属性，加载到 script 脚本立即下载执行，阻塞后续渲染的执行。
<script async></script>
与后续元素渲染异步执行，乱序执行，若js文件之间存在依赖关系，容易产生错误，
只适用于完全没有依赖的文件，文档解析过程中异步下载，下载完成之后立即执行。
<script defer></script>
与后续渲染异步执行，延迟到界面文档解析完成之后执行，即为立即下载，延迟执行。所有执行均在DOMContentLoaded 事件触发之前完成。
白屏和FOUC是什么？
不同浏览器对 CSS 和 HTML 的处理方式不同，有的是等待 CSS 加载完成之后，对 HTML 元素进行渲染和展示。白屏不是bug，而是由于浏览器的渲染机制。 FOUC（浏览器样式闪烁或者叫做无样式内存闪烁） 由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏用link加载css文件，放在head标签里面
为什么通常推荐将 CSS 放置在 之间，而将 JS 之前？有没有例外的情况？
如果将 js 放在 head 里面，则会先被浏览器解析，但是这时的 body 还没被解析，如果这个时候，浏览器解析到 js 出现错误，就会阻止后续的渲染。 例外的话？一般都会绑定一个监听 onload，当全部的html文档解析完之后，再执行代码
window.onload = function() {
// 将所有 js 代码都在 window.onload 方法加载
}
什么属性能让浏览器直接使用ES6 Module
<script type="module">
import {addTextToBody} from './utils.js';
addTextToBody('Modules are pretty cool.');
</script>
浏览器渲染机制？什么是回流(reflow)、重绘(repaint)？
- 解析 DOM 树
- 解析 CSSDOM 树
- 有了 DOM 树，CSSDOM 树，进行渲染，形成 Render Tree
- layout 浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置
- painting 绘制
- reflow 回流
- repaint 重绘 改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
什么是回流（影响布局的情况）
浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，这个过程就是回流
什么是重绘（不影响布局的情况）
改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
CSS
- 两种盒模型分别说一下。
- 如何垂直居中？
- Flex 怎么用，常用属性有哪些？
- Grid布局用过吗？
- 必考：BFC 是什么？背 BFC 触发条件。但是不用全部背下来，面试官只知道其中几个：
- CSS 选择器优先级
- CSS 中 class 和 ID 的区别
- CSS reset 和 CSS normalize是什么？
- 浮动 (Floats)元素有哪些特性？
- 清除浮动说一下
- z-index和叠加上下文是如何形成的？在同一个层叠上下文中才能比较z-index的大小。
- CSS sprites是什么
- 字体图标和svg图标用过吗
- 你日常工作是如何处理浏览器兼容的？
- 如何为有功能限制的浏览器提供网页？
- 渐进增强，优雅降级是什么？（提到兼容面试官没问也要把这两个词说出来）。
- 有哪些的隐藏内容的方法？
- 栅格系统是什么
- 你用过媒体查询吗？
- 如何优化网页的打印样式？如果设计中使用了非标准的字体，你该如何去实现？
- 浏览器是如何判断元素是否匹配某个 CSS 选择器？
- 伪元素 (pseudo-elements) 有什么用？
- 列出你所知道的 display 属性的全部值
- inline 和 inline-block 的区别
- relative、fixed、absolute 和 static 元素的区别？
- 响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？
- 为什么提倡使用 translate() 而非 不是 absolute？
- 如果实现一个高性能的CSS动画效果？
- 圣杯布局，双飞翼布局了解吗
附赠答案：
两种盒模型分别说一下。
- W3C的标准盒模型
在标准的盒子模型中，width指content部分的宽度
- IE的盒模型
在IE盒子模型中，width表示content+padding+border这三个部分的宽度
如何垂直居中？
以下的方法都围绕着该HTML展开
<div class="wrap">
<div class="box"></div>
</div>
CSS 方法1（常用）：display：flex
.wrap{
width:300px;
height:300px;
border: 1px solid red;
display:flex;
justify-content:center;
align-items:center;
}
.box{
height:100px;
width:100px
boder:1px solid blue;
}
方法2： table-cell
vertical-align 属性设置一个元素的垂直对齐方式。 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
.wrap{
width: 300px;
height: 300px;
border: 1px solid red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box{
width: 100px;
height: 100px;
border: 1px solid blue;
display: inline-block;
}
方法3: margin，transform配合
.wrap{
width: 300px;
height: 300px;
background-color: pink;
/* border: 1px solid red; */
/*防止外边距塌陷。解决外边距塌陷的方法：
父元素加overflow:hidden或加上边框*/
overflow: hidden;
}
.box{
width: 100px;
height: 100px;
background-color: plum;
margin:50% auto;
transform: translateY(-50%);
}
方法4: line-height+inline-block+vertical-aligin
.wrap {
width: 300px;
height: 300px;
background-color: pink;
text-align: center;
line-height: 300px;
}
.box {
width: 100px;
height: 100px;
/* 重新设置子元素的行高，否则会继承父元素的行高*/
line-height: 100px;
background-color: plum;
display: inline-block;
/* middle 把此元素放置在父元素的中部。 */
vertical-align: middle;
}
方法5：absolute+负margin
.wrap{
width: 300px;
height: 300px;
position: relative;
background-color: plum;
}
.box{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
/*宽高的一半*/
margin-left: -50px;
margin-top: -50px;
background-color: powderblue;
}
方法6 absolute+margin:auto 和方法5类似，当宽度和高度未知时使用
.wrap{
width: 300px;
height: 300px;
position: relative;
background-color: plum;
}
.box{
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
bottom:0;
right:0;
margin:auto;
background-color: powderblue;
}
方法7：absolute+transform 与方法5类似
.wrap {
width: 300px;
height: 300px;
position: relative;
background-color: plum;
}
.box {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: powderblue;
}
方法8 强大的grid(我是没用过)
.wrap {
width: 300px;
height: 300px;
display: grid;
background-color: plum;
}
.box {
width: 100px;
height: 100px;
align-self: center;
justify-self: center;
background-color: powderblue;
}
