2.全栈修炼之前端《快速学习HTML标签元素》学习笔记

0X00 前端开发语言

1.快速学习 HTML 元素

根元素

• html 标签 (主根元素)
• head 标签 (头部根元素)
• body 标签 (主体根元素)
• • 元数据
    • base、head
  • 内容分区
    • header、footer
  • 内容
    • 块级内容 div、dir
    • 文字内容 a、b、strong
  • 图片和多媒体
    • audio、img
  • 内嵌内容
    • iframe、object
  • 脚本
    • canvas、script
  • 表格
    • table、tbody
  • 表单
    • button、input
  • 可交互元素
    • menu、menuitem
• 属性
  • 常用属性
    • class、id、style、title
  • 全局属性
• 事件
  • 窗口事件
  • 表单事件
  • 键盘事件
  • 鼠标事件
  • 多媒体事件
• 编码
  • URL编码
  • 语言代码
  • 字符集

CSS

• 语法
  • @规则
  • 层叠
  • 注释
  • 解释器
  • 继承
  • 简写
  • 优先级
  • 值定义
  • 单位与取值类型
• 选择器
  • 元素选择器
  • 选择器分组
  • 类选择器
  • ID 选择器
  • 属性选择器
  • 后代选择器
  • 子元素选择器
  • 相邻选择器
  • 伪类
  • 伪元素
• 定位
  • position
  • top、left、bottom、right
  • z-index
• 布局
  • Box Model
  • FlexBox
  • Grid
  • Column
• 样式
  • 背景
  • 文本
  • 轮廓
  • 列表
• 动画
  • Animation
  • transition
• 应用
  • 响应式
    • em、vh/vw、%
  • 自适应
    • @media、rem

JavaScript

开始使用 JavaScript 很容易，你只需要一个现代 Web 浏览器。这篇教程包含了一些只在最新版本的火狐浏览器上才有的功能，所以建议大家使用最新版本的火狐浏览器。

火狐浏览器内置的 Web 控制台非常适合学习 JavaScript,Web 控制台包含两个输入模式——单行模式、多行模式。

JavaScript 学习指南: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide

• 语法
  • 值、变量
  • 数据类型
    • 基本类型
    • 类型判断
    • 类型转换
  • 流程控制
  • 运算（表达式、运算符）
    • 数学
    • 比较
    • 逻辑
  • 函数
    • 函数声明
    • 函数表达式
    • 回调函数
    • 箭头函数
• 数据类型深入
  • 原始类型的方法
  • 数字类型
  • 字符串
  • 数组
  • 数组方法
  • Iterable object（可迭代对象）
  • Map and Set（映射和集合）
  • WeakMap and WeakSet（弱映射和弱集合）
  • Object.keys、values、entries
  • 解构赋值
  • 日期和时间
  • JSON序列化、反序列化
• 对象
  • 属性/字面量
  • in 、for…in
  • 对象引用
  • 深拷贝、浅拷贝
  • Symbol
  • 垃圾收集机制
  • this
  • new
  • Optional chaining ‘?.’
  • 类型转换Symbol.toPrimitive
  • Property flags、descriptors
  • getters、setters
• 函数
  • 调用栈
  • 递归、尾递归
  • arguments、params spread
  • 作用域、闭包
  • var、变量提升
  • IIFE、匿名自执行函数
  • NFE、函数命名表达式
  • 箭头函数
  • new Function
  • setTimeout、setInterval
  • call、apply、bind
  • 部分施用、柯里化
• 原型
  • 原型链、继承
  • F.prototype
  • Object.prototype
• 类
  • extend 继承
  • 方法重载
  • 构造函数
  • Super、[[HomeObject]]
  • 静态属性、静态函数
  • 私有属性、私有函数
  • 混合、Mixins
• 异步流程控制
  • Callback
  • Promise
    • Promises/A+、Promisification、Thenable
  • async/await
  • generator
  • iterable
• 模块化
  • commonJS
  • amd、cmd、umd、es-module
• 异常捕获
  • try…catch…finally
  • throw
  • Error

浏览器

• DOM
  • DOM Tree
  • DOM Node
  • DOM Query
  • DOM Properties
  • DOM Modify
  • Styles
  • Coordinates、Element Scrolling
  • DOM Events
    • UI Event
    • Bubbling and Capturing
    • Event Delegate
• 浏览器API
  • location
  • history
  • navigator
  • Default Actions
    • event.preventDefault()
  • Form
    • change、focus、blur、submit
• 网络
  • XHR
  • Fetch
  • JSONP
  • WebSocket
• 权限
  • Cookie
  • Session
  • OAuth
  • SSO
  • JWT
• 安全与隐私
  • Content Security Policy (CSP)
  • CORS
  • XSS
  • CSRF
  • MITM
  • Samesite
• 兼容性
  • Can I Use
  • polyfill
  • shim
  • browserslist
  • Autoprefixer
• 开发者工具
  • 设备模式
  • 元素面板
  • 控制台面板
  • 源代码面板
  • 网络面板
  • 性能面板
  • 内存面板
  • 应用面板
  • 安全面板