# 基础

**Repository Path**: diaochunhui/basics

## Basic Information

- **Project Name**: 基础
- **Description**: 前端基础知识回顾
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-11-19
- **Last Updated**: 2025-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 前端基础知识 ##
### html部分 ###
***
#### 1、浏览器内核
* IE: trident内核
* Firefox：gecko内核
* Safari:webkit内核
* Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
* Chrome:Blink(基于webkit，Google与Opera Software共同开发)
#### 2、“<!DOCTYPE>”是什么？
 声明文档类型
#### 3、DTD是什么？
 Document Type Definitiond，文档类型声明文件
#### 4、H4与H5文档类型声明有差异的原因是什么？
HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
#### 5、写出几种IE6 BUG的解决方法
* 双边距BUG float引起的 使用display：inline；
* 3像素问题 使用float引起的 使用dislpay:inline -3px 或者 margin-right:-3px
* 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active；
* Ie z-index问题 给父级添加position:relative；
* Png 透明 使用js代码改；
* Min-height 最小高度 ！Important 解决’；
* select 在ie6下遮盖 使用iframe嵌套；
* 为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）；
#### 6、为什么语义化
1. 语义化有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，
从而获取更多的有效信息，提升网页的权重。
2. 在没有CSS的时候能够清晰的看出网页的结构，增强可读性　　
3. 便于团队开发和维护，语义化的HTML可以让开发者更容易的看明
白，从而提高团队的效率和协调能力。
4. 支持多终端设备的浏览器渲染。
#### 7、浮动清除的方法
1. 使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2. 使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3. 是用afert伪元素清除浮动(用于非IE浏览器)
#### 8、盒子模型
* 标准模式（Standards Mode）和怪异模式 （Quirks Mode）
* 当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
* 当设置为box-sizing:border-box时，将采用怪异模式解析计算；
* 在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
* 在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
#### 9、div+css的布局较table布局有什么优点？
* 改版的时候更方便 只要改css文件。
* 页面加载速度更快、结构化清晰、页面显示简洁。
* 表现与结构相分离。
* 易于优化（seo）搜索引擎更友好，排名更容易靠前。
#### 10、优化加载的方式
* 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
* 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
* 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
* 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
* 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致
#### 11、页面导入样式时，使用link和@import有什么区别？
* link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
* 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
* import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
#### 12、语义化标签元素
| 标签 | 描述 | 
| ------------- | ----- |
| article | 定义页面独立的内容区域。 |
| aside | 定义页面的侧边栏内容。 |
| bdi | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| command | 定义命令按钮，比如单选按钮、复选框或按钮 |
| details | 用于描述文档或文档某个部分的细节 |
| dialog | 定义对话框，比如提示框 |
| summary | 标签包含 details 元素的标题 |
| figure | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| figcaption | 定义 <figure> 元素的标题 |
| footer | 定义 section 或 document 的页脚。 |
| header | 定义了文档的头部区域 |
| mark | 定义带有记号的文本。 |
| meter | 定义度量衡。仅用于已知最大和最小值的度量。 |
| nav | 定义导航链接的部分。 |
| progress | 定义任何类型的任务的进度。 |
| ruby | 定义 ruby 注释（中文注音或字符）。 |
| rt | 定义字符（中文注音或字符）的解释或发音。 |
| rp | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
| section | 定义文档中的节（section、区段）。 |
| time | 定义日期或时间。 |
| wbr | 规定在文本中的何处适合添加换行符。 |

#### 13、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
* 行内元素：a b span img input select strong
* 块级元素：div ul ol li dl dt dd h1 h2 h3 h4 p 等
* 空元素：br hr img link meta
#### 14、.iframe有那些缺点？ 
* iframe会阻塞主页面的Onload事件； 
* 搜索引擎的检索程序无法解读这种页面，不利于SEO;
* iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
> 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

#### 15、HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5
> 新增加了图像、位置、存储、多任务等功能。
> 新增元素：

* canvas
* 用于媒介回放的video和audio元素
* 本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
* 语意化更好的内容元素，比如 article footer header nav section
* 位置API：Geolocation
* 表单控件，calendar date time email url search
* 新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket
* 拖放API：drag、drop
> 移除的元素：

