HTML简介

HTML语法基础

HTML文档结构

HTML标签属性

文档类型定义

HTML语法规则

文本基础

标题与段落

文本格式化

列表

链接

图像

表格

多媒体

表单基础

表单进阶

表单验证

表单样式

语义化标签

HTML5新特性

HTML5文本语义

Canvas绘图

SVG图形

Web存储

IndexedDB

Web Workers

地理位置API

拖放API

历史记录API

剪贴板API

拖放API中级

WebSockets

通知API

全屏API

剪贴板API进阶

文件API

拖放API进阶

CSS集成基础

CSS选择器

CSS盒模型

CSS布局技术

响应式设计

代码规范

可访问性

Web安全

隐私保护

个人网站项目

博客系统项目

电商网站项目

社交平台项目

开发工具

版本控制

包管理器

构建工具

Web Components

PWA渐进式应用

WebAssembly

性能优化

Web发展趋势

AI与Web

Web安全未来

Web技术展望

文本基础

文本概述

文本是网页内容的基础元素，HTML提供了丰富的文本标签来标记和格式化文本内容。

东巴文（db-w.cn） 认为：文本是网页的灵魂，合理使用文本标签可以提升内容的可读性和可访问性。

文本标签分类

分类概览

东巴文文本标签分类：

分类	标签	说明
标题	h1-h6	定义标题层级
段落	p	定义段落
换行	br	强制换行
水平线	hr	水平分隔线
格式化	strong, em, mark等	文本格式化
引用	blockquote, q, cite	引用内容
代码	code, pre, kbd, samp	代码相关
缩写	abbr	缩写词
地址	address	联系信息
上下标	sub, sup	下标和上标

基础文本标签

段落标签 ``

标签定义段落，是最常用的文本标签。

<p>这是一个段落。段落是文本内容的基本单位。</p>

<p>这是另一个段落。浏览器会自动在段落前后添加空白。</p>

东巴文说明：

段落之间会自动添加空白
段落内不能包含块级元素
推荐使用CSS控制段落间距

东巴文示例：

<article>
    <p>东巴文（db-w.cn）是一个专注于编程教育的在线学习平台。</p>
    
    <p>我们提供高质量的编程教程，涵盖HTML、CSS、JavaScript、Python、C语言等多个技术领域。</p>
    
    <p>我们的目标是让编程学习更有趣、更高效！</p>
</article>

换行标签 ` `

 标签用于强制换行。

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

东巴文说明：

 是自闭合标签
仅在需要时使用，不要滥用
段落之间应使用标签，而不是多个

东巴文对比：

<!-- ❌ 不推荐：使用多个br -->
<p>
    第一段内容<br><br>
    第二段内容<br><br>
    第三段内容
</p>

<!-- ✅ 推荐：使用p标签 -->
<p>第一段内容</p>
<p>第二段内容</p>
<p>第三段内容</p>

水平线标签 `<hr>`

<hr>标签用于创建水平分隔线。

<p>第一部分内容</p>

<hr>

<p>第二部分内容</p>

东巴文说明：

<hr>是自闭合标签
表示主题的转换或分隔
可以使用CSS自定义样式

东巴文示例：

<article>
    <h1>文章标题</h1>
    
    <p>文章引言部分...</p>
    
    <hr>
    
    <h2>第一章</h2>
    <p>章节内容...</p>
    
    <hr>
    
    <h2>第二章</h2>
    <p>章节内容...</p>
</article>

标题标签

标题层级

HTML提供6级标题标签：<h1>到<h6>。

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

东巴文说明：

<h1>最重要，<h6>最不重要
标题按层级递进，不要跳过
每个页面通常只有一个<h1>

标题使用规则

东巴文标题法则：

法则1：层级递进

<!-- ✅ 推荐：层级递进 -->
<h1>网站标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>

<!-- ❌ 不推荐：跳过层级 -->
<h1>网站标题</h1>
<h3>小节标题</h3> <!-- 跳过了h2 -->

法则2：唯一h1

