html5选择器 HTML选择器是CSS（层叠样式表）中用于选择HTML元素的工具，用于将样式应用到特定的HTML元素上

<!DOCTYPE html><!-- 不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 -->

<html lang="en">
<!-- 向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english -->

<head>
   <meta charset="UTF-8"><!-- 规定 HTML文档的字符编码： -->

   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <!--告诉IE以最高级 模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。 IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式以此来解决部分兼容问题。
   设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。-->

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!--  viewport标记，用于指定用户是否可以缩放Web页面，并对相关的选项进行设定。
  width 和height 指令分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。如上文代码中device-width即表示，视区宽度应为设备的屏幕宽度。类似的，device-height即表示设备的屏幕高度。
  initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面,页面按实际尺寸显示，无任何缩放。
  maximum-scale和minimum-scale用于设置用户对于Web页面缩放比例的限制。值的范围为0.25~10.0之间,页面按实际尺寸显示，无任何缩放
  user-scalable指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。-->
    
</head>

</html>

选择器

HTML选择器是CSS（层叠样式表）中用于选择HTML元素的工具，用于将样式应用到特定的HTML元素上。

标签选择器

选择HTML中所有指定的标签。

p {
  color: blue;
}

以上代码会将所有<p>标签的文字颜色设置为蓝色。

类选择器

选择HTML中所有具有相同class属性值的元素。

<div class="box">内容1</div>
<span class="box">内容2</span>

.box {
  background-color: yellow;
}

以上代码会将所有class="box"的元素背景颜色设置为黄色。

ID选择器

选择HTML中具有指定id属性值的元素。

<div id="main">内容</div>

#main {
  font-size: 20px;
}

以上代码会将id="main"的元素字体大小设置为20像素。

通用选择器

选择页面中的所有元素。

* {
  margin: 0;
  padding: 0;
}

以上代码会将所有元素的外边距和内边距都设置为0。

后代选择器

选择某个元素内部所有的后代元素，包含嵌套的。

语法：祖先元素后代元素

<div class="parent">
  <p>内容1</p>
  <div>
    <p>内容2</p>
  </div>
</div>

.parent p {
  color: green;
}

以上代码会将class="parent"内部所有的的<p>标签的文字颜色设置为绿色。

子代选择器

选择某个元素的直接子元素，不会选择嵌套的。

语法：父元素 > 子元素。
```
<div class="parent">
  <p>内容1</p>
  <div>
    <p>内容2</p>
  </div>
</div>
```
```
.parent > p {
  color: green;
}
```
以上代码只会将class="parent"的直接子元素<p>的文字颜色设置为绿色，不会影响嵌套的<p>。

兄弟选择器

相邻兄弟选择器：
- 选择紧挨着的下一个兄弟元素，它们之间不能有其他元素。
- 语法：元素1 + 元素2。
```
<p>段落1</p>
<span>内容</span>
```
```
p + span {
  font-weight: bold;
}
```
  以上代码会将紧挨在<p>标签之后的<span>标签的文字设置为加粗。
通用兄弟选择器：
- 选择所有共享相同父元素的后续兄弟元素，不论它们之间是否有其他元素。
- 语法：元素1 ~ 元素2。
```
<div class="parent">
  <span>内容0</span>
  <p>段落1</p>
  <span>内容1</span>
  <u>hello</u>
  <span>内容2</span>
  </div>
</div>
```
```
p ~ span {
  color: red;
}
```
  以上代码会将<p>标签之后的所有同级<span>标签的文字颜色设置为红色。这里”内容1“ 和 ”内容2“设置为了红色。

属性选择器

选择具有特定属性或属性值的元素。
语法：
- [属性]：选择具有指定属性的元素。
- [属性="值"]：选择属性值等于指定值的元素。
- [属性~="值"]：选择属性值包含指定值的元素（值以空格分隔）。
- [属性^="值"]：选择属性值以指定值开头的元素。
- [属性$="值"]：选择属性值以指定值结尾的元素。
- [属性*="值"]：选择属性值包含指定值的元素。

