Web如何格式化文字与段落

发布时间：2021-12-21 09:12:34 作者：iii
来源：亿速云阅读：146

这篇文章主要讲解了“Web如何格式化文字与段落”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Web如何格式化文字与段落”吧！

内容提要：

标题字(h2最大~h7最小)标记语法及属性语法
文本格式化标记类型与作用
使用字体font标记
使用段落与排版标记
使用各类格式化标记设计简易的Web页面

Web页面设计原则

简洁：满足人们的实用和需求为目标，要求简练、准确。
一致性：网站中各个页面使用相同的页边距，页面中的每个元素与整个页面以及站点的色彩和风格上的一致性。
好的对比度：对比度的目的强调突出关键内容，以吸引浏览者，鼓励他们去发掘更深层次的内容。

向Web页面添加文字信息

基本语法：

<body>在这里添加内容</body>

语法说明：

body中定义文档的主体。
body中包含文档的所有内容(如文本、超链接、图像、表格、列表、声音和视频等)。
body标记所包含的内容会显示在页面上。

标记字标记

标题是通过<h2> ~ <h7>等标记进行定义的。
基本语法：

<h2 align="lift|center|right|justify">1号标题字</h2>

例如：

<h2 align="center">Web前端开发技术</h2>
    <h3 align="left">Web前端开发技术</h3>
    <h4 align="center">Web前端开发技术</h4>
    <h5 align="right">Web前端开发技术</h5>
    <h6 align="justify">Web前端开发技术</h6>
    <h7 align="center">Web前端开发技术</h7>

添加空格和特殊符号

在HTML文件中，添加空格的方式与其他文档添加空格的方式不同，网页中通过代码控制来添加空格，而在其他编辑器中通过键盘空格键来输入空格。
基本语法
```
<body>
    &nbsp;&lt;&reg;&times;
</body>
```
注：在body标记内无论输入多少空格、回车符，页面在显示时都会忽略。

在HTML文件中，插入特殊字符

显示结果	说明	Entity Name	Entity Number
	显示一个空格
<	小于	<	<
>	大于	>	>
&	&符号	&	&
"	双引号	"	"
©	版权	©	©
®	注册商标	®	®
×	乘号	×	×
÷	除号	÷	÷

在HTML文件中，插入特殊字符案例

<!-- 在body标记内无论输入多少空格、回车符，页面在显示时都会忽略 -->
	<p>空格&nbsp;</p>
    <p>大于&gt;</p>
    <p>小于&lt;</p>
    <p>逻辑与&amp;</p>
    <p>版权&copy;</p>
    <p>注册&reg;</p>
    <p>乘号&times;</p>
    <p>除号&divide;</p>

格式化文本标记

文本修饰标记各类浏览器均支持，各类网页开发工具中仍然有这类标记。常见的文本修饰标记如下表所示。

标记	说明
<b>软件工程专业！</b>	定义粗体
<i>软件工程专业！</i>	定义斜体
<u>软件工程专业！</u>	定义下划线
<del>软件工程专业！</del>	定义删除线
<sup>软件工程专业！</sup>	定义上标
<sub>软件工程专业！</sub>	定义下标
<strong>软件工程专业！</strong>	定义粗体
<em>软件工程专业！</em>	定义斜体
<small>软件工程专业！</small>	变小字号
<big>软件工程专业！</big>	变大字号

案例1：

