前端八股文-HTMLL/CSSsrc当浏览器解析到该元素时，会暂停其他资源的加载和处理，直到该资源加载完成。它会将资源

# HTML

## src和href的区别 `src`和`href`都是用来加载外部资源，区别如下

src当浏览器解析到该元素时，会暂停其他资源的加载和处理，直到该资源加载完成。它会将资源内容嵌入到当前标签所在的位置，将其指向的资源下载应用到文档内，如js脚本等。常用在img、script、iframe等标签。

href指向外部资源所在的位置，和当前元素位置建立链接，当浏览器解识别到它指向的位置，将其下载的时候不会阻止其他资源的加载解析。常用在a 、 link标签。

HTML5新特性

新增语义化标签，head、footer、nav、main、section等
新增表单类型属性，email、number、时间控件、color颜色拾取器、placeholder、autofocus自动获取焦点...
新增音视频标签，video、audio
新增canvas画布、websocket通信、拖拽等
新增本地存储localStorage、sessionStorage

对HTML语义化理解

根据内容来选择合适的标签

方便浏览器爬虫更好的识别内容。
有利于代码可读性，开发者能清晰的看出网页的结构，便于团队的开发与维护。

DOCTYPE(⽂档类型) 的作⽤

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，是用来告诉浏览器的解析器，该用什么样的方式去加载识别文档。

iframe 有哪些优点和缺点？

iframe通常用来加载外部链接，不会影响网页内容的加载。

优点

可以将网页原封不动的加载进来
增加代码的可用性
用来加载显示较慢的内容，如广告、视频等

缺点

加载的内容无法被浏览器引擎识别，对SEO不友好
会阻塞onload事件加载
会产生很多页面，不利于管理

Canvas和SVG的区别

canvas画布，是通过javascript来绘制2d图，是逐像素进行渲染。
SVG矢量图，是基于XML描述的2D图形语言，每个元素都是可用的，可以为其添加事件。

script标签中defer和async的区别

他俩都是表示异步加载外部JS脚本，不会阻碍页面的加载解析。区别

执行顺序：有多个async标签不能保证先后加载顺序，而多个defer标签可以按先后顺序加载。
是否立即执行：async加载完脚本后会立即执行，defer是要等文档解析完成后才执行。

行内元素、块级元素、空（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")

CSS

## CSS3新增特性

新增CSS选择器、伪类
特效：text-shadow、box-shadow
线性渐变: gradient
旋转过渡：transform、transtion
动画: animation
圆角: border-radius

盒模型 box-size

标准盒模型：width、height包含：content
IE盒模型：width、height包含：content、padding、border
默认是标准盒模型

CSS选择器和优先级

!important
内联样式
ID选择器
类选择器/伪类选择器/属性选择器
标签选择器/伪元素选择器
关系选择器/通配符选择器

css可继承属性和不可继承属性

可继承：

font-size
font-weight
color
line-height
cursor 不可继承
margin、padding、boder
display
overflow
background
width height
position

display的属性和作用

属性	作用
block	块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
inline	行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block	行内块级元素，默认宽度为内容宽度，可以设置宽高，同行显示
table	块级表格
flex	flex容器布局
none	隐藏元素
inherit	从父类继承display属性

隐藏元素的办法

display:none
opacity:0
z-index:-1
position:absolute
visibility:hidden

单行多行文本溢出

单行

overflow: hidden; // 溢出隐藏  
text-overflow: ellipsis; // 溢出用省略号显示 
white-space: nowrap; //规定段落中的文本不进行换行

多行

overflow:hidden 
text-overflow: ellipsis; // 溢出用省略号显示 
display:-webkit-box; // 作为弹性伸缩盒子模型显示。 
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列 
-webkit-line-clamp:3; // 显示的行数

有了使用过Sass、Less 吗？他们的区别是什么？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。增加了 CSS代码的复用性，层级，mixin，变量，循环，函数等对编写以及开发UI组件都极为方便。区别

编译环境不一样
- Sass是在服务端处理的，以前是Ruby，现在是Dart-Sass或Node-Sass
- 而Less是需要引入less.js来处理Less代码输出CSS到浏览器，也可以在开发服务器将Less语法编译成css文件，输出CSS文件到生产包目录
变量符不一样，Less是@，而Scss是$。
Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持

link和@impot的区别

link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性等
@import是CSS提供等语法规则，只有导入样式表带作用。
link标签引入的CSS被同时加载，而@import引入的CSS将在页面加载完毕后被加载
@import是CSS2.1才有的语法，存在兼容性，而link作为HTML标签不存在兼容性问题

常见的CSS单位及区别

px物理单位
em、rem
vw、vh
区别
px固定单位，不随元素变化
em根据父级元素变化
rem根据html根元素变化

两栏布局

利用float

.left{
        float: left;
        width: 200px;
        height: 100%;
        background: #ccc;
    }
    .right{
        margin-left: 200px;
        height: 100%;
        background: red;
    }

利用absolute

.left{
        position: absolute;
        width: 200px;
        height: 100%;
        background: #ccc;
    }
    .right{
        height: 100%;
        background: red;
    }

利用 flex

.left{
        width: 200px;
        height: 100%;
        background: #ccc;
    }
    .right{
        flex: 1;
        height: 100%;
        background: red;
    }

overflow: hidden触发bfc

.left{
        float: left;
        width: 200px;
        height: 100%;
        background: #ccc;
    }
    .right{
        overflow: hidden;
        height: 100%;
        background: red;
    }

三栏布局

利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。
利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。
利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后：
圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。
双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

前端八股文-HTMLL/CSS