前端知识框架
2021-07-22 15:14:50 9 举报AI智能生成
关于前端知识的总结，欢迎大家完善补充
作者其他创作
大纲/内容
API
Brower
api
DOM
DOM tree
events
range
traveral (废弃)
CSSOM
BOM
Web animation
crypto
实现原理
Node
Electron
小程序
JavaScript
框架
框架
Vue
组件库
ElementUI
HTML
作为计算机语言
语法
html.spec.whatwg.org
词法
https://html.spec.whatwg.org/#tokenization
参考SGML
DTD
https://www.w3.org/QA/2002/04/valid-dtd-list.html
Entity
https://www.w3.org/TR/html4/HTMLlat1.ent
https://www.w3.org/TR/html4/HTMLsymbol.ent
https://www.w3.org/TR/html4/HTMLspecial.ent
参考XML
Namespace
svg
mathml
aria
视觉功能障碍者阅读模式
Tag
document
html
概念
属性
全局属性
xmlns
允许的内容
head
body
meta
head
概念
属性
全局属性
允许的内容
至少包含一个<title> 元素来指定文档的标题信息
title
概念
属性
全局属性
允许的内容
文本
base
概念
属性
全局属性
href
target
允许的内容
meta
概念
属性
全局属性
charset
http-equiv
name
允许的内容
Standard metadata names
Other metadata names
Pragma directives
Specifying the document's character encoding
style
概念
属性
全局属性
type
media
nonce
title
允许的内容
text/css
sections
body
概念
属性
全局属性
onofterprint
inbeforeprint
onbeforeunload
onblur
onerror
onfocus
onhashchange
onlanguagechange
onload
onmessage
onoffline
ononline
onpopstate
onredo
onresize
onstorage
onundo
onunload
允许的内容
Flow content
article
section
概念
属性
全局属性
允许的内容
Flow content.
nav
概念
属性
全局属性
允许的内容
flow content
aside
h1、h2、... h6
hgroup
header
概念
属性
全局属性
允许的内容
footer
address
Headings and sections
Creating an outline
Sample outlines
Exposing outlines to users
Usage summary
Article or section?
link
概念
属性
全局属性
as
crossorigin
disabled
href
hreflang
importance
integrity
media
referrerpolicy
rel
sizes
title
type
methods
prefetch
target
允许的内容
Processing the media attribute
Processing the type attribute
Fetching and processing a resource from a link element
Processing `Link` headers
Providing users with a means to follow hyperlinks created using the link element
Grouping content
p
概念
属性
全局属性
允许的内容
Phrasing content
hr
pre
概念
属性
允许的内容
Phrasing content
blockquote
概念
属性
全局属性
cite
允许的内容
Flow content
ol
概念
属性
全局属性
reversed
start
type
允许的内容
zero
li
script
template
ul
menu
概念
属性
全局属性
label
type
允许的内容
li
概念
属性
全局属性
value
type
允许的内容
flow content
dl
概念
dt
概念
dd
概念
figure
概念
属性
全局属性
允许的内容
figcaption
概念
属性
全局属性
允许的内容
flow content
main
概念
属性
全局属性
允许的内容
Flow content
div
概念
属性
全局属性
允许的内容
dialog
概念
属性
全局属性
open
允许的内容
Flow content
Text-level semantics
a
em
strong
small
概念
属性
全局属性
允许的内容
phrasing content
Flow content
s
概念
属性
全局属性
允许的内容
flow content
Phrasing content
cite
概念
属性
全局属性
允许的内容
Phrasing content
q
dfn
abbr
ruby
概念
属性
全局属性
允许的内容
Phrasing content.
rt
rp
data
概念
属性
全局属性
value
允许的内容
Phrasing content
time
code
概念
属性
全局属性
允许的内容
Phrasing content
var
samp
kbd
概念
属性
全局属性
允许的内容
Phrasing content
sub\sup
sub
sup
i
概念
属性
全局属性
允许的内容
phrasing content
b
概念
属性
全局属性
允许的内容
Phrasing content
u
mark
概念
属性
全局属性
允许的内容
Phrasing content.
bdi
概念
属性
全局属性
dir
允许的内容
Phrasing content
bdo
概念
属性
全局属性
dir
允许的内容
Phrasing content
span
概念
属性
全局属性
允许的内容
Phrasing content.
br
概念
属性
全局属性
允许的内容
wbr
Links
a
area
Edits
ins
概念
属性
全局属性
datetime
允许的内容
Transparent
del
概念
属性
全局属性
datetime
允许的内容
Transparent
Embedded content
picture
概念
属性
全局属性
允许的内容
source
img
source
概念
属性
全局属性
sizes
src
srcset
type
media
允许的内容
img
概念
属性
全局属性
alt
crossorigin
decoding
height
importance
ismap
loading
referrerpolicy
sizes
src
srcset
width
usemap
允许的内容
iframe
概念
属性
全局属性
allow
allowfullscreen
allowpaymentrequest
csp（实验中）
importance
name
src
srcdoc
width
mozbrowser（实验中）
允许的内容
embed
概念
属性
全局属性
height
src
type
width
允许的内容
object
概念
属性
全局属性
data
height
name
type
usemap
width
允许的内容
video
audio
track
Media elements
map
概念
属性
全局属性
name
允许的内容
Any transparent element
area
Image maps
MathML
SVG
Tabular data
table
概念
属性
全局属性
允许的内容
caption
colgroup
thead
tr
tbody
tfoot
caption
概念
属性
全局属性
允许的内容
Flow content
colgroup
概念
属性
全局属性
bgcolor
span
允许的内容
col
概念
属性
全局属性
允许的内容
tbody
thead
tfoot
tr
td
th
Forms
form
概念
属性
全局属性
accept-charset
autocapitalize（实验中）
autocomplete
name
rel
action
enctype
method
novalidate
target
允许的内容
label
概念
属性
全局属性
for
form
允许的内容
input
概念
属性
全局属性
accept---file
alt---image
autocomplete---all
autofocus---all
capture---file
checked---radio,checkbox
dirname---text,search
disabled---all
form---all
formaction---image.submit
formenctype---image,submit
formmethod---image,submit
formnovalidate---image,submit
formtarget---image,submit
height---image
list---绝大多数
max---数字类型
maxlength---text,url,password,search,tel
min---数字类型
minlength---text,url,password,search,tel
multiple---email,file
name---all
placeholder---password, search, tel, text, url
readonly---绝大多数
required---绝大多数
size---email, password, tel, text
src---image
step---数字类型
type---all
value---all
width---all
允许的内容
button
概念
属性
全局属性
autofocus
autocomplete（实验中）
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
name
type
value
允许的内容
Phrasing content
select
概念
属性
全局属性
autocomplete
autofocus
disabled
form
multiple
name
required
size
允许的内容
datalist
概念
属性
全局属性
允许的内容
optgroup
概念
属性
全局属性
disabled
label
允许的内容
option
option
概念
属性
全局属性
disabled
label
selected
value
允许的内容
文本
textarea
progress
概念
属性
全局属性
max
value
允许的内容
meter
概念
fieldset
概念
属性
全局属性
disabled
form
name
允许的内容
legend
概念
属性
全局属性
允许的内容
Phrasing content
Interactive elements
details
概念
属性
全局属性
open
summary
概念
属性
全局属性
Scripting
script
概念
属性
全局属性
crossorigin
defer
integrity
nomodule
nonce
referrerpolicy
src
type
text
允许的内容
Dynamic script such as text/javascript
noscript
概念
属性
全局属性
允许的内容
template
概念
属性
允许的内容
slot
概念
属性
全局属性
name
允许的内容
Transparent
canvas
概念
属性
全局属性
height
width
允许的内容
Custom elements
Common idioms without dedicated elements
Disabled elements
Matching HTML elements using selectors and CSS
JavaScript
Grammar-语法
Lex-词法
WhiteSpace（空白字符）
<TAB>
<VT>
<FF>
<SP>
<NBSP>
<ZWNBSP>
<USP>
LineTerminator（换行符）
<LF>
<CR>
<LS>
<PS>
Comment（注释）
MultiLineComment
/* XXXXX */
SingleLineComment
// XXXXXXX
Token
IdentifierName（标识符）
IdentifierStart
UnicodeIDStart
$
_
\ UnicodeEscapeSequence
IdentifierPart
UnicodeIDContinue
$
_
\ UnicodeEscapeSequence
<ZWNJ>
<ZWJ>
ReservedWord
Keyword
await
break
case
catch
class
const
continue
debugger
default
delete
do
else
enum
export
extends
false
finally
for
function
if
import
in
instanceof
new
如何工作
创建一个空的简单JavaScript对象
链接该对象（设置该对象的constructor）到另一个对象
将步骤1新创建的对象作为this的上下文
如果该函数没有返回对象，则返回false
null
return
super
switch
this
throw
true
try
typeof
var
void
while
with
yield
Punctuator（标点）
NumericLiteral（数值字面量）
StringLiteral（字符字面量）
Template（模板）
NoSubstitutionTemplate
TemplateHead
Syntax-句法
Atom
Expression
statement
普通语句
语句块
控制型语句
if
switch
for
while
continue
break
return
throw
try
带标签语句
Structure
Script & Module
Semantics-语义
Runtime-运行时
Global Object
Value Properties
Infinity
NaN
undefined
Function Properties
eval( x )
isFinite( number )
isNaN( number )
parseFloat( string )
parseInt( string, radix )
URI Function
Encode ( string, unescapedSet )
Decode ( string, reservedSet )
decodeURI (encodedURI)
decodeURIComponent (encodedURIComponent)
encodeURI (uri)
encodeURIComponent (uriComponent)
Constructor Properties
Array
ArrayBuffer
BigInt( ES11+ )
BigInt64Array( ES11+ )
BigInt64UintArray( ES11+ )
Boolean
DataView
Date
Error
EvalError
Float32Array
Float64Array
Function
Int8Array
Int16Array
Int32Array
Map
Number
Object
Promise
Proxy
ReferenceError
RangeError
RegExp
Set
SharedArrayBuffer( ES11+ )
String
Symbol
SyntaxError
TypeError
Uint8Array
Uint8ClampedArray
Uint16Array
Uint32Array
URIError
WeakMap
WeakSet
Constructor Properties
Array
继承
Function
属性
属性
Array.length
实例属性
Array.prototype.constructor
Array.prototype.length
方法
方法
Array.isArray():用来判断某个变量是否是一个数组对象。
Array.from():从类数组对象或者可迭代对象中创建一个新的数组实例。
Array.of():根据一组参数来创建新的数组实例，支持任意的参数数量和类型。
实例方法
修改方法
Array.prototype.copyWithin()：
在数组内部，将一段元素序列拷贝到另一段元素序列上，覆盖原有的值。
Array.prototype.fill()：
将数组中指定区间的所有元素的值，都替换成某个固定的值。
Array.prototype.pop()：
删除数组的最后一个元素，并返回这个元素。
Array.prototype.push()：
在数组的末尾增加一个或多个元素，并返回数组的新长度。
Array.prototype.reverse()：
颠倒数组中元素的排列顺序
Array.prototype.shift()：
删除数组的第一个元素，并返回这个元素
Array.prototype.sort()：
对数组元素进行排序，并返回当前数组
Array.prototype.splice()：
在任意的位置给数组添加或删除任意个元素
Array.prototype.unshift()：
在数组的开头增加一个或多个元素，并返回数组的新长度
访问方法
Array.prototype.concat()：
返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组
Array.prototype.includes()：
判断当前数组是否包含某指定的值，如果是返回 true，否则返回 false
Array.prototype.join()：
连接所有数组元素组成一个字符串
Array.prototype.slice()：
抽取当前数组中的一段元素组合成一个新数组
Array.prototype.toSource()：
返回一个表示当前数组字面量的字符串。遮蔽了原型链上的 Object.prototype.toSource() 方法
Array.prototype.toString()：
返回一个由所有数组元素组合而成的字符串。遮蔽了原型链上的 Object.prototype.toString() 方法
Array.prototype.toLocaleString()：
返回一个由所有数组元素组合而成的本地化后的字符串。遮蔽了原型链上的 Object.prototype.toLocaleString() 方法
Array.prototype.indexOf()：
返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1
Array.prototype.lastIndexOf()：
返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1
迭代方法
Array.prototype.forEach()：
为数组中的每个元素执行一次回调函数
Array.prototype.entries()：
返回一个数组迭代器对象，该迭代器会包含所有数组元素的键值对
Array.prototype.every()：
如果数组中的每个元素都满足测试函数，则返回 true，否则返回 false
Array.prototype.some()：
如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false
Array.prototype.filter()：
将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回
Array.prototype.find()：
找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回 undefined
Array.prototype.findIndex()：
找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回 -1
Array.prototype.keys()：
返回一个数组迭代器对象，该迭代器会包含所有数组元素的键
Array.prototype.map()：
返回一个由回调函数的返回值组成的新数组
Array.prototype.reduce()：
从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值
语法
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
参数：
callback
执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数：
accumulator
累计器累计回调的返回值; 它是上一次调用回调时返回
的累积值，或initialValue（见于下方）。
currentValue
数组中正在处理的元素。
index 可选
数组中正在处理的当前元素的索引。 如果提供了
initialValue，则起始索引号为0，否则从索引1起始。
array可选
调用reduce()的数组
initialValue可选
作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
实例
Array.prototype.reduceRight()：
从右到左为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值
Array.prototype.values()：
返回一个数组迭代器对象，该迭代器会包含所有数组元素的值
ArrayBuffer
BigInt( ES11+ )
BigInt64Array( ES11+ )
BigInt64UintArray( ES11+ )
Boolean
DataView
Date
Error
EvalError
Float32Array
Float64Array
Function
Int8Array
Int16Array
Int32Array
Map
Number
Object
Promise
Proxy
ReferenceError
RangeError
RegExp
Set
SharedArrayBuffer( ES11+ )
String
继承
Function
属性
属性
实例属性
String.prototype.constructor：用于创造对象的原型对象的特定的函数
String.prototype.length：返回了字符串的长度
方法
方法
String.fromCharCode()：通过一串 Unicode 创建字符串
String.fromCodePoint()：通过一串 码点 创建字符串
String.raw()：通过模板字符串创建字符串。
实例方法
HTML无关方法
String.prototype.charAt()：返回特定位置的字符
String.prototype.charCodeAt()：返回表示给定索引的字符的Unicode的值
String.prototype.codePointAt()：返回使用UTF-16编码的给定位置的值的非负整数
String.prototype.concat()：连接两个字符串文本，并返回一个新的字符串
String.prototype.includes()：判断一个字符串里是否包含其他字符串
String.prototype.endsWith()：判断一个字符串的是否以给定字符串结尾，结果返回布尔值
String.prototype.indexOf()：从字符串对象中返回首个被发现的给定值的索引值，如果没有找到则返回-1
String.prototype.lastIndexOf()：从字符串对象中返回最后一个被发现的给定值的索引值，如果没有找到则返回-1
String.prototype.localeCompare()：返回一个数字表示是否引用字符串在排序中位于比较字符串的前面，后面，或者二者相同
String.prototype.match()：使用正则表达式与字符串相比较
String.prototype.normalize()：返回调用字符串值的Unicode标准化形式
String.prototype.padEnd()：在当前字符串尾部填充指定的字符串， 直到达到指定的长度。 返回一个新的字符串
String.prototype.padStart()：在当前字符串头部填充指定的字符串， 直到达到指定的长度。 返回一个新的字符串
String.prototype.repeat()返回指定重复次数的由元素组成的字符串对象
String.prototype.replace()：被用来在正则表达式和字符串直接比较，然后用新的子串来替换被匹配的子串
String.prototype.search()：对正则表达式和指定字符串进行匹配搜索，返回第一个出现的匹配项的下标
String.prototype.slice()：摘取一个字符串区域，返回一个新的字符串
String.prototype.split()：通过分离字符串成字串，将字符串对象分割成字符串数组
String.prototype.startsWith()：判断字符串的起始位置是否匹配其他字符串中的字符
String.prototype.substr()：通过指定字符数返回在指定位置开始的字符串中的字符
String.prototype.substring()：返回在字符串中指定两个下标之间的字符。
String.prototype.toLocaleLowerCase()：根据当前区域设置，将符串中的字符转换成小写
String.prototype.toLocaleUpperCase()：根据当前区域设置，将字符串中的字符转换成大写
String.prototype.toLowerCase()：将字符串转换成小写并返回
String.prototype.toSource()：返回一个对象文字代表着特定的对象。你可以使用这个返回值来创建新的对象。重写 Object.prototype.toSource 方法
String.prototype.toString()：返回用字符串表示的特定对象。重写 Object.prototype.toString 方法
String.prototype.toUpperCase()：将字符串转换成大写并返回
String.prototype.trim()：从字符串的开始和结尾去除空格
String.prototype.trimStart()：从字符串的左侧去除空格。
String.prototype.trimEnd()：从字符串的右侧去除空格。
String.prototype.valueOf()：返回特定对象的原始值。重写 Object.prototype.valueOf 方法
String.prototype[@@iterator]()：返回一个新的迭代器对象，该对象遍历字符串值的索引位置，将每个索引值作为字符串值返回
Symbol
SyntaxError
TypeError
Uint8Array
Uint8ClampedArray
Uint16Array
Uint32Array
URIError
WeakMap
WeakSet
Other Properties
Atomics( ES11+ )
JSON
Math
Reflect
静态方法
Reflect.apply(target, thisArgument, argumentsList)：对一个函数进行调用操作，同时可以传入一个数组作为调用参数
Reflect.construct(target, argumentsList[, newTarget])：对构造函数进行 new 操作，相当于执行 new target(...args)
type
Language Types
Number
String
Boolean
Null
Undefined
Object
Symbol
Specification Types（规范类型）
list / record
completion record
reference
property descriptor
Lexical Environment and Environment record
Data Blocks
执行过程
事件循环
CSS
At rules
rule
selector
语法
简单选择器
*
div svg|a
.cls
#id
[attr = value]
:hover
::before
复合选择器
<简单选择器><简单选择器><简单选择器>
*或者div必须写在最前面
复杂选择器
<复合选择器><sp><复合选择器>
<复合选择器>'>'<复合选择器>
<复合选择器>'~'<复合选择器>
<复合选择器>'+'<复合选择器>
<复合选择器>'||'<复合选择器>
选择器列表
优先级别
declaration
key
value
Reference
Pseudo-classes（伪类）
Linguisitic(语言)
:dir
:lang
Location(位置)
:any-link
:link
:visited
:local-link
:target
:target-within
:scope
User action(用户操作)
:hover
:active
:focus-visible
:focus-within
Time-dimensional(时间维度)
:current
:past
:future
Resource state(资源状态)
:playing
:paused
input
:autofill
:enabled
:disabled
:read-only
:read-write
:placeholder-shown
:default
:checked
:indeterminate
:blank
:valid
:invalid
:in-range
:out-of-range
:required
:optional
:user-invalid
树结构
:root
:empty
:nth-child
:nth-last-child
:first-child
:last-child
:only-child
:nth-of-type
:nth-last-of-type
:first-of-type
:last-of-type
:only-of-type
逻辑
:not
:where :has
Pseudo-elements（伪元素）
::after
:backdrop
::before
::cue
::first-letter
font系列属性
background系列属性
color系列属性
margin
padding
border
text-decoration
text-shadow
text-transform
letter-spacing
word-spacing
line-height
text-decoration-color
text-decoration-line
text-decoration-style
box-shadow
float
vertical-align
::first-line
font系列属性
color
background系列属性
word-spacing
letter-spacing
text-decoration
text-transform
line-height
text-shadow
text-decoration-color
text-decoration-line
text-decoration-style
vertical-align
::grammer-error
::marker
::placeholder
:selection
:slotted()
:spelling-error
排布
动画
0 条评论
下一页