* 纯表现的元素：basefont big center font s strike tt u
* 性能较差元素：frame frameset noframes
> 区分：

* DOCTYPE声明的方式是区分重要因素
* 根据新增加的结构、功能来区分

#### 16、 label的作用是什么? 是怎么用的?

label标签用来定义表单控件间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。label 中有两个属性是非常有用的, FOR和ACCESSKEY。 
FOR属性功能：表示label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。例如，
```
<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text"> 
```
ACCESSKEY属性功能：表示访问label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。例如，
```
<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">
```
#### 17、实现不使用 border 画出1px高的线，在不同浏览器的Quirks mode和CSS Compat模式下都能保持同一效果
```
<div style="height:1px;overflow:hidden;background:red"></div>
```
#### 18、 title与h1的区别、b与strong的区别、i与em的区别？
* title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响
* strong标明重点内容，语气加强含义；b是无意义的视觉表示
* em表示强调文本；i是斜体，是无意义的视觉表示
* 视觉样式标签：b i u s
* 语义样式标签：strong em ins del code
#### 19、优雅降级和渐进增强概述
* 渐进增强针对低版本的浏览器构建页面，保证基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
* 优雅降级一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容
#### 20、Src与href区别？
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是souce的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
### css部分 ###
***
#### 1、CSS优先级算法如何计算？
* 元素选择符： 1
* class选择符： 10
* id选择符：100
* 元素标签：1000
* !important声明的样式优先级最高，如果冲突再进行计算。
* 如果优先级相同，则选择最后出现的样式。
* 继承得到的样式的优先级最低。
#### 2、CSS3新增伪类有那些?
* p:first-of-type 选择属于其父元素的首个元素
* p:last-of-type 选择属于其父元素的最后元素
* p:only-of-type 选择属于其父元素唯一的元素
* p:only-child 选择属于其父元素的唯一子元素
* p:nth-child(2) 选择属于其父元素的第二个子元素
* :enabled :disabled 表单控件的禁用状态。
* :checked 单选框或复选框被选中。
#### 3、 CSS3有哪些新特性？
* RGBA和透明度
* background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
* word-wrap（对长的不可分割单词换行）word-wrap：break-word
* 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
* font-face属性：定义自己的字体
* 圆角（边框半径）：border-radius 属性用于创建圆角
* 边框图片：border-image: url(border.png) 30 30 round
* 盒阴影：box-shadow: 10px 10px 5px #888888
* 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
* 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
* 增加了旋转,缩放,定位,倾斜,动画，多背景:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
#### 4、用纯CSS创建一个三角形的原理是什么？
首先，需要把元素的宽度、高度设为0。然后设置边框样式。
```
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
```
#### 5、 position跟display、overflow、float这些特性相互叠加后会怎么样？

* display属性规定元素应该生成的框的类型；
* position属性规定元素的定位类型；
* float属性是一种布局方式，定义元素在哪个方向浮动。

类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

#### 6、 对BFC规范(块级格式化上下文：block formatting context)的理解？

BFC规定了内部的Block Box如何布局。

定位方案：

➤内部的Box会在垂直方向上一个接一个放置。

➤Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。

➤每个元素的margin box 的左边，与包含块border box的左边相接触。

➤BFC的区域不会与float box重叠。

➤BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

➤计算BFC的高度时，浮动元素也会参与计算。

满足下列条件之一就可触发BFC

➤根元素，即html

➤float的值不为none（默认）

➤overflow的值不为visible（默认）

➤display的值为inline-block、table-cell、table-caption

