HTML与CSS面试题总结近期在刷面经时，收集了经常看到的题目。里面大部分题目，基本都是掘金各大面经里面出现频率比较高的

1. DOCTYPE 的作用

给Web 浏览器的一个指令，说明网页是用什么版本的HTML 写的。 <!DOCTYPE> 声明不是一个 HTML 标签；指定后默认使用标准模式解析，否则会以兼容模式进行解析。

标准模式：使用最新的浏览器解析规则标准解析文档。

兼容模式：为了保证老式浏览器的正常访问，通过向后兼容的方式来模拟老式浏览器的行为。

2. 语义化

根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。简单来说就是用正确的标签做正确的事情，使页面内容结构化。

HTML语义化：反对大篇幅的使用无语义化的 div + css + span，而鼓励使用 HTML 定义好的语义化标签。

使用语义化的优点：
- 代码结构清晰，易于阅读，有利于维护
- 在没有CSS样式情况下也能够让页面呈现出清晰的结构
- 方便浏览器、搜索引擎解析，利于搜索引擎优化（SEO）
- 便团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

# [ 面试系列 ] - 一：你是如何理解 HTML 语义化的？

3. HTML5新增了哪些新特性？移除了哪些元素？

HTML5 现在已经不是 SGML 的子集，主要是关于图像、位置、存储、多任务等功能的增加。

新增的：
- 语义化元素header、article、nav、section、footer等
- 绘图 canvas
- 用于媒介回放的视频video 和音频 audio
- 本地离线存储，localStorage长期存储数据，浏览器关闭后数据不丢失，sessionStorage的数据在浏览器关闭后自动删除
- 表单控件 calendar、date、time、email、url、search 等
- 新的技术 webworker、websocket
- 新的文档属性 document.visibilityState
移除的：
- 纯表现的元素：basefont、big、center、s、tt、u
- 对可用性产生负面影响的元素：frame、frameset、noframes

4. 怎么处理HTML5新标签兼容问题？

主要有两种方式：

实现标签被识别：通过document.createElement(tagName)方法可以让浏览器识别新的标签，浏览器支持新标签后。还可以为新标签添加CSS样式
用JavaScript解决：使用HTML5的shim框架，在head标签中调用以下代码：

<!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

# HTML5新标签的兼容性处理

5. sessionStorage，localStorage 和 cookie 的区别

相同点： 都是保存在浏览器端，且同源的。
区别：
- cookie在浏览器和服务器间来回传递， cookie数据始终在同源的http请求中携带（即使不需要）
- 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但可以达到5M或更大。
- 数据有效期不同：sessionStorage：仅在当前浏览器窗口关闭前有效，自不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
- 作用域不同：sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 、cookie是在所有同源窗口中都是共享的。
问题拓展： session和cookie有什么区别
- session的安全性比cookie高： session是存储在服务器端，cookie是存储在客户端
- 获取session里的信息是通过存放在会话cookie里的session id获取的。而session是存放在服务器的内存中里，所以session里的数据不断增加会造成服务器的负担，所以会把很重要的信息存储在session中，而把一些次要东西存储在客户端的cookie里。
- session的信息是通过sessionid获取的，而sessionid是存放在会话cookie当中的，当浏览器关闭的时候会话cookie消失，所以sessionid也就消失了，但是session的信息还存在服务器端

6.从输入一个 URL 地址到浏览器完成渲染的整个过程

浏览器地址栏输入 URL 并回车

浏览器查找当前 URL 是否存在缓存，并比较缓存是否过期

DNS 解析 URL 对应的 IP

根据 IP 建立 TCP 连接（三次握手）

发送 http 请求

服务器处理请求，浏览器接受 HTTP 响应

浏览器解析并渲染页面

关闭 TCP 连接（四次握手）

上面只是简单的回答了具体步骤，其中每个步骤都可以被面试官拓展为一个新的面试题。

# 史上最详细的经典面试题从输入URL到看到页面发生了什么？

7.src 和 href 的区别

href是Hypertext Reference的简写，表示超文本引用，指向网络资源所在位置。

<a href="http://www.baidu.com"></a> 
<link type="text/css" rel="stylesheet" href="common.css">

href 用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

src是source的简写，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，目的是要把文件下载到html页面中去。

<img src="img/girl.jpg"> 
<iframe src="top.html"> 
<script src="show.js">

src 用于替换当前内容，表示替换当前元素，用在img，script，iframe上

浏览器解析方式不同：

当浏览器遇到href会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式)
当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因)

8.script标签中defer和async的区别

script是会阻碍 HTML 解析的，只有下载好并执行完脚本才会继续解析 HTML defer 和 async有一个共同点：下载此类脚本都不会阻止页面呈现（异步加载），区别在于：

async 执行与文档顺序无关，先加载哪个就先执行哪个；defer会按照文档中的顺序执行
async 脚本加载完成后立即执行，可以在DOM尚未完全下载完成就加载和执行，因此有可能会阻断 HTML 的解析；而defer脚本需要等到文档所有元素解析完成之后才执行

如果存在多个 defer script 标签，浏览器（IE9及以下除外）会保证它们按照在 HTML 中出现的顺序执行，不会破坏 JS 脚本之间的依赖关系。 # script 标签中 defer 和 async 的区别

9.常见的meta标签有哪些

meta标签是HTML语言head区域的一个辅助性标签，meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

