Web前端开发：文本格式化全攻略

原创于 2025-12-26 20:04:39 发布 · 528 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端

Web前端开发技术专栏收录该内容

3 篇文章

订阅专栏

编程达人挑战赛·第6期 10w+人浏览 133人参与

第三章格式化文本与段落

本专栏以《Web前端开发技术》（清华大学出版社，储久良著）为主要参考资料，旨在配合课程教学与实践练习使用。文章内容将结合理论与实践，深入讲解前端开发技术，帮助读者系统掌握 Web 前端开发技能。

我会一直连载，如果你喜欢本系列内容，欢迎 订阅专栏 或者关注我，这样就不会错过后续更多前端教程、实战案例与技术分享。

3.1 Web页面初步设计

3.1.1 向Web页面中添加文本信息

基础讲解：
网页最常见的内容就是各种文字，如新闻、介绍、说明等。文本标签是网页的“砖块”，让页面有信息可读。

常用标签介绍与区别：

<p>：块级标签，表示一个段落，文本会自动换行并有上下间距。适合大段文字说明。
<span>：行内标签，小范围标记，不会自动换行，适合对某几个字或词做突出或样式处理。

代码实例：

<p>欢迎来到我的个人主页！这里介绍我的学习和生活。</p>
<p>兴趣包括：<span style="color:blue;">编程</span>、<span style="background:yellow;">阅读</span>、<span style="font-weight:bold;">运动</span>。</p>

生活化比喻：
把网页想象成一本书，<p>就是书里的每一段落，<span>像用荧光笔在某句话上做标记。

常见错误与注意事项：

<p>标签里不能直接嵌套块级标签，如标题（<h1>）或另一个<p>。
<span>如果没有样式，效果与普通文本无异。

进阶拓展：
通过CSS可以让<span>实现更多效果，例如高亮、下划线、鼠标悬停变色等。

3.1.2 添加标题标记

基础讲解：
网页标题标签有六个层级，分别是<h1>到<h6>，数字越小标题越重要、字号越大。合理使用标题结构有助于页面内容层次分明。

代码实例：

<h1>我的个人主页</h1>
<h2>自我介绍</h2>
<h3>兴趣爱好</h3>
<h4>编程经验</h4>

生活化比喻：
标题好比文章中的章节名、副标题、小标题，帮助读者快速定位内容。

SEO与可访问性说明：

<h1>通常每页只用一次，表示最重要的主题。
合理嵌套标题有助于搜索引擎优化（SEO）和盲人读者使用屏幕阅读器。

常见错误与注意事项：

不要跳级使用标题，比如直接从<h1>跳到<h4>。
不建议用标题标签来调整字号，应该用CSS来做视觉样式。

3.1.3 添加字体样式与特殊符号

基础讲解：
可以使用多种标签让文字变粗、变斜、加下划线，还能插入特殊符号（如版权、注册商标等）。

常用标签与符号：

<b>或<strong>：加粗，<strong>语义更强烈，推荐优先使用。
<i>或<em>：斜体，<em>表示强调。
<u>：下划线（HTML5中不推荐用于强调）。
特殊符号：©（©）、®（®）、 （空格）、<（<）、>（>）等。

代码实例：

<p><strong>重要内容：</strong>请认真阅读说明。</p>
<p><em>强调内容：</em>本次作业需独立完成。</p>
<p><u>需要注意：</u>提交截止时间为周五。</p>
<p>版权所有 &copy; 2025 coder-random</p>

生活化拓展：
就像用粗体笔、斜体笔或下划线笔在纸上做标记。

常见错误与注意事项：

<b>和<strong>视觉效果类似，但<strong>语义更强。
<u>主要用于表现装饰，下划线强调推荐用CSS实现。

进阶拓展：
可以结合CSS实现更丰富的字体样式，如颜色、字体、阴影、动画等。

3.2 格式化文本标记

3.2.1 文本修饰标记

基础讲解：
在网页中，常需对特殊内容（如公式、关键词）做修饰，帮助理解和突出表达。

常用标签：

<sup>：上标，数学公式如2³。
<sub>：下标，化学式如H₂O。
<mark>：高亮，黄色底色突出重点。

代码实例：

<p>2<sup>3</sup> 表示2的三次方。</p>
<p>水的化学式是 H<sub>2</sub>O。</p>
<p><mark>本段重点内容，请特别关注。</mark></p>

生活化拓展：
类似于在纸质笔记中圈出公式、划重点。

常见错误与注意事项：

<sup>和<sub>只能标记单个字符或少量文本，不能写整段。
<mark>通常用来临时突出，长时间高亮可用CSS类替代。

进阶拓展：
可通过CSS自定义高亮颜色，或实现动态交互效果（如点击高亮）。

3.2.2 字体标记

基础讲解：
以前HTML用<font>标签设置字体和颜色，但已经过时。现在推荐全部用CSS来进行字体美化。

代码实例：

<p style="color:green; font-size:18px; font-family:'微软雅黑', Arial;">绿色大号字体</p>

CSS统一管理字体样式：

<style>
.red {
  color: red;
  font-weight: bold;
  font-size: 22px;
}
</style>
<p class="red">这是红色加粗字体</p>

