常见的 HTML 标签及 CSS 选择器速查表

以下是一些常见的 HTML 标签及其作用：

xml 复制代码

  基本结构
   - <html>：定义 HTML 文档的根元素。
   - <head>：包含文档的元数据（如 <title>, <meta>, <link>, <style>, <script>）。
   - <title>：定义浏览器标签页或书签中显示的文档标题。
   - <body>：包含可见的页面内容。### 文本格式化
   - <h1> 到 <h6>：定义 HTML 标题，<h1> 是最高级标题。
   - <p>：定义段落。
   - <br>：插入一个换行符。
   - <hr>：插入一条水平线。
   - <strong> 或 <b>：定义加粗文本。
   - <em> 或 <i>：定义斜体文本。
   - <u>：定义下划线文本。- <strike> 或 <s>：定义删除线文本。
   - <sub>：定义下标文本（如化学公式 H₂O）。
   - <sup>：定义上标文本（如数学公式 x²）。
   - <mark>：定义高亮显示的文本。
   - <small>：定义小号文本。
   - <pre>：定义预格式化文本，保留空格和换行符。
   - <code>：定义计算机代码文本。
   - <kbd>：定义键盘输入文本。
   - <samp>：定义程序输出文本。
   - <var>：定义变量文本。
   - <blockquote>：定义长引用。
   - <q>：定义短引用。
   - <abbr>：定义缩写。
   - <cite>：定义作品标题（如书籍、文章）。
   - <dfn>：定义术语的定义。
   - <time>：定义日期或时间。

  链接与媒体
   - <a>：定义超链接，用于链接到其他页面或锚点。
   - <img>：嵌入图像。
   - <audio>：嵌入音频内容。
   - <video>：嵌入视频内容。
   - <source>：为 <audio> 或 <video> 元素指定媒体资源。
   - <track>：为 <audio> 或 <video> 元素指定文本轨道（如字幕）。
   - <iframe>：嵌入另一个 HTML 页面。

  列表
   - <ul>：定义无序列表。
   - <ol>：定义有序列表。
   - <li>：定义列表项。
   - <dl>：定义描述列表。
   - <dt>：定义描述列表中的术语。
   - <dd>：定义描述列表中术语的描述。

  表格
   - <table>：定义表格。
   - <thead>：定义表格的表头部分。
   - <tbody>：定义表格的主体部分。
   - <tfoot>：定义表格的页脚部分。
   - <tr>：定义表格行。
   - <th>：定义表格表头单元格。
   - <td>：定义表格数据单元格。
   - <caption>：定义表格标题。
  
  表单
   - <form>：定义用户可输入数据的表单。
   - <input>：定义各种类型的输入控件（如文本框、复选框、单选按钮、按钮等）。
   - <textarea>：定义多行文本输入控件。
   - <button>：定义按钮。
   - <select>：定义下拉列表。
   - <option>：定义下拉列表中的选项。
   - <optgroup>：定义下拉列表中相关选项的组。
   - <label>：为 <input> 元素定义标签。
   - <fieldset>：将表单内的相关元素分组。
   - <legend>：为 <fieldset> 元素定义标题。

  语义化布局 (HTML5)
   - <header>：定义页面或章节的页眉。
   - <nav>：定义导航链接的部分。
   - <main>：定义文档的主要内容。
   - <section>：定义文档中的节（如章节、页眉、页脚或文档的其他部分）。
   - <article>：定义独立的内容（如博客文章、新闻故事、评论）。
   - <aside>：定义页面内容之外的内容（如侧边栏）。
   - <footer>：定义页面或章节的页脚。
   - <details>：定义用户可以查看或隐藏的额外细节。
   - <summary>：为 <details> 元素定义可见的标题。
   - <figure>：定义独立的流内容（如图像、图表、照片、代码等）。
   - <figcaption>：为 <figure> 元素定义标题。

  元数据
   - <meta>：提供关于 HTML 文档的元数据（如字符集、作者、描述、视口等）。
   - <link>：定义文档与外部资源之间的关系（如样式表）。
   - <style>：定义文档的内部样式表。
   - <script>：定义客户端脚本（如 JavaScript）。
   - <noscript>：定义当浏览器不支持脚本时显示的内容。

这些标签构成了 HTML 文档的基础，并赋予了网页内容结构和语义。

一、常见的 CSS选择器及作用

CSS 选择器用于选中你想要设置样式的 HTML 元素。以下是一些最常用的选择器：

1. 元素选择器（类型选择器）

语法: element
作用: 选中所有指定类型的 HTML 元素。
示例:

css 复制代码

  p {
    color: blue;
  }

选中所有 <p> 元素，并将其文字颜色设为蓝色。

2. 类选择器 (Class Selector)

语法 : .class
作用 : 选中所有 class 属性值匹配的元素。
示例:

css 复制代码

   .highlight {    background-color: yellow; }

选中所有 class="highlight" 的元素，并为其设置黄色背景。

3. ID选择器 (ID Selector)

语法: #id
作用: 选中 id 属性值匹配的唯一元素。
示例:

css 复制代码

   #header {    font-size: 24px; }

选中 id="header" 的元素，并设置字体大小。

