HTML标签简明通俗教程

战场解析
2025-12-13 17:39:07
9644

HTML标签简明通俗教程

基本知识

HTML：是超文本标记语言（Hyper Text Markup Language）的缩写，它是用于创建网页的标准标记语言。标签是构成HTML文档的基本单位。

【HTML中的标签（tag）和元素（element）

“标签”（tag）和“元素”（element）在一些语境中会被混淆或交替使用，但它们确实有不同的含义。标签是元素的一部分，但元素不仅仅是标签。

标签是构成HTML文档的基本单位，它们用尖括号包围。一个标签可以是开标签、闭标签或自闭合标签。

开标签：如

，表示开始一个段落（paragraph）。

闭标签：如

，表示段落的结束。

自闭合标签：如
或，表示一个独立的元素，没有结束标签。

元素包括开始标签、结束标签（如果有的话）、属性、内容和其他元素。

例如：

点击这里

在这个例子中：

和是标签

整个点击这里是一个元素，包括了开始标签、属性（href）、内容（"点击这里"）和结束标签。

可以总结为：

标签是构成元素的标记。标签是元素的一部分，但元素不仅仅是标签。】

HTML标签的类型

1.单标签是一个标签即可完整描述某个功能的标签

格式：

<标签名/>

/可以省略

常见的单标签包括
、、

等。在 HTML5 中，单标签的结束斜杠（/）可以省略，例如
、等都是有效的。

2.双标签

双标签即可以和结束的标签组成的标签，基本格式

<标签名>内容

<标签名>为开始标签，为结束标签

例如：

内容

、

段落

等。

HTML的属性(attribute)

属性通常由名称和值组成，格式为：

attribute_name="value"

属性通常是以键值对的形式出现在元素（element）的开始标签内。属性值通常用引号（单引号或双引号）括起来，特别是当值包含空格时。有些属性不需要值（如required、disabled），被称为“布尔属性”，这些属性不需要值。当在元素上存在这些属性时，它们的值默认为 true；如果该属性不存在，则视为 false。

HTML特定元素属性：不同的 HTML 元素有特定的属性，这样的属性为不同的元素提供了独特的功能行为。如：

的src：指定图像的 URL（必需的），altalt：提供图像的替代文本描述（为了可访问性，强烈推荐）。例：描述性文本

的href：指定链接的目标URL（必需的），target：指定在何处打开链接（如 "_blank" 在新标签页打开）。例：访问示例网站

的type: 指定输入字段的类型（如 "text", "password", "checkbox", "radio" 等），name: 定义输入字段的名称，placeholder: 提供输入字段的提示文本，required: 指定输入字段为必填。例：

等

HTML通用属性，也称为全局属性：

id：为元素提供唯一的标识符，可用于在 CSS 和 JavaScript 中定位元素。例：

内容

class：为元素指定一个或多个类名，用于样式化和脚本操作。例：

警告信息

style：用于直接为元素应用内联 CSS 样式。例：

标题

title：为元素提供提示信息，当鼠标悬停在元素上时显示。例：链接

HTML标签书写规则

1.HTML标签不区分大小写，推荐使用小写。

2.允许属性值不使用引号包起来：虽然在大多数情况下可以不使用引号，但最好还是使用引号，尤其是当值包含空格或特殊字符时。

3. 注释标签

常用标签及示例：

网页名字

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

段落A

段落B

本句后换行显示
本句后换行显示

粗体：你好

斜体：你好

在“||”内显示2个空格| |

大于号：>

小于号：<

小花图片

运行效果如下：

title和h1的区别

title 是文档标题，显示在浏览器标签上；h1 是内容标题，显示在页面内容中。

Title：

定义整个文档的标题

位于标签中

显示在浏览器标签页上

网页标题

h1：

定义页面内容的主标题(Heading)

位于标签中

直接显示在页面内容中

一个页面最好只有一个h1，用于表示最重要的标题

