# HTML+CSS

**Repository Path**: maoxiaojiu9/HTML-CSS

## Basic Information

- **Project Name**: HTML+CSS
- **Description**: 本项目是HTML、CSS的基础学习：常用HTML标签、CSS盒子模型、CSS常用布局方式、CSS3动画
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 3
- **Created**: 2023-12-09
- **Last Updated**: 2025-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: HTML, CSS

## README

前端路线：HTML、CSS、JavaScript --> 前端工程化-->Node.js-->前端框架

# HTML

## 一、标签分类

1. **块级元素**

   独占一行,默认宽度 100%,可设置宽度和高度,可嵌套,默认换行,默认情况下有上下边距,可包含行内元素和其他块级元素

   - `<div>`：通用块级容器，用于组织页面结构。
   - `<p>`：定义段落。
   - `<h1>` 到 `<h6>`：标题元素，表示不同级别的标题。
   - `<ul>`：无序列表，用于创建项目符号列表。
   - `<ol>`：有序列表，用于创建编号列表。
   - `<li>`：列表项，用于定义列表中的每一项。
   - `<table>`：表格，用于创建表格结构。
   - `<tr>`：表格行，用于定义表格中的行。
   - `<th>`：表头单元格，用于定义表格中的标题单元格。
   - `<td>`：表格数据单元格，用于定义表格中的数据单元格。
   - `<form>`：表单，用于创建用户输入表单。
   - `<address>`：定义文档或文章的作者/拥有者的联系信息。
   - `<header>`：定义文档的头部区域。
   - `<footer>`：定义文档的底部区域。
   - `<nav>`：定义导航链接的容器。
   - `<article>`：定义文档中的文章或独立内容。
   - `<section>`：定义文档中的一个区块或节。
   - `<aside>`：定义页面内容之外的内容，通常表示侧边栏。
   - `<blockquote>`：定义块级引用。
   - `<hr>`：水平分隔线，用于分隔内容。

2. **行内元素**

   在同一行内显示，只占据内容所需宽度，不可设置宽度和高度，可与其他行内元素共享一行，可包含其他行内元素，不会强制换行

   - `<span>`：通用行内容器，用于应用样式或脚本。
   - `<a>`：超链接，用于创建链接到其他页面或资源。
   - `<strong>`：强调文本，通常表示重要性或紧急性。
   - `<em>`：强调文本，通常表示强调的语气。
   - `<abbr>`：定义缩写或首字母缩略词。
   - `<cite>`：定义引用的标题。
   - `<code>`：用于表示计算机代码。
   - `<br>`：换行元素，用于强制换行。
   - `<img>`：图像元素，用于嵌入图像。
   - `<span>`：通用行内容器，用于应用样式或脚本。
   - `<sub>`：下标，用于表示文本应该被降低到下标位置。
   - `<sup>`：上标，用于表示文本应该被提高到上标位置。
   - `<time>`：表示日期或时间。
   - `<abbr>`：定义缩写或首字母缩略词。
   - `<cite>`：定义引用的标题。
   - `<code>`：用于表示计算机代码。
   - `<small>`：定义小号文本。
   - `<q>`：定义短的引用。
   - `<del>`：定义被删除的文本。
   - `<ins>`：定义被插入的文本。

3. **行内块元素**

   在同一行内显示，可设置宽度和高度，可包含其他行内元素，默认无换行，可应用垂直对齐，可用于替代浮动布局

   - `<img>`：图像元素，用于嵌入图像。
   - `<span>`：通用行内块内容器，可以用于应用样式或脚本。
   - `<a>`：超链接，通常在内部包含其他元素，可以设置为行内块元素。
   - `<strong>`：强调文本，表示重要性或紧急性。
   - `<em>`：强调文本，表示强调的语气。
   - `<br>`：换行元素，用于强制换行。
   - `<button>`：按钮元素，可以设置为行内块元素。
   - `<input>`：输入框元素，可以设置为行内块元素。
   - `<label>`：标签元素，用于为表单元素添加标签。
   - `<select>`：下拉列表框，通常在内部包含`<option>`元素。
   - `<textarea>`：文本域，用于多行文本输入。
   - `<cite>`：引用或参考作品的标题。
   - `<abbr>`：缩写或首字母缩略词的定义。
   - `<code>`：计算机代码的表示。
   - `<small>`：小号文本。
   - `<time>`：表示日期或时间。
   - `<progress>`：表示任务的完成进度。
   - `<mark>`：表示文本的高亮或标记。

