HTML5新增特性
语义化标签就是拥有语义的标签，语义化标签能够清楚地向浏览器和开发者描述其意义。
例如：div、span 都是没有语义的标签，无法通过标签确定信息。像 a、img 等这种有语义的标签可以确定是这一个链接还是一个图片。
- 新增语义化标签，
header、nav、aside、mainfooter等。 - 新增表单类型属性，
email、number、时间控件、color颜色拾取器、placeholder、autofocus自动获取焦点... - 新增音视频标签，
video、audio - 新增本地存储
localStorage、sessionStorage。 - 新增
canvas画布、SVG 矢量图、websocket 通信、拖拽等。
说一说 HTML 语义化
意义：
- 对于开发：语义化标签有着更好的页面结构，有利于代码的开发及后期的维护。
- 对于用户：当页面卡顿时有着良好的页面结构，有利于增加用户体验。
- 对于爬虫：有利于搜索引擎的SEO优化，有利于网站更靠前的排名。
语义化标签都有哪些：
- header、nav、aside、main、footer、h1~h6、ul、ol、li、a、img 等标签。
DOCTYPE(⽂档类型) 的作⽤
<!DOCTYPE html> 是一种标记语言的文档类型声明，是用来告诉浏览器应该怎样去解析文档。
DOCTYPE 严格模式 与 混杂模式的区别，有何意义?
- 标准模式（严格模式） ：在标准模式下，浏览器会按照 HTML 和 CSS 规范的最新标准解析和渲染页面。标准模式通常提供更一致的渲染结果，有助于开发者编写符合标准的网页。
- 兼容模式（混杂模式） ：在兼容模式下，浏览器会以一种更宽松的方式解析和渲染页面。兼容模式可能导致不同浏览器之间的渲染结果不一致。
table 标签下面会包含哪些标签元素？
一般会包含 tr、th、td、thead、tbody、tfoot
iframe 了解那些？
iframe通常用来加载外部链接，不会影响网页内容的加载。
优点
- 可以将网页原封不动的加载进来
- 减少代码量
- 用来加载显示较慢的内容，如广告、视频等
缺点
- 搜索引擎爬虫不易爬取页面内容，对
SEO不友好 - 会产生很多页面，不利于管理
- 会阻塞
onload事件加载
table了解那些？
缺点
- table 的内容会等内部的所有内容加载完成才会显示，比基于 div + css 实现的表格布局加载速度慢。
- 改动内部内容会造成整个 table 重绘，消耗更多资源
- 样式难以调整
script 标签中 defer 和 async 的区别
当浏览器碰到 script 脚本时：
- 不加 defer 或 async，浏览器会立即下载并执行脚本，阻塞后续文档的解析。
- async 下载脚本的过程与解析后续 文档 的过程并行进行，下载完毕后，立即执行该脚本，阻塞后续文档的解析。
- defer 下载脚本的过程与解析后续 文档 的过程并行进行，在文档解析完成之后在执行该脚本。
如果有多个 defer 脚本，会按照它们在页面出现的顺序执行，
而多个 async 脚本是不能保证执行顺序的。
题外话：
- CSS 不会阻塞 DOM 解析，但是会阻塞 DOM 渲染，严谨一点则是 CSS 会阻塞 render tree 的生成，进而会阻塞 DOM 的渲染。
zhuanlan.zhihu.com/p/292953374
Canvas 和 SVG 的区别
- canvas画布，是通过
javascript来绘制2d图，是逐像素进行渲染。 - SVG矢量图，是基于
XML描述的2D图形语言，每个元素都是可用的，可以为其添加事件。
行内元素、块级元素、空（void）
- 行内：
a、b、span、input、img、select、strong - 块：
p、div、h1、ul、ol、li、dl、dt、dd - 空：
<hr>、<br>、<img>、<input>、<link>、<meta>
怎样添加、移除、移动、复制、创建和查找节点
-
添加节点
document.appendChild(dom) -
移除节点
document.removeChild(dom) -
移动节点
document.appendChild(targetDom) -
复制节点
dom.cloneNode(true)，参数true表示是否复制子节点 -
创建节点
document.createElement(dom) -
查找节点:
document.getElementById("elementId")document.getElementsByClassName("className")document.getElementsByTagName("tagName")document.querySelector("selector")document.querySelectorAll("selector")
CSS3 新增特性
- 新增各种 CSS 选择器 （:not(.input)：所有class不是“input”的节点）
- 阴影属性：
text-shadow、box-shadow - 线性渐变:
gradient - 旋转过渡：
transform、transtion - 动画:
animation - 圆角:
border-radius - 缩放
说一说 CSS 的盒子模型
在 HTML 页面中所有的元素都可以看成是一个盒子。
盒子的组成：内容 content、内边距 padding、边框 border、外边距 margin。
盒模型的类型：
- 标准盒模型：width = content
- IE 盒模型（怪异盒模型）：width = content + padding + border
控制盒模型的模式：box-sizing: content-box(默认值，标准盒模型)、border-box(IE 盒模型)。
说一说样式优先级的规则是什么？
css 样式优先级应该分为五大类：
-
第一类：!important，它的优先级始终是最高的。
-
第二类：引入方式，行内样式的优先级高于嵌入和外链，嵌入和外链如果使用的选择器相同就看它们在页面中插入的顺序，在后面的会覆盖前面的。（行内样式、嵌入样式、外链样式）
-
第三类：选择器，优先级：id 选择器 > (类选择器 | 伪类选择器 | 属性选择器) > 标签选择器 > 通配符选择器。
-
第四类：继承样式，是所有样式中优先级比较低的。
-
第五类：浏览器默认样式优先级最低。
能尽量不适用 !important 就不用，特别是在自己封装的组件中。
CSS 中哪些属性可以继承?
具有继承性的属性在没有指定值的时候，会使用父元素的同属性的值来作为自己的值。
一般具有继承性的属性有：字体相关的属性，font-size 和 font-weight 等。文本相关的属性，color 和 text-align 等。 表格的一些布局属性、列表属性如 list-style 等。还有光标属性 cursor、元素可见性 visibility。
当一个属性不是继承属性的时候，我们也可以通过将它的值设置为 inherit 来使它从父元素那获取同名的属性值来继承。
CSS 三大特性
层叠性、继承性、优先级
CSS 尺寸设置的单位
-
px：绝对长度单位，它的大小取决于屏幕分辨率，是网页开发中常用的单位。
-
em：相对长度单位，在 font-size 中使用是相对于父元素的字体大小，其他属性中使用是相对于自身的字体大小，如 width。如果当前元素的字体大小为设置，由于字体可继承的原因，则会逐级向上查找，最终找不到则相对于浏览器默认字体大小。
-
rem：相对长度单位，相对于根元素的字体大小，如果根元素大小未设置，使用浏览器默认字体大小。
-
vw：相对长度单位，相对与视口宽度的1%。
-
vh：相对长度单位，相对于视口高度的1%。
画一条 0.5px 的线
- 使用
transform: scale()的方式，该方法用来定义元素的2D 缩放转换：
transform: scale(0.5,0.5);
- 采用
meta viewport的方式，这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。viewport只针对于移动端，只在移动端上才能看到效果。
说几个未知宽高水平垂直居中的方法
- absolute + translate
- absolute + margin
- flex
- grid
- table-cell
说一下三栏布局的实现方案
三栏布局主要为了实现中间一栏优先渲染
- float + margin-left + margin-right
- float + margin + position
- flex布局 + order
结构：
<div class="header"></div>
<div class="content clearfix">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
display 有哪些值？说明他们的作用。
| 属性 | 作用 |
|---|---|
| block | 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 |
| inline | 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。 |
| inline-block | 行内块级元素，默认宽度为内容宽度，可以设置宽高，同行显示 |
| table | 块级表格 |
| flex | flex容器布局 |
| none | 隐藏元素 |
| inherit | 从父类继承display属性 |
隐藏元素的方式
display：none：元素在文档中不存在，不会占据位置。visibility： hidden：元素在文档中的位置还保留，仍然占据空间。opacity：0：将透明度设置为0。z-index：负值：直接将元素放置在最下层，利用其他元素来遮盖。position：absolute：将元素定位到可视区域以外。
单行、多行文本溢出
单行
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; //规定段落中的文本不进行换行
多行
overflow:hidden
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
relative 和 absolute 定位原点是？
- relative：自身位置
- absolute：离自己最近设置了（绝对定位、相对定位、固定定位）的父元素。广义的父元素，一层层向上找祖先元素。
CSS3 的 Flex box（弹性盒布局模型）？
flex 布局是 CSS3 新增的一种布局方式，我们可以通过将一个元素的 display 属性值设置为 flex 从而使它成为一个 flex 容器，它的所有子元素都会成为它的项目。
一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用 flex-direction 来指定主轴的方向。我们可以使用 justify-content 来指定元素在主轴上的排列方式，使用 align-items 来指定元素在交叉轴上的排列方式。还可以使用 flex-wrap 来规定当一行排列不下时的换行方式。
对于容器中的项目，我们可以使用 order 属性来指定项目的排列顺序，还可以使用 flex-grow 来指定当排列空间有剩余的时候，项目的放大比例。还可以使用 flex-shrink 来指定当排列空间不足时，项目的缩小比例。
flex-direction属性决定主轴的方向（即项目的排列方向）。flex-wrap属性定义，如果一条轴线排不下，如何换行。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex: 1 表示什么
flex: 1是flex-grow、flex-shrink、flex-basis的缩写，默认值是0 1 auto。
flex：1也表示flex： 1 1 auto。
flex-grow定义项目放大比例，默认为 0，即存在剩余空间，也不放大。flex-shrink定义项目收缩比例，默认为 1，即空间不足，也会进行缩小。flex-basis定义项目给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小。
实现一个三角形
border 实现
.box {
width: 0;
height: 0;
border-top: 50px solid skyblue;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
clip-path 实现
.box {
width: 160px;
height: 200px;
background-color: aquamarine;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
/* polygon 多边形 */
clip-path 就是使用它来绘制多边形（或圆形、椭圆形等）并将其定位在元素内。实际上，浏览器不会绘制 clip-path 之外的任何区域，因此我们看到的是 clip-path 的边界。
使用 clip-path 可以为沿路径放置的每个点定义坐标。在这种情况下，就定义了三个点：top-left (0 0)、bottom-left (0% 100%)、right-center (100% 50%)。
超出这三个点所绘制的区域的内容都会被裁剪掉。
IFC 是什么？
IFC指的是行级格式化上下文，它有这样的一些布局规则：
- 行级上下文内部的盒子会在水平方向，一个接一个地放置。
- 当一行不够的时候会自动切换到下一行。
- 行级上下文的高度由内部最高的内联盒子的高度决定。
说一说浮动
浮动最早是用来实现文字环绕图片的效果的，后来发现浮动属性在布局上使用有着优势，所以现有很多页面采用浮动来解决布局问题。
开启浮动的属性 float: left / right。
浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框
设置了浮动的元素会脱离普通流，而普通流内的元素在计算自身高度时不会去计算浮动元素的高度，这时就有可能会发现父元素高度塌陷的问题，进而影响到父元素后续兄弟元素的排版问题。
解决高度塌陷问题：
- 使用 clear 属性清除浮动：
主要是为了清除浮动后造成的影响，而不是清除浮动。
- 添加额外标签设置 clear：both; 属性。
- 伪元素设置 clear 属性。
- 父元素设置 bfc。
bfc 元素的高度计算会将浮动元素的高度也计算在内。所以也可以解决高度塌陷的问题。
bfc 是一个完全独立的容器，内部元素不会影响到外面。
- overflow 不为 visible， 内容溢出容易造成被裁剪的问题。
- flex 推荐。
- grid 不推荐，兼容性不好。
- table 容易集成表格的各种难处理的样式问题。不推荐
- html 本身就是一个bfc容器，但这不现实。
- 父元素设置高度。写死高度不推荐。
使用 clear 属性清除浮动的原理？
一般使用伪元素的方式清除浮动
.clear::after{
content:'';
display:table;//也可以是'block'，或者是'list-item'
clear:both;
}
clear 属性只有块级元素才有效的，而 ::after 等伪元素默认都是行内元素。
说一说 BFC
BFC 即 Block Formatting Contexts（块级格式化上下文）。
可以认为 BFC 是一个封闭的盒子，内部元素的变化，不会影响到外面。
触发 BFC 的条件：
- 根元素（HTML 元素，自身就是一个 BFC）
- 浮动元素：float 属性值设置了 right / left
- 绝对定位元素：设置了 position 属性值：absolute / fixed，绝对定位或者固定定位。
- overflow 属性：overflow 属性值不为：visible 时，即指定了 auto、scroll、hidden 等的元素
- display 属性：display 属性值为 inline-block、table-cell、flex、grid 等的元素。
特点：
- 同一个 BFC 下兄弟元素间外边距会发生重叠
- 将其放入到不同的 BFC 容器中。
- 清除浮动，解决高度塌陷
- 浮动的元素会脱离文档流，如果他的父元素没有设置高度，就会导致父元素出现高度塌陷的问题。
- 原因是浮动元素不会参与普通流父元素的高度计算。
- 而 BFC 容器的高度会计算浮动元素的高度。