h1、h2 … h6 代表了六个不同级别的标题(Heading)元素，具有不同的级别，每个级别表示不同的重要程度或层次结构。

图像标签说明

HTML图像标签格式

描述性文本

其中：

src（必需）：指定图像的路径（图像地址）。这个路径可以是相对路径（相对于当前HTML页面的位置），也可以是绝对路径（完整的URL）。

alt（非必需）：为图像提供替代文本。当图像无法显示时（如网络问题、图像文件损坏、用户使用了屏幕阅读器等），浏览器将显示这个替代文本。

还有

width和height（非必需）

width设置图像的宽度，height设置图像的高度，可以用像素（px）或百分比（%）为单位。

class 和 id（非必需）

用于应用 CSS 样式或通过 JavaScript 进行操作。

等

一句的意义：

主要作用是控制页面在不同设备上的显示方式。主要用于控制视口（viewport）的宽度和初始缩放级别，确保网页在不同设备上（包括移动设备）都能良好展示，提高用户体验。

1)name="viewport"

它指示该标签与视口（viewport）有关。视口（viewport）是用户在设备上查看网页内容的可见区域。

2)content 属性包含了几个重要的参数：

a) width=device-width

将页面宽度设置为适应不同设备的的屏幕宽度。确保页面不会出现水平滚动条。

b) initial-scale=1.0

设置页面的初始缩放级别1.0 表示不进行缩放，意味着不会放大或缩小网页，而是按设备的真实宽度显示。

超链接标签格式

链接显示的文本或图像

其中：

href属性（必需）：用于指定链接的目标地址，可以是另一个网页的URL、网站内部的页面地址、文件下载地址、电子邮件地址（mailto:），或者是一个锚点（用于页面内的跳转）。例如：发送邮件给某人

标签也可以用作页面内的锚点，允许用户点击链接后跳转到同一页面的特定部分。这通过给目标元素（通常是

、
、
等）设置一个 id 属性，并在  标签的 href 属性中使用 # 后跟该 id 值来实现。例如：

第一节

跳转到第一节

target属性（非必需）：用于指定链接的打开方式。常用的值包括_self（在当前窗口打开，默认值）、_blank（在新窗口或新标签页中打开）、_parent（在父框架中打开）、_top（在整个浏览器窗口中打开，忽略任何框架）。

标签也可以用于创建指向电子邮件地址的链接。

超链接标签示例：

示例

超链接

点击下面的链接访问百度：

访问百度一下

页面内链接示

跳转到第二部分

这是第一部分的内容...

第一部分的1...

第一部分的2...

第一部分的3...

第一部分的4...

第一部分的5...

第一部分的6...

第一部分的7...

第一部分的8...

第一部分的9...

第一部分的10...

第一部分的11...

第一部分的12...

第一部分的13...

第一部分的14...

第一部分的15...

第一部分的16...

第一部分的17...

第一部分的18...

第一部分的19...

第一部分的20...

第一部分的21...

第一部分的22...

第二部分

这是第二部分的内容...

src 和 href 的区别

src 是将资源下载并嵌入到当前文档中；href 是建立文档与外部资源之间的关系链接。

src（Source）：

用于替换当前元素，表示资源的来源

常用于标签：、

href（Hypertext Reference）：

表示超文本引用，建立当前元素与外部资源的关系

常用于标签：、

并行下载资源，不会阻塞页面加载

链接文本

输入和文本域标签

