Ending
Thanks for your time
Third Party*
Swiper
Scroll Reveal
Typed.js
Vanilla-tilt.js
Case：轮播图
API*
API：fetch - get/JSON
API：localStorage - setItem()、getItem()、removeItem()、clear()
Case：代办事项
Case：换肤
Case：记住密码
BOM/Window
Properties：scrollY、location
Methods：setInterval()、clearInterval()
Methods：setTimeout()、clearTimeout()
Events：load、resize、online、offline
Case：进度条 - 页面跳转
Case：背景音频
Case：导航控制 - 显示和隐藏
Case：数字时钟*
DOM
Properties：innerHTML、innerText、textContent
Properties：data-
Properties：offsetWidth、offsetHeight、offsetLeft、offsetTop
Methods：createElement()、append()
Methods：getElementsByTagName()、getElementsByClassName()、getElementById()
Methods：querySelector()、querySelectorAll()
Events：DOMContentLoaded、scroll
classList：add()、remove()、toggle()、contains()
Case：标签页
Case：代办事项
Case：换肤
JavaScript
Variable：let、var
Type：Number、String、Boolean
Type：Array、Object
Operator：typeof、instanceof、+、-、*、/、%
Type：Function
Statement：if-else、switch-case、for、forEach、?:
Event：addEventListener()
MediaQuery*
@media
Case：汉堡菜单
Counter*
counter-reset
counter-increment
Case：有序列表
Case：章节多级编号*
Variable*
--var_name
global：:root
local：selector
inline：style
Function*
rgb()、rgba()
linear-gradient()
var()
calc()
repeat()
Transform
软1
软3
数1
数2
数3
Property：transform
Property：transform-origin
Property：perspective、transform-style
Case：居中 - translate
Case：呼吸灯 - scale
Case：按钮 - skew
Case：卡片
Case：魔方
Case：画廊*
Animation
Property：@keyframes
Property：animation
Property：animation-duration
Property：animation-name、 animation-duration、 animation-timing-function
Property：transition-timing-function - steps()*
Case：头像设计
Case：加载动画
Case：伪3D图标动画*
JavaScript：DOM - querySelector()、click
JavaScript：BOM - window
JavaScript：animationend
Other：box-shadow
Transition
Property：transition
Property：transition-Property、transition-duration、transition-timing-function、transition-delay
Property：transition-timing-function - steps()*
Case：:hover动画
Case：:focus动画
Case：:checked动画
Case：页面动画*
Grid
Property：grid
Property：grid-template-columns、grid-template-rows、grid-template-areas
Property：grid-column、grid-row、grid-area
Case：两列布局、三列布局、煎饼布局
Case：九宫格
Case：异构布局*
Case：全站布局*
Other：auto-fill、repeat()、minmax()
Flex
Property：flex
Property：flex-direction、justify-content、align-item、flex-wrap、gap
Property：flex-grow、flex-shrink、flex-basis、flex、order
Case：导航
Case：时间轴
Case：面包屑
Position
Property：relative
Property：absolute
Property：fixed
Property：sticky
Case：购物车
Case：头像设计
Case：返回顶部
Case：吸顶导航
Other：z-index
Float
Property：float
Case：首字下沉
Case：图文混排
Other：shape-outside
Text
Property：font、line-height、text-shadow、text-indent、text-align-last*、writing-mode*
Property：overflow、white-space、text-overflow
Property：columns、column-count、column-span
Property：@font-face*
Selector：::first-line、::first-letter、::selection
Case：文章排版
Other：Iconfont、GoogleFonts
Border
Property：border、border-width、border-style、border-color
Property：border-radius
Case：头像设计
Case：技能条
Other：Fancy-border-radius
Background
Property：background
Property：background-color
Property：background-image、background-size、background-position、background-repeat
Property：linear-gradient()、radial-gradient()*、Conic-gradient()*
Case：单背景图 - 顶部 Banner、表格、表单登录
Case：渐变背景 - 按钮设计
Case：多背景图 - 首页左右背景*
Selector
Selector：Type selectors、Class selectors、ID selectors
Selector：Attribute selectors
Selector：Pseudo-classes、pseudo-elements
Selector：Combinators
Selector：:root、*
Case：标签页
textarea
Attribute：required、checked、placeholder、maxlength
Property：resize
Case：留言板
Case：登录
input
Attribute：type、name、value、id、required、checked
Property：accent-color、appearance
Selector：attribute、::placeholder、:focus、:valid
Case：注册
Other：<label>、<button>
form
Attribute：action、method
Other：Events
video
Attribute：src、controls、loop、autoplay、muted
Property：object-fit、object-position、aspect-ratio
Case：开场视频秀
Other：潮点视频
audio
Attribute：src、controls、loop、autoplay、muted
Case：背景音乐
image
Attribute：src、alt、title
Property：object-fit、object-position、overflow
Property：border-radius*
Case：LOGO
Other：MDN
table
Selector：class、nth-child()*
Property：border
Case：线框表格
Case：三线表格
Case：斑马纹表格*
list
<ol>、<li>
<ul>、<li>
<dl>、<dt>、<dd>
Selector：:marker
Property：list-style
Case：友情链接
Other：Entity
navigation
Usage：URL；id、#
Attribute：id、href、target
Selector：:target、:hover
Property：display、padding、margining、text-decoration
Property：font-size、font-weight、color、background-color、text-indent、line-height
Focus：Initialization
Case：个人网站
Other：<nav>、<p>、<h1>、<base>
Shortcut：Ctrl + D、Alt + Z
CSS
Rules：selector、name/Property-value、;
External：.css、<link>、@import()
Internal：<style>
Inline：style
IDE
Vs Code：live server、lorem
Chrome：默认浏览器、百度/必应搜索引擎、F12
Snipaste：F1、F3
Case：Hello, world.