4. 后代选择器 (Descendant Selector)

语法: selector1 selector2
作用: 选中 selector1 元素内部的所有 selector2 元素。
示例:

css 复制代码

  div p {
    margin: 10px; 
  }

选中所有在 <div> 内部的 <p> 元素，并设置外边距。

5. 子选择器 (Child Selector)

语法: selector1 > selector2
作用:选中 selector1 的直接子元素 selector2。
示例:

css 复制代码

   ul > li {    list-style-type: none; }

选中所有 <ul> 的直接子元素 <li>，并去掉列表符号。

6. 相邻兄弟选择器 (Adjacent Sibling Selector)-

语法: selector1 + selector2
作用:选中紧接在 selector1 后面的第一个 selector2 元素。
示例:

css 复制代码

  h1 + p {
    font-weight: bold;  
  }

选中紧跟在 <h1> 后面的第一个 <p> 元素，并加粗。

7. 通用兄弟选择器 (General Sibling Selector)

语法: selector1 ~ selector2
作用: 选中与 selector1 同级的所有 selector2 元素。
示例:

css 复制代码

  h1 ~ p {
    color: gray; 
  }

选中与 <h1> 同级的所有 <p> 元素，并设置颜色为灰色。

8. 属性选择器 (Attribute Selector)

语法: [attribute], [attribute="value"], [attribute~="value"], [attribute^="value"], [attribute$="value"], [attribute*="value"]
作用:选中具有特定属性或属性值的元素。
示例:

css 复制代码

 input[type="text"] {
   width: 200px;
 }

选中所有 type="text" 的元素，并设置宽度。

9.伪类选择器 (Pseudo-class Selector)

语法: selector:pseudo-class
作用: 选中元素的特定状态（如悬停、点击等）。
常见伪类:
- :hover - 鼠标悬停
- :active - 激活（点击）
- :focus - 获得焦点
- :visited - 已访问的链接
- :first-child - 第一个子元素
- :nth-child(n) - 第 n 个子元素- 示例:

css 复制代码

  a:hover {
    color: red; 
  }

当鼠标悬停在 <a> 链接上时，文字变为红色。

10.伪元素选择器 (Pseudo-element Selector)

语法: selector::pseudo-element
作用: 选中元素的特定部分（如首字母、首行）。
常见伪元素:
- ::before - 在元素内容前插入内容
- ::after - 在元素内容后插入内容
- ::first-line - 元素的第一行
- ::first-letter - 元素的第一个字母
示例:

css 复制代码

  p::first-letter {
    font-size: 2em;
  }

选中 <p> 元素的第一个字母，并将其字体放大。

二、常见的 CSS 属性及作用

CSS 属性用于控制 HTML 元素的外观和布局。以下是一些最常用的属性：

1. 文本和字体

color: 设置文字颜色。
font-size: 设置字体大小。
font-family: 设置字体族（如 Arial, sans-serif）。
font-weight: 设置字体粗细（如 bold, normal）。
text-align: 设置文本对齐方式（left, center, right）。
text-decoration: 设置文本装饰（如下划线 underline）。
line-height: 设置行高。

2. 背景

background-color: 设置背景颜色。
background-image: 设置背景图片。
background-repeat: 设置背景图片是否重复。
background-position: 设置背景图片的位置。

3. 盒模型

width, height: 设置元素的宽高。
padding: 设置内边距（内容与边框之间的距离）。
margin: 设置外边距（元素与其他元素之间的距离）。
border: 设置边框（宽度、样式、颜色）。
- border-width: 边框宽度
- border-style: 边框样式（如 solid, dashed）
- border-color: 边框颜色

4. 布局

display: 设置元素的显示类型（如 block, inline, flex, grid）。
position: 设置元素的定位方式（static, relative, absolute, fixed）。
top, right, bottom, left: 与 position 结合使用，控制元素的位置。
float: 使元素浮动到左侧或右侧。
clear: 清除浮动。
z-index: 控制元素的堆叠顺序（数值越大越靠前）。

5. Flexbox (弹性盒子布局)

display: flex;: 启用弹性盒子布局。
flex-direction: 设置主轴方向（row, column）。
justify-content: 设置主轴上的对齐方式。
align-items: 设置交叉轴上的对齐方式。
flex-wrap: 设置是否换行。

6. Grid (网格布局)

display: grid;: 启用网格布局。
grid-template-columns, grid-template-rows: 定义网格的列和行。
grid-column, grid-row: 指定元素在网格中的位置。
gap: 设置网格行与列之间的间距。

7. 过渡和动画

transition: 为元素添加过渡效果（如颜色变化、大小变化）。
transform: 对元素进行2D 或3D 变换（如旋转、缩放、移动）。
animation: 创建动画。

8. 其他- cursor: 设置鼠标指针样式（如 pointer, default）。

opacity: 设置元素的透明度（0.0 到 1.0）。
visibility: 控制元素是否可见（visible, hidden）。
overflow: 控制内容溢出时的处理方式（visible, hidden, scroll）。

总结

CSS选择器用于选中 HTML 元素。
CSS 属性用于为选中的元素应用样式。

掌握这些选择器和属性，可以让你灵活地控制网页的样式和布局。