【学习笔记】HTML和CSS基础

# HTML

### 1.1 浏览器

性能对比

|      **指标**       |     **Blink**     |      **Gecko**      |    **WebKit**    |
| :-----------------: | :---------------: | :-----------------: | :--------------: |
|  **页面加载速度**   |       ⭐⭐⭐⭐⭐       |        ⭐⭐⭐⭐         |       ⭐⭐⭐⭐       |
| **JavaScript 性能** |    ⭐⭐⭐⭐⭐ (V8)     | ⭐⭐⭐⭐ (SpiderMonkey) |   ⭐⭐⭐ (Nitro)    |
|    **CSS 支持**     | ⭐⭐⭐⭐⭐（最新标准） |  ⭐⭐⭐⭐⭐（严格模式）  | ⭐⭐⭐⭐（部分滞后） |
|    **内存占用**     |    ⭐⭐（较高）     |     ⭐⭐⭐（中等）     |   ⭐⭐⭐⭐（较低）   |
|   **标准兼容性**    |       ⭐⭐⭐⭐⭐       |    ⭐⭐⭐⭐（先锋）     |   ⭐⭐⭐（保守）    |

### 1.2 HTML简介

HTML全称HyperText Markup Language，超文本标记语言，超文本是一种组织信息的方式，它通过**超级链接**方法将文本中的文字、图表与其他信息媒体相关联。标签名不区分大小写，建议小写。参考资料：

https://www.w3school.com.cn/

```html
<!DOCTYPE html>
<html lang="zh-CN">
  <head> 
   	<meta charset="UTF-8"> 
  	<title>标题</title>
  </head>
  <body>
    HTML内容
  	<input text=''>
  </body>
</html>
```

