HTML

Hyper Text Markup Language（超文本标记语言），文件名以 .html 为后缀，网站首页一般配置为 index.html

HTML 标签以 <标签名>内容</标签名> 的格式定义，没有内容的自闭合标签可以写成 <标签名 /> 或 <标签名>。天生自闭合的标签有 <br>换行，<hr>水平线，<input>输入框等

在 VS Code 新建文件，使用 !+Tab 快捷键自动生成文件内容

  • <!DOCTYPE html> 表示文件是 HTML 5类型

  • <html> 标签为页面主构造

    • <head> 标签用于定义页面标题（<title> 标签）、链接工程内的 CSS（写在 <style> 标签内，或用 <link> 标签引入外部链接）和 JavaScript 文件（ <script> 标签），定义搜索引擎关键词元数据（<meta> 标签）
    • <body> 标签用于展示，包括标题、段落、图片等
    • <!-- 注释内容 --> 表示注释

body页面元素

Document Object Model（DOM）

块级元素在“样式”中配置为 display: block，包括：标题标签<h1> ~ <h6>，段落 <p>，表单 <form>，自定义元素 <div> 等

内联元素“样式”中配置为 display: inline，包括span img a超链接、strong 加粗、em斜体 等

属性：提供有关某个元素的更多信息。例如

  • 超链接 <a> 的配置中， href="链接地址" 配置外部地址， target="_blank" 在新窗口中打开
  • 图片 <img> 的配置中，src="文件地址"配置外部地址，alt="显示文本" 配置文件显示失败时的文本，另外通过 width 和 height 属性配置图片尺寸

列表：<ul> 无序列表，<ol> 有序列表，<li> 各项目

表格 <table>：

  • <thead> 表头，<tbody> 分项
    • <tr> 各行
      • <th>或<td> 各列

表单<form>： HTML 只能构建外观，添加功能需要 JavaScript，通过 action 属性绑定方法（现已不常见）

  • 对于行级元素，可以通过 <div> 标签进行分割
  • 常用元素<label> 标题、<input> 单行文本、<textarea> 多行文本、<select> 选择框等

CSS

Cascading Style Sheets（层叠式样式表）是一种样式语言，用于描述页面元素的呈现方式。可以直接嵌入 HTML 文档定制网页的外观和布局，也可以作为外部样式表单独存在。

在 <head> 标签中插入 <link rel="stylesheet" href="CSS文件目录"> 作为外部链接

选择器 SELECTOR

元素选择器 类选择器 ID选择器
HTML标签属性 无 加入属性 class="类名" 加入属性 id="id名"
CSS定义语法 元素名 {样式} .类名 {样式} #id名 {样式}
  • 在实践中，类选择器是最常见的。可以将不同标签绑定相同类名，方便统一配置参数。
  • 由于 id 的级别最高，具有唯一性，在 DOM 索引出现多个同 id 元素时会报错。
  • 父类中的子类可用于区别同类名的其他元素，也可以使用嵌套语法直观化配置
  • 单个元素可以配置多种样式，在类选择器中用空格依次隔开所有类名

颜色 COLOR

  • 可通过①英文名、②定义 rgb(red, green, blue) 三项数值、③定义 Hex（#RGB的16进制表示）完成配置
  • 背景颜色 background-color，边框颜色 border-color
  • 定义 rgba(red, green, blue, alpha) 通过透明度通道调整当前元素透明度
  • 透明度属性 opacity 取值范围也是 0~1，用于改变整个元素及其所有子元素的透明度，不能精确调整文本或背景样式

文本 TEXT

  • 字体（名称）：通过 font-family 定义，可同时定义多种，优先级从左到右
  • 显示大小（数值px）：通过定义 font-size 调整字号， line-hight 定义行高
  • 显示效果：font-weight 粗细（数值），font-style显示效果（italic 斜体），text-decoration 装饰（underline 下划线， overline 上划线，line-through删除线）
  • text-align 文字对齐，text-shadow 定义文字阴影

盒子模型 BOX MODEL

在浏览器“开发者工具”→“元素 Element”→ “计算样式 Computed”中，可以查看网页盒子模型。从外到内分别是 margin 边距、border 边框、padding 填充、body 本体，前三者有 top 上、right 右、button 下、left 左之分

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 配置右边距 10 像素，上填充 8 像素 */
.元素名1 {
    margin-right: 10px;
    padding-top: 8px;
}