示例：

<a href="https://example.com">链接1</a>
<a href="https://moonshot.cn">链接2</a>

a[href^="https://"] {
  color: orange;
}

以上代码会将所有href属性以https://开头的<a>标签的文字颜色设置为橙色。

伪类选择器

用于选择元素的特定状态或位置。
常见伪类：
- :link：超链接未访问。
- :hover：鼠标悬停时的状态。
- :active：元素被按住激活不松时的状态（如点击）。
- :visited：超链接已访问。
- :focus：元素获得焦点时的状态。
- :first-child：选择父元素的第一个子元素。
- :last-child：选择父元素的最后一个子元素。
- :nth-child(n)：选择父元素的第n个子元素。
- :nth-last-child(n):选择父元素的倒数第n个子元素。
- :not(选择器)：排除符合选择器的元素。

示例：

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

li:nth-child(2) {
  color: pink;
}

a:hover { background-image: url(img/one.jpg) }

以上代码会将<ul>中第二个<li>的文本颜色设置为粉色。

表单相关伪类选择器

常见类型：
- :checked：选择被选中的<input>（如单选按钮或复选框）。
- :enabled：选择启用的表单元素。
- :disabled：选择禁用的表单元素。
- :placeholder-shown：选择显示占位符的输入框。

示例：

input:disabled {
  background-color: red;
}

<input type="button" disabled />

伪元素选择器

用于选择元素的特定部分，如元素的首行、首字母等。
常见伪元素：
- ::before：在元素内容之前插入内容。
- ::after：在元素内容之后插入内容。
- ::first-letter：选择元素的第一个字母。
- ::first-line：选择元素的第一行。
- ::selection：文本被选中的部分。

示例：

<p>这是一个段落hello</p>

p::before {
  content: ">> ";
  color: red;
}

p::first-line {
  color: blue;
  text-transform: uppercase;
}

p::first-letter {
  font-size: 130%;
}

p::selection {
  color: gold;
  background-color: red;
}

组合选择器

多个选择器可以通过逗号分隔组合使用，例如p, li同时选择<p>和<li>标签。

before 和 after伪元素案例

attr链接

a::after {
  content: '(' attr(href) ')';
}


<div id="father">
  <a href="http://www.baidu.com">百度</a>
</div>

点击图片跳转

  <style>
    a::before {
      content: url('https://www.baidu.com/img/baidu_jgylogo3.gif');
    }
  </style>
  <body>
    <div id="father">
      <a href="http://www.baidu.com"></a>
    </div>
  </body>

counter列表

   body {counter-reset: section;}
   h1 {counter-reset: subsection;}
   h1:before {counter-increment: section;content: counter(section) "、";}
   h2:before {counter-increment: subsection;content: counter(section) "."counter(subsection) "、";}

   <h1>HTML tutorials</h1>
   <h2>HTML Tutorial</h2>
   <h2>XHTML Tutorial</h2>

   <h1>Scripting tutorials</h1>
   <h2>JavaScript</h2>
   <h2>VBScript</h2>

   <h1>XML tutorials</h1>
   <h2>XML</h2>
   <h2>XSL</h2>

超链接添加经过出现特殊字符

a { position: relative; display: inline-block; outline: none; text-decoration: none; }
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\21E0 "; left: -10px; }
a:hover::after { content: "\21E2"; right: -10px; }
   
<a>鼠标移上去出现箭头</a>

点击切换