<!-- ✅ 推荐：一个页面一个h1 -->
<article>
    <h1>文章标题</h1>
    <h2>章节一</h2>
    <h2>章节二</h2>
</article>

<!-- ❌ 不推荐：多个h1 -->
<article>
    <h1>文章标题</h1>
    <h1>章节一</h1> <!-- 不应该有多个h1 -->
    <h1>章节二</h1>
</article>

法则3：语义化使用

<!-- ✅ 推荐：标题用于结构 -->
<h1>东巴文教程</h1>
<h2>HTML基础</h2>
<h3>文本标签</h3>

<!-- ❌ 不推荐：标题用于样式 -->
<h1 style="font-size: 14px;">小号文本</h1>
<h6 style="font-size: 24px;">大号文本</h6>

标题与SEO

东巴文SEO建议：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML教程 - 东巴文</title>
</head>
<body>
    <header>
        <h1>HTML教程</h1>
        <p>从入门到精通的HTML学习指南</p>
    </header>
    
    <main>
        <article>
            <h2>HTML基础</h2>
            <p>HTML基础内容...</p>
            
            <h3>什么是HTML</h3>
            <p>HTML介绍...</p>
            
            <h3>HTML历史</h3>
            <p>HTML历史...</p>
        </article>
        
        <article>
            <h2>HTML进阶</h2>
            <p>HTML进阶内容...</p>
        </article>
    </main>
</body>
</html>

文本格式化标签

粗体标签

``标签

标签表示重要文本，浏览器默认显示为粗体。

<p>
    <strong>重要提示：</strong>请仔细阅读以下内容。
</p>

<p>
    学习HTML是<strong>非常重要</strong>的第一步。
</p>

东巴文说明：

表示内容的重要性、严重性或紧迫性
具有语义化含义
屏幕阅读器会加重语气朗读

``标签

标签仅用于视觉上的粗体，没有语义含义。

<p>
    产品名称：<b>东巴文</b>
</p>

<p>
    关键词：<b>HTML</b>、<b>CSS</b>、<b>JavaScript</b>
</p>

东巴文对比：

标签	语义	使用场景
`<strong>`	重要文本	警告、注意事项、重要内容
`<b>`	无语义	产品名称、关键词、视觉粗体

东巴文建议：优先使用，仅在无语义需求时使用。

斜体标签

``标签

标签表示强调文本，浏览器默认显示为斜体。

<p>
    我<em>真的</em>很喜欢编程。
</p>

<p>
    请<em>务必</em>按时完成任务。
</p>

东巴文说明：

表示强调或重读
具有语义化含义
屏幕阅读器会改变语调

``标签

标签仅用于视觉上的斜体，没有语义含义。

<p>
    书名：<i>HTML教程</i>
</p>

<p>
    外来语：<i>HTML</i>是HyperText Markup Language的缩写。
</p>

东巴文对比：

标签	语义	使用场景
`<em>`	强调文本	语气强调、重读
`<i>`	无语义	书名、外来语、术语

东巴文建议：优先使用，仅在无语义需求时使用。

标记标签 ``

标签用于标记或高亮文本。

<p>
    搜索结果中会<mark>高亮显示</mark>关键词。
</p>

<p>
    注意：<mark>这部分内容很重要</mark>。
</p>

东巴文说明：

默认显示黄色背景
表示相关性或重要性
常用于搜索结果高亮

删除标签 `<del>`

<del>标签表示删除的文本。

<p>
    原价：<del>¥999</del> 现价：¥599
</p>

<p>
    <del>旧内容</del>
    <ins>新内容</ins>
</p>

东巴文说明：

默认显示删除线
表示已删除的内容
可配合<ins>标签使用

插入标签 `<ins>`

<ins>标签表示插入的文本。

<p>
    <del>旧价格：¥999</del>
    <ins>新价格：¥599</ins>
</p>

东巴文说明：

默认显示下划线
表示新增的内容
可配合<del>标签使用

下划线标签 ``

标签表示非文本注释的下划线。

<p>
    这段文本有<u>拼写错误</u>。
