前端知识框架
2021-07-22 15:14:50 9 举报AI智能生成
关于前端知识的总结，欢迎大家完善补充
作者其他创作
大纲/内容
DOM tree
events
range
traveral (废弃)
DOM
CSSOM
BOM
Web animation
crypto
api
实现原理
Brower
Node
Electron
小程序
API
Vue
JavaScript 框架
ElementUI
组件库
html.spec.whatwg.org
语法
https://html.spec.whatwg.org/#tokenization
词法
作为计算机语言
https://www.w3.org/QA/2002/04/valid-dtd-list.html
DTD
https://www.w3.org/TR/html4/HTMLlat1.ent
https://www.w3.org/TR/html4/HTMLsymbol.ent
https://www.w3.org/TR/html4/HTMLspecial.ent
Entity
参考SGML
svg
mathml
视觉功能障碍者阅读模式
aria
Namespace
概念
全局属性
xmlns
属性
head
body
允许的内容
html
document
至少包含一个<title> 元素来指定文档的标题信息
文本
title
href
target
base
charset
http-equiv
name
Standard metadata names
Other metadata names
Pragma directives
Specifying the document's character encoding
meta
type
media
nonce
text/css
style
onofterprint
inbeforeprint
onbeforeunload
onblur
onerror
onfocus
onhashchange
onlanguagechange
onload
onmessage
onoffline
ononline
onpopstate
onredo
onresize
onstorage
onundo
onunload
Flow content
article
Flow content.
section
flow content
nav
aside
h1、h2、... h6
hgroup
header
footer
address
Creating an outline
Sample outlines
Exposing outlines to users
Headings and sections
Article or section?
Usage summary
sections
as
crossorigin
disabled
hreflang
importance
integrity
referrerpolicy
rel
sizes
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
link
Phrasing content
p
hr
pre
cite
blockquote
reversed
start
zero
li
script
template
ol
ul
label
menu
value
dl
dt
dd
figure
figcaption
main
div
open
dialog
Grouping content
a
em
strong
phrasing content
small
s
q
dfn
abbr
Phrasing content.
ruby
rt
rp
data
time
code
var
samp
kbd
sub
sup
sub\\sup
i
b
u
mark
dir
bdi
bdo
span
br
wbr
Text-level semantics
area
Links
datetime
Transparent
ins
del
Edits
source
img
picture
src
srcset
alt
decoding
height
importance
ismap
loading
width
usemap
allow
allowfullscreen
allowpaymentrequest
csp（实验中）
srcdoc
mozbrowser（实验中）
iframe
embed
object
video
audio
track
Media elements
Any transparent element
map
Image maps
MathML
SVG
Embedded content
caption
colgroup
thead
tr
tbody
tfoot
table
bgcolor
col
td
th
Tabular data
accept-charset
autocapitalize（实验中）
autocomplete
action
enctype
method
novalidate
form
for
accept---file
alt---image
autocomplete---all
autofocus---all
capture---file
disabled---all
form---all
formaction---image.submit
height---image
list---绝大多数
max---数字类型
min---数字类型
name---all
readonly---绝大多数
required---绝大多数
src---image
step---数字类型
type---all
value---all
width---all
input
autofocus
autocomplete（实验中）
formaction
formenctype
formmethod
formnovalidate
formtarget
button
multiple
required
size
select
datalist
option
optgroup
selected
textarea
max
progress
meter
fieldset
legend
Forms
details
summary
Interactive elements
defer
integrity
nomodule
text
Dynamic script such as text/javascript
noscript
slot
canvas
Scripting
Custom elements
Common idioms without dedicated elements
Disabled elements
Matching HTML elements using selectors and CSS
Tag
参考XML
HTML
<TAB>
<VT>
<FF>
<SP>
<NBSP>
<ZWNBSP>
<USP>
WhiteSpace（空白字符）
<LF>
<CR>
<LS>
<PS>
LineTerminator（换行符）
/* XXXXX */
MultiLineComment
// XXXXXXX
SingleLineComment
Comment（注释）
UnicodeIDStart
$
_
\\ UnicodeEscapeSequence
IdentifierStart
UnicodeIDContinue
<ZWNJ>
<ZWJ>
IdentifierPart
await
break
case
catch
class
const
continue
debugger
default
delete
do
else
enum
export
extends
false
finally
function
if
import
in
instanceof
创建一个空的简单JavaScript对象
链接该对象（设置该对象的constructor）到另一个对象
将步骤1新创建的对象作为this的上下文
如果该函数没有返回对象，则返回false
如何工作
new
null
return
super
switch
this
throw
true
try
typeof
void
while
with
yield
Keyword
ReservedWord
IdentifierName（标识符）
Punctuator（标点）
NumericLiteral（数值字面量）
StringLiteral（字符字面量）
NoSubstitutionTemplate
TemplateHead
Template（模板）
Token
Lex-词法
Atom
Expression
普通语句
语句块
控制型语句
带标签语句
statement
Structure
Script & Module
Syntax-句法
Grammar-语法
Semantics-语义
Infinity
NaN
undefined
Value Properties
eval( x )
isFinite( number )
isNaN( number )
parseFloat( string )
decodeURI (encodedURI)
decodeURIComponent (encodedURIComponent)
encodeURI (uri)
encodeURIComponent (uriComponent)
URI Function
Function 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
继承
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()：从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值
Array.prototype.reduceRight()：从右到左为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值
Array.prototype.values()：返回一个数组迭代器对象，该迭代器会包含所有数组元素的值
迭代方法
实例方法
String.prototype.constructor：用于创造对象的原型对象的特定的函数
String.prototype.length：返回了字符串的长度
String.fromCharCode()：通过一串 Unicode 创建字符串
String.fromCodePoint()：通过一串 码点 创建字符串
String.raw()：通过模板字符串创建字符串。
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]()：返回一个新的迭代器对象，该对象遍历字符串值的索引位置，将每个索引值作为字符串值返回
HTML无关方法
Constructor Properties
Atomics( ES11+ )
JSON
Math
静态方法
Reflect
Other Properties
Global Object
Null
Undefined
Language Types
list / record
completion record
reference
property descriptor
Lexical Environment and Environment record
Data Blocks
Specification Types（规范类型）
事件循环
执行过程
Runtime-运行时
JavaScript
At rules
*
div svg|a
.cls
#id
[attr = value]
:hover
::before
简单选择器
<简单选择器><简单选择器><简单选择器>
*或者div必须写在最前面
复合选择器
<复合选择器><sp><复合选择器>
<复合选择器>'>'<复合选择器>
<复合选择器>'~'<复合选择器>
<复合选择器>'+'<复合选择器>
<复合选择器>'||'<复合选择器>
复杂选择器
选择器列表
优先级别
selector
key
declaration
rule
:dir
:lang
Linguisitic(语言)
:any-link
:link
:visited
:local-link
:target
:target-within
:scope
Location(位置)
:active
:focus-visible
:focus-within
User action(用户操作)
:current
:past
:future
Time-dimensional(时间维度)
:playing
:paused
Resource state(资源状态)
: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-classes（伪类）
::after
:backdrop
::cue
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-letter
color
::first-line
::grammer-error
::marker
::placeholder
:selection
:slotted()
:spelling-error
Pseudo-elements（伪元素）
排布
动画
Reference
CSS
前端知识体系
0 条评论
下一页