<b>This text is bold<`
    <br>
    <strong>This text is strong</strong>
    <br>
    <big>This text is big</big>
    <br>
    <em>This text is emphasized</em>
    <br>
    <i>This text is italic</i>
    <br>
    <small>This text is small</small>
    <br>
    This text is contains<sub>subcript</sub>
    <br>
    This text is contains<sup>superscript</sup>

Web如何格式化文字与段落

案例2：

<body>
    <h4 align="center">文本修饰标记应用</h4>
    <hr size="2" color="red">
    <b>软件工程专业全国就业最好</b><br>
    <i>软件工程专业全国就业最好</i><br>
    <u>软件工程专业全国就业最好</u><br>
    <del>软件工程专业全国就业最好</del><br>
    x<sup>2</sup>+2x+5=b<br>
    x<sub>1</sub>=2<br>
    <small>软件工程专业全国就业最好</small><br>
    <big>软件工程专业全国就业最好</big><br>
    <strong>软件工程!</strong><br>
    <em>软件工程!</em>
</body>

Web如何格式化文字与段落

字体font标记：

<body>
    <strong>文本样式为黑体，颜色#000fff，大小从-1~-7；</strong>
    <font face="黑体" size="-1" color="#000fff">-1字</font>
    <font face="黑体" size="-3" color="#000fff">-3字</font>
    <font face="黑体" size="-5" color="#000fff">-5字</font>
    <font face="黑体" size="-7" color="#000fff">-7字</font><br>
    <strong>文本样式为宋体，颜色#ff0066，大小从1~7；</strong>
    <font face="宋体" size="1" color="#ff0066">1字</font>
    <font face="宋体" size="3" color="#ff0066">3字</font>
    <font face="宋体" size="5" color="#ff0066">5字</font>
    <font face="宋体" size="7" color="#ff0066">7字</font><br>
    <strong>文本样式为隶书，颜色#000fff，大小从+1~+7；</strong>
    <font face="隶体" size="+1" color="#ff0066">+1字</font>
    <font face="隶体" size="+3" color="#ff0066">+3字</font>
    <font face="隶体" size="+5" color="#ff0066">+5字</font>
    <font face="隶体" size="+7" color="#ff0066">+7字</font>
</body>

font标记用来改变默认的字体、颜色、大小等属性，这些更改分别通过不同的属性定义完成。
基本语法：<font face=" " size=" " color=" "> 内容 </font>

属性说明：

属性	值	说明
size	+1_+7，-1-7	数字越大字号越大
color	rgb、#rrggbb、color name	规定文本的颜色。可以使用rgb函数、十六进制数、颜色英文名称来表达
face	字体1，字体2，字体n	face属性可以有多个值，用逗号分隔。字体使用方式为从左到右依次使用。只要前面的字体不存在，则使用后一个，都不存在则默认使用“宋体”。

案例：

Web如何格式化文字与段落

格式化文本标记-续

计算机输出标记：常用的计算机输出标记如下表所示：

标签	说明
<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>

Web如何格式化文字与段落

格式化文本标记-续

引用和术语标记：常用的引用和术语标记如下表所示。

标记	主要用途
<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>

Web如何格式化文字与段落

段落与排版标记

网页的外观是否美观，很大程度上取决于其排版。在页面中出现大段的文字，通常采用分段进行规划，对换行也有极其严格的划分。

段落标记<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>

Web如何格式化文字与段落

换行标记<br>

基本语法：<br> 换行
文档中，<br>元素属于单个标记，表示插入换行符。
例如：<p>段落正文内容<br>另起一行</p>

水平分割线标记<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如何格式化文字与段落

段落缩进标记<blockquote>
段落缩进(也称为“块引用”)，blockquote标记引用的内容必须是块级标记，浏览器在blockquote标记前后添加了换行，并增加了外边距。

一对blockquote标记能够向右缩进5个英文字符的位置。
基本语法：<blockquote>需要缩进的内容</blockquote>

案例：

<body>
    <h6>段落缩进标记的应用</h6>
    <hr color="green">
    <p>这行文字没有缩进</p>
    <blockquote>这行文字有5个字符缩进</blockquote>
    <blockquote>
        <blockquote>这行文字有10个字符缩进</blockquote>
    </blockquote>
</body>

Web如何格式化文字与段落

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>&nbsp;&nbsp;&nbsp;&nbsp;本报告从国际教育信息化发展、国内教育信息化政策环境及发展、研发动态、进出口情况、
        重点生产企业、存在的问题及对策等多方面多角度阐述了教育信息化市场的发展，并在此基础上对教育信息化的发展前
        景做出了科学的预测，最后对教育信息化投资潜力进行了分析。
    </p>
    <h4>郑重声明</h4>
    <p>
        <blockquote>
            本报告由中国报告大厅出版发行，报告著作权归宇博智业所有。本报告是宇博智业的研究与统计成果，有偿提供给
            购买报告的客户使用。未获得宇博智业书面授权，任何网站或媒体不得转载或引用，否则宇博智业有权依法追究其
            法律责任。如需订阅研究报告，请直接联系本网站，以便获得全程优质完善服务。
        </blockquote>
    </p>
    <hr size="1" width="100%" color="#000fff" />
    <p align="center">
        Copyrignt&copy;中国报告大厅&nbsp;京ICP备11010647号-2京公网安备11010502024380
    </p>
</body>
</html>

Web如何格式化文字与段落

感谢各位的阅读，以上就是“Web如何格式化文字与段落”的内容了，经过本文的学习后，相信大家对Web如何格式化文字与段落这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！

Web如何格式化文字与段落

内容提要：

Web页面设计原则

向Web页面添加文字信息

标记字标记

格式化文本标记

格式化文本标记-续

格式化文本标记-续

段落与排版标记

Web页面设计实例

相关阅读