</p>

东巴文说明：

默认显示下划线
表示某种标注
容易与链接混淆，慎用

小号文本标签 ``

标签表示小号文本，常用于注释、版权信息等。

<p>
    东巴文（db-w.cn）- 让编程学习更有趣、更高效！
    <small>版权所有 &copy; 2024</small>
</p>

<footer>
    <small>
        本网站所有内容仅供学习参考，未经授权禁止转载。
    </small>
</footer>

东巴文说明：

默认显示小号字体
表示附属信息、注释、版权
具有语义化含义

上标和下标

上标标签 ``

标签表示上标文本。

<p>
    数学公式：E = mc<sup>2</sup>
</p>

<p>
    脚注引用：东巴文<sup>[1]</sup>是一个学习平台。
</p>

下标标签 ``

标签表示下标文本。

<p>
    化学式：H<sub>2</sub>O
</p>

<p>
    化学式：CO<sub>2</sub>
</p>

东巴文示例：

<article>
    <h1>科学知识</h1>
    
    <p>
        爱因斯坦的质能方程：E = mc<sup>2</sup>，其中E表示能量，m表示质量，c表示光速。
    </p>
    
    <p>
        水的化学式是H<sub>2</sub>O，由两个氢原子和一个氧原子组成。
    </p>
    
    <p>
        二氧化碳的化学式是CO<sub>2</sub>，是一个碳原子和两个氧原子组成。
    </p>
</article>

引用标签

块引用标签 `<blockquote>`

<blockquote>标签用于长引用，通常用于引用大段内容。

<blockquote cite="https://db-w.cn">
    <p>
        编程是一门艺术，需要不断学习和实践。东巴文致力于让编程学习更有趣、更高效！
    </p>
</blockquote>

东巴文说明：

默认左右缩进
cite属性指定引用来源
可包含多个段落

东巴文示例：

<article>
    <h1>名人名言</h1>
    
    <blockquote cite="https://example.com/quotes">
        <p>
            学习编程最好的方法就是动手实践。不要害怕犯错，每一个错误都是学习的机会。
        </p>
        <footer>
            — <cite>东巴文创始人</cite>
        </footer>
    </blockquote>
</article>

短引用标签 `<q>`

<q>标签用于短引用，通常用于引用短语或句子。

<p>
    东巴文的目标是：<q cite="https://db-w.cn">让编程学习更有趣、更高效！</q>
</p>

东巴文说明：

浏览器自动添加引号
cite属性指定引用来源
用于行内引用

引用来源标签 `<cite>`

<cite>标签表示引用的来源或作者。

<p>
    根据<cite>《HTML教程》</cite>的介绍，HTML是构建网页的基础语言。
</p>

<blockquote>
    <p>学习编程改变生活。</p>
    <footer>— <cite>东巴文</cite></footer>
</blockquote>

东巴文说明：

默认显示斜体
表示作品标题或作者
具有语义化含义

代码标签

代码标签 `<code>`

<code>标签用于标记计算机代码。

<p>
    使用 <code>&lt;div&gt;</code> 标签创建容器。
</p>

<p>
    JavaScript 的 <code>console.log()</code> 函数用于输出信息。
</p>

东巴文说明：

默认显示等宽字体
用于行内代码
特殊字符需要转义

预格式化标签 `<pre>`

<pre>标签用于预格式化文本，保留空格和换行。

<pre>
function hello() {
    console.log("Hello, 东巴文！");
}

hello();
</pre>

东巴文说明：

保留空格和换行
默认显示等宽字体
常与<code>标签配合使用

东巴文示例：

<pre><code>
&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;页面标题&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    页面内容
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

键盘输入标签 `<kbd>`

<kbd>标签表示键盘输入。

<p>
    按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制文本。
</p>

<p>
    按 <kbd>Ctrl</kbd> + <kbd>V</kbd> 粘贴文本。
</p>

东巴文说明：

默认显示等宽字体
表示键盘按键
常用于快捷键说明

示例输出标签 `<samp>`

<samp>标签表示程序的示例输出。

