当前位置：首页 > news >正文

【网页开发教程】基本标签1——文本与列表

news 2026/7/24 18:08:36

front：【网页开发教程】网页开发初探——从零开始编写你的第一个网页

专栏：网页开发教程_ZJ_Soft的博客-CSDN博客

本章介绍几种常用的文本标签与列表标签，并给出实例

1.文本标签

文本标签用于定义和格式化网页中的文本内容，使其具有语义和结构。以下是常见的HTML文本标签及其用途：

定义结构

<h1>到<h6>：定义标题，<h1>为最高级标题，<h6>为最低级标题。

实例：

<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>

：定义段落，用于包裹段落文本。

实例：

<p>这是一个段落文本，用于展示段落标签的用法。</p>

 ：插入换行符，强制文本换行。

实例：

第一行文本<br> 第二行文本<br> 第三行文本

<hr>：插入水平分隔线，用于内容分隔。
实例：
```
上面的内容 <hr> 下面的内容
```

格式化文本

或：加粗文本，表示重要性，仅样式加粗。
实例：
```
重要内容 加粗文本
```
或：斜体文本，表示强调，仅样式斜体。
实例：
```
强调内容 斜体文本
```
：为文本添加下划线。
实例：
```
带下划线的文本
```
<s>或<del>：删除线文本，<del>表示删除的内容。
实例：
```
<s>过时价格</s> <del>已删除内容</del>
```

和：分别表示上标和下标文本。

实例：

a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup> H<sub>2</sub>O 是水的化学式

语义化文本

<code>：表示代码片段，通常以等宽字体显示。
实例：
```
使用 <code>console.log()</code> 在控制台输出信息。
```
<pre>：保留文本中的空格和换行，常用于显示代码块。
实例：
```
<pre> function hello() { console.log("Hello World!"); return true; } </pre>
```

<blockquote>和<q>：引用文本，<blockquote>用于长引用，<q>用于短引用。

实例：

<blockquote> <p>这是长引用内容，通常用于引用大段的文字。</p> </blockquote> <p>网页说：<q>这是一个短引用。</q></p>

<abbr>：表示缩写，可通过title属性提供完整解释。

实例：

<p><abbr title="HyperText Markup Language">HTML</abbr> 是网页的基础语言。</p>

：高亮显示文本，通常为黄色背景。

实例：

<p>请特别注意 <mark>这个重要信息</mark>，它会被高亮显示。</p>

<kbd>：表示键盘输入，通常用于表示用户需要按下的键。
实例：
```
按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制选中的内容。
```

<samp>：表示程序或系统的示例输出。

实例：

<p>程序运行后输出：<samp>Hello, World!</samp></p>

<var>：表示变量或数学表达式中的变量。

实例：

<p>设变量 <var>x</var> 的值为 10，则 <var>y</var> = <var>x</var> + 5。</p>

<dfn>：表示术语的定义实例，通常用于首次定义术语。
实例：
```
<dfn>HTML</dfn> 是一种用于创建网页的标准标记语言。
```
<cite>：表示作品（如书籍、文章、电影等）的标题引用。
实例：
```
我最喜欢的书是 <cite>《JavaScript高级程序设计》</cite>。
```

特殊字符

在HTML中，有一些字符不能直接键入，否则会导致错误，这时就需要转义。

以下是一些常见的需要转义的HTML特殊字符及其对应的实体编码：

字符	描述	HTML实体编码	示例
`<`	小于号（标签开始）	`<`	`<div>`显示为`<div>`
`>`	大于号（标签结束）	`>`	`>span<`显示为`>span<`
`&`	和号（实体引用开始）	`&`	`AT&T`显示为`AT&T`
`"`	双引号	`"`	`"Hello"`显示为`"Hello"`
`'`	单引号（或撇号）	`'`或`'`	`It's`显示为`It's`
	不换行空格	` `	`Hello World`显示为`Hello World`