4. **替换元素**

   - `<img>`：用于嵌入图像。
   - `<video>`：用于嵌入视频。
   - `<audio>`：用于嵌入音频。
   - `<iframe>`：用于嵌入其他 HTML 文档。
   - `<object>`：通用的替换元素，可以用于嵌入各种类型的资源。
   - `<canvas>`：用于绘制图形，通常通过 JavaScript 来绘制。
   - `<embed>`：用于嵌入外部应用程序或插件。

5. **空元素**

   - `<br>`：换行元素，用于在文本中插入强制换行。
   - `<img>`：图像元素，用于嵌入图像。
   - `<hr>`：水平线元素，用于在文档中插入水平线。
   - `<meta>`：元数据元素，用于设置文档的元信息，通常放置在文档头部。
   - `<input>`：输入框元素，用于创建各种输入控件。
   - `<link>`：外部资源关联元素，通常用于关联外部样式表。
   - `<area>`：图像地图区域元素，与`<map>`结合使用，定义图像地图的可点击区域。
   - `<col>`：表格列元素，用于定义表格的列。
   - `<base>`：基准链接元素，用于设置页面上所有相对链接的基准 URL。

## 二、布局方案

理解 HTML 中的布局方案是很重要的，以下是一些常见的 HTML 布局方案，不包含具体的代码片段：

1. **基于流式布局（Flow Layout）：**

   - HTML 默认的布局方式，元素按照其在 HTML 文档中的出现顺序从上到下排列。
   - 块级元素独占一行，行内元素水平排列。

2. **浮动布局（Float Layout）：**

   - 使用`float`属性，让元素向左或向右浮动，其他内容围绕浮动元素布局。
   - 常用于创建多列布局。

3. **Flexbox 布局：**

   - 使用 CSS3 的 Flexbox 模型，通过设置容器的`display: flex`属性，实现弹性盒子布局。
   - 适用于一维布局，可以轻松控制元素在主轴上的位置和尺寸。

4. **Grid 布局：**

   - 使用 CSS3 的 Grid 模型，通过设置容器的`display: grid`属性，实现二维网格布局。
   - 提供更复杂的布局控制，可以定义行和列。

5. **定位布局（Positioning）：**

   - 使用 CSS 的`position`属性，如`absolute`、`relative`、`fixed`，来定位元素。
   - 常用于精确控制元素的位置。

6. **表格布局（Table Layout）：**

   - 使用 HTML 的`<table>`、`<tr>`、`<td>`等标签，创建表格形式的布局。
   - 不推荐将表格用于整体页面布局，但在某些特定情况下可能会使用。

7. **响应式布局：**

   - 使用媒体查询（Media Queries），根据不同的设备或屏幕尺寸应用不同的样式。
   - 目的是使页面在各种设备上都能有良好的显示效果。

8. **混合布局方案：**
   - 在实际项目中，常常会结合多种布局方案，根据具体需求使用不同的技术。
   - 例如，在大屏幕上使用 Grid 布局，在移动设备上使用 Flexbox 布局。

## 三、HTML5 新特性

新增标签：

1. **`<header>`**：用于定义页面或内容的头部区域。通常包含网站的标题、标志和主要导航链接。
2. **`<nav>`**：定义导航菜单，使得开发者能更清晰地标记出页面的导航部分。
3. **`<section>`**：用于定义页面中的独立部分，如章节、页眉、页脚或文档中的其他部分。有助于提高页面的可读性和可维护性。
4. **`<article>`**：定义独立的内容区域，如新闻报道、论坛帖子、博客条目等。有助于搜索引擎和开发者识别页面的主要内容。
5. **`<aside>`**：定义与页面主要内容相关但又是辅助性的内容，如侧边栏、广告或相关文章列表。
6. **`<figure>`** 和 **`<figcaption>`**：`<figure>` 用于定义图像、图表、代码等独立的内容区域，而 `<figcaption>` 则为 `<figure>` 提供标题或说明。
7. **`<mark>`**：用于突出显示文本，类似于使用荧光笔在纸质文档上做标记。
8. **`<time>`**：定义日期和时间，使得日期和时间信息更加易于被搜索引擎和开发者识别。
9. **`<datalist>`**：提供一个选项列表供用户在下拉列表中选择输入，可以提高表单的可用性和用户体验。
10. **`<video>`** 和 **`<audio>`**：分别用于嵌入视频和音频内容，使得开发者能更加方便地在网页中添加媒体内容。
11. **`<canvas>`**：提供了一个画布，开发者可以在上面绘制图形、动画等，增强了网页的交互性和视觉效果。
12. **`<progress>`**：表示一个任务的完成进度。
13. **`<meter>`**：用于表示度量衡的范围。
14. **`<details>`** 和 **`<summary>`**：`<details>` 用于创建可展开和折叠的内容区域，而 `<summary>` 则为 `<details>` 提供概要或标题。