/* 配置边距上下等宽 6 像素，左右等宽 12 像素*/
.元素名2 {
    margin: 6px 12px;
}

/* 配置虚线边框，宽度 2 像素，黑色点线*/
.元素名3 {
    border: 2px dotted black;
}
  • 当值只有两个时，第一个表示上下，第二个表示左右
  • 边框除了宽度，还需要定义类型
  • 本地的尺寸通过 width 和 height 定义

布局 DISPLAY

值 是否换行 可设置宽高 适合用途
block 块级 ✅换行 ✅可以 页面结构布局
inline 内联 ❌不换行 ❌不可以 文本内嵌样式
inline-block 内联块级 ❌不换行 ✅可以 横排按钮、图片等元素
none 隐藏 ❌不显示 ❌不可见 控制元素显隐

弹性布局 FLEX

水平/垂直弹性排布：给父容器配置弹性布局 display: flex，子元素都会成为弹性项目

父属性默认 flex-direction: row 横向主轴，可配置 gap 属性调节间隙、 justify-content 各项目沿主轴方向对齐 （flex-start 在初始位置对齐（默认），flex-end 在末尾对齐， center 居中对齐， space-between 在弹性项目间均匀分布空白空间， space-around 在弹性项目周围分布空白空间）， align-items 沿交叉轴方向项目对齐。

给子元素配置flex 属性指定默认占用的空间大小

网格布局 GRID

以行列的形式划分容器，需要配置父容器 display: grid，子元素都会成为网格项目。配置 ``

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 指定三行的行高，第一列列宽是第二列的一半（fr 是剩余空间的单位）*/
.元素名1 {
    display: grid;
    grid-template-rows: 100px, 200px, 300px;
    grid-template-columns: 1fr 2fr;
}

/* 自适应每行的行高100像素，每列等宽*/
.元素名2 {
    display: grid;
    grid-auto-rows: 100px;
    grid-auto-columns: 1fr;
    
    grid-gap:12px;/* 项目间距*/
}

定位 POSITION

控制元素在页面中的精确位置

属性 是否脱离文档流 定位参考对象 会不会滚动跟着动
static（默认） ❌ 否 无 ✅ 会
relative ❌ 否 自己原始位置 ✅ 会
absolute ✅ 是 最近的已定位祖先元素 ✅ 会
fixed ✅ 是 浏览器窗口（viewport） ❌ 不会

让元素脱落文档流，根据某个特定元素进行定位。

absolute 会相对 relative 进行定位，通过配置 left 的属性（数值或百分比）

JavaScript

作为编程语言，用于编写页面逻辑、调用接口、连接数据库

Node 是包含了 Chrome 浏览器 V8 引擎的 C++ 程序，可作为 JavaScript 运行时环境，将依赖下载到项目目录 node_modules 文件夹并通过 package.json 配置

在 HTML 文件的 <head> 或 <body> 标签下均可添加 <script> 标签用于编写 JavaScript，建议放在 <body> 标签末尾。优点是避免加载页面时的解析代码影响显示效果，在页面组件加载完成后再进行显示效果渲染。

关注点分离：将 JavaScript 文件写在 .js 文件中，在 <script> 标签中添加 src 属性

使用场景：通过 Web Storage API 在本地保留数据，利用 DOM API 操作页面元素

变量

特性 var let const
作用域 全局作用域 局部作用域 局部作用域
可重复声明 ✅ 允许 ❌ 不允许 ❌ 不允许
可修改值 ✅ 可以 ✅ 可以 🚫 不可以重新赋值（但数组或对象内容可变）
存在变量提升 ✅ 有提升（初始化为 undefined） ⚠️ 有暂时性死区 ⚠️ 有暂时性死区

数据类型

数据类型 示例 描述
number 42, 3.14, NaN, Infinity 所有数字（整数、浮点数、NaN）
string "Hello", '世界' 字符串，文本数据
boolean true, false 布尔值
undefined undefined 未赋值的变量默认值
null null 空值，表示“无”
symbol Symbol('id') 唯一值，用于对象属性的唯一键
bigint 123n 大整数（超过 2^53 - 1）
  1. 基本数据类型使用 typeof 方法，判断数组用：Array.isArray(数组名) 方法
  2. typeof null === "object" 是历史遗留问题（指针0x00为零），不是对象！
  3. 索引编号从 0 开始

