2022前端面试-HTML和CSS篇

一、HTML

1. 你测试用什么浏览器？内核是什么？

一般用 Chrome：内核 Blink （基于 webkit ）

2. HTML 文件中 Doctype 作用：

告诉浏览器用哪个版本的 HTML 或 XHTML来解析，缺少或错误时，页面会以混杂形式渲染。

3. Quirks 模式和 Standards 模式的含义及其区别？

含义：
Standards 模式是 IE6 引入的，是标准模式。而 Quirks 模式相当于是兼容以前 CSS 的模式，叫怪异模式。
IE6 之前，CSS 还没有成熟，很多网页没有使用 CSS 美化，因此那时候的IE浏览器对 CSS 支持很差，IE6之后，CSS 相对成熟了，因此浏览器对 CSS 支持很好。因此，为了兼容以前网页布局方式，IE6 开始就有了这两种模式的概念。以前的网页头部一般没有写 DTD ，所以 IE6 开始就利用了 HTML 文件中是否带有 DTD 来判断该用哪种模式来解析该 HTML 文件。

区别：
有很多区别，具体分 布局、样式解析、脚本执行 这三个的区别。比如：
1. 盒子模型：诡异模式中，盒子宽高 = 内容宽高+border+padding。而W3C标准中，盒子高度 = 内容宽高。
2. 设置行内元素宽高：诡异模式中，为行内元素如这些设置宽高会生效。而标准模式下不会生效。
3. 设置百分比高度：标准模式中，内容撑开高度，父元素（盒子）没有设置百分比高度的话，子元素设置百分    比高度无效。
4. 水平居中：标准模式下，margin：0 auto；可以设置水平居中。诡异模式则无效。
5 还有很多...

另外：

HTML5只需要声明 Doctype,不需要声明 DTD ，因为它不是基于标准通用标志语言的。

4. div+css 布局较 table 布局有什么有点？

更改表现形式的时候方便，只需更改 css 文件。
table布局，页面加载时，需要整个加载完才渲染，而div+css布局是边加载边渲染的，相当于速度方面更块。div+css布局代码清晰一点，table布局 就需要嵌套很多表格，代码不清晰。
还有就是，div+css布局的 SEO 更好，排名更靠前。

5. img 的 alt 与 title 的区别？

title 是鼠标 hover 的时候现实的标题。
alt 是图片加载不到的时候显示的代替文字，顺便说一下，代替文字的语言是由 lang 属性指定的。alt 其实是不能乱写的，最好写有含义的内容，这样对 SEO 更好。

6. strong 和 em 的区别？

strong：粗体，强调，表示内容重要。
em：斜体，更强调，表示改内容为强调点。

7. 描述一下渐进增强和优雅降维。

渐进增强：首先考虑兼容性，再去追求高级的交互效果去改进，保证当下，努力向前。
优雅降维：一开始就搞高端的，然后再向下做力所能及的兼容，过时的浏览器不好意思了，大哥尽力了，我是向未来看的。你捡漏也无妨吧，只要能用。

8. CDN 服务器是什么？

资源分发网络，就是资源源站将资源缓存在各地的服务器上，客户就近获取资源，这样加快了资源获取速度，减轻了源服务站的压力。

要区分 DNS，即域名服务器，是进行域名和与之相对应的IP地址转换的服务器。

9. 利用多个域名存储资源的好处？

这样减轻了主域名的连接压力，加快资源请求速度等等。同时，这样也安全一点吧。

10. 谈谈网页标准及其指定机构的重要性。

大家都遵守统一的规范，你好我好大家好，安全，开发高效等等。

11. 描述一下 cookies，sessionStorage 和 localStorage 的区别。

首先清楚：它们是 cookies 和 web Storage 的区别。相同点是，都是本地存储。
cookies：小容量，以前主要用来身份认证的，每次请求都把它携带在请求头，浪费宽带，不安全，也不能跨域。
Web Storage：提高容量，而且有 setItem 等这些方法，不像 cookies 需要程序员自己封装这些方法。
sessionStorage：中等存储大小吧，5M左右，页面窗口关闭就删除了，资源在单页面内共享。
localStorage：较大存储，20M左右，关闭页面窗口也不删除，除非自己删除，多个页面可以共享资源。

12. 简述一下 src 与 href 的区别。

都是指向外部资源。
src: 如 ,文档处理时，遇到它会去加载改路径下的资源，直到加载完成才继续处理自己下面的内容。
href： 如 文档处理遇到它，去加载它的时候不会停下自己下面的内容处理。
正因为这样，推荐使用 link 引入 css,不要用 @import 方式。
也因为这样，所以推荐将 js 文件引入放在最后（其实 js 必须最后加载，没有DOM，你怎么处理DOM）。

13. 知道的网页制作会用到的图片格式有哪些?