➤position的值为absolute或fixed
#### 7、移动端的布局用过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。
```

➤<head>
<!-- 当屏幕宽度 小于 480px的时候触发该调用 -->
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">

➤CSS : @media only screen and (max-device-width:480px) {/css样式/}
```
#### 8、元素竖向的百分比设定是相对于容器的高度吗？
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
#### 9、如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
#### 10、CSS有哪些继承属性
关于文字排版的属性如：
```
font
word-break
letter-spacing
text-align
text-rendering
word-spacing
white-space
text-indent
text-transform
text-shadow
line-height
color
visibility
cursor
```
#### 10、display:inline-block 什么时候会显示间隙？(携程)
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
#### 11、如何修改Chrome记住密码后自动填充表单的黄色背景？
产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的
解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete="off"
解决方案2：input:-webkit-autofill { background-color: transparent; }
#### 12、input [type=search] 搜索框右侧小图标如何美化？
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background:url("images/searchicon.png") no-repeat 0 0;
  background-size: 15px 15px;
}
#### 13、简单的css3动画
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css3动画</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100px;
				height: 100px;
				border: 1px solid #000;
				position: relative;
        // 运行方法名称 运行时间 运行方式 是否重复
				animation:test 5s linear infinite;
			}
			@keyframes test{
				0%{
					background: red;
					height: 100px;
					width: 100px;
					left: 0;
					top: 0;
				}
				25%{
					background: green;
					height: 150px;
					width: 150px;
					left: 300px;
					top: 100px;
				}
				50%{
					background: blue;
					height: 250px;
					width: 250px;
					left: 500px;
					top: 300px;
				}
				75%{
					background: gray;
					height: 150px;
					width: 150px;
					left: 300px;
					top: 100px;
				}
				100%{
					background: saddlebrown;
					height: 100;
					width: 100;
					left: 0;
					top: 0;
				}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

```
| 属性 | 描述 | CSS |
| ------- | -------------------------- | ------- |
| @keyframes | 规定动画。| 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。| 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。	| 3 | 
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
| animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
#### 14、2D转换
* translate() //平移 translate(100px.100px) 向右向下分别移动100px
* rotate() //旋转 rotate(30deg)
* scale() //缩放 scale(0.8) || scale（2,4） 宽度2倍，高度4倍
* skew() //二维旋转，两个参数 （x,y）
* matrix() //matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
#### 15、matrix() 矩阵
* 平移 ：transform：translate（30,30）= transform: matrix(X, X, X, X, 30, 30);
* 缩放：transform:scal(1,1) = transform:matrix(1,x,x,1,x,x)
* 拉伸： transform：skew(30deg,60deg) = transform:matrix(X,tan(θy),tan(θx),X,X,X)
* 旋转：transform: rotate(30deg) = transform:matrix(cosθ,sinθ,-sinθ,cosθ,X,X)
### js部分 ###
***
#### 1、字符串方法
* concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。
* indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 。
* charAt() – 返回指定位置的字符。
* lastIndexOf() – 返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回 -1 。
* match() – 检查一个字符串是否匹配一个正则表达式。
* substr() 函数 -- 返回从string的startPos位置，长度为length的字符串
* substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。
*　slice() – 提取字符串的一部分，并返回一个新字符串。
* replace() – 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。
* search() – 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。
* split() – 通过将字符串划分成子串，将一个字符串做成一个字符串数组。
* length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。
* toLowerCase() – 将整个字符串转成小写字母。
* toUpperCase() – 将整个字符串转成大写字母。

#### 2、怎样添加、移除、移动、复制、创建和查找节点？

* 创建新节点
1. createDocumentFragment() //创建一个DOM片段
2. createElement() //创建一个具体的元素
3. createTextNode() //创建一个文本节点
* 添加、移除、替换、插入
1. appendChild() //添加
2. removeChild() //移除
3. replaceChild() //替换
4. insertBefore() //插入
* 查找
1. getElementsByTagName() //通过标签名称
2. getElementsByName() //通过元素的Name属性的值
3. getElementById() //通过元素Id，唯一性

#### 3、数组去重并排序
```
// 去重 并排序 从大到小
//set去重
let arrs = [1,1,2,12,3,41,4,1,1,4,5,6]
let setArr = new Set(arrs)
//set转数组
let arr = Array.from(setArr)
//冒泡法
for(let i in arr){
	for(let j in arr){
		if(arr[i] > arr[j]){
			let temp 
			temp = arr[i]
			arr[i] = arr[j]
			arr[j] = temp
		}
	}
}
console.log(arr)
```
#### 4、ECM6 class简单用法
```
class Person{
	constructor() { 
		this.name = '米库科技'
	}
	get name(){
		//console.log(`获取名称:${this.name}`)
		return this._name
	}
	set name(val){
		//console.log(`设置名称输出测试:${val}`)
		this._name = val
		return this
	}
}
var boys = new Person()
boys.name = '张三'
console.log(boys.name)
```
> super

```
class Person{
	constructor() { 
		this.name = '米库科技'
		this.sex = 'boy'
	}
	get name(){
		//console.log(`获取名称:${this.name}`)
		return this._name
	}
	set name(val){
		//console.log(`设置名称输出测试:${val}`)
		this._name = val
		return this
	}
	get sex(){
		return this.sex
	}
	set sex(val){
		this._sex = val
		return this
	}
	say(){
		console.log('father say hello')
	}
}
class Boy extends Person{
	//构造函数
	sonstructor(){
		
	}
	say(){
		super.say() ==>执行 父类方法
		console.log('son say goodmorning')
	}
	
}
let son = new Boy()  ==> 'father say hello' + 'son say goodmorning'
```
#### 5、saync await
```
//使用 setTimeout 来模拟异步请求
function sleep(second, param) {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve(param);
		}, second);
	})
}
async  function test() {
	let result1 = JSON.stringify(await sleep(2000, 'req01'))  ;
	let result2 = JSON.stringify(await sleep(1000, 'req02' + result1));
	let result3 = JSON.stringify(await sleep(500, 'req03' + result2));
	console.log(`${result3}${result2}${result1}`);
}
test();			
```
#### 6、Javascript的事件流模型都有什么?

* “事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
* “事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
* “DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

#### 7、.JSON 的了解?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。
格式：采用键值对，例如：{‘age’:’12’, ‘name’:’back’}

#### 8、IE和标准下有哪些兼容性的写法
```
var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
```
#### 9、ajax请求的时候get 和post方式的区别
* 一个在url后面 ，一个放在虚拟载体里面
* get有大小限制(只能提交少量参数)
* 安全问题
* 应用不同 ，请求数据和提交数据
#### 10、如何阻止事件冒泡
ie:阻止冒泡ev.cancelBubble = true;非IE ev.stopPropagation();  
#### 11、原生操作 DOM
```
1）创建新节点
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点
2）添加、移除、替换、插入
appendChild()      //添加
removeChild()      //移除
replaceChild()      //替换
insertBefore()      //插入
3）查找
getElementsByTagName()    //通过标签名称
getElementsByName()     //通过元素的Name属性的值
getElementById()        //通过元素Id，唯一性