<p>
    程序输出：<samp>Hello, 东巴文！</samp>
</p>

<p>
    错误信息：<samp>File not found.</samp>
</p>

东巴文说明：

默认显示等宽字体
表示程序输出
常用于教程文档

变量标签 `<var>`

<var>标签表示变量。

<p>
    方程 <var>x</var> + <var>y</var> = 10。
</p>

<p>
    变量 <var>count</var> 表示计数器。
</p>

东巴文说明：

默认显示斜体
表示数学变量或编程变量
常用于技术文档

东巴文综合示例：

<article>
    <h1>JavaScript教程</h1>
    
    <p>
        在JavaScript中，使用 <code>let</code> 关键字声明变量：
    </p>
    
    <pre><code>
let <var>message</var> = "Hello, 东巴文！";
console.log(<var>message</var>);
    </code></pre>
    
    <p>
        按 <kbd>F12</kbd> 打开开发者工具，在控制台中输入代码，输出结果为：
        <samp>Hello, 东巴文！</samp>
    </p>
</article>

缩写标签

`<abbr>`标签

<abbr>标签表示缩写词或首字母缩写。

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

<p>
    <abbr title="Cascading Style Sheets">CSS</abbr>用于网页样式设计。
</p>

<p>
    <abbr title="东巴文">db-w.cn</abbr>是一个编程学习平台。
</p>

东巴文说明：

title属性提供完整解释
鼠标悬停时显示完整内容
提升可访问性

地址标签

`<address>`标签

<address>标签表示联系信息。

<address>
    <strong>东巴文</strong><br>
    邮箱：<a href="mailto:contact@db-w.cn">contact@db-w.cn</a><br>
    网站：<a href="https://db-w.cn">https://db-w.cn</a><br>
    地址：北京市朝阳区
</address>

东巴文说明：

表示文章作者或网站所有者的联系信息
默认显示斜体
可包含各种联系信息

特殊字符实体

常用字符实体

东巴文字符实体表：

字符	实体	说明
<	`<`	小于号
>	`>`	大于号
&	`&`	和号
"	`"`	双引号
'	`'`	单引号
©	`©`	版权符号
®	`®`	注册商标
™	`™`	商标符号
¥	`¥`	人民币符号
€	`€`	欧元符号
£	`£`	英镑符号
¢	`¢`	美分符号
§	`§`	章节符号
¶	`¶`	段落符号
•	`•`	项目符号
…	`…`	省略号
–	`–`	短破折号
—	`—`	长破折号
°	`°`	度数符号
±	`±`	加减号
×	`×`	乘号
÷	`÷`	除号
¼	`¼`	四分之一
½	`½`	二分之一
¾	`¾`	四分之三
空格	` `	不换行空格

使用示例

<p>
    价格：&yen;999<br>
    版权所有 &copy; 2024 东巴文<br>
    温度：25&deg;C<br>
    公式：E = mc&sup2;<br>
    使用 &lt;div&gt; 标签创建容器
</p>

最佳实践

东巴文文本法则

法则1：使用语义化标签

<!-- ✅ 推荐：语义化标签 -->
<p>这是<strong>重要</strong>的内容。</p>
<p>这是<em>强调</em>的内容。</p>

<!-- ❌ 不推荐：非语义化标签 -->
<p>这是<b>重要</b>的内容。</p>
<p>这是<i>强调</i>的内容。</p>

法则2：标题层级正确

<!-- ✅ 推荐：标题层级正确 -->
<h1>主标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>

<!-- ❌ 不推荐：跳过层级 -->
<h1>主标题</h1>
<h3>小节标题</h3>

法则3：特殊字符转义

<!-- ✅ 推荐：特殊字符转义 -->
<p>价格：100 &lt; 200</p>
<p>版权所有 &copy; 2024</p>

<!-- ❌ 不推荐：特殊字符未转义 -->
<p>价格：100 < 200</p>

法则4：合理使用换行

<!-- ✅ 推荐：使用p标签 -->
<p>第一段</p>
<p>第二段</p>

