HTML

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

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

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

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

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

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

body页面元素

Document Object Model（DOM）

  • <header> 页眉，<nav> 导航栏
  • <main> 主内容，子内容 <article>、<section>，侧边栏 <aside>
  • <footer> 页脚

块级元素（CSS 配置为 display: block）包括：标题 <h1> ~ <h6>，段落 <p>，表单 <form>，自定义元素 <div> 、<blockquote> 块引用、<address> 联系方式、列表<ul><ol>等

内联元素（CSS 配置为 display: inline）包括<span> 自定义元素，<img>图片、<a>超链接、<strong> 加粗、<em> 斜体、<q> 行内引用、 <cite> 引文作者、<sub> 下标、 <sup> 上标、 <abbr> 缩略词等

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

  • 超链接 <a> 的属性中， href 配置文件地址或文档中的 DOM 元素 id 或是 mailto: 的详细信息， title 属性配置鼠标悬停提示，download 属性配置默认文件名，target="_blank" 在新窗口中打开。配置rel="noopener noreferrer" 增强安全性
  • 图片 <img> 的属性中，src="文件地址"配置外部地址，alt="显示文本" 配置文件显示失败时的文本，另外通过 width 和 height 属性配置图片尺寸

列表：<ul> 无序列表，<ol> 有序列表，<li> 各项目；<dl> 描述性列表

表格 <table>：

  • <caption> 表格描述
  • <thead> 表头，<tbody> 分项，<tfoot> 表尾
    • <tr> 各行
      • <th> 用于表内标题，<td> 用于表内各项
      • colspan 属性可配置横向跨列单元格，rowspan 属性可配置纵向跨行单元格
    • 通过给 <th> 配置 scope 属性方便辅助阅读
    • 通过给 <th> 配置 id 属性，<td>和<th> 用 headers 属性完成对上级 id 的引用

表单<form>： action 属性为提交的链接，method 属性配置 HTTP 请求方法

  • 对于行级元素，可以通过 <div> 标签进行分割
  • 常用元素<label> 标题、<textarea> 多行文本、<select> 下拉框 <option> 下拉框的选项等
  • 下面的元素，可以通过配置 disabled 无法选中：
    • <input> 输入框或按钮：type 属性配置类型，name和value 属性是表格提交时的键值对，id 属性绑定 <label> 元素的 for属性；required 属性检查输入有效性，checked 属性初始选中，
    • <button> 元素的 type 属性配置按钮类型
    • <fieldset> 将部分元素合并到一组，内置 <legend> 作为标题

代码块：<code> 标记计算机通用代码，<pre>：用于保留空白字符，<var> 标记具体变量名, <kbd> 标记键盘输入, <samp> 标记计算机程序的输出。

<figure> 元素可以包裹一些画面布局元素，并通过 <figcaption> 添加文字说明

CSS

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

在页面中应用的方法有：

  • 在 <head> 元素内插入 <link rel="stylesheet" href="CSS文件目录位置"> 作为外部链接
  • 在 <head> 元素内插入 <style> 元素，在其中编写 CSS 样式
  • 在 <body> 中需要应用样式的元素配置 style 或 class 属性

CSS 规则包含由属性和值组成的声明。值可以是数字、长度、百分比、颜色、图像、位置、字符串和标识符以及函数。父元素通过 writing-mode 属性定义子元素的块级容器堆叠方向，以及行内元素排布方向

选择器 SELECTOR

元素选择器 类选择器 ID选择器 标签选择器
HTML标签属性 无 加入属性 class="类名" 加入属性 id="id名" 加入属性 attr
CSS定义语法 元素名 {样式} .类名 {样式} #id名 {样式} 元素名[attr] {样式}
  • 在实践中，类选择器是最常见的。可以将不同标签绑定相同类名，方便统一配置参数。
  • 由于 id 的级别最高，具有唯一性，在 DOM 索引出现多个同 id 元素时会报错。
  • 选择器列表：使用相同样式的选择器通过 , 隔开
  • 关系选择器：后代选择器（空格 ` ）跨级匹配所有后代；子代选择器（>）只匹配直接子代；邻接兄弟选择器（+）同级元素下一个元素；通用兄弟选择器（~`）跨同级元素匹配
  • 伪类选择器（Pseudo-classes）的语法为 元素名:状态名，状态包括 ：link 未访问, visited 已访问, hover 鼠标悬停，active 点击等；或通过函数定义，如 div:first-child 表示第一个子元素div， p:nth-of-type(1) 选择器选择的是同一父元素下的第1个p元素。

颜色 COLOR

  • 颜色 color：可通过①英文名、②函数 rgb(red, green, blue) 或 hsl、③定义 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 内边距、content 内容；

  • 前三者有 top 上、right 右、button 下、left 左之分

  • 盒子模型的尺寸不计入 margin 属性，该属性仅影响外部空间，可以配置负值（表示超出父元素的上边界）：

    • 标准盒子模型的空间尺寸为 内容+内边距+边框
    • 替代盒子模型（配置 box-sizing: border-box ）中，width 和 height 属性定义的是元素的可视总尺寸，包括内容、内边距和边框

  • border 可配置 width style color 属性

  • content 有 width 和 height 属性，<span> 元素可额外配置 margin，border 和 padding 属性

例如：

1
2
3
<div class="container">
  <div class="box">Change my borders.</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.container {
  margin: 40px;
  padding: 20px;
  border-top: 0.3em dotted green;
  border-right: 1px solid black;
  border-bottom: 20px double rgb(23 45 145);
}

