前言
整理一下最近背的八股文，实习上岸！！！
HTML篇
1. 什么是HTML语义化
语义化的意思是用正确的标签做正确的事。能直观的认识标签和属性的用途和作用。
优点
有助于构造良好的HTML结构
有利于搜索引擎的索引和抓取，利于SEO
清晰的结构有利于团队的维护和开发
常见的语义化标签
header、nav、main、section、article、aside、footer
2. 常见的meta元素
- charset
html文档的编码格式，常用的是UTF-8
<meta charset='utf-8'>
-
name & content
- author——页面作者
<meta name="author" content="Shang"- keywords——为搜索引擎提供关键字
<meta name="keywords" content="html,css,javascript">- description——网页整体描述
<meta name="desciption" content="前端学习"- viewport——页面视图定义
<meta name="viewport" content="width=1226"width = device-width -- 将页面宽度设置为跟随屏幕宽度变化而变化 initial-scale = 1.0 -- 设置浏览器首次加载页面时的初始缩放比例 maximum-scale = 1.0 -- 允许用户缩放的最大比例 minimum-scale = 1.0 -- 允许用户缩放的最小比例 user-scalable = no -- 是否允许用户手动缩放 -
http-equiv & content
- refresh——多长时间刷新一次文档
<meta http-equiv="refresh" content="30">- X-UA-Compatible——以何种版本渲染页面
<meta http-equiv="X-UA-Compatible" content="ie=edge"告诉浏览器使用IE最新版本
- Cache-Control——请求和响应的缓存机制
<meta http-equiv="Cache-Control" content="no-transform"> <meta http-equiv="Cache-Control" content="no-siteapp">no-transform 不能对资源进行转换或转变 no-siteapp 禁止百度进行转码- default-style——设置默认css样式表组的名称
<meta http-equiv="default-style" content="light.css"content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。
3. !DOCTYPE的作用
<!DOCTYPE html> 告诉浏览器以何种方式来渲染页面
4. prefetch/preload有什么区别
preload比prefetch的优先级高
preload 告诉浏览器页面必要的资源，浏览器一定会加载
prefetch 告诉浏览器页面可能需要的资源，浏览器不一定加载
<link rel="preload" href="./app.js" as="script">
<link rel="preload" href="./light.css" as="style">
<link rel="prefetch" href="./user.js">
5. Script标签中async和defer有什么区别
他们都是异步加载资源，不阻塞页面解析。
并行执行上
defer： 在页面解析过程开始加载，加载完成后等文档解析完成后再执行
async： 在页面解析过程开始加载，加载完成后与文档解析并行进行
执行顺序上
defer： 按代码书写顺序加载
async： 不保证加载顺序
6. 禁用a标签的跳转页面或定位链接？
- href标签为空
<a href="javascript:void(0)"></a>
<a href="javascript:void(0)"></a>
<a href=""></a>
<a href="#"></a>
- Html阻止默认行为
<a href="" onclick="return false"></a>
<a href="http://www.baidu.com" onclick="return false"></a>
- js阻止默认点击时间
Event.preventDefault()
- css处理点击，不响应鼠标事件
a {
pointer-events: none;
}
7. 标签中title属性与alt属性的区别
title： 当鼠标悬停时，显示文字注释
alt： 当图片未能正常显示时，就会显示alt设置的文字
8. HTML5新特性
- 新增语义标签： header、nav、main、section、article、aside、footer
- 音、视频： audio、vedio
- 数据存储： localStorage、sessionStorage
- input标签： placeholder、autocomplete、autofocus、required
- history API： go、forword、back、pushstate
- DOM查询： querySelector、querySelectorAll
- 可伸缩矢量图形 SVG
- 画布 canvas
- 通信协议：webSocket
- 地理定位：Geolocation
9. Src和href的区别
- 请求资源类型不同
href：Hypertext Reference的缩写，超文本引用。建立当前元素和文档之间的链接。常用的有：link、a
src：将指向的资源下载并应用到文档中，常用的有script、img、iframe
- 解析方式不同
href：并行下载资源并且不会停止对当前文档处理
src：暂停其他资源的下载和处理，知道该资源加载执行完毕
CSS篇
1. 优先级
- 选择器优先级
內联样式 > id选择器 > 类选择器、伪类选择器、属性选择器 > 标签选择器、伪元素选择器
通用选择器、子选择器(>)、相邻同胞选择器(+) 权重为0
- 样式表来源优先级
内联样式 > 内部样式 > 外部样式> 浏览器用户自定义样式 > 浏览器默认样式
- 选择器内样式优先级
!important 优先级最高
优先级相同，最后出现的样式生效
继承得到的样式优先级最低
2. + 和 ～有什么区别
- ：选择紧跟着的兄弟元素 样例
～ ： 为后面所有指定的元素 样例
3. 伪类和伪元素
伪类：当元素达到一个特定的状态时，才能得到伪类的样式
element::before -- 设置对象前的内容
element::after -- 设置对象后的内容
element::placeholder -- 设置文字占位符的样式
element::selection -- 设置文字选中的样式
伪元素：将特殊的效果添加到选择器
element:link -- 超链接未被访问前的样式
element:visited -- 超链接被访问过的样式
element:hover -- 鼠标悬停在元素的样式
element:active -- 点击未释放过程的样式
element:focus -- 成为输入焦点时的样式
element:first-child -- 匹配父元素的第一个子元素
element:last-child -- 匹配父元素的最后一个子元素
element:nth-child(n) -- 匹配父元素的第n个元素
element:nth-last-child(n) -- 匹配父元素的倒数第n个元素
element:first-of-type -- 匹配同类型中的第一个同级兄弟元素
element:last-of-type -- 匹配同类型中的最后一个同级兄弟元素
element:nth-of-type(n) -- 匹配同类型中的第n个同级兄弟元素
element:nth-last-of-type(n) -- 匹配同类型中的倒数第n个同级兄弟元素
element:checked -- 选中状态元素的样式
element:enabled -- 可用状态元素的样式
element:disabled -- 禁用状态元素的样式
4. 盒模型
盒模型由 外边距(margin)、边框(border)、内边距(padding)、内容(content) 组成
- 标准模型
组成：margin + border + padding + width
设置：box-sizing: content-box;
- 怪异盒模型
组成：margin + border + width(padding+content)
设置：box-sizing: border-box;
5. BFC
块级格式上下文
触发BFC，形成独立的渲染区域，单独计算，外面的元素不会影响里面的元素。
触发方式
float: left | right
overflow: hidden
display: inline-block | flex | grid | table-cell | table-caption
position: absolute | fixed
应用场景
- 自适应两栏布局
- 避免元素被浮动元素覆盖
- 去除边距重叠现象
- 盒子塌陷
6. em、px、rem、vh、vw、%单位有什么区别
px：像素
em： 相对长度单位，浏览器默认字体尺寸 1em = 16px
em值不是固定的，通过body设置font-size=62.5%，此时1em=10px
em会继承父级元素的字体大小
rem： 相对单位，只相对HTML根元素font-size的值
淘宝无限适配就是通过更改根元素的font-size的原理实现
vh、vw： 根据页面视口大小布局
vw: 分成100等份，100vw就是满屏
vh与vw同理
桌面端：视口为浏览器的可视区域
移动端：视口为布局视口
vw/vh 和 % 不同的是：%是相对父元素的百分比，而vw/vh是相对页面视口
7. 隐藏元素
display: none; -- 不被渲染，不占据页面位置，不响应绑定监听事件
visibility: hidden; -- 占据页面空间，不响应绑定监听事件
opacity: 0; -- 占据页面空间，能响应绑定监听事件
position: absolute; -- 元素移除可视区域
z-index: -1; -- 遮盖元素
transform: scale(0, 0); -- 占据页面空间，不响应绑定监听事件
clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px) -- 占据页面空间，不响应绑定监听事件
8.display和visibility的区别
- 渲染树
display: 会让元素完全从渲染树中消失，不占据页面任何空间
visibility: 不会让元素从渲染树中消失，占据页面空间
- 继承属性
display：非继承属性，子孙节点随父节点从渲染树消失，通过修改子孙节点的属性也无法显示
visibility：继承属性，子孙节点继承visibility属性，通过修改子孙节点可以显示
- 重排和重绘
display会造成重排，visibility触发重绘
9. 清楚浮动
- clear: both
div {
clear: both;
}
- overflow:hidden
ul {
list-style: none;
overflow: hidden;
}
ul li {
float: left;
}
- ::after
ul::after {
content: "";
display: block;
clear: both;
}
10. 双栏布局和三栏布局
双栏布局
- overflow+float+margin
- flex
三栏布局
- overflow+float+margin
- absolute+margin
- float+负margin
- display: table
- flex
- grid
Github：github.com/ShangEnbo/T…
11. 垂直居中
- absolute + margin
- absolute + calc
- absolute + transform
- 行内元素
重点：line-height 可以继承 - table-cell
- flex
- grid
GitHub：github.com/ShangEnbo/v…
12. 0.5px线
方法一 scale缩放
.hr .scale-half {
height: 1px;
transform: scaleY(0.5)
}
方法二 linear-gradient
.hr .gradient {
height: 1px;
background: linear-gradient(0deg, #fff, #000)
}
13. CSS3新特性
- 边框： border-radius，box-shadow
- 背景： background-size，background-origin
- 转换： transform
- 动画： animation
14. 溢出处理
- 单行处理
text-overflow: clip -- 不显示省略标记，简单裁剪
text-overflow: ellipsis -- 显示省略标记
white-space: nowrap -- 段落中的文本不换行
- 多行处理
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