li.done {background: #CCFF99;}
li.done::before {content: '1';color:red;}

<ul>
  <li>Buy milk</li>
</ul>

var list = document.querySelector('ul');
list.addEventListener('click', function (ev) {
if (ev.target.tagName === 'LI') {
  ev.target.classList.toggle('done')
}
}, false)

选择器的优先级

在HTML中，CSS选择器的优先级决定了当多个样式规则应用于同一个元素时，哪个规则会被应用。以下是CSS选择器优先级的规则，从高到低排列：

!important>内联样式>ID选择器>类选择器、属性选择器和伪类选择器>标签选择器>通用选择器>继承

文本样式

在HTML中，文本样式可以通过多种方式来设置，主要是通过使用HTML标签和CSS进行样式控制。

标签实现的样式

粗体: 使用 <strong> 或 <b> 标签。
斜体: 使用 <em> 或 <i> 标签。
下划线: 使用 <u> 标签。
删除线: 使用 <del> 或 <s> 标签。
换行：使用<br>标签。
高亮：使用<mark>标签。
上标和下标: 使用 <sup> 和 <sub> 标签。
- 上标: <sup>上标文本</sup>
- 下标: <sub>下标文本</sub>

CSS实现的样式

使用CSS，可以更细致地控制文本样式。这些样式通过内联样式（style 属性）、内部样式表（<style> 标签）或外部样式表进行设置。

字体样式:

font-family: '楷体'; /* 用于指定文本的字体类型。可以指定一个字体名称或字体族（如serif、sans-serif等） */ 

font-size: 16px; /* 用于设置文本的大小，单位可以是px（像素）、em（相对单位）、rem（相对于根元素的字体大小）等 */

color: #333333;

font-weight: bold; /* normal（正常）、bold（粗体）、bolder（更粗）、lighter（更细）或具体的数值（如100到900） */

font-style: italic; /* normal（正常）、italic（斜体）或oblique（倾斜） */

font: bold italic 18px/30px "隶书";  /* 加粗、斜、18px字体大小、30px行高、隶书 */ 

@font-face {
 font-family: W;
 src: url();
}
ul li {
 font-family: W;
}

文本装饰:
- text-decoration：设置文本的装饰效果，如none（无装饰）、underline（下划线）、overline（上划线）、line-through（删除线）等。
- text-decoration-color：设置文本装饰（如下划线、删除线）的颜色。
- text-decoration-style：设置文本装饰线的样式。solid（实线），double（双线），dotted（点线），dashed（虚线），wavy（波浪线）。
- text-decoration-thickness: 3px; ：设置文本装饰线（如下划线、删除线）的厚度。
```
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: wavy;
text-decoration-thickness: 3px;
```
文本对齐:
- 对齐方式: text-align
- text-align-last：设置最后一行文本的对齐方式。
```
text-align: center; /* left, right, center, justify */
```
文本缩进（text-indent）
- 用于设置文本的首行缩进，单位可以是px、em等。
```
p {
  text-indent: 2em;
}
```

文本溢出（text-overflow）

用于设置当文本溢出容器时的显示方式，可取值为clip（裁剪）、ellipsis（显示省略号）等。

div {
  width: 100px;
  overflow: hidden; /* 超出部分隐藏 */
  white-space: nowrap; /* 禁止自动换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}


div {
  width: 100px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制显示两行 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis; /* 超出部分显示省略号 */  
}

文本阴影（text-shadow）
- 功能：为文本添加阴影效果，增强视觉效果。
- 参数：
  - 水平偏移量（x）
  - 垂直偏移量（y）
  - 模糊半径（可选）
  - 阴影颜色
- 示例：
```
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
```
文本方向（writing-mode）
- 功能：控制文本的书写方向，可以实现水平或垂直排版。
- 常见值：
  - horizontal-tb：水平书写（默认值）
  - vertical-rl：垂直书写，从右到左
  - vertical-lr：垂直书写，从左到右
- 示例：
```
div {
  writing-mode: vertical-rl;
}
```
字体平滑（font-smooth）
- 功能：控制字体的平滑度，主要用于改善小字号字体的显示效果。
- 常见值：auto：自动平滑，always：始终平滑，never：不平滑。
```
p {
  font-smooth: always;
}
```
自动换行
- word-wrap（已废弃，使用overflow-wrap）
  - 控制是否允许单词在必要时自动换行。
  - 常见值：
    - normal：默认值，单词不会在必要时换行。
    - break-word：允许单词在必要时换行。
```
p {
  width: 100px;
  overflow-wrap: break-word;
}
```
强制换行
- white-space
  - 控制元素内的空白符如何处理，包括换行。
  - 常见值：
    - normal：默认值，空白符会被浏览器正常处理，多余的空白符会被忽略。
    - nowrap：强制文本在同一行显示，不会自动换行。
    - pre：保留空白符，包括换行符和空格，类似于<pre>标签。
    - pre-wrap：保留空白符，同时允许文本自动换行。
    - pre-line：保留换行符，但多余的空格会被忽略。
  - 示例：
```
p {
  white-space: pre-wrap; /* 保留空白符并允许自动换行 */
}
```
文本转换:
- 大小写转换: text-transform，用于控制文本的大小写，可取值为none（无转换）、uppercase（大写）、lowercase（小写）、capitalize（首字母大写）。
```
text-transform: uppercase;
```
文本行高:
- 行高: line-height，用于设置行与行之间的间距，单位可以是px、em等，也可以是一个无单位的数字（表示相对于字体大小的倍数）。
```
line-height: 1.5;
```
字符间距和单词间距:
- 字符间距: letter-spacing，单位可以是px、em等。
```
letter-spacing: 0.1em;
```
- 单词间距: word-spacing，单位可以是px、em等。
```
word-spacing: 0.2em;
```

overflow

overflow 用于控制元素内容溢出其容器时的显示方式。当元素的内容超出了其指定的宽度或高度时，overflow 属性可以决定是否显示滚动条、是否隐藏超出部分的内容，或者是否让内容溢出到容器外部。

以下是 overflow 属性的常见取值及其作用：

visible：这是默认值。当内容超出容器时，内容会溢出到容器的外部，不会显示滚动条。
hidden：当内容超出容器时，超出的部分会被隐藏，不会显示滚动条。
scroll：当内容超出容器时，会显示滚动条，无论内容是否真的溢出。滚动条始终可见。
auto：当内容超出容器时，会根据需要显示滚动条。如果内容没有超出容器，则不会显示滚动条。

overflow 属性可以同时控制水平和垂直方向的溢出行为。例如，overflow: auto 会同时控制水平和垂直方向的滚动条显示。如果只想单独控制水平或垂直方向的溢出行为，可以使用 overflow-x 和 overflow-y 属性。例如：

<div style="width: 100px; height: 100px; border: 1px solid black; overflow-x: auto; overflow-y: hidden;">
    这是一个很长的文本，水平方向可以滚动，但垂直方向会隐藏超出部分。
</div>

position定位

position属性值

static

这是position属性的默认值。元素按照正常的文档流进行布局，元素不会脱离文档流，其位置由HTML结构决定。

relative

相对定位是将元素相对于其正常位置进行偏移，但元素仍然保留在文档流中。

<div style="position: relative; top: 20px; left: 20px; border: 1px solid black;">
    这是一个相对定位的元素。
</div>

absolute

绝对定位是将元素相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于整个文档。元素完全脱离文档流，不占据原来的位置。

<div style="position: relative; border: 1px solid black;">
    父元素（相对定位）
    <div style="position: absolute; top: 20px; right: 20px; border: 1px solid red;">
        子元素（绝对定位）
    </div>
</div>

fixed

固定定位是将元素相对于浏览器窗口进行定位，无论页面滚动到哪里，元素始终固定在指定位置。元素完全脱离文档流，不占据原来的位置。

sticky

粘性定位是一种介于相对定位和固定定位之间的定位方式。元素在页面滚动时，会在指定的范围内“粘”在视口的某个位置。元素在指定的滚动区域内是相对定位，一旦滚动到某个阈值，就变为固定定位。

<div style="position: sticky; top: 0; border: 1px solid green;">
    这是一个粘性定位的元素。
</div>

文档流

“脱离文档流”是指元素不再按照正常的文档流进行布局。正常文档流是指HTML元素按照它们在HTML代码中出现的顺序，从上到下、从左到右依次排列的布局方式。当元素脱离文档流时，它不再受这种默认布局规则的约束，而是根据其他规则（如定位属性）来确定其位置。

正常文档流

正常文档流是HTML元素的默认布局方式。在这种布局中：

块级元素（如<div>、<p>、<h1>等）会独占一行，并且按照它们在HTML代码中的顺序依次排列。
行内元素（如<span>、<a>、<img>等）会沿着行排列，直到一行排不下时才会换行。
元素的位置由其在HTML结构中的位置决定，不会受到其他元素的定位方式（如position属性）的影响。

脱离文档流

当元素使用某些CSS属性（如position: absolute、position: fixed、float等）时，它会脱离正常文档流。这意味着：

元素不再占据原来的位置：
- 在文档流中，其他元素会忽略脱离文档流的元素，就好像它不存在一样。例如，如果一个元素使用了position: absolute，那么它原来的位置会被其他元素占据。
元素的位置由其他规则决定：
- 脱离文档流的元素会根据其定位属性（如position）或浮动属性（如float）来确定位置，而不是按照正常文档流的顺序排列。

z-index

z-index 是一个CSS属性，用于控制元素在垂直方向（即Z轴）上的堆叠顺序。它决定了当多个元素重叠时，哪个元素会显示在最上面，哪个会显示在下面。

数字越大，元素的堆叠顺序越高，越会显示在上面。
数字越小，元素的堆叠顺序越低，越会显示在下面。
如果两个元素的 z-index 相同，那么它们的堆叠顺序将由它们在HTML文档中的顺序决定。

背景

背景颜色

<div style="background-color: #f0f0f0;">
  这个div有灰色背景
</div>

背景图片

<div style="background-image: url('image.jpg');">
  这个div有背景图片
</div>

背景重复控制

background-repeat: no-repeat; /* 不重复 */
background-repeat: repeat-x; /* 水平重复 */
background-repeat: repeat-y; /* 垂直重复 */

背景位置

background-position: center; /* 居中 */
background-position: 20px 50px; /* 水平20px 垂直50px */

背景大小

background-size: cover; /* 覆盖整个元素 */
background-size: contain; /* 完整显示图片 */
background-size: 100px 200px; /* 指定宽高 */

背景固定

background-attachment: fixed; /* 背景固定不滚动 */
background-attachment: scroll; /* 默认，背景随内容滚动 */

渐变

background: linear-gradient(to right, #ff0000, #0000ff);
background: radial-gradient(circle, #ff0000, #0000ff);

多背景图

background: 
  url('image1.png') top left no-repeat,
  url('image2.png') bottom right no-repeat,
  linear-gradient(to bottom, #fff, #000);

.bg {
    width: 300px;height: 200px;
    background-image: url(img/caodi.png), url(img/taiyang.png), url(img/tiankong.png);
    background-repeat: no-repeat;
    background-position: bottom, right top, bottom;
}

背景简写

background: #ffffff url('image.png') no-repeat fixed center;

background-clip背景裁剪

background-clip 是 CSS 中的一个属性，用于控制背景（包括颜色和图片）的裁剪区域。它决定了背景绘制的范围，可以是元素的边框、内容区域或者填充区域等。

border-box：背景会延伸到边框的外边缘，包括边框和内边距区域。这是默认值。
padding-box：背景会延伸到内边距的外边缘，不包括边框区域。
content-box：背景只绘制在内容区域，不包括内边距和边框。
text：背景会被裁剪为文字的形状，通常用于创建文字背景效果。

边框

边框粗细

可以设置为具体的像素值（如1px）、点数（如1pt）、em单位（如0.5em）等。

也可以分别设置上、右、下、左边框的宽度，比如：

border-width: 1px 2px 3px 4px; /* 上边框1px，右边框2px，下边框3px，左边框4px */

边框颜色（border-color）

可以使用颜色名称（如red）、十六进制颜色代码（如#FF0000）、RGB值（如rgb(255, 0, 0)）或RGBA值（支持透明度）。

也可以分别设置上、右、下、左边框的颜色，比如：

border-color: red green blue yellow; /* 上边框红色，右边框绿色，下边框蓝色，左边框黄色 */

边框样式（border-style）

常见的边框样式有：
- none：无边框。
- solid：实线边框。
- dashed：虚线边框。
- dotted：点状边框。
- double：双线边框。
- groove：3D凹槽边框。
- ridge：3D凸槽边框。
- inset：3D内嵌边框。
- outset：3D外嵌边框。

可以分别设置上、右、下、左边框的样式，比如：

border-style: solid dashed dotted double; /* 上边框实线，右边框虚线，下边框点状，左边框双线 */

边框圆角（border-radius）

可以设置为具体的像素值（如5px）、百分比（如50%）等。

可以分别设置四个角的圆角，比如：

border-radius: 10px 20px 30px 40px; /* 左上角10px，右上角20px，右下角30px，左下角40px */

边框的简写属性（border）

border: 2px solid red; /* 设置边框为2像素宽的实线红色边框 */

单独设置边框的各个部分

可以分别设置上边框（border-top）、右边框（border-right）、下边框（border-bottom）和左边框（border-left）。
```
border-top: 1px solid blue;
border-right: 2px dashed green;
border-bottom: 3px dotted red;
border-left: 4px double yellow;
```

阴影

CSS提供了两种主要的阴影设置：box-shadow（用于元素的阴影）和**text-shadow**（用于文本的阴影）。

`box-shadow`（元素阴影）

box-shadow 属性用于为HTML元素添加阴影效果。它可以设置阴影的位置、模糊程度、颜色等。

box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩展半径] [颜色] [inset];

参数说明

水平偏移量：阴影在水平方向上的偏移量。正值表示向右偏移，负值表示向左偏移。
垂直偏移量：阴影在垂直方向上的偏移量。正值表示向下偏移，负值表示向上偏移。
模糊半径：阴影的模糊程度。值越大，阴影越模糊。如果设置为0，则阴影不会模糊。
扩展半径：（可选）阴影的扩展范围。正值表示阴影向外扩展，负值表示阴影向内收缩。
颜色：阴影的颜色。可以使用颜色名称（如red）、十六进制颜色代码（如#FF0000）、RGB值（如rgb(255, 0, 0)）或RGBA值（支持透明度）。
内阴影：inset关键字，可以创建内阴影效果。

/* 基本外部阴影 */
.shadow {
  box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.3);
}

/* 内阴影 */
.inset-shadow {
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

/* 多重阴影 */
.multi-shadow {
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.1),
    0 4px 8px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.1);
}

/* 彩色阴影 */
.color-shadow {
  box-shadow: 5px 5px 15px #ff00ff;
}

`text-shadow`（文本阴影）

text-shadow 属性用于为文本添加阴影效果。它的语法和box-shadow类似，但不支持扩展半径。

text-shadow: [水平偏移] [垂直偏移] [模糊半径] [颜色];

/* 基本文字阴影 */
.text {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* 多重文字阴影 */
.fancy-text {
  text-shadow: 
    1px 1px 1px #000,
    0 0 10px #fff,
    0 0 20px #f0f;
}

/* 浮雕效果 */
.emboss {
  color: #ccc;
  text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333;
}

表格

在HTML中，<table>元素用于创建表格，用于显示数据或组织内容。表格由行（<tr>）、单元格（<td>或<th>）组成。

基本结构

<table>：表格容器定义表格的开始和结束。
<tr>：定义表格的行（Table Row）。
<th>：定义表格的标题单元格（Table Header），通常用于表头。
<td>：定义表格的普通单元格（Table Data）。
<thead>：定义表格的头部区域。
<tbody>：定义表格的主体区域。
<tfoot>：定义表格的脚注区域。

常用属性

<table>属性

border：设置表格边框的宽度（单位为像素）。例如：border="1"。
width：设置表格的宽度，可以是像素值（如width="500"）或百分比（如width="100%"）。
height：设置表格的高度。
bgcolor:设置单元格背景色。
bordercolor：设置边框色。
cellpadding：设置单元格内容与边框之间的间距。
cellspacing：设置单元格之间的间距。
align：设置表格的水平对齐方式（left、center、right）。
valign：设置表格内容的垂直对齐方式（top、middle、bottom）。
contenteditable：设置表格可编辑。

<td>和<th>属性

colspan：横向合并单元格，设置单元格跨越的列数。例如：colspan="2"。
rowspan：纵向合并单元格，设置单元格跨越的行数。例如：rowspan="2"。
align：设置单元格内容的水平对齐方式。
valign：设置单元格内容的垂直对齐方式。

<table border="1" width="500" cellspacing="0" cellpadding="10">
    <tr>
        <th colspan="2">Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td rowspan="2">Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
    </tr>
    <tr>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
    </tr>
</table>

CSS样式

虽然HTML表格支持一些属性，但推荐使用CSS来控制表格的样式，以实现更好的灵活性和可维护性。

table {
    border-collapse: collapse; /* 合并边框 */
    width: 100%; /* 设置表格宽度 */
    border: 1px solid #ccc; /* 设置表格边框 */
}

th, td {
    border: 1px solid #ccc; /* 设置单元格边框 */
    padding: 10px; /* 设置单元格内边距 */
    text-align: left; /* 设置单元格内容对齐方式 */
}

th {
    background-color: #f2f2f2; /* 设置表头背景颜色 */
}

带斑马纹的表格

<table>
  <tr> <th>Header 1</th><th>Header 2</th><th>Header 3</th> </tr>
  <tr> <td>Row 1, Cell 1</td><td>Row 1, Cell 2</td><td>Row 1, Cell 3</td> </tr>
  <tr> <td>Row 2, Cell 1</td><td>Row 2, Cell 2</td><td>Row 2, Cell 3</td> </tr>
  <tr> <td>Row 2, Cell 1</td><td>Row 2, Cell 2</td><td>Row 2, Cell 3</td> </tr>
</table>

  table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ccc;
  }

  th, td {
    border: 1px solid #333;
    padding: 10px;
    text-align: left;
  }

  th {
    background-color: red;
  }

  tr:nth-child(even) {
    background-color: #c6c3c3;
  }

  tr:nth-child(odd) {
    background-color: #fff;
  }

`<thead>`、`<tbody>`和`<tfoot>`

这些标签用于逻辑上划分表格的头部、主体和脚注部分，有助于提高表格的可访问性和语义化。

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Footer Row</td>
        </tr>
    </tfoot>
</table>

响应式表格

在移动设备上，表格可能会显得过于拥挤。可以通过CSS实现响应式表格，例如：

@media (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }

    th, td {
        text-align: right;
    }

    td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
}