`©`	版权符号	`©`	`© 2025`显示为`© 2025`
`®`	注册商标符号	`®`	`Microsoft®`显示为`Microsoft®`
`™`	商标符号	`™`	`Google™`显示为`Google™`
`€`	欧元符号	`€`	`100€`显示为`100€`
`£`	英镑符号	`£`	`50£`显示为`50£`
`¥`	日元/人民币符号	`¥`	`1000¥`显示为`1000¥`
`§`	章节符号	`§`	`参见§1.2`显示为`参见§1.2`
`¶`	段落符号	`¶`	`注意¶3`显示为`注意¶3`

使用注意事项：

必须转义的字符：<、>、&、"在属性值中必须转义，否则会破坏HTML结构。
推荐转义的字符：'在属性值中与需要保留空格时建议转义。
特殊符号：版权、商标等符号可以使用实体编码或直接输入Unicode字符。
代码示例：在HTML代码中显示HTML标签时，必须转义：<div>Hello</div>

2.列表标签

列表标签用于在网页中创建各种类型的列表，使内容更加结构化、易于阅读。HTML提供了三种主要的列表类型：无序列表、有序列表和定义列表。

无序列表（Unordered List）

无序列表使用<ul>标签定义，列表项使用<li>标签。列表项前通常显示为项目符号（如圆点、方块等）。

基本语法：

<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>

实例：

<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul>

显示效果：

苹果
香蕉
橙子

有序列表（Ordered List）

有序列表使用<ol>标签定义，列表项同样使用<li>标签。列表项前显示为数字、字母或罗马数字等有序标记。

基本语法：

<ol type="..."> <li>第一步</li> <li>第二步</li> <li>第三步</li> </ol>

实例：

<ol type="1"> <li>准备食材</li> <li>清洗食材</li> <li>切配食材</li> <li>烹饪食材</li> </ol>

显示效果：

准备食材
清洗食材
切配食材
烹饪食材

定义列表（Definition List）

定义列表用于展示术语及其定义，使用<dl>标签定义，包含<dt>（术语）和<dd>（定义）标签。

基本语法：

<dl> <dt>术语1</dt> <dd>术语1的定义或描述</dd> <dt>术语2</dt> <dd>术语2的定义或描述</dd> </dl>

实例：

<dl> <dt>HTML</dt> <dd>超文本标记语言，用于创建网页结构</dd> <dt>CSS</dt> <dd>层叠样式表，用于控制网页的样式和布局</dd> <dt>JavaScript</dt> <dd>脚本语言，用于实现网页的交互功能</dd> </dl>

显示效果：

HTML
超文本标记语言，用于创建网页结构
CSS
层叠样式表，用于控制网页的样式和布局
JavaScript
脚本语言，用于实现网页的交互功能

列表嵌套

列表可以相互嵌套，创建多级结构，这在展示层次化信息时非常有用。

实例：

<ul> <li>水果 <ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul> </li> <li>蔬菜 <ol> <li>胡萝卜</li> <li>西红柿</li> <li>黄瓜</li> </ol> </li> </ul>

显示效果：

水果
- 苹果
- 香蕉
- 橙子
蔬菜
1. 胡萝卜
2. 西红柿
3. 黄瓜

列表属性

列表标签支持多种属性来控制显示样式：

type属性（有序列表）：指定列表标记类型
- type="1"：数字（默认）
- type="A"：大写字母
- type="a"：小写字母
- type="I"：大写罗马数字
- type="i"：小写罗马数字
start属性（有序列表）：指定列表起始编号
reversed属性（有序列表）：倒序显示列表
style属性（无序列表）：通过CSS控制项目符号样式

实例：

<ol type="A" start="3"> <li>第三项（C）</li> <li>第四项（D）</li> <li>第五项（E）</li> </ol> <ul style="list-style-type: square;"> <li>方块项目符号</li> <li>方块项目符号</li> </ul>