新增属性：

1. **全局属性**：

   - **contenteditable**：指定元素内容是否可编辑。
   - **contextmenu**：规定元素的上下文菜单。
   - **data-\***：用于存储私有页面后应用的自定义数据。
   - **draggable**：规定元素是否可拖动。
   - **dropzone**：规定当被拖动的数据在拖放到元素上时是否被复制、移动或链接。
   - **hidden**：规定对元素进行隐藏。
   - **spellcheck**：规定是否对元素内容进行拼写检查。
   - **translate**：规定元素内容是否要翻译。

   这些全局属性可以应用于 HTML 中的多个元素，以增强它们的功能。

2. **表单相关属性**：

   - **placeholder**：用于在输入框中显示提示性文字。
   - **autofocus**：自动获得输入焦点。
   - **autocomplete**：是否启用自动补全功能。
   - **multiple**：用于指定`input`类型为`file`或`email`时可以有多个输入项。
   - **form**：用于指定当前元素（放在表单外部）从属于哪个表单。
   - **required**：指定当前输入域内容不能为空。
   - **pattern**：限定当前输入域中必须输入符合指定正则表达式的值。

   这些属性主要增强了 HTML 表单的功能和用户体验。

3. **其他属性**：

   - **override**：用于重写表单元素的某些属性。
   - **list**：用于设置输入域的`datalist`元素，提供输入建议。
   - **autosave**（在某些实现中）：用于指定表单数据是否应自动保存。

# CSS

## 一、三种创建方式

1. **内联样式（不推荐使用）**
2. **内嵌样式**
3. **外部样式（最佳实践）**

优先级：内联样式 > 嵌入样式 > 外部样式

## 二、选择器

1. **基本选择器**

   - 标签选择器
   - id 选择器
   - 类选择器
   - 通配符选择器

2. **复合选择器**

   - 交集选择器
   - 并集选择器

3. **关系选择器**

   - 后代选择器
   - 子元素选择器
   - 相邻兄弟选择器（选择下一个兄弟元素）
   - 通用兄弟选择器（选择下边所有元素）

4. **属性选择器**

   - 属性存在选择器
   - 属性值选择器
   - [属性名=属性值]选择含有指定属性和属性值的元素
   - [属性名^=属性值]选择属性值以指定值开头的元素
   - [属性名$=属性值]选择属性值以指定值结尾的元素
   - [属性名*=属性值]选择属性值中含有指定值的元素

5. **伪类选择器**

   - `:active`：激活状态的元素。
   - `:focus`：获得焦点的元素。
   - `:hover`：鼠标悬停时的状态。
   - `:link`：未访问链接的状态。
   - `:visited`：已访问链接的状态。
   - `:target`：被相关 URL 指向的元素。
   - `:first-child`：父元素下的第一个子元素。
   - `:last-child`：父元素下的最后一个子元素。
   - `:nth-child()`：根据子元素的位置选择元素。n：全部，2n 或者 even:偶数，2n+1 或者 odd:奇数
   - `:nth-last-child()`：根据子元素的倒数位置选择元素。
   - `:nth-of-type()`：根据相同类型子元素的位置选择元素。
   - `:nth-last-of-type()`：根据相同类型子元素的倒数位置选择元素。
   - `:only-child`：是其父元素的唯一子元素。
   - `:only-of-type`：是相同类型的子元素中的唯一一个。

6. **伪元素选择器**

   - `::before`：在元素内容之前插入生成的内容。
   - `::after`：在元素内容之后插入生成的内容。
   - `::first-line`：选择元素的第一行文本。
   - `::first-letter`：选择元素的第一个字母。
   - `::selection`：选择用户选择的文本部分。
   - `::scrollbar`：选择滚动条的轨道部分。
   - `::thumb`：选择滚动条的拖动部分。
   - `::track`：选择滚动条的轨迹部分。
   - `::placeholder`：选择输入框的占位符文本。