![](https://i-blog.csdnimg.cn/blog_migrate/af39360dab5b690d58231e0603991502.png)

### 1.3基本属性

#### 1.3.1文档声明

```html
<!DOCTYPE html>
```

#### 1.3.2字符编码

```html
<meta charset="UTF-8"> 
```

#### 1.3.3语言设置

```html
<html lang="zh-CN">
```

- zh-CN：中文-简体
- zh-TW：中文-繁体
- zh：中文
- en-US：英语-美国
- en-GB：英语-英国

### 1.4常用标签

#### 1.4.1排版标签

##### 1.4.1.1 标题

标签之间换行，不能互相嵌套

```html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
```

##### 1.4.1.2 div标签

div间默认换行，可以嵌套其他标签

```html
<div>
  
</div>
```

##### 1.4.1.3 段落

不允许嵌套

```html
<p>段落</p>
```

PS:

- 块级元素：div、h1、P等：独占一行
- 行级元素：span、input等不独占一行。行级元素内不允许写块元素

#### 1.4.2 文本标签

<strong>strong标签</strong>

<span>span标签</span>>

| 标签名 | 语义                         | 单双 |
| ------ | ---------------------------- | ---- |
| em     | 着重阅读的内容               | 双   |
| strong | 十分重要，比em强烈           | 双   |
| span   | 没有寓意，包裹短语的通用容器 | 双   |

#### 1.4.3 图片标签

单标签

```html
<img src="">
```

**核心属性**：

```html

<img src="image-1x.jpg"
     srcset="image-1x.jpg 1x, image-2x.jpg 2x"
     alt="响应式图片">
```

**常见错误与解决方案**

#### 1.4.4 超链接

```html
<a href="https://www.baidu.com">百度一下</a>
```

常用属性：

- href：跳转链接
  - 指定网址：https://www.baidu.com
  - 相对路径的其他资源：./index.html
  - 连接到页面中其他元素：如`#selector`
  - 脚本：`href="javascropt:alert('hello')"`
  - 其他协议：比如 https://、ftp://、mailto:、file: 等，可以唤起其他应用
- target：跳转的目标
  - _blank：新标签页
  - _self：当前页面

#### 1.4.5列表

- 有序列表(ordered)：

```html
  <ol>
    <li>列1</li>
    <li>列2</li>
  </ol>		
  ```

属性：

| `type`     | `1`（数字，默认）、`A`（大写字母）、`a`（小写字母）、`I`（大写罗马数字）、`i`（小写罗马数字）。 | 推荐用 CSS 替代： `list-style-type: decimal/upper-alpha/lower-roman;` |
  | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
  | `start`    | 整数（如 `start="3"`，从 3 开始计数）。                      | 仅对数字类型有效。                                           |
  | `reversed` | 布尔属性（倒序显示序号）。                                   | 示例：`<ol reversed>`（兼容性较差，慎用）。                  |

- 无序列表（unordered）

```html
  <ul>
    <li>选项1</li>
    <li>选项2</li>
  </ul>
  ```

- 自定义（definition）

```html
  <dl>
    <dt>1.选项</dt>
    <dd>1.1.选项</dd>
    <dt>2.选项</dt>
    <dd>2.1.选项</dd>
  </dl>
  ```

注意事项：

- 列表可以进行嵌套，例：

```html
  <ul>
    <li>水果
      <ol>
        <li>苹果</li>
        <li>香蕉</li>
      </ol>
    </li>
    <li>蔬菜
      <ul>
        <li>胡萝卜</li>
        <li>西红柿</li>
      </ul>
    </li>
  </ul>
  ```

#### 1.4.6表格

<table>
  <caption>员工信息表</caption>
  <colgroup>
    <col span="1" style="background-color: #f5f5f5">
    <col span="2" style="width: 200px">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">职位</th>
      <th scope="col">部门</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>前端工程师</td>
      <td>技术部</td>
    </tr>
    <tr>
      <td rowspan="2">李四</td>
      <td colspan="2">产品经理（兼UI设计）</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">总计：2 人</td>
    </tr>
  </tfoot>
</table>

```html
<table>
  <caption>员工信息表</caption>
  <colgroup>
    <col span="1" style="background-color: #f5f5f5">
    <col span="2" style="width: 200px">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">职位</th>
      <th scope="col">部门</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>前端工程师</td>
      <td>技术部</td>
    </tr>
    <tr>
      <td rowspan="2">李四</td>
      <td colspan="2">产品经理（兼UI设计）</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">总计：2 人</td>
    </tr>
  </tfoot>
</table>
```

** `<table>` 标签**

|     说明     |                             属性                             |                            示例                             |
| :----------: | :----------------------------------------------------------: | :---------------------------------------------------------: |
| 定义表格容器 | `border`：数值（如 `1`），控制表格边框宽度（已过时，推荐用 CSS）。<br />`width`：数值或百分比（如 `100%`），定义表格宽度。 | `<table border="1">...</table>`<br />`<table width="100%">` |
| **注意事项** |  避免使用 `border` 和 `cellspacing`，优先用 CSS 控制样式。   |                                                             |

------

** `<tr>` 标签**

|     说明     |                             属性                             |           示例           |
| :----------: | :----------------------------------------------------------: | :----------------------: |
|  定义表格行  |                          无特殊属性                          | `<tr><td>内容</td></tr>` |
| **注意事项** | 必须嵌套在 `<table>`、`<thead>`、`<tbody>` 或 `<tfoot>` 内。 |                          |

------

**`<th>` 标签**

|      说明      |                             属性                             |                             示例                             |
| :------------: | :----------------------------------------------------------: | :----------------------------------------------------------: |
| 定义表头单元格 | `scope`：`col`（关联列）、`row`（关联行）、`colgroup`（列组）、`rowgroup`（行组）。<br />`colspan`：合并列数。<br />`rowspan`：合并行数。 | `<th scope="col">姓名</th>`<br />`<th colspan="2">合并表头</th>`<br />`<th rowspan="3">跨行表头</th>` |
|  **注意事项**  |     必须用 `scope` 属性提升可访问性（屏幕阅读器友好）。      |                                                              |

------

**`<td>` 标签**

|        说明        |               属性               |                             示例                             |
| :----------------: | :------------------------------: | :----------------------------------------------------------: |
| 定义表格数据单元格 |     `colspan`<br />`rowspan`     | `<td colspan="2">合并单元格</td>`<br />`<td rowspan="3">跨行单元格</td>` |
|    **注意事项**    | 避免滥用合并，保持表格结构清晰。 |                                                              |

------

**`<thead>`, `<tbody>`, `<tfoot>` 标签**

------

** `<caption>` 标签**

|     说明     |    属性    |                 示例                 |             注意事项              |
| :----------: | :--------: | :----------------------------------: | :-------------------------------: |
| 定义表格标题 | 无特殊属性 | `<caption>2023 年销售数据</caption>` | 必须紧跟在 `<table>` 开始标签后。 |

------

**`<colgroup>` 和 `<col>` 标签**

|      标签名      |                   说明                    |        属性        |                           示例                            |
| :--------------: | :---------------------------------------: | :----------------: | :-------------------------------------------------------: |
| **`<colgroup>`** |               定义表格列组                | `span`（合并列数） | `<colgroup span="2" style="background:#eee"></colgroup>`  |
|   **`<col>`**    |               定义单列样式                | `span`（合并列数） | `<colgroup><col span="2" style="width:100px"></colgroup>` |
|   **注意事项**   | 用于批量控制列宽或样式，需配合 CSS 使用。 |                    |                                                           |

#### 1.4.7.form表单

```html
<form action="/submit" method="POST" enctype="multipart/form-data">
  
  <input type="text" name="username" required>
  <button type="submit">提交</button>
</form>
```

#### 1.4.8.input标签

**type属性：**

| `type` 值  |                   用途与特性                   |                          示例                          |
| :--------: | :--------------------------------------------: | :----------------------------------------------------: |
|   `text`   |              单行文本输入（默认）              |         `<input type="text" name="username">`          |
| `password` |              密码输入（隐藏内容）              |          `<input type="password" name="pwd">`          |
|  `email`   |            邮箱输入（触发格式验证）            |          `<input type="email" name="email">`           |
|  `number`  |      数字输入（支持 `min`/`max`/`step`）       |   `<input type="number" min="1" max="100" step="1">`   |
|   `file`   | 文件上传（需 `enctype="multipart/form-data"`） |  `<input type="file" name="avatar" accept="image/*">`  |
| `checkbox` |                     多选框                     | `<input type="checkbox" name="hobby" value="reading">` |
|  `radio`   |           单选框（相同 `name` 分组）           |   `<input type="radio" name="gender" value="male">`    |
|  `submit`  |                    提交按钮                    |          `<input type="submit" value="提交">`          |
|  `hidden`  |       隐藏字段（存储无需用户输入的数据）       |  `<input type="hidden" name="token" value="abc123">`   |

**其他关键属性**

|    属性名     |                 作用                  |                      示例                       |
| :-----------: | :-----------------------------------: | :---------------------------------------------: |
|  `required`   |      必填字段（触发浏览器验证）       |         `<input type="text" required>`          |
| `placeholder` |             输入提示文本              |      `<input placeholder="请输入用户名">`       |
|   `pattern`   | 正则表达式验证（需配合 `title` 提示） | `<input pattern="[A-Za-z]{3}" title="3位字母">` |
|  `readonly`   |         只读字段（值可提交）          |  `<input type="text" value="固定值" readonly>`  |
|  `disabled`   |         禁用字段（值不提交）          |         `<input type="text" disabled>`          |

**其他表单控件：**

**`<textarea>` 多行文本输入**

```html
<textarea name="comment" rows="4" cols="50" placeholder="请输入评论">

``` **` ``` **`

` 和 `` 分组控件** ```html

用户信息

``` #### 1.4.9 iframe ` ``` - 允许部分功能：按需开放权限。 ```html ``` - **3. 跨域限制（CORS）** - 嵌入跨域内容时，需确保目标页面设置了允许嵌入的 CORS 头： ```http Access-Control-Allow-Origin: * ``` **示例代码** **嵌入 YouTube 视频** ```html ``` **嵌入 Google 地图** ```html ``` **沙盒化代码预览** ```html ``` **5. 替代方案** - **现代替代**：优先使用 Web Components 或前端框架（如 React、Vue）的组件化方案。 - **动态加载**：通过 JavaScript 的 `fetch()` 或 `XMLHttpRequest` 加载内容并插入到 DOM 中。 #### 1.4.10 meta标签 html基本信息 ```html ``` `width=device-width` 部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。当浏览器首次加载页面时，`initial-scale=1.0` 部分设置初始缩放级别。 meta标签还可以使用html的全局属性 ### 1.5.HTML5新增标签 #### **1.5.1语义化标签** | 标签 | 说明 | 属性示例 | 注意事项 | | :-------------: | :--------------------------------------------------: | :----------------------------------------------------: | :---------------------------------------------------: | | **`

`** | 定义页面或区块的页眉（如导航栏、Logo）。 | 无特殊属性 | 一个页面可包含多个 `

`，通常位于顶部。 | | **`

`** | 定义页面或区块的页脚（如版权信息、联系方式）。 | 无特殊属性 | 可嵌套在 `

` 或 `

` 内。 | | **`

`** | 定义文档中的章节或区块（如章节、标签页）。 | 无特殊属性 | 需搭配标题（`

`~`

`）使用。 | | **`

`** | 定义文档主体内容（每个页面唯一）。 | 无特殊属性 | 不可嵌套在 `

`、`

` 或 `

` 内。 | | **`

` 添加标题或说明。 | | **``** | 定义时间或日期。 | `datetime`（机器可读格式，如 `datetime="2023-10-01"`） | 示例：`国庆节`。 | ------ #### **1.5.2.多媒体标签** | 标签 | 说明 | 属性示例 | 注意事项 | | :-----------: | :--------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | | **`

浏览器	内核名称	核心技术架构	开发者/维护方
Google Chrome	Blink（Chromium）	基于 WebKit 分支，多进程架构	Google（开源项目）
Microsoft Edge	Blink（Chromium）	同 Chrome，基于 Chromium 代码库	Microsoft
Mozilla Firefox	Gecko	独立渲染引擎，支持 Rust 和 WebAssembly	Mozilla 基金会
Apple Safari	WebKit / Nitro	基于 WebKit，JIT 编译优化	Apple
Opera	Blink（Chromium）	同 Chrome，基于 Chromium 代码库	Opera Software ASA
360/UC 浏览器	Trident + Blink	双核模式（兼容 IE + Chromium）	奇虎 360/UCWeb

指标	Blink	Gecko	WebKit
页面加载速度	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
JavaScript 性能	⭐⭐⭐⭐⭐ (V8)	⭐⭐⭐⭐ (SpiderMonkey)	⭐⭐⭐ (Nitro)
CSS 支持	⭐⭐⭐⭐⭐（最新标准）	⭐⭐⭐⭐⭐（严格模式）	⭐⭐⭐⭐（部分滞后）
内存占用	⭐⭐（较高）	⭐⭐⭐（中等）	⭐⭐⭐⭐（较低）
标准兼容性	⭐⭐⭐⭐⭐	⭐⭐⭐⭐（先锋）	⭐⭐⭐（保守）

标签名	语义	单双
em	着重阅读的内容	双
strong	十分重要，比em强烈	双
span	没有寓意，包裹短语的通用容器	双

属性名	作用与枚举值	示例
`src`	必填，指定图片资源路径： - 相对路径（`images/logo.png`） - 绝对 URL（`https://example.com/image.jpg`） - Base64 数据（`data:image/png;base64,...`）	`<img src="logo.png">`
`alt`	必填，替代文本： - 描述性文字（`alt="公司 Logo"`） - 装饰性图片设为空（`alt=""`）	`<img src="deco-line.png" alt="">`
`width`/`height`	显式设置图片尺寸（单位：像素）： - 避免布局偏移（CLS） - 与 CSS 尺寸配合使用	`<img src="photo.jpg" width="800" height="600">`
`loading`	加载行为： - `lazy`（延迟加载，视口外图片） - `eager`（立即加载，默认）	`<img src="banner.jpg" loading="lazy">`
`srcset`	响应式图片源（分辨率/宽度适配）： `image-1x.jpg 1x, image-2x.jpg 2x` `image-480w.jpg 480w, image-800w.jpg 800w`	见下方响应式设计示例
`sizes`	媒体查询与显示宽度： `(max-width: 600px) 480px, 800px`	见下方响应式设计示例

问题场景	解决方案
图片不显示（404）	检查 `src` 路径，确保服务器权限正确。
布局偏移（CLS）	显式设置 `width` 和 `height`，或使用 CSS `aspect-ratio`。
移动端图片过大	使用 `srcset` 按屏幕宽度加载合适尺寸，或通过 CDN 动态裁剪。
透明背景锯齿	使用 PNG 或 WebP 格式，避免 JPEG。

`type`	`1`（数字，默认）、`A`（大写字母）、`a`（小写字母）、`I`（大写罗马数字）、`i`（小写罗马数字）。	推荐用 CSS 替代： `list-style-type: decimal/upper-alpha/lower-roman;`
`start`	整数（如 `start="3"`，从 3 开始计数）。	仅对数字类型有效。
`reversed`	布尔属性（倒序显示序号）。	示例：`<ol reversed>`（兼容性较差，慎用）。

员工信息表
姓名	职位	部门
张三	前端工程师	技术部
李四	产品经理（兼UI设计）
总计：2 人

说明	属性	示例
定义表格容器	`border`：数值（如 `1`），控制表格边框宽度（已过时，推荐用 CSS）。 `width`：数值或百分比（如 `100%`），定义表格宽度。	`<table border="1">...</table>` `<table width="100%">`
注意事项	避免使用 `border` 和 `cellspacing`，优先用 CSS 控制样式。

说明	属性	示例
定义表格行	无特殊属性	`<tr><td>内容</td></tr>`
注意事项	必须嵌套在 `<table>`、`<thead>`、`<tbody>` 或 `<tfoot>` 内。

说明	属性	示例
定义表头单元格	`scope`：`col`（关联列）、`row`（关联行）、`colgroup`（列组）、`rowgroup`（行组）。 `colspan`：合并列数。 `rowspan`：合并行数。	`<th scope="col">姓名</th>` `<th colspan="2">合并表头</th>` `<th rowspan="3">跨行表头</th>`
注意事项	必须用 `scope` 属性提升可访问性（屏幕阅读器友好）。

说明	属性	示例
定义表格数据单元格	`colspan` `rowspan`	`<td colspan="2">合并单元格</td>` `<td rowspan="3">跨行单元格</td>`
注意事项	避免滥用合并，保持表格结构清晰。

标签名	说明	示例	注意事项
`<thead>`	定义表头区域	`<thead><tr><th>标题</th></tr></thead>`	必须位于 `<table>` 内，且顺序为 `<thead>` → `<tbody>` → `<tfoot>`。
`<tbody>`	定义表格主体内容	`<tbody><tr><td>数据</td></tr></tbody>`	可包含多个 `<tbody>` 分段管理数据。
`<tfoot>`	定义表格底部汇总信息	`<tfoot><tr><td>总计</td></tr></tfoot>`	必须位于 `<tbody>` 之后。

说明	属性	示例	注意事项
定义表格标题	无特殊属性	`<caption>2023 年销售数据</caption>`	必须紧跟在 `<table>` 开始标签后。

标签名	说明	属性	示例
`<colgroup>`	定义表格列组	`span`（合并列数）	`<colgroup span="2" style="background:#eee"></colgroup>`
`<col>`	定义单列样式	`span`（合并列数）	`<colgroup><col span="2" style="width:100px"></colgroup>`
注意事项	用于批量控制列宽或样式，需配合 CSS 使用。

属性名	枚举值/用法示例	说明	注意事项
`method`	`GET`（数据附加到 URL） `POST`（数据在请求体中）	表单提交的 HTTP 方法。	`GET` 适合非敏感数据 `POST` 适合文件上传或敏感信息。
`enctype`	`application/x-www-form-urlencoded`（默认编码） `multipart/form-data`（文件上传） `text/plain`（纯文本）	表单数据的编码方式。	文件上传必须设为 `multipart/form-data`。
`action`	`/submit`（提交到服务器接口） `javascript:void(0)`（JS 处理）空值（当前页面）	表单提交的目标地址。	使用 `javascript:` 需绑定 `onsubmit` 事件处理。

`type` 值	用途与特性	示例
`text`	单行文本输入（默认）	`<input type="text" name="username">`
`password`	密码输入（隐藏内容）	`<input type="password" name="pwd">`
`email`	邮箱输入（触发格式验证）	`<input type="email" name="email">`
`number`	数字输入（支持 `min`/`max`/`step`）	`<input type="number" min="1" max="100" step="1">`
`file`	文件上传（需 `enctype="multipart/form-data"`）	`<input type="file" name="avatar" accept="image/*">`
`checkbox`	多选框	`<input type="checkbox" name="hobby" value="reading">`
`radio`	单选框（相同 `name` 分组）	`<input type="radio" name="gender" value="male">`
`submit`	提交按钮	`<input type="submit" value="提交">`
`hidden`	隐藏字段（存储无需用户输入的数据）	`<input type="hidden" name="token" value="abc123">`

属性名	作用	示例
`required`	必填字段（触发浏览器验证）	`<input type="text" required>`
`placeholder`	输入提示文本	`<input placeholder="请输入用户名">`
`pattern`	正则表达式验证（需配合 `title` 提示）	`<input pattern="[A-Za-z]{3}" title="3位字母">`
`readonly`	只读字段（值可提交）	`<input type="text" value="固定值" readonly>`
`disabled`	禁用字段（值不提交）	`<input type="text" disabled>`

属性名	说明	常用值/示例
`src`	指定嵌入内容的 URL（必填）。	`src="https://example.com"` `src="local-page.html"`
`width` & `height`	定义框架的宽高（单位：像素或百分比）。	`width="800" height="600"` `width="100%"`
`frameborder`	是否显示边框（已过时，推荐用 CSS 替代）。	`0`（无边框）或 `1`（有边框）。
`allow`	控制嵌入内容的功能权限（安全关键属性）。	`allow="fullscreen"`（允许全屏） `allow="camera; microphone"`（设备权限）
`sandbox`	启用沙盒模式，限制嵌入页面的行为（安全关键属性）。	`sandbox="allow-scripts"`（仅允许脚本） `sandbox="allow-forms"`（允许表单提交）
`loading`	控制框架加载时机（优化性能）。	`loading="lazy"`（延迟加载） `loading="eager"`（立即加载）
`name`	为框架命名，用于超链接的 `target` 属性。	`<a href="page.html" target="my-frame">打开链接</a>`

标签	说明	属性示例	注意事项
`<header>`	定义页面或区块的页眉（如导航栏、Logo）。	无特殊属性	一个页面可包含多个 `<header>`，通常位于顶部。
`<footer>`	定义页面或区块的页脚（如版权信息、联系方式）。	无特殊属性	可嵌套在 `<article>` 或 `<section>` 内。
`<nav>`	定义导航链接集合（如主导航菜单）。	无特殊属性	仅用于主要导航，次要链接无需包裹。
`<article>`	定义独立内容块（如博客文章、新闻条目）。	无特殊属性	内容应自包含，适合单独分发或复用。
`<section>`	定义文档中的章节或区块（如章节、标签页）。	无特殊属性	需搭配标题（`<h2>`~`<h6>`）使用。
`<aside>`	定义与主内容相关的侧边栏或附加内容（如引用、广告）。	无特殊属性	内容应与主内容相关，但非必需。
`<main>`	定义文档主体内容（每个页面唯一）。	无特殊属性	不可嵌套在 `<header>`、`<footer>` 或 `<article>` 内。
`<figure>`	定义媒体内容组合（如图片、图表、代码块）。	无特殊属性	需配合 `<figcaption>` 添加标题或说明。
`<time>`	定义时间或日期。	`datetime`（机器可读格式，如 `datetime="2023-10-01"`）	示例：`<time datetime="2023-10-01">国庆节</time>`。

标签	说明	属性示例	注意事项
`<video>`	嵌入视频文件。	`controls`（显示控件）、`autoplay`（自动播放）、`poster`（封面图）。	提供多种格式（如 MP4、WebM）以提高兼容性。
`<audio>`	嵌入音频文件。	`controls`、`loop`（循环播放）、`muted`（静音）。	支持 MP3、WAV、Ogg 等格式。
`<track>`	为 `<video>` 或 `<audio>` 添加字幕或章节信息。	`kind`（类型，如 `subtitles`）、`src`（字幕文件路径）、`srclang`（语言）。	示例：`<track src="subs_en.vtt" kind="subtitles" srclang="en">`。

标签	说明	属性示例	注意事项
`<canvas>`	通过 JavaScript 绘制图形、动画或游戏。	`width`、`height`（画布尺寸）。	需配合 JS 使用，示例：`<canvas id="myCanvas" width="800" height="600"></canvas>`。
`<svg>`	定义矢量图形（如图标、图表）。	`viewBox`（视口）、`fill`（填充颜色）、`stroke`（描边颜色）。	直接嵌入 SVG 代码或通过 `<img>` 引用外部文件。

标签/属性	说明	属性示例	注意事项
`<datalist>`	定义输入框的预定义选项列表（与 `<input list>` 配合使用）。	`id`（与 `<input list>` 属性关联）。	示例：`<input list="browsers"><datalist id="browsers"><option value="Chrome"></datalist>`。
`<output>`	显示计算或用户输入的结果。	`for`（关联的输入控件 ID）。	需通过 JS 更新值。
`<input type="email">`	邮箱输入（自动格式验证）。	`multiple`（允许多个邮箱，用逗号分隔）。	需后端二次验证。
`<input type="date">`	日期选择器。	`min`、`max`（限制日期范围）。	浏览器样式可能不一致。
`<input type="range">`	滑块控件。	`min`、`max`、`step`（步长）。	示例：`<input type="range" min="0" max="100" step="10">`。

标签	说明	属性示例	注意事项
`<mark>`	高亮显示文本（如搜索结果关键词）。	无特殊属性	示例：`<p>这是<mark>高亮</mark>文本。</p>`。
`<progress>`	显示任务进度条。	`value`（当前值）、`max`（最大值）。	示例：`<progress value="70" max="100"></progress>`。
`<meter>`	显示标量测量值（如磁盘使用量）。	`min`、`max`、`value`、`low`、`high`（阈值范围）。	示例：`<meter value="6" min="0" max="10">6/10</meter>`。
`<dialog>`	定义对话框或模态窗口。	`open`（默认显示）。

标签	作用	示例
`<br>`	强制换行	`第一行<br>第二行`
`<hr>`	水平分割线	`<hr style="border: 1px solid #ccc;">`
`<img>`	插入图片	`<img src="image.jpg" alt="描述">`
`<input>`	输入控件（文本、密码、文件等）	`<input type="text" name="username">`
`<meta>`	定义元数据（字符编码、视口等）	`<meta charset="UTF-8">`
`<link>`	引入外部资源（CSS、图标等）	`<link rel="stylesheet" href="style.css">`
`<area>`	定义图像映射区域（需配合 `<map>` 使用）	`<area shape="rect" coords="0,0,82,126" href="link.html">`
`<base>`	设置页面的基础 URL	`<base href="https://example.com/">`

标签	作用	示例
`<div>`	通用块级容器	`<div class="container"><p>内容</p></div>`
`<p>`	段落	`<p>这是一段文字。</p>`
`<h1>`~`<h6>`	标题（1 级最大，6 级最小）	`<h1>主标题</h1>`
`<a>`	超链接	`<a href="https://example.com">链接</a>`
`<ul>`/`<ol>`	无序列表/有序列表	`<ul><li>项目1</li></ul>`
`<table>`	表格	`<table><tr><td>单元格</td></tr></table>`
`<form>`	表单容器	`<form action="/submit" method="POST"></form>`
`<script>`	嵌入或引用 JavaScript 代码	`<script src="app.js"></script>`

场景	正确用法	错误用法
自闭合标签	`<img src="image.jpg">`（正确）	`<img src="image.jpg"></img>`（错误，双标签闭合）
双标签闭合	`<div><p>内容</p></div>`	`<div><p>内容</p>`（错误，未闭合 `<div>`）
特殊双标签	`<br>`（单标签）不能写成 `<br></br>`	`<br></br>`（错误，单标签无需闭合）

伪类选择器	描述	示例
`:hover`	鼠标悬停在元素上时生效	`a:hover { color: red; }`
`:focus`	元素获得焦点时生效（如输入框、按钮）	`input:focus { border: 2px solid blue; }`
`:active`	元素被点击（激活）时生效	`button:active { transform: scale(0.95); }`
`:visited`	链接已被访问过时生效（需谨慎使用，受浏览器安全限制）	`a:visited { color: purple; }`

伪类选择器	描述	示例
`:nth-child(n)`	选择父元素中的第 n 个子元素	`li:nth-child(odd) { background: #f0f0f0; }` an+b（n自增）；odd（奇数）、even（偶数）
`:first-child`	选择父元素的第一个子元素	`p:first-child { font-weight: bold; }`
`:last-child`	选择父元素的最后一个子元素	`tr:last-child { border-bottom: 2px solid #ccc; }`
`:not(selector)`	排除符合指定选择器的元素	`div:not(.special) { margin: 0; }`
:first-of-type	满足条件的第一个子元素	`div>p:first-of-type{}`
:last-of-type	满足条件的最后一个
:nth-of-type	满足条件的n个子元素

伪类选择器	描述	示例
`:checked`	单选框/复选框被选中时生效	`input[type="checkbox"]:checked + label { color: green; }`
`:disabled`	表单元素被禁用时生效	`button:disabled { opacity: 0.5; }`
`:required`	表单字段带有 `required` 属性时生效	`input:required { border: 1px solid red; }`

伪类选择器	描述	示例
`:target`	URL 锚点指向的元素（如 `#section1`）	`#section1:target { display: block; }`
`:root`	匹配文档根元素（通常是 `<html>`）	`:root { --primary-color: #333; }`

特性	伪类（Pseudo-class）	伪元素（Pseudo-element）
用途	匹配元素的状态或位置	操作元素的特定部分（如首行、首字母）
语法	单冒号 `:`（如 `:hover`）	双冒号 `::`（如 `::before`）
是否创建新内容	否（仅改变现有元素的样式）	是（可插入生成内容，如 `::before`）
示例	`li:hover`, `input:focus`	`p::first-line`, `::selection`

伪类选择器	描述
`::first-letter`	第一个文字
`::firstline`	第一行文字
`::selection`	被鼠标选中的文字
`::before`	在某某元素之前插入
`::after`	在某某元素之后插入

方式	适用场景	示例
十六进制	快速开发、简单颜色	`#ff0000`
RGB/RGBA	需要透明度或编程逻辑控制	`rgba(255, 0, 0, 0.5)`
HSL/HSLA	动态调整明暗、饱和度（如主题切换）	`hsl(0, 100%, 50%)`
CSS 变量	主题化、跨组件复用	`--primary-color: #2196F3`
渐变	背景、装饰效果	`linear-gradient(...)`

属性	描述	示例
`display`	定义元素的显示类型（块级、行内、弹性、网格等）	`display: flex;`
`position`	定位方式（静态、相对、绝对、固定、粘性）	`position: relative;`
`top`/`right`/`bottom`/`left`	定位元素偏移量	`top: 20px;`
`margin`	外边距（控制元素间距）	`margin: 10px 5px;`
`padding`	内边距（控制内容与边框距离）	`padding: 15px;`
`width`/`height`	元素宽高	`width: 100%;`
`box-sizing`	盒模型计算方式（`content-box` 或 `border-box`）	`box-sizing: border-box;`

属性	描述	示例
`color`	文本颜色	`color: #333;`
`font-size`	字体大小	`font-size: 16px;`
`font-family`	字体类型	`font-family: Arial, sans-serif;`
`text-align`	文本水平对齐（左、右、居中、两端对齐）	`text-align: center;`
`line-height`	行高	`line-height: 1.5;`
`text-decoration`	文本装饰线（如下划线）	`text-decoration: none;`
`letter-spacing`	字符间距	`letter-spacing: 1px;`

属性	描述	示例
`background-color`	背景颜色	`background-color: #f0f0f0;`
`background-image`	背景图片	`background-image: url("img.jpg");`
`background-size`	背景图片尺寸（`cover`、`contain`）	`background-size: cover;`
`border`	边框（宽度、样式、颜色）	`border: 1px solid #ccc;`
`border-radius`	圆角半径	`border-radius: 8px;`
`box-shadow`	阴影效果（水平偏移、垂直偏移、模糊、颜色）	`box-shadow: 2px 2px 10px rgba(0,0,0,0.1);`

属性	描述	示例
`display: flex`	启用弹性容器	`display: flex;`
`flex-direction`	主轴方向（行、列等）	`flex-direction: row-reverse;`
`justify-content`	主轴对齐方式（居中、两端对齐等）	`justify-content: space-between;`
`align-items`	交叉轴对齐方式	`align-items: center;`
`flex-grow`	子元素弹性伸展比例	`flex-grow: 1;`
`flex-shrink`	子元素弹性收缩比例	`flex-shrink: 0;`

属性	描述	示例
`display: grid`	启用网格容器	`display: grid;`
`grid-template-columns`	定义列宽（如 `1fr 2fr`）	`grid-template-columns: repeat(3, 1fr);`
`gap`	网格间距	`gap: 10px;`
`grid-row`/`grid-column`	定义子元素位置	`grid-column: 1 / 3;`

属性	描述	示例
`max-width`	最大宽度（防止元素过宽）	`max-width: 1200px;`
`min-height`	最小高度	`min-height: 300px;`
`@media`	媒体查询（响应式设计）	`@media (max-width: 768px) { ... }`

属性	描述	示例
`transition`	过渡效果（属性、时长、缓动函数）	`transition: all 0.3s ease;`
`animation`	关键帧动画（名称、时长、延迟等）	`animation: slide 2s infinite;`

属性	描述	示例
`opacity`	透明度（0~1）	`opacity: 0.8;`
`visibility`	元素可见性（`visible`/`hidden`）	`visibility: hidden;`
`z-index`	层叠顺序（解决重叠元素的显示问题）	`z-index: 10;`
`cursor`	鼠标悬停样式	`cursor: pointer;`

属性	描述	示例
`content`	伪元素内容（需配合 `::before`/`::after`）	`content: "→";`
`::placeholder`	输入框占位符样式	`::placeholder { color: gray; }`

特性	块级元素	行内元素	行内块元素
换行	独占一行	不独占	不独占
宽高控制	支持 `width`/`height`	不支持	支持
内外边距	四向均有效	水平有效，垂直无效	四向均有效
默认宽度	父容器剩余空间	内容宽度	由内容或 `width` 决定
典型用途	页面布局、结构划分	文本内嵌元素	灵活排列且需尺寸控制的元素

特性	内容（content）	内边距（padding）	边框（border）	外边距（margin）
作用	显示元素的核心内容	控制内容与边框距离	定义元素边界	控制元素间间距
是否影响总尺寸	否（除非 `box-sizing`）	是	是	是
默认值	由内容决定	`0`	`none`	`0`
常用场景	文本、图片	按钮内边距	卡片边框	页面边距

定位类型	脱离文档流	定位参考	典型用途
`static`	否	正常文档流	默认布局
`relative`	否	自身正常位置	微调元素位置
`absolute`	是	最近的已定位祖先	弹窗、下拉菜单
`fixed`	是	视口	固定导航栏、返回顶部按钮
`sticky`	条件性脱离	视口或父容器阈值	吸顶导航栏、表格表头

位置	名词
顶部导航条	topbar
页头	header、page-header
导航	nav、navigator、navbar
搜索框	search、search-box
横幅、广告、宣传图	banner
主要内容	content、main
侧边栏	aside、sidebar
页脚	footer、page-footer

类名	用途	示例（HTML）
`.header`	页面头部	`<header class="header">...</header>`
`.footer`	页面底部	`<footer class="footer">...</footer>`
`.main-content`	主要内容区域	`<main class="main-content">...</main>`
`.sidebar`	侧边栏	`<aside class="sidebar">...</aside>`
`.card`	卡片式布局容器	`<div class="card">...</div>`

类名	用途	示例（CSS）
`.container`	页面或区域的容器，通常用于限制宽度并居中	`max-width: 1200px; margin: 0 auto;`
`.wrapper`	包裹内容的通用容器	`padding: 20px;`
`.row`	Flexbox/Grid 中的行容器，用于水平排列子元素	`display: flex; flex-wrap: wrap;`
`.col`	列容器，用于垂直排列内容	`flex: 1;`
`.cell`	网格单元格（Grid 布局）	`grid-area: 1 / 1 / 2 / 3;`

文章引用

反向引用

Loading...

暂未引用其他文章

暂未被其它文章引用

下一篇

上一篇

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

热门文章

最新评论

随机文章

阿里云更换SSL证书
浏览次数: 340

Nginx+Lua脚本控制负载均衡
浏览次数: 181

【学习笔记】ES新特性
浏览次数: 171

地址相似度算法
浏览次数: 170

原生Hadoop搭建
浏览次数: 154

Bulling
开卷



Hu_
11111

【学习笔记】HTML和CSS基础
浏览次数: 126

让AI解释什么叫Vibe Coding
浏览次数: 17

拥抱AI
浏览次数: 13

Drools基础使用
浏览次数: 118

MyBatis 中 Integer 判空的一个坑
浏览次数: 19

博客信息

26文章数目

4评论数目

4年199天运行天数

1 星期前最后活动

文章标签

学习笔记 HTML CSS 前端

文章目录