持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情
前端面试题-HTML最全汇总
1.语义话的目的是什么？⭐
答：用正确的标签做正确的事。
提高代码的可读性，页面内容结构化，便于开发人员的代码编写，同时提高的用户体验；有利于SEO ，便于搜索引擎爬虫爬取有效信息。
2.H5C3新特征⭐⭐⭐
H5:
Canvas绘图以及SVG绘图。
拖放（Drag and drop）API
语义化标签（header、nav、footer、article、section）
音频、视频（audio、video）API
地理定位（Geolocation）
本地离线存储（localStorage）,长期存储数据，关闭浏览器后不丢失。
会话储存（sessionStorage）,数据在关闭浏览器后自动删除。
表单控件（calendar、date、time、email、url、search）
新技术如Web Worker、Web Socket。（关于Web Socket使用可以看这篇文章浅谈Web Socket。）
C3
边框：
border-radios 添加圆角边框
border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴
影尺寸，阴影颜色，insetr（内/外部阴影））
border-image：设置边框图像
border-image-source 边框图片的路径第 4 页
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否平铺（
repeat 平铺 round 铺满
stretch 拉伸）
背景：
Background-size 背景图片尺寸
Background-origin规定background-position属性相对于什么位置定 位
Background-clip 规定背景的绘制区域（padding-box，border-box，
content-box）
渐变：
Linear-gradient（）线性渐变
Radial-gradient（）径向渐变
文本效果：
Word-break：定义如何换行
Word-wrap：允许长的内容可以自动换行
Text-overflow：指定当文本溢出包含它的元素，应该干啥
Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
转换：
Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜
Transform-origin 可以更改元素转换的位置，（改变 xyz 轴）
Transform-style 指定嵌套元素怎么样在三位空间中呈现
2D 转换方法：
rotate 旋转 translate（x，y）指定元素在二维空间的位移 scale（n）
定义缩放转换
3D 转换方法：
Perspective（
n）为 3D 转换 translate rotate scale过渡：
Transition-proprety 过渡属性名
Transition-duration 完成过渡效果需要花费的时间
Transition-timing-function 指定切换效果的速度
Transition-delay 指定什么时候开始切换效果
动画：animation
Animation-name 为@keyframes 动画名称
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期
animation-delay 动画启动前的延迟间隔
animation-iteration-count 动画播放次数
animation-direction 是否轮流反向播放动画
3.cookie与sessionStorage和localStorage的区别⭐⭐⭐
保存方式
cookie存放在客户的浏览器上。
session都在客户端中保存，不参与服务器通讯。
生命周期
cookie可设置失效时间
localStorage除非手动清除否则永久保存
sessionStorage关闭当前页面或浏览器后失效
存储的大小
cookie 4kb左右
session 5M
易用性
cookie需自己封装
session可以接受原生接口
因为cookie每次请求都会携带在http请求中,所以它的主要用来识别用户登录,localStorage可以用来跨页面传参,sessionStorage可以用来保留一些临时数据。
4.css有哪些基本的选择器，执行先后顺序？⭐
类选择器（class）、标签选择器、ID选择器
!important>内联样式（非选择器）>ID选择器>类选择器>标签选择器>通配符选择器（*）
5.清除浮动⭐⭐⭐
1、父级div定义overflow:hidden（如果父级元素有定位元素超出父级，超出部分会隐藏，）
2、在浮动元素后面加一个空标签，clear：both；height： 0；overflow：hidden
3、伪元素清除浮动：给浮动元素父级增加 .clearfix::after（content: ‘’; display: table; clear: both;）（不会新增标签，不会有其他影响，）
6.垂直居中DIV⭐⭐⭐
1.绝对定位（盒子宽高已知）
.father {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.son {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;（-盒子一半宽度）
margin-top: -150px;（-盒子一半高度）
width: 300px;
height:300px;
background-color: blue;
}
2.绝对定位（宽高已知）+margin
.father {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.son{
position:absolute;
margin:auto;
top:0; left:0; bottom:0;right:0;
width: 300px;
height:300px;
background-color: blue;
}
3.定位 （宽高未知）+transform
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: blue;
}
4.grid布局（父元素设置，宽高未知）（兼容性ie 10以上支持）
.father {
display: grid;
align-items: center;
justify-content: center;
width: 500px;
height: 500px;
background-color: red;
}
5.flex布局（父元素设置，宽高未知）（兼容性ie 11以上支持）
.father {
display: flex;
align-items: center;
justify-content: center;
width: 500px;
height: 500px;
background-color: red;
}
6.表格布局（父元素设置，宽高未知）（兼容性较好）
.father {
display:table-cell
text-align: center;
vertical-align: middle
width: 500px;
height: 500px;
background-color: red;
}
.son {
display: inline-block;
}
7.常用的块与行属性内标签有哪些？有什么特征⭐⭐
块标签：div、h1~h6、ul、li、table、p、br、form。
特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行
行标签：span、a、img、textarea、select、option、input。
特征：只有在行内显示，内容撑开宽、高，不可以设置宽、高（img、input、textarea等除外）。
8.CSS中有哪些长度单位？⭐⭐
绝对长度单位：px
百分比: %
相对父元素字体大小单位: em
相对于根元素字体大小的单位: rem
相对于视口*宽度的百分比（100vw即视窗宽度的100%）: vw
相对于视口*高度的百分比（100vh即视窗高度的100%）: vh
9.display:none和visibility:hidden的区别⭐
display：block、inline、inline-block、flex
display:none：隐藏元素，在文档布局中不在给它分配空间（从文档中移除），会引起回流（重排）。
visibility:hidden: 隐藏元素，但是在文档布局中仍保留原来的空间（还在文档中），不会引起回流（重绘）。
9.如何让 chrome 浏览器显示小于 12px 的文字
本 来 添 加 谷 歌 私 有 属 性 -webkit-text-size-adjust ： none ， 现 在 -webkit-transform：scale（）
10. 用CSS 实现长宽为浏览器窗口一半的正方形⭐
已知父元素宽高用%
width: 50%;
padding-top: 50%;
background-color: red;
用vw
width: 50vw;
height: 50vh;
background-color: red;
11. 用CSS 实现高度为0.5像素的线条⭐
这个可以用伪类来实现
.line::before {
display: block;
content: "";
height: 1px;
left: -50%;
position: absolute;
background-color: #333333;
width: 200%; //设置为插入元素的两倍宽高
-webkit-transform: scale(0.5);
transform: scale(0.5);
box-sizing: border-box;
}
12. 用CSS 实现三角形⭐
向上
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid red;
13. 伪类和伪元素的区别⭐⭐
区别
伪类只能使用“：”，伪元素既可以使用“:”，也可以使用“::”
伪元素其实相当于伪造(创建）了一个元素，伪类没有伪造元素，例如first-child只是给子元素添加样式而已。（本质区别就是是否抽象创造了新元素）
13. 重绘和重排是什么？如何避免？⭐⭐
重排：当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
重绘：当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，所以重绘跳过了创建布局树和分层的阶段。
重排需要重新计算布局树，重绘不需要，重排必定发生重绘，但是涉及到重绘不一定要重排 。涉及到重排对性能的消耗更多一些。
触发重排的方法： 页面初始渲染、添加/删除可见的DOM元素、改变元素位置、改变元素尺寸、改变元素内容、改变元素字体大小、改变浏览器窗口尺寸、设置 style 属性的值等。
避免重排的方式：样式集中改变、使用 absolute 或 fixed 脱离文档流。
14.定位的属性值有何区别
css里面的定位
-
相对定位
- 不会脱离文档流
- 元素的微调
- 作为绝对定位的参照元素（子绝父相）
-
绝对定位
- 脱离文档流
- 必须要存在一个参照的元素（一般来说是自己 的父元素；如果父元素没有定位，则会继续向外查找，直到找到一个离自己最近的已经定位了的元素作为参考，如果实在没有，找 body 进行定位）
-
固定定位
- 一般用于相当于当前视窗进行定位
- 对联广告
- 回到定位
- 吸顶效果
15.flex原理
- 实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
16.BFC
- z-index作用：控制元素重叠时堆叠顺序
- 元素的层级
18.li后面的空白间隔
- 所有的li写在一行
- 浮动
19.link与import区别
- - 相同点 - 都是加载 css 文件
- - 不同点 - link 是属于html标签 - import 是属于css语法
Less 是什么?Scss 是什么?(sass)
- Less 是一种css 预处理语言, 在less 中可以定义一些变量和表达式以及使用嵌套语法; less 中使用@定义变量(@baseColor:pink); 后期可以通过一些编译工具(less)将less 编译成浏览器能直接识别的css 样式. 所以 less 只是在开发阶段使用的一种中间语言, 使用less 的目的是提高开发效率以及提高代码的可维护性.
- scss 是一种css 预处理语言, 在less 中可以定义一些变量和表达式以及使用嵌套语法; scss 中使用baseColor:pink); 后期可以通过一些编译工具(node-sass)将 less 编译成浏览器能直接识别的 css 样式. 所以 scss 只是在开发阶段使用的一种中间语言, 使用scss 的目的是提高开发效率以及提高代码的可维护性.