**选择器优先级：!important > 内联样式 > id 选择器 > 伪类选择器 > 属性选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承样式**

## 三、CSS 单位

1. **相对单位**

   - 百分比（%）：相对于父元素的相应属性值。
   - em：相对于元素自身的字体大小。
   - rem：相对于根元素（html 元素）的字体大小。
   - vw（视口宽度的百分比）：相对于视口宽度的百分比。
   - vh（视口高度的百分比）：相对于视口高度的百分比。
   - vmin（vw 和 vh 中较小的那个）：相对于 vw 和 vh 中较小的那个的百分比。
   - vmax（vw 和 vh 中较大的那个）：相对于 vw 和 vh 中较大的那个的百分比。

2. **绝对单位**

   - 像素（px）：绝对长度单位，通常在屏幕上使用，表示屏幕上的一个像素。
   - 英寸（in）：绝对长度单位，1 英寸等于 2.54 厘米
   - 厘米（cm）：绝对长度单位。
   - 毫米（mm）：绝对长度单位。
   - 磅（pt）：绝对长度单位，1 磅等于 1/72 英寸。
   - pc（pica，12 磅为 1pc）：绝对长度单位，1pc 等于 12 磅。

3. **长度单位**

   - px（像素）：最常见的长度单位，相对于显示设备的屏幕分辨率。
   - em：相对于元素自身的字体大小。
   - rem：相对于根元素（html）的字体大小。
   - %（百分比）：相对于包含元素的百分比。
   - vw（视窗宽度的百分比）：相对于视口宽度的百分比。
   - vh（视窗高度的百分比）：相对于视口高度的百分比。
   - vmin：相对于视口宽度和高度中较小的那个的百分比。
   - vmax：相对于视口宽度和高度中较大的那个的百分比。

4. **时间单位**

   - s（秒）：表示秒数。
   - ms（毫秒）：表示毫秒数。

5. **角度单位**

   - deg（度）：表示角度。
   - rad（弧度）：表示弧度。
   - grad（梯度）：表示梯度。

6. **颜色单位**

   - RGB（红绿蓝）：用于表示颜色的一种方式，如 `rgb(255, 0, 0)` 表示红色。
   - HEX（十六进制）：以十六进制表示的颜色值，如 `#FF0000` 表示红色。
   - HSL（色相、饱和度、亮度）：用于表示颜色的另一种方式，如 `hsl(0, 100%, 50%)` 表示红色。

## 四、CSS 属性

## 五、盒子模型

1. **文档流**

   - 网页是一个多层结构，一层叠一层，最底层的叫文档流，文档流是网页的基础
   - 元素两种状态：在文档流中和不在文档流中（脱离文档流）
   - 文档流中的块元素：块元素在页面中独占一行，默认宽度是父元素的全部，会把父元素撑满，默认高度是被内容撑开，子元素
   - 文档流中的行内元素：行内元素不会独占页面的一行，只占自身的大小，行内元素在页面中自左向右水平排序，如果一行放不下了，第二行会自动继续自左向右水平排列，行内元素的默认高度和宽度都是被内容撑开

2. **盒子模型**

- _W3C 标准的盒子模型（标准盒模型）：_

  - _在这个模型中，width 和 height 属性仅包括内容的尺寸，不包括内边距（padding）、边框（border）和外边距（margin）。_
  - _内容区域（content）的实际宽度和高度由 width 和 height 属性设置。_
  - _内边距（padding）是内容区域与边框之间的空白区域。_
  - _边框（border）是包围在内边距和内容外的线条。_
  - _外边距（margin）是盒子与其他元素之间的空白区域。_

- _IE 标准的盒子模型（怪异盒模型）：_
  - _与标准盒模型不同，在这个模型中，width 和 height 属性包括内容、内边距（padding）和边框（border）的总宽度和总高度，但不包括外边距（margin）。_
  - _这意味着，如果你设置一个元素的宽度为 100 像素，在怪异盒模型中，这 100 像素将包含内容、内边距和边框的宽度。_
  - _可以通过设置 CSS 的 box-sizing 属性为 border-box 来使用这个模型，这在需要精确控制元素总尺寸的场景下很有用。_

3. **盒子模型组成**
   - 内容区（content）
   - 内边距（padding）
   - 边框（border）
   - 外边距（margin）
   - 总宽度=width+2×padding+2×border+2×margin

## 六、CSS 浮动

1.  **浮动**

