2020年HTML+CSS常见面试题
HTML
1、HTML语义化的理解
1、用正确的标签做正确的事情！
2、HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
3、在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
4、搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
5、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
2、HTML5有哪些新特性、移除了那些元素？
HTML5现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加
- 绘画
canvas - 用于媒介回放的
video和audio元素 - 本地离线存储
localStorage长期存储数据，浏览器关闭后数据不丢失 sessionStorage的数据在浏览器关闭后自动删除- 语意化更好的内容元素，比如
article、footer、header、nav、section - 表单控件，
calendar、date、time、email、url、search - 新的技术
webworker、websocket、Geolocation
移除的元素：
- 纯表现的元素：
basefont、big、center、font、s、strike、tt、u - 对可用性产生负面影响的元素：
frame、frameset、noframes
支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签- 可以利用这一特性让这些浏览器支持
HTML5新标签 - 浏览器支持新标签后，还需要添加标签默认的样式
- 当然也可以直接使用成熟的框架、比如
html5shim
3、的title和alt有什么区别
alt是图片加载失败时，显示在网页上的替代文字；title是鼠标放上面时显示的文字。alt是img必要的属性，而title不是。
4、从浏览器地址栏输入url到显示页面的步骤
- 浏览器根据请求的
URL交给DNS域名解析，找到真实IP，向服务器发起请求； - 服务器交给后台处理完成后返回数据，浏览器接收文件（
HTML、JS、CSS、图象等）； - 浏览器对加载到的资源（
HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）； - 载入解析到的资源文件，渲染页面，完成。
5、HTML全局属性(global attribute)有哪些
class:为元素设置类标识data-*: 为元素增加自定义属性draggable: 设置元素是否可拖拽id: 元素id，文档内唯一lang: 元素内容的的语言style: 行内css样式title: 元素相关的建议信息
6、介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
JS引擎则：解析和执行javascript来实现网页的动态效果
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎
7、请描述一下 cookies，sessionStorage和 localStorage的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
cookie数据大小不能超过4ksessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 有期时间：
localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据 sessionStorage数据在当前浏览器窗口关闭后自动删除 cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
8、行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？
- 行内元素有：
a b span img input select strong - 块级元素有：
div ul ol li dl dt dd h1 h2 h3 h4… p - 空元素：
- 行内元素不可以设置宽高，不独占一行
- 块级元素可以设置宽高，独占一行
9、如何在页面上实现一个圆形的可点击区域？
svgborder-radius- 纯
js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
10、HTTP状态码及其含义
1XX：信息状态码2XX：成功状态码3XX：重定向4XX：客户端错误5XX: 服务器错误
11、你能描述一下渐进增强和优雅降级之间的不同吗
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
12、渲染优化
1、使用CSS3代码代替JS动画（尽可能避免重绘重排以及回流）
2、页面中空的href和 src会阻塞页面其他资源的加载 (阻塞下载进程)
3、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
4、当需要设置的样式很多时设置className而不是直接操作style
5、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作
6、图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳
13、如何进行网站性能优化
1、减少HTTP请求：合并文件、CSS精灵、inline Image
2、将样式表放到页面顶部
3、不使用CSS表达式
4、使用不使用@import
5、将脚本放到页面底部
6、将javascript和css从外部引入
7、压缩javascript和css
CSS
1、盒子模型
盒模型分为两类: IE盒模型和标准盒模型。 两者的区别在于:
IE盒模型的width/height = content + border + padding- 标准盒模型的
width/height = content
2、CSS优先级算法如何计算？
- 优先级就近原则，同权重情况下样式定义最近者为准
- 载入样式以最后载入的定位为准
- 优先级为:
> id > class > tag;比 内联优先级高
3、CSS3有哪些新特性
- 新增各种
css选择器 - 圆角
border-radius - 多列布局
- 阴影和反射
- 文字特效
text-shadow - 线性渐变
- 旋转
transform
CSS3新增伪类有那些？
:after在元素之前添加内容,也可以用来做清除浮动。:before在元素之后添加内容。:enabled已启用的表单元素。:disabled已禁用的表单元素。:checked单选框或复选框被选中。
4、CSS常用选择器
通配符：*
ID选择器：#ID
类选择器：.class
元素选择器：p、a 等
后代选择器：p span、div a 等
伪类选择器：a:hover 等
属性选择器：input[type="text"] 等
5、link与@import的区别
link是HTML方式，@import是CSS方式link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)link可以通过rel="alternate stylesheet"指定候选样式- 浏览器对link支持早于
@import，可以使用@import对老浏览器隐藏样式 @import必须在样式规则之前，可以在css文件中引用其他文件- 总体来说：
link优于@import
6、如何创建块级格式化上下文(block formatting context),BFC有什么用
什么是BFC?
BFC格式化上下文，它是一个独立的渲染区域，让处于BFC内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响
如何产生BFC?
display: inline-blockposition: absolute/fixed
BFC作用
- BFC最大的一个作用就是：在页面上有一个独立隔离容器，容器内的元素和容器外的元素布局不会相互影响
解决上外边距重叠;重叠的两个box都开启bfc;
解决浮动引起高度塌陷;容器盒子开启bfc
解决文字环绕图片;左边图片div,右边文字容器p,将p容器开启bfc
7、绝对定位和相对定位的区别
position: absolute
绝对定位：是相对于元素最近的已定位的祖先元素
position: relative
相对定位：相对定位是相对于元素在文档中的初始位置
8、display:inline-block什么时候不会显示间隙？
- 移除空格
- 使用
margin负值 - 使用
font-size:0 letter-spacingword-spacing
9、清除浮动的几种方式，各自的优缺点
- 父级
div定义height - 结尾处加空
div标签clear:both - 父级
div定义伪类:after和zoom - 父级
div定义overflow:hidden - 父级
div也浮动，需要定义宽度 - 结尾处加
br标签clear:both - 比较好的是第3种方式，好多网站都这么用
10、为什么要初始化CSS样式?
- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对
CSS初始化往往会出现浏览器之间的页面显示差异。 - 当然，初始化样式会对
SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化
11、自适应布局
思路：
- 左侧浮动或者绝对定位，然后右侧
margin撑开 - 使包含，然后靠负
margin形成bfc- 使用
flex12、
position有哪些值？有什么作用？static。默认值，不脱离文档流，top，right，bottom，left等属性不生效。relative。不脱离文档流，依据自身位置进行偏离，当子元素设置absolute，将依据它进行偏离。absolute。脱离文档流，依据top，right，bottom，left等属性在正常文档流中偏移位置。fixed。通过浏览器窗口进行定位，出现滚动条的时候，不会随之滚动。
13、垂直居中有哪些方法？
- 单行文本的话可以使用
height和line-height设置同一高度。 position+margin：设置父元素:position: relative;，子元素height: 100px;position:absolute;top: 50%; margin: -50px 0 0 0;（定高）position+transform：设置父元素position:relative,子元素：position: absolute;top: 50%;transform: translate(0, -50%);（不定高）- 百搭flex布局(ie10+)，设置父元素
display:flex;align-items: center;（不定高）
14、水平居中的方法
- 元素为行内元素，设置父元素
text-align:center - 如果元素宽度固定，可以设置左右
margin为auto; - 如果元素为绝对定位，设置父元素
position为relative，元素设left:0;right:0;margin:auto; - 使用
flex-box布局，指定justify-content属性为centerdisplay设置为tabel-ceil
15、Flex布局
display: flex //设置Flex模式 flex-direction: column //决定元素是横排还是竖着排 flex-wrap: wrap //决定元素换行格式 justify-content: space-between //同一排下对齐方式，空格如何隔开各个元素 align-items: center //同一排下元素如何对齐 align-content: space-between //多行对齐方式16、
stylus/sass/less区别- 均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；
20、知道css有个content属性吗？有什么作用？有什么应用？
css的content属性专门应用在before/after伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。21、CSS在性能优化方面的实践
css压缩与合并、Gzip压缩css文件放在head里、不要用@import- 尽量用缩写、避免用滤镜、合理使用选择器
22、CSS3动画（简单动画的实现，如旋转等）
- 依靠
CSS3中提出的三个属性：transition、transform、animation transition：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。transform：定义元素的变化结果，包含rotate、scale、skew、translate。animation：动画定义了动作的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction
- 使用