HTML 标签：
1. 结构标签：
- `<html>`：HTML 文档的根元素。
- `<head>`：包含元信息，如标题、字符编码等。
- `<meta>`：定义页面的元信息，如字符编码、作者、描述等。
- `<title>`：设置页面标题，显示在浏览器的标签页上。
- `<base>`：设置页面中的所有相对 URL 的基本 URL。
- `<link>`：用于引入外部资源，如 CSS 文件。
- `<style>`：内部定义页面样式。
- `<script>`：引入 JavaScript 代码。
- `<noscript>`：在浏览器不支持脚本时显示的内容。
- `<body>`：包含页面的可见内容。
- `<section>`、`<article>`、`<nav>`、`<aside>`：HTML5 中的语义化标签，用于定义页面结构。
- `<header>`、`<footer>`：页面的页眉和页脚。
- `<h1>` 到 `<h6>`：标题标签，按重要性递减。
- `<p>`：段落标签。
- `<div>`、`<span>`：用于分组元素。
- `<main>`：页面的主要内容。
- `<iframe>`：嵌入其他页面或资源的框架。
- `<figure>`、`<figcaption>`：图像、表格、代码等的容器和标题。
- `<audio>`、`<video>`：插入音频和视频。
- `<canvas>`：用于绘制图形。
- `<svg>`：绘制矢量图形。
- `<details>`、`<summary>`：用于创建可折叠内容。
2. 列表和表格标签：
- `<ul>`、`<ol>`、`<li>`：无序列表和有序列表。
- `<dl>`、`<dt>`、`<dd>`：定义列表。
- `<table>`、`<tr>`、`<th>`、`<td>`：表格标签。
- `<thead>`、`<tbody>`、`<tfoot>`：表格的头部、主体和底部。
- `<colgroup>`、`<col>`：用于表格列的样式设置。
- `<caption>`：表格的标题。
3. 表单和输入标签：
- `<form>`：创建表单。
- `<input>`：各种输入字段，如文本框、密码框等。
- `<textarea>`：多行文本输入框。
- `<select>`、`<option>`：下拉选择框和选项。
- `<button>`：按钮。
- `<fieldset>`、`<legend>`：用于组织表单元素。
- `<label>`：用于标识输入字段。
- `<datalist>`：为输入字段提供选项。
- `<optgroup>`：选择框中的选项分组。
4. 超链接和媒体标签：
- `<a>`：超链接。
- `<img>`：插入图像。
- `<map>`、`<area>`：用于图像映射。
- `<audio>`、`<video>`：插入音频和视频。
- `<source>`：多媒体元素的媒体资源。
5. 文本标签：
- `<br>`：换行。
- `<hr>`：水平分隔线。
- `<em>`：强调文本。
- `<strong>`：更强烈地强调文本。
- `<code>`：内联代码。
- `<blockquote>`、`<q>`：引用块和行内引用。
- `<sub>`：下标。
- `<sup>`：上标。
- `<pre>`：预格式化文本。
CSS 属性和选择器：
1. 选择器：
- 类选择器 `.class`：选择 class 属性匹配的元素。
- ID 选择器 `#id`：选择 id 属性匹配的元素。
- 元素选择器 `element`：选择指定元素类型的元素。
- 通用选择器 `*`：选择所有元素。
- 后代选择器 `ancestor descendant`：选择祖先元素内部的后代元素。
- 子元素选择器 `parent > child`：选择直接子元素。
- 相邻兄弟选择器 `element + element`：选择紧接在同一父元素下的相邻元素。
- 伪类选择器 `:hover`, `:active`, `:nth-child`, ...：选择匹配特定状态或条件的元素。
- 伪元素选择器 `::before`, `::after`：在元素前后插入内容。
2. 基本属性：
- `color`：文本颜色。
- `background-color`：背景颜色。
- `font-family`：字体族。
- `font-size`：字体大小。
- `font-weight`：字体粗细。
- `text-align`：文本对齐方式。
- `line-height`：行高。
3. 盒模型属性：
- `width`：宽度。
- `height`：高度。
- `
margin`：外边距。
- `padding`：内边距。
- `border`：边框。
- `box-sizing`：盒模型尺寸计算方式。
CSS3 属性：
1. 过渡和动画：
- `transition`：指定过渡效果。
- `transform`：变换元素。
- `animation`：创建动画。
2. 背景和渐变：
- `background-image`：设置背景图像。
- `linear-gradient`：创建线性渐变背景。
- `radial-gradient`：创建径向渐变背景。
3. 阴影和边框：
- `box-shadow`：设置阴影效果。
- `border-radius`：设置边框圆角。
- `border-image`：设置边框图像。
4. 弹性布局：
- `display: flex`：创建弹性容器。
- `flex-direction`：弹性项目的主轴方向。
- `flex-wrap`：弹性项目的换行方式。
- `justify-content`：在主轴上对齐弹性项目。
- `align-items`：在交叉轴上对齐弹性项目。
5. 网格布局：
- `display: grid`：创建网格容器。
- `grid-template-columns`：定义网格列。
- `grid-template-rows`：定义网格行。
- `grid-gap`：设置网格之间的间隔。
以上内容涵盖了 HTML、HTML5、CSS 和 CSS3 中的主要标签、属性和选择器，可用于构建丰富的网页布局和样式效果。
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)