在HTML中，需要为<td>添加data-label属性：

<td data-label="Header 1">Row 1, Cell 1</td>

案例

<table border="3" cellspacing="0" width="500px" height="200px" bgcolor="aqua" bordercolor="red">
    <caption>小表格</caption>
    <tr align="center"><td>1</td><td>2</td></tr>
    <tr align="center"><td>3</td><td>4</td></tr>
    <tr align="center"><td>5</td><td>6</td></tr>
</table>

<table border="2" cellspacing="0" width="400px" height="200px" bordercolor="yellow">
    <caption>学习成绩表</caption>
    <col span="2" style="background-color: blueviolet;" />
    <tr align="center"><td colspan="2">1</td></tr>
    <tr align="center"><td>3</td><td rowspan="2">4</td></tr>
    <tr align="center"><td>5</td></tr>
</table>

<table border="1" cellspacing="0 " width="500px" height="200px">
    <caption>学习成绩表</caption>
    <tr align="center"><td colspan="2">录入时间2019年9月9号</td></tr>
    <tr align="center"><td>名字</td><td>成绩</td></tr>
    <tr align="center"><td>小红</td><td>100</td></tr>
    <tr align="center"><td>小明</td><td>98</td></tr>
    <tr align="center"><td colspan="2">总人数：2人</td></tr>