<!-- ❌ 不推荐：使用多个br -->
<p>第一段<br><br>第二段</p>

学习检验

知识点测试

问题1：以下哪个标签用于表示重要文本？

A.  B.  C.  D. 

<details> <summary>点击查看答案</summary>

答案：B

东巴文解释：标签表示重要文本，具有语义化含义。仅表示粗体，无语义。表示强调，表示斜体。

</details>

问题2：以下哪个标签用于表示上标？

A.  B.  C.  D. 

<details> <summary>点击查看答案</summary>

答案：B

东巴文解释：标签表示上标，表示下标，表示小号文本，是通用行内容器。

</details>

实践任务

任务：创建一个包含以下元素的文本内容：

标题（h1-h3）
段落
粗体和斜体
上标和下标
引用
代码

<details> <summary>点击查看参考答案</summary>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本标签示例 - 东巴文</title>
</head>
<body>
    <article>
        <h1>HTML文本标签</h1>
        
        <h2>什么是HTML</h2>
        <p>
            <abbr title="HyperText Markup Language">HTML</abbr>是构建网页的基础语言。
            它使用<strong>标签</strong>来标记内容，让浏览器知道如何显示这些内容。
        </p>
        
        <h2>化学知识</h2>
        <p>
            水的化学式是H<sub>2</sub>O，由两个氢原子和一个氧原子组成。
            爱因斯坦的质能方程是E = mc<sup>2</sup>。
        </p>
        
        <h2>编程示例</h2>
        <p>
            在JavaScript中，使用 <code>console.log()</code> 输出信息：
        </p>
        <pre><code>
console.log("Hello, 东巴文！");
        </code></pre>
        
        <h2>名人名言</h2>
        <blockquote cite="https://db-w.cn">
            <p>让编程学习更有趣、更高效！</p>
            <footer>— <cite>东巴文</cite></footer>
        </blockquote>
        
        <hr>
        
        <footer>
            <small>版权所有 &copy; 2024 东巴文（db-w.cn）</small>
        </footer>
    </article>
</body>
</html>

</details>

东巴文（db-w.cn） - 让编程学习更有趣、更高效！

上一章：HTML语法规则

下一章：标题与段落

文本基础

文本概述

文本标签分类

分类概览

基础文本标签

段落标签 <p>

换行标签 <br>

水平线标签 <hr>

标题标签

标题层级

标题使用规则

法则1：层级递进

法则2：唯一h1

法则3：语义化使用

标题与SEO

文本格式化标签

粗体标签

<strong>标签

<b>标签

斜体标签

<em>标签

<i>标签

标记标签 <mark>

删除标签 <del>

插入标签 <ins>

下划线标签 <u>

小号文本标签 <small>

上标和下标

上标标签 <sup>

下标标签 <sub>

引用标签

块引用标签 <blockquote>

短引用标签 <q>

引用来源标签 <cite>

代码标签

代码标签 <code>

预格式化标签 <pre>

键盘输入标签 <kbd>

示例输出标签 <samp>

变量标签 <var>

缩写标签

<abbr>标签

地址标签

<address>标签

特殊字符实体

常用字符实体

使用示例

最佳实践

东巴文文本法则

法则1：使用语义化标签

法则2：标题层级正确

法则3：特殊字符转义

法则4：合理使用换行

学习检验

知识点测试

实践任务

段落标签 `<p>`

换行标签 `<br>`

水平线标签 `<hr>`

`<strong>`标签

`<b>`标签

`<em>`标签

`<i>`标签

标记标签 `<mark>`

删除标签 `<del>`

插入标签 `<ins>`

下划线标签 `<u>`

小号文本标签 `<small>`

上标标签 `<sup>`

下标标签 `<sub>`

块引用标签 `<blockquote>`

短引用标签 `<q>`

引用来源标签 `<cite>`

代码标签 `<code>`

预格式化标签 `<pre>`

键盘输入标签 `<kbd>`

示例输出标签 `<samp>`

变量标签 `<var>`

`<abbr>`标签

`<address>`标签