字符串

  1. 可以用单引号 '、双引号 " 或反引号 ` 进行定义
  2. 模板字符串使用 ` 定义边界，通过 ${变量名} 绑定具体数据
  3. 通过 length 属性获取长度
  4. toUpperCase() 和 toLowerCase() 方法可转换大小写
  5. substring(起始编号，终止编号 +1) 方法分割字符串，split(分割点) 转化为数组

集合

  1. 数组构造函数 const numbers = new Array(1, 2, 3, 4, 5);，也可以直接定义 const listExample = ["apples", 10, true];。使用 TypeScript 需显式声明数据类型
  2. 数组通过 变量名[索引编号] 获取元素，通过 push(元素内容) 在末尾添加元素，通过 unshift(元素内容) 在头部添加元素， 通过pop() 方法删除末尾元素。通过 数组名.indexOf(元素内容) 方法得到索引编号
  3. Set(元素1, 元素2) 集合，Map([[元素1键, 元素1值], [元素2键, 元素2值]])，可创建 WeakMap 进行垃圾回收

对象

  1. JavaScript 对象是键值对组合，声明在 {元素1键: 元素1值, 元素2键: 元素2值} 结构体中
  2. 结构体只有数据，对象有方法，类有继承
  3. 通过 对象名.属性名 获取单个元素的值，也可用于赋值
  4. 通过 const {元素1名, 元素2名} = 对象名 同时提取多个元素的值
  5. JSON 是一种数据格式，用于数据传输，结构类似于对象数组，键都是双引号。可使用 JSON.stringify(数组名) 方法将对象数组转成 JSON
特性 Map 对象(Object) 数组(Array)
键类型 任意类型(对象、函数等) 仅字符串或Symbol 数字索引
顺序保证 插入顺序 ES6后字符串键有顺序(但不推荐依赖) 严格索引顺序
大小获取 size属性直接获取 需要手动计算(Object.keys().length) length属性直接获取
性能 频繁增删操作更高效 频繁增删性能较差 中间插入/删除效率低
迭代 直接可迭代(forEach等) 需要Object.keys等外部方法转换 直接可迭代
默认属性 纯净无原型属性 有原型继承的属性(toString等) 有数组方法(push等)

条件语句

  1. == 表示值相同，类型可以不同， === 表示值和类型都相同
  2. 条件语句：if / else，也可使用 条件 ? 运算符 或 逻辑 && 语法。
  3. switch 语句的 case 需使用 break，否则穿透式执行，default 执行默认条件
  4. 循环语句 for / while，另有：for(let 迭代器 of 对象名) 获取可迭代对象的值, for(let 变量名 in 数组名) 用于遍历（不推荐使用）

特性方法

  1. bind() 方法第一个参数是 thisArg，用于绑定函数的 this（可以为 null）。之后的参数是预设的参数，
  2. 动态查找链：调用 对象名.__proto__ 通过原型链访问该对象构造函数的原型（现代JavaScript建议使用 Object.getPrototypeOf() 替代 __proto__）
  3. 回调函数：传递给高阶函数作为参数的函数，由接收回调的高阶函数决定调用时机，用于实现异步操作或事件处理。
    • ES6 的 Promise（生产者） 通过链式调用（消费者） .then(执行内容).catch(异常处理) 实现异步处理
    • 在 ES8 中有 async/await 语法糖
    • 当执行到setTimeout(回调函数, 指定时间)时，会立即设置一个定时器，执行完后续代码后将回调函数加入任务队列并执行
  4. export命名导出，export default 默认导出，在调用时通过 import {方法名1, 方法名2} from '文件目录' 引入
  5. 操作DOM：window.document.querySelector('元素名')，操作页面布局document.body.style.backgroundColor
  6. ES6 引入的简写方式
    • 对象属性简写：对于已声明的变量，当属性名和变量名相同时，可以省略属性值和冒号。包括属性值简写（传递参数时直接调用参数名，不需要参数名: 参数值）、方法简写（函数名: function() {} 简化为 函数名() {}）
    • 计算属性名：在对象字面量中使用 [expression] 作为属性名时，JavaScript 会先计算括号内表达式的值，然后将计算结果转换为字符串（或 Symbol）作为最终的属性名

参考链接：

  1. 视频教程 50天50个项目 - HTML，CSS和JavaScript，Github 项目源码 50projects50days
  2. 面向开发者的 Web 技术 | MDN
  3. Emmet-HTML/CSS代码自动补全语法
  4. Playground | MDN