在 HTML 中，输入（标签是）和文本域（标签是）是表单的基本元素，用于接受用户输入数据。</p> <p><input> 标签用于创建各种类型的输入字段（也称为输入控件），如文本框、密码框、单选按钮、复选框等。输入（Input）标签基本格式：</p> <p><input type="type_of_input" name="name_of_input" value="initial_value" placeholder="placeholder_text" /></p> <p>其中</p> <p>type属性定义输入字段（Input Fields）类型，常见值：</p> <p>text：文本输入框</p> <p>password：密码输入框</p> <p>email：电子邮件地址输入框</p> <p>number：数字输入框</p> <p>radio：单选按钮</p> <p>checkbox：复选框</p> <p>submit：提交按钮</p> <p>button：普通按钮</p> <p>file：文件上传</p> <p>date：日期选择器</p> <p>submit：提交按钮</p> <p>reset：重置按钮</p> <p>相关属性</p> <p>name属性定义输入字段的名称，，每个输入字段都会通过其 name 属性来识别。</p> <p>value 属性通常定义输入字段的初始值。</p> <p>placeholde属性提供了一个灰色、弱化的提示文本，它在用户开始输入之前显示在输入字段中。当用户开始输入时，提示文本会消失。这对于提示用户输入格式或内容非常有用。</p> <p><textarea> 标签用于创建多行的文本输入框，适合用于较长的文本输入，这些字符会按用户输入的方式（包括换行）进行显示。<textarea> 标签的基本格式：</p> <p><textarea</p> <p>name="name_of_textarea" </p> <p>rows="number_of_rows" </p> <p>cols="number_of_columns" </p> <p>placeholder="placeholder_text" </p> <p>// 其他可能的属性...</p> <p>> 初始文本内容（可选）

输入和文本域标签示例：

Input Examples

Input&Textarea Examples

顺便说明一句的意义：

1)name="viewport"

它指示该标签与视口（viewport）有关。视口（viewport）是用户在设备上查看网页内容的可见区域。

2)content 属性包含了几个重要的参数：

a) width=device-width

将页面宽度设置为适应不同设备的的屏幕宽度。确保页面不会出现水平滚动条。

b) initial-scale=1.0

设置页面的初始缩放级别1.0 表示不进行缩放，意味着不会放大或缩小网页，而是按设备的真实宽度显示。

下拉列表

标签内部包含一系列的

基本结构

其中：

属性

name：定义下拉列表的名称，用于提交表单时的参数名称。

id：定义下拉列表的唯一标识符，常用于 JavaScript 和 CSS 选择器。

multiple：允许用户选择多个选项（默认为单选模式）。

size：定义下拉列表的可见选项数（如果 multiple 属性存在）。

value：指定选项的值，提交表单时传递。

selected：指定默认选中的选项。

disabled：使选项不可选。

下拉列表示例：

示例

下拉框

自定义按钮

使用

其中

type 属性指定按钮的类型。默认值是 submit。

type="button"：普通按钮，点击时不会提交表单。

type="submit"：提交按钮，点击时会提交表单数据。

type="reset"：重置按钮，点击时会重置表单中的所有控件到初始值。

name 属性定义按钮的名称（用于表单提交时），可选。

disabled 属性是一个布尔属性，当存在时，按钮将被禁用，用户无法与之交互。

onclick：绑定 JavaScript 事件处理程序，在按钮被点击时执行。

使用

b.带有类型的按钮:

c.带有图标的按钮:

d.使用CSS样式的按钮:

e.带有onclick事件的按钮:

使用input标签创建按钮:

下面提供一个完整的HTML页面示例，展示如何使用

使用 <input> 标签

带图标的按钮

列表

HTML中的列表标签用于在网页上创建有序列表、无序列表以及定义列表。这些列表标签为内容的组织和展示提供了灵活的方式。

