这篇文章主要讲解了“Web如何格式化文字与段落”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Web如何格式化文字与段落”吧！
内容提要：
标题字(h2最大~h7最小)标记语法及属性语法
文本格式化标记类型与作用
使用字体font标记
使用段落与排版标记
使用各类格式化标记设计简易的Web页面
Web页面设计原则
简洁：满足人们的实用和需求为目标，要求简练、准确。
一致性：网站中各个页面使用相同的页边距，页面中的每个元素与整个页面以及站点的色彩和风格上的一致性。
好的对比度：对比度的目的强调突出关键内容，以吸引浏览者，鼓励他们去发掘更深层次的内容。
向Web页面添加文字信息
标记字标记
格式化文本标记
文本修饰标记各类浏览器均支持，各类网页开发工具中仍然有这类标记。常见的文本修饰标记如下表所示。
| 标记 | 说明 |
|---|
| <b>软件工程专业！</b> | 定义粗体 |
| <i>软件工程专业！</i> | 定义斜体 |
| <u>软件工程专业！</u> | 定义下划线 |
| <del>软件工程专业！</del> | 定义删除线 |
| <sup>软件工程专业！</sup> | 定义上标 |
| <sub>软件工程专业！</sub> | 定义下标 |
| <strong>软件工程专业！</strong> | 定义粗体 |
| <em>软件工程专业！</em> | 定义斜体 |
| <small>软件工程专业！</small> | 变小字号 |
| <big>软件工程专业！</big> | 变大字号 |
格式化文本标记-续
计算机输出标记：常用的计算机输出标记如下表所示：
| 标签 | 说明 |
|---|
| <code> </code> | 定义计算机代码 |
| <kbd> </kdb> | 定义键盘码 |
| <samp> </samp> | 定义计算机代码样本 |
| <tt> </tt> | 定义打字机代码 |
| <var> </var> | 定义变量 |
| <pre> </pre> | 定义预格式文本 |
预格式化标记<pre>
<pre> </pre>标记对网页中的文字段落进行预格式化，浏览器会完整保留设计者在源文件中所定义的格式，包括各种空格、缩进以及其他特殊格式。
基本语法：<pre> 预格式化文本 </pre>
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>预格式化</title>
</head>
<body>
<h2>
<pre>
春 晓
孟浩然
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</pre>
</h2>
</body>
</html>
格式化文本标记-续
引用和术语标记：常用的引用和术语标记如下表所示。
| 标记 | 主要用途 |
|---|
| <abbr>etc.</abbr> | 定义缩写 |
| <address>江苏南京市</address> | 定义地址 |
| <blockquote>长的引用</blockquote> | 定义长的引用 |
| <cite>引用、引证</cite> | 定义引用、引证 |
| <q>引用短语</q> | 定义短的引用语，IE看不到引号，其余可以 |
| <dfn>定义项目</dfn> | 定义一个定义项目 |
区别：
<q>：引用的是小段文字。
<blockquote>：引用的是大段的内容块。
<q>：q标签是行内元素，在内容的开始和结尾处会包有引号。
<blockquote>：blockquote是块级元素，默认带有左右40px的外间距，不带引号。
<blockquote>标签和<q>标签都表示“引用”
格式不同
语义不同
<abbr> </abbr>
通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。
假如用了ABBR及ACRONYM标签，只需要把鼠标指到缩写词上就会显示完整的意思。
<body>
<abbr>etc.</abbr>
<abbr title="PageRank">PR</abbr>
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
<br><acronym title="Client Server">CS</acronym>
<address>江苏省南京市</address>
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
段落与排版标记
网页的外观是否美观，很大程度上取决于其排版。在页面中出现大段的文字，通常采用分段进行规划，对换行也有极其严格的划分。
段落标记<p>
段落<p>标记用来起始一个段落，它是一个块级元素。段落p标记会自动在其前后创建一些空白，而<br>换行符前后没有留白，另外<div>也是段落标记。
基本语法：<p align="left|center|right">段落正文内容</p>
案例：
<body>
<h6 align="center">段落p标记对齐方式</h6>
<hr color="blue">
<p align="left">网页的外观是否美观，很大程度上取决于其排版。</p>
<p align="center">网页的外观是否美观，很大程度上取决于其排版。</p>
<p align="right">网页的外观是否美观，很大程度上取决于其排版。</p>
</body>
换行标记<br>
水平分割线标记<hr>
<hr>元素可以让浏览器显示一条细线以分隔两个区域。
基本语法：<hr size=" " color=" " width=" " align=" ">
| 属性 | 值 | 说明 |
|---|
| width | 像素px或百分比 | 设置水平线宽度 |
| size | 整数，单位px | 设置水平线高度 |
| color | rgb函数、十六进制数、颜色英文名称 | 设置水平线颜色 |
| align | left、center、right | 设置水平线对齐方式 |
案例：
<body>
<h4>换行与水平分割线标记的应用</h4>
<p>大小为3、宽度为60%、居中、蓝色</p>
<hr size="3" width="60%" align="center" color="blue">
<p>大小为5、宽度为600px、居右、绿色</p>
<hr size="5" width="600" align="right" color="green">
</body>
Web页面设计实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>教育信息化"十三五"规划报告</title>
</head>
<body>
<h3 align="center">2016-2021年教育信息化行业深度分析及“十三五”发展规划指导报告</h3>
<hr size="3" color="red" width="100%" />
<br>
<pre>
细分报告: 教育信息化市场研究报告 教育信息化市场调查报告 教育信息化前景预测报告
教育信息化市场分析报告 教育信息化市场评估报告 教育信息化重点企业报告
教育信息化发展前景报告 教育信息化投资规划报告 教育信息化深度研究报告
教育信息化投资前景报告 教育信息化项目调研报告
</pre>
<hr size="1" color="blue" width="100%" />
<h4>报告导读</h4>
<p> 本报告从国际教育信息化发展、国内教育信息化政策环境及发展、研发动态、进出口情况、
重点生产企业、存在的问题及对策等多方面多角度阐述了教育信息化市场的发展，并在此基础上对教育信息化的发展前
景做出了科学的预测，最后对教育信息化投资潜力进行了分析。
</p>
<h4>郑重声明</h4>
<p>
<blockquote>
本报告由中国报告大厅出版发行，报告著作权归宇博智业所有。本报告是宇博智业的研究与统计成果，有偿提供给
购买报告的客户使用。未获得宇博智业书面授权，任何网站或媒体不得转载或引用，否则宇博智业有权依法追究其
法律责任。如需订阅研究报告，请直接联系本网站，以便获得全程优质完善服务。
</blockquote>
</p>
<hr size="1" width="100%" color="#000fff" />
<p align="center">
Copyrignt©中国报告大厅 京ICP备11010647号-2京公网安备11010502024380
</p>
</body>
</html>
感谢各位的阅读，以上就是“Web如何格式化文字与段落”的内容了，经过本文的学习后，相信大家对Web如何格式化文字与段落这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是天达云，小编将为大家推送更多相关知识点的文章，欢迎关注！