png-8，png-24，jpeg，gif，svg。
其实，面试官希望听到是 Webp。(是否有关注新 技术，新鲜事物)
科普一下 Webp:WebP 格式，谷歌(google)开发的一种旨在加快图片加载速度的图片格式。 图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%。

14. 知道什么是微格式吗?

微格式(Microformats)是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开 放标准。是为特殊应用而制定的特殊格式。
优点:将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。(应 用范例:豆瓣，有兴趣自行 google)

15. 关于缓存处理。

这里可以牵扯很多东西了。dns缓存、sdn缓存、浏览器缓存、服务器缓存。之后再详细写写。

16. 一个页面上有大量的图片(大型电商网站)，加载很慢，你有哪些方法优化方法，给用户更好的体验。

图片懒加载：可以添加滚动事件，判断滚动距离，距离到了优先加载。
如果是滚播图类型，可以采用预加载技术，先加载第一张和最后一张。
如果是css图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。
如果图片过大，可以使用特殊编码，加载时先加载被压缩的缩略图。
如果图片展示区小于图片真实大小，可以在服务器端处理压缩图片，使得一致。

17. HTML语义化。

没有或缺失样式约束，它也可以展示出清晰的网页结构。语义化可能在一定程度上利于 SEO ，但是它的作用不是很大，主要还是靠内容和外部链接。语义化对于网站开发维护也有利吧。代码看起来清晰。

18. 前端 SEO 能干的事情。

写好 Meta 标签，也就是写好 title、keyword、description。尽量用语义化标签吧。重要内容 HTML 靠前，因为爬虫从上往下爬的，一定时间内你被爬到就有利。网站 logo 处也可以放个隐藏的文字标题，其他重要信息也是，大点,h1,加粗哈哈。另外就是，不同浏览器的搜索引擎都不同，看客户人群去针对不同的搜索引擎优化吧。还有还有，外部链接，因为相当于别人访问他人网站，都跳来你的网站了。

19.  html5 有哪些新特性

新特性:
1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签(header,nav,footer,aside,article,section) 3. 音频、视频 API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; 7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术 webworker, websocket, Geolocation

20. 如何实现浏览器内多个标签页之间的通信?

调用 localstorge、cookies 等本地存储方式

二、CSS

1. CSS 样式设置方式。

这很简单啦，外部引入、内部样式、内联样式。

2. CSS 选择器。