<!DOCTYPE html> <html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Document</title> 
</head>

常见标签：

charset 用于描述HTML的编码类型：

<meta charset="UTF-8" >

keywords, 用作页面关键词

<meta name="keywords" content="关键词" />

description, 用于页面描述

<meta name="description" content="页面描述内容" />

refresh, 用于页面重定向和刷新

<meta http-equiv="refresh" content="0;url=" />

viewport 用于适配移动端，可以控制视口的大小比例

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

其中 content 参数主要有以下几种：

width viewport ：宽度(数值/device-width)
height viewport ：高度(数值/device-height)
initial-scale ：初始缩放比例
maximum-scale ：最大缩放比例
minimum-scale ：最小缩放比例
user-scalable ：是否允许用户缩放(yes/no）

搜索引擎索引的方式：

<mete name="robots" content="index, follow" />

上述 content 参数主要有以下几种

all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。

10.img的srcset属性的作⽤？

srcset 是一个包含一个或多个源图的源图容器，不同源图用逗号分隔，每一个源图由下面两部分组成：

图片 URL
x （像素密度描述）或 w （图片像素宽度描述）描述符（与图片 URL 相隔一个空格）， w 描述符的加载策略是通过 sizes 属性里的声明来计算选择的

上述第2点如果没有给出，则是默认的 1x 。

下列代码表示在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。

<img src="image-128.png" srcset="image-256.png 2x" />

srcset与sizes搭配使用

像素密度的适配，只适合显示区域一样大小的图像。如果希望不同尺寸的屏幕，显示不同大小的图像，srcset属性就不够用了，必须搭配sizes属性。（单独使用sizes是无效的）

<img srcset="foo-160.jpg 160w,
             foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1280w"
     sizes="(max-width: 440px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     src="foo-1280.jpg">

上面代码中，srcset属性列出四张可用的图像，每张图像的 URL 后面是一个空格，再加上宽度描述符。

宽度描述符就是图像原始的宽度，加上字符w。上例的四种图片的原始宽度分别为160像素、320像素、640像素和1280像素。

上述代码中sizes属性给出了三种屏幕条件，以及对应的图像显示宽度。宽度不超过440像素的设备，图像显示宽度为100%；宽度441像素到900像素的设备，图像显示宽度为33%；宽度900像素以上的设备，图像显示宽度为254px

浏览器会根据当前设备的宽度，从sizes属性获取图像的显示宽度，再从srcset属性中找出最接近该宽度的图像加载。

假设当前屏幕宽度为480px，在运行上述代码后，浏览器从sizes中获得图片显示宽度为33vw（等于160px），srcset中恰好有160px的图片，于是加载foo-160.jpg。

11. title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别

title属性没有明确意义只表示是个标题，h1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<b>是展示强调内容。
i内容展示为斜体，em表示强调的文本；

12.px % em rem vw/vh 有什么区别

px为绝对单位（不会根据任何其他元素进行更改），其余都是相对单位

EM : 相对于父元素的 font-size

REM : 相对于根节点（HTML 标签）的 font-size

% :

对于普通定位元素就是我们理解的父元素
对于position: absolute;的元素是相对于已定位的父元素
对于position: fixed;的元素是相对于 ViewPort（可视窗口）

VW：视窗宽度，相对于可视窗口的宽度,1vw等于视窗宽度的1%。

举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

VH : 视窗高度，相对于可视窗口的高度,1vh等于视窗高度的1%。

举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

VMIN：取两者（VH和VW）的最小值，VMAX：取两者的最大值

PX、EM 和 REM 主要用于字体大小调整，而 %、VW 和 VH 主要用于边距、填充、间距和宽度/高度。

具体什么时候使用：
1. EM相对于父元素的字体大小，因此如果你希望根据父元素的大小缩放元素的大小，请使用 EM。
2. REM相对于根 (HTML) 字体大小，因此如果你希望根据根大小缩放元素的大小，无论父大小是什么，请使用 REM。如果你使用过 EM 并且由于大量嵌套元素而发现大小问题，那么 REM 可能是更好的选择。
3. VW可用于创建填充整个视口宽度的全宽元素 (100%)。当然，你可以使用视口宽度的任意百分比来实现其他目标，例如宽度的一半为 50% 等。
4. VH可用于创建填充整个视口高度的全高元素 (100%)。当然，你可以使用视口高度的任意百分比来实现其他目标，例如高度的一半为 50% 等。
5. % 类似于 VW 和 VH，但它不是相对于视口的宽度或高度的长度。相反，它是父元素宽度或高度的百分比。例如，百分比单位通常可用于设置边距的宽度

13.行内元素有哪些？块级元素有哪些？空(void)元素有哪些？

行内元素有：a b span img input select strong；
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p

空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；

14.box-sizing 属性值有什么作用？

用来控制元素的盒子模型的解析模式，默认设置为content-box

context-box：W3C 的标准盒子模型，设置元素的 height / width 属性指的是 content 部分的高/宽

border-box：IE 传统盒子模型。设置元素的 height / width 属性指的是 border + padding + content部分的高/宽

15.常见的水平垂直居中实现方案

最简单的方案当然是flex布局

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}
.son {
   ...
}

绝对定位配合margin:auto,的实现方案

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

绝对定位配合transform实现

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

# 面试官：你能实现多少种水平垂直居中的布局（定宽高和不定宽高）

HTML与CSS面试题总结