生活化拓展：
像在Word文档里统一设置标题、正文、引用样式。

常见错误与注意事项：

不要再用<font>标签，它已被淘汰。
尽量将样式写入CSS文件，便于维护和复用。

进阶拓展：
CSS可实现更多字体效果，如阴影、动画、响应式字号等。

3.3 段落与排版标记

3.3.1 段落标记

基础讲解：
网页的每个段落用<p>标签定义，自动分段和间隔。

代码实例：

<p>第一段内容：介绍课程背景。</p>
<p>第二段内容：阐述学习目标。</p>

生活化比喻：
类似于写作文，每段开头都要另起一行。

常见错误与注意事项：

不要在<p>里嵌套另一个<p>标签。

3.3.2 换行标记

基础讲解：
用<br>标签手动换行，适合诗歌、地址、表格等不需分段的场景。

代码实例：

<p>我的地址：<br>北京市<br>朝阳区<br>建国路99号</p>

生活化比喻：
类似在纸上敲回车，另起一行，但没有新的段落间隔。

常见错误与注意事项：

<br>不能代替<p>，仅用于轻微分行。

3.3.3 水平分隔线标记

基础讲解：
用<hr>插入一条横线，视觉上分隔不同内容区域。

代码实例：

<p>上半部分内容</p>
<hr>
<p>下半部分内容</p>

生活化拓展：
就像书中章节之间用横线分隔。

常见错误与注意事项：

<hr>是自闭合标签，无需结束标签。
可用CSS自定义线条样式、颜色、宽度。

进阶拓展：

<hr style="border:1px dashed #aaa;">

3.3.4 拼音/音标注释标记

基础讲解：
用<ruby>标签给文字加拼音或外语音标，适合语文学习、语言教学网页。

代码实例：

<ruby>
  汉<rt>hàn</rt>
  字<rt>zì</rt>
</ruby>

生活化拓展：
类似语文课本里带拼音的生字表。

常见错误与注意事项：

<rt>标签只能在<ruby>标签内使用。
拼音可用CSS调整颜色和字体。

进阶拓展：
可实现多音字、英文音标等复杂标注。

3.3.5 段落缩进标记

基础讲解：
用CSS的text-indent属性设置段落首行缩进，提升排版美观度。

代码实例：

<p style="text-indent:2em;">本段文字首行缩进，阅读更舒适。</p>

生活化拓展：
像语文作文开头空两格。

常见错误与注意事项：

text-indent单位常用em或px，建议用em更适应不同字体大小。

进阶拓展：
可用CSS类批量设置全部段落缩进：

<style>
.indent { text-indent:2em; }
</style>
<p class="indent">所有首行缩进的段落。</p>

3.3.6 预格式化标记

基础讲解：
用<pre>标签可保留原有空格和换行，常用于代码块、诗歌、表格等内容。

代码实例：

<pre>
function helloWorld() {
  console.log("Hello, world!");
}
</pre>

或诗歌排版：

<pre>
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</pre>

生活化拓展：
像在纸上对齐写代码、诗歌或表格，不受普通段落排版影响。

常见错误与注意事项：

<pre>内所有空格和换行都会显示出来。
可结合<code>标签表现程序代码。

进阶拓展：
可用CSS美化代码块，比如背景色、字体和滚动条。

3.4 思政案例3——公民基本道德规范

点击跳转展示

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>公民基本道德规范</title>
		<style type="text/css">
			h2 {background: #FE0000;line-height: 50px;color: white;}
			img {float: left;margin: 20px;}
			blockquote,p {font-size: 18px;}
		</style>
	</head>
	<body>
		<h2 align="center">公民基本道德规范</h2>
		<hr width="100%" size="3" color="red">
		<img src="image-3-1.jpg">
		<h3>公民基本道德规范二十字</h3>
		<pre>
     爱国守法，明礼诚信，团结友善，勤俭自强，敬业奉献。
		 </pre>
		<h3>公民基本道德规范诠释</h3>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;爱国指对祖国的忠诚和热爱，守法指人们按照法律规范进行活动。明礼就是对社会交往规则、仪式和习惯的正确理解和运用，诚信通常指诚实守信。团结指人们为了实现共同的利益和目标而在思想和行动上相互一致，友善指人与人之间相互友好帮助共求进步。勤俭即勤劳节俭，自强指人对自己的能力和行为所具有的自信和进取意识。敬业指要有正确的职业观念，热爱本职工作和对技术精益求精，奉献指为国家和人民的利益贡献自己的力量，不计个人得失。这些基本行为准则，在同一道德体系中具有内容的广延性和层次的多样性，既包括社会主义的公民所必须共同遵守的最重要的行为准则，又涵盖了家庭、职业、公共生活等各个领域所应遵守的最基本的道德准则，适用于不同社会群体，与不同社会领域的具体道德规范融为一体，贯穿公民道德建设的全过程。
		</p>
		<blockquote>公民基本道德规范是指公民应当遵守的基本道德规范。</blockquote>
		<hr width="100%" size="3" color="red">
		<p align="center">Copyright&copy; 中共中央《公民道德建设实施纲要》</p>
	</body>
</html>