1. 无序列表 (

无序列表使用

（List Item）标签包裹。无序列表中的每个列表项前面通常会显示一个项目符号（通常是圆点），但这个样式可以通过CSS进行自定义。

示例代码：

列表项 1

列表项 2

列表项 3

其中，属性：

type：指定项目符号的样式，常见值包括：

disc：实心圆点（默认）

circle：空心圆点

square：方块

2. 有序列表 (

有序列表使用

标签包裹列表项。与无序列表不同，有序列表中的每个列表项前面会显示一个编号（默认是阿拉伯数字），但编号的样式和类型（如罗马数字、字母等）也可以通过CSS进行自定义。

示例代码：

列表项 1

列表项 2

列表项 3

其中属性：

type：指定列表项的编号样式。可选值包括：

1：阿拉伯数字（默认）

A：大写字母

a：小写字母

I：大写罗马数字

i：小写罗马数字

start：指定列表项的起始编号（默认为 1）。

3. 定义列表 (

)

定义列表使用

（Definition Term）标签用于标记术语或名称，而

（Definition Description）标签则紧跟在

之后，用于提供该术语的定义或描述。 示例代码： HTML HyperText Markup Language，超文本标记语言，用于构建网页。 CSS Cascading Style Sheets，层叠样式表，用于设计网页的外观。 JavaScript 一种编程语言，用于网页的交互和动态效果。 在定义列表中，

和

元素不必成对出现，但它们通常用于定义和描述成对的关系。

一个简单而完整的列表示例：

示例

列表示例

JavaScript

Python

JavaScript

Python

学科: C++; JavaScript; Python

表格

HTML的表格使用

标签来创建，它允许你以行和列的形式组织数据。表格在网页上非常有用，尤其是当你需要展示大量数据，如统计信息、商品列表、财务数据、成绩单等时。

基本表格结构

标题1	标题2	标题3
数据1	数据2	数据3

在上面的例子中，border="1"属性被添加到

标签中，以便能够清楚地看到表格的边框。然而，在现代网页设计中，推荐使用CSS来设置表格的样式，因为这样可以提供更灵活和强大的样式控制标签：

：定义表格的行。

：包含表格的表头内容。虽然这不是必需的，但它有助于在视觉上区分表头和表格主体，并且对于屏幕阅读器等辅助技术来说也是有益的。

：包含表格的主体内容。同样，这不是必需的，但有助于组织和样式的应用。

：包含表格的页脚内容。它通常用于包含表格的总结或脚注信息。

表单

HTML中的表单（Forms）是一种允许用户输入数据的结构，这些数据通常会被发送到服务器进行处理。表单的基本结构由
标签定义，表单可以包含多种输入元素，如文本框、密码框、单选按钮、复选框、下拉选择菜单、提交按钮等，用于收集用户的信息。

表单的基本结构由标签定义，内部可以包含各种输入控件（也称为输入字段）、按钮和标签。包含：输入标签()、多行文本框标签()、下拉列表标签(<select> 和 <option>)、按钮标签(<button>)。</p> <p>表单数据处理</p> <p>表单（Forms）是用户与网站交互的重要方式之一，允许用户输入数据并提交给服务器处理。处理表单数据时，HTTP协议提供了两种主要的方法：GET和POST。</p> <p>GET 方法：将数据附加到 URL 中，适合获取数据，不适合处理大量数据或敏感信息。</p> <p>GET方法的数据是附加在URL上的，当使用GET方法提交表单时，表单中的数据会被附加到URL的末尾，数据之间用&符号分隔，每个数据项由键=值的形式组成。例如，如果你有一个包含用户名（username）和密码（password）的表单，并且用户输入了user作为用户名和pass作为密码，那么提交表单后，URL可能会变成类似http://example.com/login?username=user&password=pass的形式。不适合处理大量数据或者敏感信息（如密码），因为 URL 有长度限制，而且在浏览器历史记录或者服务器日志中可能会暴露这些信息。</p> <p>POST 方法：将数据包含在请求体中，适合提交数据和处理敏感信息。</p> <p>POST方法将表单数据包含在HTTP请求的体（body）中发送给服务器，而不是附加在URL上。这意味着数据的发送对用户来说是不可见的，也不会在URL中留下痕迹。因此它非常适合用于提交表单数据，特别是包含敏感信息（如密码、个人信息等）的表单。此外，POST方法也适用于提交大量数据，因为请求体的大小限制通常比URL的长度限制要大得多。</p> <p>HTML5的表单(form)介绍 https://blog.csdn.net/cnds123/article/details/120653578</p> <p>行内元素与块元素</p> <p>在HTML（HyperText Markup Language）中，元素根据其显示方式和在文档流中的行为被分类为行内元素（Inline Elements）和块元素（Block Elements）。</p> <p>行内元素（Inline Elements）</p> <p>定义：行内元素则是与文本在同一行内显示的元素，通常不会独占一行。</p> <p>特点：</p> <p>只占据其内容的宽度。</p> <p>不能设置宽度和高度。</p> <p>边距会影响到其周围的文本行。</p> <p>常见的行内元素：</p> <p><span></p> <p><a></p> <p><img></p> <p><strong></p> <p><em></p> <p>块级元素（Block Elements）</p> <p>定义：块级元素是指可以独占一行的元素。它们通常在页面中形成一个“块”，并且在其前后会自动换行。</p> <p>特点：</p> <p>占据整个宽度。</p> <p>可以设置宽度、高度、边距和内填充等样式。</p> <p>常见的块级元素：</p> <p><div></p> <p><p></p> <p><h1> 到 <h6></p> <p><ol>、<ul>（有序和无序列表）</p> <p><table></p> <p>行内元素与块元素示例：</p> <p><!DOCTYPE html></p> <p><html lang="en"></p> <p><head></p> <p><meta charset="UTF-8"></p> <p><meta name="viewport" content="width=device-width, initial-scale=1.0"></p> <p><title>示例</title></p> <p></head></p> <p><body></p> <p><p>这是一个包含<span style="color: red; font-size: 20px;">红色行内元素</span>的文本示例。</p></p> <p><div style="background-color: yellow;"></p> <p><h3>这是一个div块级元素的标题</h3></p> <p><p>这是一个一个div块级元素的段落。</p></p> <p></div></p> <p></body></p> <p></html></p> <p>设置背景图片</p> <p>1. HTML中的<body>标签内可直接设置背景图片。 <body background="图片地址"></p> <p>2. CSS 设置背景图片 <style> body{ background: url("图片地址"); } </style></p> <p>CSS 与背景图片相关的属性说明： 1.background-image 描述: 用于设置背景图像。取值: url('image.jpg'): 指定图像的 URL。 none: 不使用背景图像（默认值）。 2. background-position 描述: 设置背景图像的位置。取值: 长度单位（如 px, %, em）：例如 10px 20px。关键字（如 top, bottom, left, right, center）。可以组合，如 center center 表示水平和垂直都居中。 3. background-size 描述: 设置背景图像的大小。取值: auto: 默认值，保持图像的原始大小。 cover: 缩放图像以覆盖整个背景区域（可能会裁剪图像）。 contain: 缩放图像以包含在背景区域内（可能会留白）。指定尺寸，如 100px 50px 或 50% 100%。 4. background-repeat 描述: 设置背景图像是否重复。取值: repeat: 默认值，图像水平和垂直都重复。 repeat-x: 水平重复。 repeat-y: 垂直重复。 no-repeat: 不重复。 5. background-attachment 描述: 设置背景图像的滚动行为。取值: scroll: 默认值，背景图像随着页面滚动。 fixed: 背景图像固定，随视口滚动，不随内容滚动。 local: 背景图像在元素的内容滚动时保持相对固定。 6. background-origin 描述: 设置背景图像的原点位置。取值: border-box: 从元素的边框开始，背景图像从边框的内部开始绘制。 padding-box: 从元素的填充区域开始。 content-box: 从元素的内容区域开始（即，不包括边框和填充）。 7. background-clip 描述: 决定背景的绘制区域。取值: border-box: 背景绘制到边框框内。 padding-box: 背景绘制到填充框内。 content-box: 背景绘制到内容框内。 8. background-color 描述: 设置元素的背景颜色。取值: 任何有效的颜色值，如命名颜色（red）、十六进制颜色（#ff0000）、RGB（rgb(255, 0, 0)）、RGBA（rgba(255, 0, 0, 0.5)）、HSL（hsl(0, 100%, 50%)）。 transparent: 透明背景。这些属性简写background，属性值之间用空格分隔注意事项： a.如果没有指定某个值，将使用该属性的默认值。 b.颜色应该放在最后，否则可能会覆盖其他背景图片。 c.background-size 必须紧跟在 background-position 后面，用斜杠 / 分隔。</p> <p>例如：</p> <p>body { background-image: url('your-image.jpg'); /* 设置背景图像 */ background-repeat: no-repeat; /* 不重复背景图像 */ background-position: center center; /* 背景图像居中对齐 */ background-size: cover; /* 背景图像覆盖整个区域 */ background-attachment: fixed; /* 背景图像固定不随内容滚动 */ } 用简写形式可写为： body { background: url('your-image.jpg') no-repeat center center / cover fixed } 在上述例子中： url('your-image.jpg'): 这指定了要使用的背景图像的路径。将 'your-image.jpg' 替换为实际的图像URL。 no-repeat: 这个属性设置背景图像不重复。如果没有这个设定，背景图像可能会在 <body> 元素中多次重复展示。 center center: 表示背景图像在水平方向和垂直方向上都居中显示。即图像的中心点与 <body> 元素的中心对齐。 / cover: 这是 background-size 的简写形式，表示背景图像将被缩放以覆盖整个背景区域。可能会裁剪图像，以确保没有空白区域出现。这意味着图像会保持其纵横比并填满整个空间。 fixed: 这是 background-attachment 属性，表示背景图像固定在视口中，滚动页面时图像不会移动。背景图像的位置始终相对于浏览器的窗口固定。</p> <p>下面给出设置背景图片简单而完整的示例代码：</p> <p><!DOCTYPE html></p> <p><html lang="zh"></p> <p><head></p> <p><meta charset="UTF-8"></p> <p><meta name="viewport" content="width=device-width, initial-scale=1.0"></p> <p><title>背景示例</title></p> <p><style></p> <p>body {</p> <p>background: url("image3.jpg") no-repeat center center / cover fixed;</p> <p>}</p> <p></style></p> <p></head></p> <p><body></p> <p></body></p> <p></html></p> <p>HTML页面结构框架标签</p> <p>HTML页面结构框架标签指的是用于定义网页整体结构的HTML元素。这些标签为网页提供了基本的骨架，帮助浏览器理解页面的不同部分。主要的结构标签包括：</p> <p><!DOCTYPE html>: 声明文档类型，告诉浏览器这是一个HTML5文档。</p> <p><html>: 整个HTML文档的根元素，包含了整个页面的内容。</p> <p><head>: 包含文档的元数据，如标题、字符集声明、样式表链接等。</p> <p>这个标签包含了文档的元（meta）数据，如<title>、<meta>标签，这些标签描述了文档的各种属性和设置，比如字符集、文档标题、引入的CSS样式文件和JavaScript文件等，但它们并不直接显示在网页上。</p> <p><title>: 定义文档的标题，显示在浏览器的标签页上。</p> <p><meta charset="UTF-8">: 指定了文档使用的字符编码，UTF-8是广泛使用的编码。</p> <p><link rel="stylesheet" href="style.css">: 链接外部CSS文件，用于设置网页的样式。"rel"属性指定了链接的类型（在这里是样式表），"href"属性指定了CSS文件的路径。</p> <p><script src="script.js"></script>: 引入外部JavaScript文件，用于增加网页的交互性。这个标签用于引入外部JavaScript文件。"src"属性指定了JavaScript文件的路径。值得注意的是，这个标签可以放在<head>或<body>中中的末尾，放置位置会影响脚本的加载和执行时机。</p> <p><body>: 包含文档的可见内容，如文本、图像、链接等。</p> <p>还还包括布局（Layout）标签：</p> <p><header>: 通常包含介绍性的内容或导航链接。它代表了页面的头部或标题区域。<nav>: 定义导航链接的部分，常用于创建菜单、目录或搜索工具。<main>: 包含页面主要内容的区域。每个页面只能有一个<main>元素。<section>: 将文档内容分为多个逻辑部分或章节。<article>: 指定独立的、可复用的内容或与其余部分不同的内容块（如博客帖子或新闻报道）。<aside>: 定义与其余页面内容稍微独立的内容，如侧边栏。<footer>: 包含了作者信息、版权信息、联系方式或链接到网站的其它部分（如首页、隐私政策等）的底部信息。</p> <p>请注意，并不是每个HTML页面都必须包含上述所有元素，而是根据你的网页布局和需要来选择合适的标签。</p> <p>附、HTML布局（HTML Layout）简介 https://blog.csdn.net/cnds123/article/details/126901017</p> <p>OK！</p> </p> <div style="text-align: left;background:#f1f1f1;padding:20px;line-height:50px;"> <a href="/e4f47b6311a50d23/33933ce83a70f955.html">dnf选择哪个下载</a><br><a href="/e4f47b6311a50d23/1ddba64c0e998f2e.html">捷信客服电话是多少？网贷用户必备联系方式汇总</a> </div> </div> </div> </div> </div> </div> <footer> <div class="main-footer"> <div class="container"> <div class="row footrow"> <div class="col-md-3"> <div class="widget catebox"> <div class="box category clearfix"> <li class="cat-item cat-item-33"><a href="/0743dff260cbe9c6/index.html">宠物乐园</a></li> <li class="cat-item cat-item-33"><a href="/0041f1fb974a5635/index.html">战场解析</a></li> <li class="cat-item cat-item-33"><a href="/e4f47b6311a50d23/index.html">附魔工坊</a></li> </div> </div> </div> <div class="col-md-3"> <div class="widget linkbox"> <h4 class="title">友情链接</h4> <div class="box friend-links clearfix"> <li class="link-item"><script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node91.aizhantj.com:21233/tjjs/?k=gdvpk3plqch"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script></li> </div> </div> </div> </div> <div class="row"> <div class="copyright"> <span>Copyright © 2022 网游活动攻略库 - 宠物培养与战场解析 All Rights Reserved.</span></div> </div> </div> </div> </footer> <div class="menu mobile-menuicon"><i class="fa fa-bars"></i></div> <a class="to-top"><span class="topicon"><i class="fa fa-angle-up"></i></span><span class="toptext">Top</span></a> <div class="menubox"> <div class="container"> <div class="row"> <div class="col-xs-12"> <ul id="menu-menu" class="icon-list"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/0743dff260cbe9c6/index.html">宠物乐园</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/0041f1fb974a5635/index.html">战场解析</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/e4f47b6311a50d23/index.html">附魔工坊</a></li> </ul> </div> </div> </div> <a href="javascript:;" class="menu-close">×</a> </div> <script src="/static/js/jquery.totop.min.js"></script> <script src="/static/js/menu.js"></script> <script> $('.to-top').toTop({ position:false, offset:1000, }); $('.icon-search').click(function(){ $('.search-form').css('top','50%'); $('.search-form').css('marginTop','-80px'); $('.search-form').css('opacity','1'); }); $('.search-close').click(function(){ $('.search-form').css('top','0'); $('.search-form').css('opacity','0'); }); </script> <script type="text/javascript" src="/static/js/san_praise_sdk.js"></script> </body> </html>

：定义表头单元格。

：定义普通单元格。

rowspan 和 colspan：用于合并单元格。

：为表格提供标题。它应该被放置在标签内部的最前面。

一个简单而完整的表格示例：

示例

表格示例

学生信息表
姓名	年龄	专业
张三	20	计算机科学
李四	22	软件工程
王五	19	数据科学
制表：某某

例子中，colspan="3"属性被添加到页脚行的

标签中，以便该单元格能够横跨三列。这对于在表格底部添加总结信息或脚注非常有用。

与表格相关的标签还有：

网游活动攻略库 - 宠物培养与战场解析

标题