• 1.id 选择器( # myid)

• 2.类选择器(.myclassname)

• 3.标签选择器(div, h1, p)

• 4.相邻选择器(h1 + p)

• 5.子选择器(ul < li)

• 6.后代选择器(li a)

• 7.通配符选择器( * )

• 8.属性选择器(a[rel = "external"])

• 9.伪类选择器(a: hover, li: nth - child)

• *  可继承: font-size font-family color, UL LI DL DD DT;

• *  不可继承 :border padding margin width height ;

• *  优先级就近原则，样式定义最近者为准;

• *  载入样式以最后载入的定位为准;

优先级呢？ 越精确越高。谁能够精确找到该元素谁牛逼。!important  > 内联 > id > 类 > 标签 > 派生 ...

复杂的计算方法:

用 1 表示派生选择器的优先级
用 10 表示类选择器的优先级
用 100 标示 ID 选择器的优先级
div .test1 .span var 优先级 1+10 +10 +1

那么问题来了，看下列代码，

 
 123 

答案:red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在

中的先后关系无关。

3. 隐藏元素的方法。

基本方法：display：none；

               visibilit：hidden；

其他技巧：1. 设置宽高 0；2. 设置透明度 0 ；3. z-index：-1000

4. 超链接访问后 hover 样式不出现，解决？

改变 CSS 顺序：L-V-H-A ( link, visited, hover, active )

5. 什么是 CSS Hack？

针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

6. 用 CSS 写一个轮播图。

网上学。

7. 行内元素、行内块元素和块级元素

行内元素：相邻元素一行显示，宽高不变，margin-top、margin-bottom、padding-top、padding-bottom不可变，但是margin-left、margin-right、padding-left、padding-right可变。（垂直方向的不变，水平方向的可变。【把它变成行内块（display：block；或 display：inline-block）就可以变了】。

行内块元素：如、、、、等，宽高...有效。但是也是在一行显示的。

块级元素：独占一行。

8. 什么是外边距重叠？

外边距重叠就是 margin-collapse。

在 CSS 当中，相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一 个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则:

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

9. rgba() 和 opacity() 的透明度效果区别？

opacity() 作用于元素及其内部的所有内容。
rgba() 只作用于自身和背景。

10. line-height 和 letter-spacing

line-height：主要用于调整垂直方向的文字位置，如行内垂直居中。
letter-spacing：调整文字间间隔，一般用于调整行内元素换行时换行符的间隙问题。

11. 居中一个浮动元素的方法？

（1）已知自身宽高可以这样干：

查看代码

（2）未知自身宽高可以这样干：

查看代码

（3）更方便的：

查看代码

（3）居中一个 的简单方法：

//的容器设置如下
#container {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

 （4）居中一个没有浮动的元素：

// 给 div 设置一个宽度，然后添加 margin:0 auto 属性 
div {
     width:200px;
     margin:0 auto;
}

12. px 、 em 、rem 、vh 、vw 区别

px : 是多少就多少，固定的。

em 和 rem : em 基于父级的字体大小，rem 基于 HTML 字体大小。如：父子字体为16px，则改 1em=16px。

vh 和 vw : 1vh = 1%视口高度， 1vw = 1%视口宽度。更灵活，新标准。

13. 了解重置CSS文件吗？自己建立的 reset.css、第三方 normalize.css

重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置 CSS 文件并知道如何使用它们。不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在异同。

normalize.css 它没有重置所有的样式风格，但仅提供了 一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西。

14. Less

一句话，它不是JavaScript，但很像JavaScript。它将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数等。

15. display:none 与 visibility:hidden 的区别是什么?

display:none：不放在这里了，位置让出。值改变时，会发生回流（重排），也必然会重绘啦。

visibility:hidden： 我只是隐藏，位置我依然占着，你们谁也别想来。值改变时，不会发生回流，仅重绘该元素位置。

16. CSS 中 link 和@import 的区别。

ink 属于 html 标签，而@import 是 CSS 中提供的 在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加 载引用的 CSS

@import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题

Link 引入样式的权重大于@import 的引用

17. 两种盒子模型。

IE 盒子模型：宽高=内容+内外边距+边框

标准的 W3C 盒子模型：宽高=仅仅内容宽高

18. 为什么要初始化样式

每个浏览器默认样式不同，所以需要初始化。但是它会给SEO优化有一点影响

19. BFC 是什么？

BFC(块级格式化上下文)，一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局 不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠 的问题

BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外 元素的布局，这个渲染区域只对块级元素起作用

 20. Doctype 的作用?严格模式与混杂模式的区别?

用于告知浏览器该以何种用什么文档类型、规范来解析渲染文档

严格模式下:页面排版及 JS 解析是以该浏览器支持的最高标准来执行

混杂模式下:不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

21. HTML常见兼容性问题处理。

1. 双边距BUGfloat引起的 使用display
2. 3 像素问题 使用 float 引起的 使用 dislpay:inline -3px
3. 超链接 hover 点击后失效 使用正确的书写顺序 link visited hover active
4. Ie z-index 问题 给父级添加 position:relative
5. Png 透明 使用 js 代码 改
6. Min-height 最小高度 !Important 解决’
7. select 在 ie6 下遮盖 使用 iframe 嵌套
8. 为什么没有办法定义 1px 左右的宽度容器(IE6 默认的行高造成的，使用 over:hidden,zoom:0.08 line-height:1px)
9. IE5-8 不支持 opacity，解决办法:

.opacity {
opacity: 0.4
filter: alpha(opacity=60);  /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";  /* for IE8*/ 
}

10. IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片

 22. 对 WEB 标准以及 W3C 的理解与认识

答:标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、 结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更 广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提 供打印版本而不需要复制内容、提高网站易用性。

23. 行内元素有哪些?块级元素有哪些? CSS 的盒模型?

CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认 的 display 值，比如 div 默认 display 属性值为“block”，成为“块级”元素;span 默认 display 属性值为“inline”，是“行内”元素。

块级元素:div p h1 h2 h3 h4 form ul 行内元素: a b br i span input select

Css 盒模型:内容，border ,margin，padding

24. display 的值？

block、inline-block、inline、none、flex、flex-box、inline-flex、list-item等

25. position 的值？

static：默认值，有没有都是这样，按照标准流

absolute：绝对定位，相对于第一个已经定位的父元素，一般用于大距离移动

fixed：固定定位，相对于浏览器窗口

relative: 相对定位，相对于自身当前位置一般用于小距离移动

26. b 标签和 strong 标签,i 标签和 em 标签的区别?

前者无语义，后者有语义

27. text-align:center 和 line-height 、virtical-align 有什么区别?

text-align 是文本水平方向对齐

line-height 垂直方向、一般处理行内元素

virtical-align 专治垂直方向，一般处理块级

28. CSS3 有哪些新特性?

1.  CSS3 实现圆角(border-radius)，阴影(box-shadow)，
2.  对文字加特效(text-shadow、)，线性渐变(gradient)，旋转(transform)
3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4. 增加了更多的CSS选择器 多背景rgba
5.  在 CSS3 中唯一引入的伪元素是 ::selection.
6.  媒体查询，多栏布局
7.  border-image