2.  **清除浮动**

## 七、CSS 定位

1. 静态定位（Static Positioning）
   静态定位是所有元素的默认定位方式。当元素为静态定位时，它们会按照正常的文档流进行布局，即元素的位置由它在 HTML 文档中的位置决定。

2. 相对定位（Relative Positioning）
   相对定位允许你相对于元素的正常位置进行偏移。设置了相对定位的元素仍然会占据它在文档流中的原始空间。

3. 绝对定位（Absolute Positioning）
   绝对定位允许你将元素相对于其最近的已定位（即非 static）祖先元素进行定位。如果没有这样的祖先元素，则相对于文档的<html>元素定位。绝对定位的元素会从文档流中脱离，不再占据空间。

4. 固定定位（Fixed Positioning）
   固定定位是一种绝对定位的形式，但它是相对于浏览器窗口进行定位的。即使页面滚动，固定定位的元素也会保持在相同的位置。

5. 粘性定位（Sticky Positioning）
   粘性定位可以被认为是相对定位和固定定位的混合体。元素在达到某个滚动位置之前为相对定位，在达到该位置后变为固定定位。

6. 注意事项：

   - 当使用绝对定位或固定定位时，元素会从文档流中脱离，不再占据空间。

   - 相对定位和粘性定位的元素仍然占据它们在文档流中的原始空间。

   - 粘性定位在某些旧浏览器上可能不受支持。

   - 使用定位时，经常需要设置元素的 top、right、bottom 和 left 属性来指定偏移量。

   - 绝对定位和固定定位的元素可以通过设置 z-index 属性来控制堆叠顺序。

## 八、CSS3 新特性

1. 选择器

- **属性选择器**：允许根据元素的属性和值来选择元素。
- **伪类选择器**：为特定状态的元素（如:hover、:active）添加样式。
- **伪元素选择器**：选择元素的特定部分（如::before、::after）。

2. 盒模型与布局

- **box-sizing 属性**：改变了默认的 CSS 盒模型计算方式，更易于布局。
- **Flexbox（弹性盒子）**：一维布局模型，用于创建灵活和自适应的布局。
- **Grid（网格）**：二维布局系统，适用于复杂的页面布局。
- **多列布局**：类似报纸的排版，可将内容分为多列显示。

3. 颜色与透明度

- **RGBA、HSLA 颜色空间**：增加了对透明度的支持。
- **opacity 属性**：设置元素的透明度。

4. 背景与边框

- **background-size、background-position 等**：提供了更灵活的背景图像控制。
- **border-radius 属性**：为边框添加圆角。
- **box-shadow 属性**：为元素添加阴影效果。

5. 文字效果

- **text-shadow 属性**：为文本添加阴影效果。
- **text-overflow 属性**：处理溢出文本的显示方式。
- **@font-face 规则**：引入自定义字体。

6. 动画与过渡

- **transition 属性**：实现元素状态改变时的平滑过渡。
- **@keyframes 规则和 animation 属性**：创建复杂的动画效果。
- **transform 属性**：进行旋转、缩放、倾斜和平移等变换操作。

7. 响应式设计

- **媒体查询（Media Queries）**：根据设备和屏幕尺寸应用不同的样式和布局，实现响应式设计。

8. 其他特性

- **filter 属性**：应用各种图形效果，如模糊、亮度调整等。
- **outline 和 outline-offset 属性**：突出显示元素时非常有用。
- **calc()函数**：允许在 CSS 属性值中进行计算。

## 九、CSS3 变换

## 十、CSS3 过渡

## 十一、CSS3 动画

## 十二、伸缩盒模型

## 十三、响应式布局

## 十四、BFC

1.开启 BFC:

- 根元素
- 浮动元素
- 绝对定位、固定定位的元素
- 行内块元素
- 表格单元格：table、thead、tbody、tfoot、th、td、tr、caption
- overflow 的值不为 visible 的块元素
- 伸缩项目
- 多列容器
- column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
- display 的值，设置为 flow-root

1.元素开启BFC后，其子元素不会再产生margin塌陷问题

2.元素开启BFC后，自已不会被其他浮动元素所覆盖

3.元素开启BFC后，就算其子元素浮动，元素自身高度也不会場陷


路线：
HTML+CSS+JS---->响应式设计------->CSS预处理（less、sass、stylus）----->前端工程化（node、webpack、gulp）----->前端框架（vue、react）---->小程序--->uniapp