</table>

其他写法

<style>
    table,
    tr,
    td {
        border: 1px solid #333;
    }

    table {
        border-collapse: collapse;
        background-color: aqua;
        width: 500px;
        height: 200px;
    }
</style>

<body>
    <table>
        <caption>小表格</caption>
        <tr align="center">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>4</td>
        </tr>
        <tr align="center">
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
</body>

表格的动态内容

如果表格的内容是动态生成的（例如从数据库中读取），可以使用JavaScript来操作表格。

  <body>
    <table>
      <thead>
        <tr class="mer">
          <th scope="col">Name</th>
          <th scope="col">Age</th>
          <th scope="col">City</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="Name">Alice</td>
          <td data-label="Age">25</td>
          <td data-label="City">New York</td>
        </tr>
        <tr>
          <td data-label="Name">Bob</td>
          <td data-label="Age">30</td>
          <td data-label="City">Los Angeles</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">Footer Row</td>
        </tr>
      </tfoot>
    </table>

    <script>
      const table = document.querySelector('table tbody')
      const data = [
        { name: 'Charlie', age: 35, city: 'Chicago' },
        { name: 'Diana', age: 28, city: 'Houston' }
      ]

      data.forEach(item => {
        const row = document.createElement('tr')
        row.innerHTML = `
                <td data-label="Name">${item.name}</td>
                <td data-label="Age">${item.age}</td>
                <td data-label="City">${item.city}</td>
            `
        table.appendChild(row)
      })
    </script>

      table {
        border-collapse: collapse;
        width: 100%;
        border: 1px solid #ccc;
      }

      th, td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: left;
      }

      th {
        background-color: #f2f2f2;
      }

      @media (max-width: 600px) {
        .mer {
          display: none;
        }
        tfoot > tr > td {
          text-align: center;
        }
        table, thead, tbody, tfoot, th, td, tr {
          display: block;
        }

        th, td {
          text-align: right;
        }

        td:before {
          content: attr(data-label);
          float: left;
          font-weight: bold;
        }
      }

左标题

    <table>
      <!-- 表头 -->
      <thead>
        <tr>
          <th></th>
          <!-- 空单元格，用于对齐 -->
          <th>列标题1</th>
          <th>列标题2</th>
          <th>列标题3</th>
        </tr>
      </thead>
      <!-- 表体 -->
        
      <tbody>
        <tr>
          <th class="left-title">左边标题1</th>
          <td>数据1</td>
          <td>数据2</td>
          <td>数据3</td>
        </tr>
        <tr>
          <th class="left-title">左边标题2</th>
          <td>数据4</td>
          <td>数据5</td>
          <td>数据6</td>
        </tr>
        <tr>
          <th class="left-title">左边标题3</th>
          <td>数据7</td>
          <td>数据8</td>
          <td>数据9</td>
        </tr>
      </tbody>
    </table>

  table {
    width: 50%;
    border-collapse: collapse;
    margin: 20px 0;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
  }
  th.left-title {
    text-align: left;
  }