```
#### 12、document load 和document ready的区别
* document.onload 是在结构和样式,外部js以及图片加载完才执行js
* document.ready是dom树创建完成就执行的方法，原生种没有这个方法，jquery中有 $().ready(function)
#### 13、 函数声明与函数表达式的区别？
在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。

#### 14、 js继承
```
/**
 * 创建一个对象
 */
function Person (name) {
  this.name = name || 'zhangsan'
  this.eat = function () {
    console.log(`${this.name}正在吃早饭`)
  }
}
Person.prototype.run = function () {
  console.log(`${this.name}正在跑步`)
}
let test = new Person('chunhui')
test.eat()
test.run()
/**
 * 原型链继承 通过peototype 实现
 */
function Men () {

}
Men.prototype = new Person()
Men.prototype.name = '原型链'
// 不生效，原型链继承 不可更改父类的参数
let men = new Men('test')
men.eat()
men.run()

/**
 * 通过 call 继承
 */
function Women (name) {
  Person.call(this)
  this.name = name || 'Lucy'
}
//可以更改父类的名称
let women = new Women('LLucy')
women.eat()
//women.run()

/**
 * 组合继承
 */

function Child (name) {
  Person.call(this)
  this.name = name || 'wangwu'
}
Child.prototype.playGame = function () {
  console.log(`${this.name}是英雄联盟高手`)
}

let child = new Child()
child.playGame()
```

# --------------------------------------------

#### 1、vue  mixin 混入