前端基础知识点整理

HTML标签分类

• 块状元素
  div p h1-h6 ol ul dl table address等
• 内联元素
  a span i em strong label
• 内联块元素
  img input

DHTML优点

• 动态样式
• 动态内容
• 动态定位

input 标签 disabled属性和readonly属性区别

• 如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是- 当提交表单时，这个表单输入项将不会被提交。
• readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。

input标签的type属性有哪些

HTML5 input标签新增type属性

• color：用于指定颜色的控件。
• date：用于输入日期的控件（年，月，日，不包括时间）。
• month：用于输入年月的控件，不带时区。
• week：用于输入一个由星期-年组成的日期，日期不包括时区
• time：用于输入不含时区的时间控件。
• datetime：基于UTC时区的日期时间输入控件（时，分，秒及几分之一秒）。
• datetime-local：用于输入日期时间控件，不包含时区。
• email：用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
• number: 用于应该包含数值的输入域。只能输入数字
• range：用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
• search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
• tel：用于输入电话号码的控件。在移动端输入会显示数字键盘，PC端无效果
• url：用于编辑URL的字段。

HTML5手册语义化标签

article	section	aside	hgroup	mark
header	footer	nav	time	menu
figure	figcaption	contextmenu

CSS3新增特性

过渡 transition	动画animation	形状转换 transform	选择器	阴影 box-shadow
边框border-image	背景 background-clip	反射 -webkit-box-reflect	文字换行 word-break	颜色透明度 rgba
渐变	滤镜filter	弹性布局 flexbox	多列布局	盒模型 box-sizing
栅格布局 grid	媒体查询	border-radius	颜色及透明度 hsl hsla	opacity

CSS3新增选择器

参考自 https://blog.csdn.net/weixin_42568381/article/details/81738566

1. 属性选择器

input[type="text"]{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

2. 结构性伪类选择器 :root 根选择器 :root{} 等同于 html {}
3. 结构性伪类选择器—not

 input:not([type="submit"]){
  border:1px solid red;
}

4. 结构性伪类选择器—empty

p:empty {
  display: none;
}

用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

5. 结构性伪类选择器—target
   :target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。
6. 结构性伪类选择器—first-child
7. 结构性伪类选择器—last-child
8. 结构性伪类选择器—nth-child(n)
9. only-child选择器
   :only-child选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。
10. :enabled和:disabled选择器
11. :checked选择器
12. ::selection选择器
    ::selection伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。
13. :read-only和read-write选择器
    :read-only伪类选择器用来指定处于只读状态元素的样式。
    :read-write选择器刚好与:read-only选择器相反，主要用来指定当元素处于非只读状态时的样式。
14. ::before和::after

特殊标签

<sup>上标文本</sup>  
<sub>下标文本</sub>
<mark>突出显示</mark>

HTML5 新引入特性

语义标签	增强型表单	音频视频	canvas绘图	SVG
地理定位 getCurrentPosition	拖放API	WebWorker	WebStorage	WebSocket

HTML5 新增表单元素

autocompelete	autofocus	form	formaction	formenctype
frommethod	formnovalidate	formtarget	height	list
max	min	multiple	pattern	placeholder
required	step	width

HTML中的空元素

area	base	br	col	colgroup
command	img	input	keygen	link
meta	param	source	track	wbr

定位

• relative 相对定位，相对于其正常位置进行定位，原本所占空间仍然保留
• absolute 绝对定位，相对于static外的第一个父元素进行定位
• fixed 固定定位， 相对于浏览器窗口进行定位
• static 默认值，无定位，元素出现在正常流中
• inherit 继承父元素position值

media-queries 条件

• 设备像素比
• 设备类型
• 设备高度

触发BFC

• float值不为 none
• position 不为staic或者relative
• display值为inline-block、table-cell、flex、table-caption或者inline-flex
• overflow值不为visible

css可继承属性

• 所有元素可继承：
  visibility cursor
• 内联元素可继承：
  letter-spacing 、 word-spacing 、white-space 、 line-height 、 color 、 font 、font-family、 font-size、 font-style 、font-weight 、text-decoration 、 text-transform 、 direction
• 终端块元素可继承：
  text-indent 、text-align
• 列表元素可继承：
  list-style-position、list-style、list-style-type、list-style-image

WEB程序对象作用域

• 请求作用域
• 会话作用域
• 应用上下文

导致回流发生的因素

回流必然引发重绘，重绘不一定会引发回流

1. 调整窗口大小，浏览器窗口尺寸改变。
2. 元素尺寸改变 —— 边距、填充、边框、高度和宽度、字体大小
3. 页面渲染初始化
4. 样式表变动
5. 元素内容变化，尤其是输入控件
6. 元素位置改变
7. css伪类激活
8. DOM操作，添加或删除可见的dom元素
9. offsetWidth、width、clientWidth、scrollTop、scrollHeight的计算、

@import和link的区别

1. 从属关系区别 @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2. 加载顺序区别 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3. 兼容性区别 @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4. DOM可控性区别 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
5. 权重区别 link引入的样式权重大于@import引入的样式。

什么是SVG

1. SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
2. SVG 用来定义用于网络的基于矢量的图形
3. SVG 使用 XML 格式定义图形
4. SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
5. SVG 是万维网联盟的标准
6. SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
7. SVG是HTML下的一个分支

JSON和XML数据格式比较

• JSON相对于XML来讲，数据的体积小，传递的速度更快些
• JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互
• JSON的速度要远远快于XML
• JSON对数据的描述性不如XML

JS数据类型

• 基本数据类型：Number，String，Boolean，Undefined，Null，Symbol（es6新增）
• 复杂数据类型：Object，Array，Function，RegExp，Date，Error
• 全局数据类型：Math
• 内置类型：Null，Undefined，Boolean，Number，String，Object，Symbol
• 原始类型：Null，Undefined，Boolean，Number，String，Symbol

JS中支持冒泡的事件有哪些

不能冒泡的

abort	resize	error	load
mouseenter	mouseleave	blur	focus

支持冒泡的

beforeinput	click	compositionstart	compositionend	compositionupdate
dbclick	focusin	focusout	keydown	select
keyup	mousedown	mousemove	mouseout	mouseover
mouseup	scroll	wheel

Ajax与Flash的优缺点

• Ajax的优势在意在于开放性，易用性及易于开发
• Flash的优势在于多媒体处理，可以更容易的调用浏览器以外的外部资源
• Ajax最主要的缺点就是它可能破坏浏览器的后退功能
• flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间

typeof返回值

• typeof Symbol() //“symbol”
• typeof Number() //“number”
• typeof String() //“string”
• typeof Function() //“function”
• typeof Object() //“object”
• typeof Boolean() //“boolean”
• typeof null //“object”
• typeof undefined //“undefined”

不支持冒泡的事件

• ①focus
• ②blur
• ③mouseenter
• ④mouseleave
• ⑤load
• ⑥unload
• ⑦resize