.box {
  padding: 20px;
  background-color: lightgray;
  border: 1px solid #333333;
  border-top-style: dotted;
  border-right-width: 20px;
  border-bottom-color: hotpink;
}
  • 当值只有两个时，第一个表示上下，第二个表示左右
  • 边框除了宽度，还需要定义类型
  • 本地的尺寸通过 width 和 height 定义

布局 DISPLAY

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

垂直方向同级并列元素的外边距折叠（Margin Collapsing）

  • 两个正外边距相遇时，结合成一个外边距，其值为两者中较大的那个值
  • 两个负外边距相遇时，上下元素的重叠程度是两者中绝对值最大的那个值
  • 外边距一正一负时，间距为正值减去负值的绝对值
多列布局

浮动布局：向子元素添加 float 属性，使其固定在父元素的相对位置上，同时配置 margin-方向 属性将周围环绕的元素推开。

  • 浮动元素处于正常文档流之外，会在块级元素上方遮挡、并被内联元素环绕
  • 阻止其他元素环绕，可以对周围元素配置 clear 属性，则对应方向上不能有浮动元素
  • 浮动元素会超出父元素的边界，通过给父元素配置 display: flow-root 解决

均匀排布：向块级元素、表格（非单元格）、列表元素等添加 column-count 或 column-width 属性，可实现均匀多列布局（无法单独修改其中某列的显示效果）。容器通过 column-gap.属性调整列间距，并通过 column-rule.属性修改间距样式；容器子元素配置 column-span:all 可以让该元素跨越所有列，配置 break-inside:avoid 可以避免内容折断

弹性布局 FLEX

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

  • 主轴（排列方向）通过 flex-direction 属性定义（row、row-reverse、column、column-reverse）；通过 flex-wrap: wrap 属性防止子元素单行排列造成的内容溢出；上述两个属性合并配置在 flex-flow 属性中。
  • 通过父容器 gap 属性调节子元素间隙。也可以调整弹性项目对齐方式：justify-content 控制主轴方向，align-items 控制交叉轴方向。可以给某个弹性项目配置 align-self 属性单独控制
    • normal （默认）：在主轴方向相当于 flex-start 开始处；在交叉轴方向相当于 stretch，与尺寸最大的子元素对齐
    • end 或 flex-end 在末尾对齐
    • center 居中对齐
    • space-between 在弹性项目间均匀分布空白空间（两侧贴边）
    • space-around 在弹性项目周围分布空白空间
  • 弹性项目的 flex 属性可一次性配置三个变量：flex-grow 无单位，控制占用空间比例；flex-shrink 无单位，控制溢出父容器时的缩减量； flex-basis 有单位，最小空间尺寸
  • 弹性项目的 order 属性可以调整显示顺序，较大者靠后，其余按源顺序排列
网格布局 GRID

以行（row）、列（column）、沟槽（gutter）的形式划分容器

在父容器配置 display: grid 后，子元素都会成为网格项目。

沟槽宽度可以通过 column-gap 和 row-gap 属性进行配置，二者可合并配置在 gap 属性中。可以是任意单位或比例，但不能是 fr 单位。

子网格：子元素配置 display: grid 网格布局，可以将 grid-template-columns 和 grid-template-rows 属性配置为 subgrid 继承网格尺寸，gap: inherit 继承沟槽宽度

1
2
3
4
5
6
7
/* 横向通过auto-fill自动配置重复次数，纵向配置最小高度*/
.元素名 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  grid-auto-rows: minmax(50px, auto);
  gap: 20px;
}

网格中的元素放置

  • 基于线的放置：根据文档的 书写模式 对分隔线进行编号，根据垂直线 grid-column-start 和 grid-column-end（缩写为 grid-column）、水平线 grid-row-start 和 grid-row-end（缩写为 grid-row ）放置元素。对每个元素分别配置开始与结束的线序号，使用/符号分开，负值表示逆向计数。这种方式仅限于显式定义的网格范围，不会考虑由于项目溢出而自动生成的隐式网格线。
  • 使用 grid-template-areas 定义布局元素的名称，为子元素添加 grid-area 属性绑定该名称。要求需要填满网格的每个格子，跨格元素重复书写名字，使用.符号让一个格子留空，所有名字只能出现在一个连续的矩形区域。

定位 POSITION

CSS 页面布局通过默认位置、周围元素、父容器或主窗口，控制元素在页面中的精确位置

position 属性 是否脱离文档流 定位参考对象 会不会滚动跟着动
static（默认） ❌ 否 无 ✅ 会
relative（相对定位） ❌ 否 自己原始位置 ✅ 会
absolute（绝对定位） ✅ 是 最近的已定位祖先元素（position不为static的祖先元素） ✅ 会
fixed（固定定位） ✅ 是 浏览器窗口（viewport） ❌ 不会
sticky（粘性定位） ❌ 粘住前✅ 粘住后 父容器（限制粘性定位范围）、视口（决定触发效果的时机） ❌ 不会
  • 除默认的静态定位元素外，通过 top, bottom, left 和 right 属性定义偏移量。
  • 默认情况下后定义的元素会覆盖先定义的元素，此时可以通过配置 z-index 属性调整优先级
  • 粘性定位可以用于创建滚动索引。用于导航栏时，为防止遮挡，需要给下方元素配置 scroll-margin-top
  • 绝对定位可用于创建选项卡消息框等

响应式设计

@rules：在特定情况下生效。例如 @media 的媒体查询，可以在特定的断点处改变显示样式

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