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

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

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

1.文本标签

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

定义结构

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

  实例：

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

• <p>：定义段落，用于包裹段落文本。

  实例：

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

• <br>：插入换行符，强制文本换行。

  实例：

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

• <hr>：插入水平分隔线，用于内容分隔。

  实例：

  <p>上面的内容</p> <hr> <p>下面的内容</p>

格式化文本

• <strong>或<b>：加粗文本，<strong>表示重要性，<b>仅样式加粗。

  实例：

  <strong>重要内容</strong> <b>加粗文本</b>

• <em>或<i>：斜体文本，<em>表示强调，<i>仅样式斜体。

  实例：

  <em>强调内容</em> <i>斜体文本</i>

• <u>：为文本添加下划线。

  实例：

  <u>带下划线的文本</u>

• <s>或<del>：删除线文本，<del>表示删除的内容。

  实例：

  <s>过时价格</s> <del>已删除内容</del>

• <sup>和<sub>：分别表示上标和下标文本。

  实例：

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

语义化文本

• <code>：表示代码片段，通常以等宽字体显示。

  实例：

  <p>使用 <code>console.log()</code> 在控制台输出信息。</p>

• <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>

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

  实例：

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

• <kbd>：表示键盘输入，通常用于表示用户需要按下的键。

  实例：

  <p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制选中的内容。</p>

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

  实例：

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

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

  实例：

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

• <dfn>：表示术语的定义实例，通常用于首次定义术语。

  实例：

  <p><dfn>HTML</dfn> 是一种用于创建网页的标准标记语言。</p>

• <cite>：表示作品（如书籍、文章、电影等）的标题引用。

  实例：

  <p>我最喜欢的书是 <cite>《JavaScript高级程序设计》</cite>。</p>

特殊字符

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

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

使用注意事项：

• 必须转义的字符：<、>、&、"在属性值中必须转义，否则会破坏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>

显示效果：

1. 准备食材
2. 清洗食材
3. 切配食材
4. 烹饪食材

定义列表（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>

使用注意事项

• 语义化使用：根据内容选择合适的列表类型，无序列表用于无顺序的项目，有序列表用于有顺序的步骤，定义列表用于术语定义。
• 避免过度嵌套：嵌套层级不宜过深，一般建议不超过3层，否则会影响可读性。
• CSS样式控制：可以通过CSS自定义列表样式，如项目符号、编号样式、缩进等。
• 无障碍访问：确保屏幕阅读器能正确识别列表结构，不要滥用列表进行布局。
• 列表项内容：<li>标签内可以包含其他HTML元素，如段落、图片、链接等。

总结：

文本标签与列表标签是HTML中重要的元素，合理使用标签可以使网页内容更加清晰、有条理，提升用户体验和可访问性。

温馨提示：学习网页开发最好的方式就是动手实践。尝试修改上面的代码，看看会发生什么变化！

温馨提示2：请留下点赞！

next：【网页开发教程】基本标签2——多媒体与超链接