第3章格式化文本与段落,web前端设计怎么学

第3章格式化文本与段落本章学习目标网页内容排版包括文本格式化、段落格式化和整个页面的排版格式化，这是设计一个网页的基础。
文本格式化标记分为字体标记、文字修饰标记。
字体标记和文字修饰标记包括对于字体样式的一些特殊修改。
段落格式分为段落标记、换行标记、水平分隔线标记等。
通过文本与段落格式化知识的学习，能够掌握页面内容的初步设计，理解并掌握HTML标题字标记、空格及特殊符号的使用。
理解格式化标记中的文本修饰标记、计算机输出标记、引用和术语标记的语法及字体font标记语法及使用；理解段落与排版标记的语法，学会编写简易的Web页面代码。
Web前端开发工程师应掌握以下内容：•掌握标题字（h1～h6）标记语法及属性语法。
•理解文本格式化标记类型与作用，并学会使用各种样式。
•学会使用字体font标记。
•学会使用段落与排版标记。
•学会使用各类格式化标记设计简易的Web页面。
3.1Web页面初步设计 Web页面设计需要遵循简洁、一致性、有好的对比度的设计原则。
简洁是指以满足人们的实际需求为目标，要求简练，准确。
一致性是指网站中各个页面使用相同的页边距，页面中的每个元素与整个页面以及站点的色彩和风格保持一致。
对比度的目的在于强调突出关键内容，以吸引浏览者，鼓励他们去发掘更深层次的内容。
3.1.1向Web页面添加文字信息在HTML文件中，主体内容被包含在标记之间，同时body标记也有很多自身的属性，例如设置页面背景、设置页面边界等。

1．基本语法向这里添加内容
2．语法说明body标记定义文档的主体。
body标记包含文档的所有内容（例如文本、超链接、图像、表格和列表等）。
一个简单的HTML文档必须包含最基本的必备的标记。
【例3-1-1】文档内容的应用。
代码如下所示，页面效果如图3-1所示。
1--edu_3_1_1.html--> 2doctypehtml> 3
4
5

6 简易网页
7
8
9 文档的内容...... 10 11 视频讲解
3．代码解释代码中第4～7行是HTML的头部，包含页面标题；第8～10行是HTML的主体，第9行是向主体中添加的文字信息。
3.1.2标题字标记标题字标记由h1～h6共六种标记组成。
标记中的字母h是英语Heading简称。
作为标题字，h1标记定义最大的标题字，图3-1添加文档内容h6标记定义最小的标题字。
h1标记到h6标记属于块级标记，它们必须在HTML中首尾成对出现。
浏览器会自动地在标题的前后添加空行。

1.基本语法 1号标题文字2号标题文字3号标题文字4号标题文字5号标题文字6号标题文字
2.语法说明h后面的数字越小标题字越大。
标题字标记的align属性用来定义标题字的对齐方式，对齐方式有四种，分别是left、center、right、justify。
但是一般推荐设计者使用CSS样式表来定义对齐方式。
【例3-1-2】标题字标记的应用。
代码如下所示，页面效果如图3-2所示。
1--edu_3_1_2.html--> 2doctypehtml> 3
4
5

6 标题字应用
7
8
9 Web前端开发技术 10 Web前端开发技术视频讲解 35 第3章科格式化文本与段落 Web前端开发技术——HTML5、CSS3、JavaScript（第3版） 11 Web前端开发技术 12 Web前端开发技术 13 Web前端开发技术 14 Web前端开发技术 36 15 16 图3-2标题字应用
3.代码解释代码中第9行定义h1标题字居中显示；第10行定义h2标题字左对齐，其余代码相似。
标题文字的大小由它们的重要性决定，等级越高的标题字号越大。
在设计时要对各级标题有所规划。
3.1.3添加空格与特殊符号在HTML文件中，添加空格的方式与其他文档添加空格的方式不同，网页中通过代码控制来添加空格，而在其他编辑器中通过键盘空格键来输入空格。

1.基本语法 <®×
2.语法说明在网页中添加空格使用“ ”，其中“nbsp”是指NonBreakingSpace，空格数量与“ ”个数相同。
在网页中插入特殊字符与插入空格符号的方式相同。
特殊符号如表3-1所示。
显示结果 <>&"©®×÷ 表3-1特殊字符对应的代码说明显示一个空格小于大于&符号双引号版权注册商标乘号除号符号代码 <>&"©®×÷ 在HTML文件中特殊字符对应的代码，浏览器解释后会显示对应的特殊符号。
【例3-1-3】插入特殊符号的应用。
代码如下所示，页面效果如图3-3所示。
1--edu_3_1_3.html--> 2doctypehtml> 3
4
5

6 插入特殊符号
7
8
9 新浪科技讯
北京时间11月21日凌晨消息，台湾市场研究机构DigitimesResearch周二发布报告称，预计2013年全球平板电脑销售量将会达到2.1亿台，超过笔记本的年度销售量。

10 11 版权所有©新浪公司

12 13
3.代码解释代码中第9行开始插入4个空格，用于实现首行缩进2个字符，行末插入
换行，第10行插入蓝色的水平分隔线，第11行插入版权特殊符号“©”。
视频讲解图3-3空格与特殊符号的应用 3.2格式化文本标记 HTML中提供了很多格式化文本的标记，如文字加粗、斜体、下画线、底纹、上下标等。
3.2.1文本修饰标记文本修饰标记各类浏览器均支持，各类网页开发工具中仍然有这类标记。
常见的文本修饰标记如表3-2所示。
表3-2常见的文本修饰标记标记说明 软件工程专业！ 定义粗体 软件工程专业！ 定义斜体软件工程专业！定义下画线 ~~软件工程专业！~~ 定义删除线 ^{软件工程专业！} 定义上标 _{软件工程专业！} 定义下标 软件工程专业！ 定义着重文字，与效果相同 软件工程专业！ 定义加重语气，与效果相同 37 软件工程专业！变小字号第软件工程专业！变大字号
3 章科
格式化文本与段落 Web前端开发技术——HTML5、CSS3、JavaScript（第3版）在EditPlusV4.0和AdobeDreamweaverCS6以上版本中，已经使用标记来表示强调的文本，替代斜体标记；使用标记来表示重要文本，替代粗体标记。
但标记和标记也还在使用。
383.2.2计算机输出标记常用的计算机输出标记如表3-3所示。
标记

表3-
3 常用的计算机输出标记说明定义计算机代码定义键盘码定义计算机代码样本定义打字机代码定义变量定义预格式文本 3.2.3引用和术语标记常用的引用和术语标记如表3-4所示。
表3-4标记 etc.

江苏南京市

长的引用

引用、引证引用短语定义项目常用的引用和术语标记主要用途定义缩写定义地址定义长的引用定义引用、引证定义短的引用语，IE看不到引号，其余可以定义一个定义项目【例3-2-1】文本修饰标记的应用。
代码如下所示，页面效果如图3-4所示。
视频讲解图3-4文本修饰标记应用 1--edu_3_2_1.html-->2doctypehtml>3 4 5 6文本修饰标记应用 7
8 *{text-align:center;/*所有标记的内容居中显示*/} 9 10 11 12 文本修饰标记应用 13 14 ment>修饰标记应用 15 软件工程专业全国就业最好！
16 软件工程专业全国就业最好！
17 软件工程专业全国就业最好！
18 ~~软件工程专业全国就业最好！~~
19 X²+2X+5=0
20 X₁=2
21 软件工程专业全国就业最好！
22 软件工程专业全国就业最好！
23 软件工程！ 24 软件工程！ 25
26 上述代码中第12行是标题字标记的应用；第14行注释标记应用；第15～24行定义不同的文本修饰标记。
计算机输出标记和引用和术语标记在3.3节中另行举例，此处省略。
3.2.4字体font标记在不指定任何样式的情况下，IE浏览器会把字体显示为3号、黑色、宋体。
因此设计网页时，根据需要更改不同段落的字体。
HTML5中可以使用CSS中的字体属性替代。
font标记规定文本的字体系列、字体尺寸、字体颜色，所有浏览器均支持font标记。

1．基本语法 …
2.属性说明font标记的属性、值及其说明如表3-5所示。
属性sizecolorface 表3-5font标记的属性、值及其说明值说明 +1～+7，1～
7，−1～−
7 正数字越大字号越大，负数字越大字号越小。
“+”表示字号比原来的字号大一些，“−”表示字号比原来的字号小一些 rgb（r,g,b）rgb（r%,g%,b%）规定文本的颜色。
可以使用rgb函数、十六进制数、颜色 #rrggbb或#rgb 英文名称来表达 colorname 39 face属性可以有多个值，用逗号分隔。
字体使用方式为从第字体
1，字体
2，…，字体n左向右依次选用。
如果前面的字体不存在，则使用后一个字体。
若都不存在，则默认使用“宋体”
3 章科格式化文本与段落 Web前端开发技术——HTML5、CSS3、JavaScript（第3版）【例3-2-2】网页字体样式的应用。
代码如下所示，页面效果如图3-5所示。
1--edu_3_2_2.html--> 2doctypehtml> 40 3 4 5 视频讲解
6 文字样式
7
8
9 文字样式为黑体、颜色#000fff、大小从-1～-7: 10 face="黑体"size="-1"color="#000fff">-1字 11 -3字 12 -5字 13 -7字
14 文字样式为宋体、颜色#ff0066、大小从1～7: 15 2字 16 4字 17 6字
18 文字样式为隶书、颜色#ff0066、大小从+1～+7： 19 1字 20 3字 21 5字 22 7字 23 24 图3-5字体标记属性应用
3.代码解释代码中第10～13行设置字体为“黑体、颜色为#000fff、大小从−1～−7”；第15～17行设置字体为“宋体、颜色为#ff0066、大小从1～7”；第19～22行设置字体为“黑体、颜色为#ff0066、大小为+1～+7”。
3.3段落与排版标记网页的外观是否美观，很大程度上取决于其排版。
在页面中出现大段的文字，通常采用分段进行规划，对换行也有极其严格的划分。
本节从段落的细节设置入手，利用段落与排版标记自如地处理大段的文字。
3.3.1段落p标记在HTML文档中，合理使用段落会使文字的显示更加美观，表达更加清晰。
段落p标记用来开始一个段落，它是一个块级标记，该标记中不能再包含其他的任何块级标记。

1.基本语法段落正文内容

p标记会自动在其前后创建一些空白。
浏览器会自动添加这些空间。
段落p标记的align属性有四个属性值，分别表示左对齐、居中对齐、右对齐、两端对齐。
【例3-3-1】网页段落样式的应用。
代码如下所示，页面效果如图3-6所示。
视频讲解图3-6段落样式应用 1--edu_3_3_1.html--> 2doctypehtml> 3
4
5

6 段落样式应用
7
8
9 段落p标记对齐方式 10 11 网页的外观是否美观，很大程度上取决于其排版。

12 网页的外观是否美观，很大程度上取决于其排版。

13 网页的外观是否美观，很大程度上取决于其排版。

14 15
2．代码解释代码中第4～7行是HTML的头部，包含页面标题；第8～14行是HTML的主体，包含多种段落样式，其中第11行为左对齐，第12行为居中对齐，第13行为右对齐格式。
3.3.2换行br标记在HTML文件中，插入换行标记
的作用和普通文档插入回车的作用一样，都表示强制性换行。
基本语法
或
在HTML文档中，换行br标记属于单标志，表示插入换行符。
41 3.3.3水平分隔线hr标记第水平分隔线标记用一条线将页面区域按照功能用途进行分隔。
hr标记是单个标记。

3 章科格式化文本与段落 Web前端开发技术——HTML5、CSS3、JavaScript（第3版）
1．基本语法 42 水平分隔线hr标记的属性、值及其说明如表3-6所示。
属性widthsizecoloralign 表3-6

标记的属性、值及其说明值像素（px）或百分比整数，单位pxrgb函数、十六进制数，颜色英文名称 left|center|right 说明设置水平线宽度设置水平线高度设置水平线颜色设置水平线对齐方式【例3-3-2】换行与水平分隔线标记的应用。
代码如下所示，页面效果如图3-7所示。
视频讲解图3-7插入水平分隔线 1--edu_3_3_2.html--> 2doctypehtml> 3
4
5

6 换行与水平分隔线标记的应用
7
8
9

换行与水平分隔线标记的应用

大小为
3、宽度为60%、居中

11 size="3"width="60%"color="#330099"noshade> 12 宽度为600px、大小为
5、绿色、居右对齐

13 14 15
2.代码解释代码中第11行插入1条“大小为
3、宽度为60%、居中”的水平分隔线；第13行插入1条“宽度为600px、大小为
5、居右对齐”的水平分隔线。
3.3.4拼音/音标注释ruby标记和rt/rp标记 ruby标记定义ruby注释（中文注音或字符）。
ruby标记与rt标记一同使用。
ruby标记由一个或多个字符（需要一个解释/发音）和一个提供该信息的rt标记组成，还包括可选的rp标记，定义当浏览器不支持ruby标记时显示的内容。
效果如图3-8所示。
ruby标记用它将需要注释或注音标的文字内容包围住。
rt标记这里面放置音标或注释，这个标记要跟在需要注释的文本后边。
rp标记是防备那些不支持ruby标记的浏览器，主要用来放置括号。
对于支持这个标记的浏览器，rp标记的CSS样式是{display:none;}，也就是不可见。
基本语法中(zhong)国(guo) 图3-8ruby标记的应用 3.3.5段落缩进blockquote标记段落缩进blockquote标记是块级标记，常称为块引用标记。
该标记引用的内容能够向右缩进5个英文字符的位置，并在其内容的周围增加外边距。

1.基本语法

引用的内容

【例3-3-3】拼音/音标注释标记与块引用标记的应用。
代码如下所示，页面效果如图3-9所示。
1--edu_3_3_3.html--> 2doctypehtml> 3 45 视频讲解
6 注释与块引用标记的应用
7
8 ruby{font-size:58px;font-family:黑体;text-align:center;}
9 10 11 12

注释ruby标记-标注读音

13 align="center"> 14 智(zhì) 15 慧(huì) 16 地(dì) 17 球(qiú) 18

段落缩进标记的应用

20 color="green"> 21

这行文字没有缩进

这行文字行首缩进5个字符位置

43 23

这行文字行首缩进10个字符位置

第 24
3 25
章科格式化文本与段落 Web前端开发技术——HTML5、CSS3、JavaScript（第3版） 44 图3-9设置段落缩进
2.代码解释代码中第13～18行设置ruby标记标注汉语拼音。
第21行，此行文字没有设置块引用，所以没有缩进；第22行设置块引用，所以此行文字行首缩进5个字符位置；第23行嵌套使用2个块引用标记，此行行首向右缩进10个字符的位置。
3.3.6预格式化pre标记在HTML中利用成对的

标记对网页中的文字段落进行预格式化，浏览器会完整保留设计者在源文件中所定义的格式，包括各种空格、缩进以及其他特殊格式。

1.基本语法

预格式化文本

【例3-3-4】预格式化的应用。
代码如下所示，页面效果如图3-10所示。
1--edu_3_3_4.html--> 2doctypehtml> 3
4
5

6 预格式化
7
8
9


10

春晓

11

12

孟浩然

13

春眠不觉晓，

14

处处闻啼鸟。


15

夜来风雨声，

16

花落知多少。


17

18 19
视频讲解图3-10预格式化
2.代码解释代码中第4～7行是HTML的头部，包含元信息、页面标题；第8～18行是HTML的主体，其中第9～17行对文字段落进行预格式化。
3.4综合实例视频讲解以“教育信息化‘十三五’规划报告”为主题，参照给定的HTML代码，完成Web网页的设计，页面效果如图3-11所示。
图3-11教育信息化“十三五”规划报告页面 1--edu_3_4_1.html--> 2doctypehtml> 3
4
5

6 教育信息化"十三五"规划报告
7
8
9 2016-2021年教育信息化行业深度分析及“十三五”发展规划指导报告 10 11


12

细分报告：教育信息化市场研究报告教育信息化市场调查报告教育信息

化前景预测报告

13

教育信息化市场分析报告教育信息化市场评估报告教

育信息化重点企业报告

14

教育信息化发展前景报告教育信息化投资规划报告

教育信息化深度研究报告

15

教育信息化投资前景报告教育信息化项目调研报告

16

17 45 1198<>&报nb告sp导;读&n 本报告从国际教育信息化发展、国内教育信息化第政策环境及发展、研发动态、进出口情况、重点生产企业、存在的问题及对策等多方面
3 章科格式化文本与段落 Web前端开发技术——HTML5、CSS3、JavaScript（第3版）多角度阐述了教育信息化市场的发展，并在此基础上对教育信息化的发展前景做出了科学的预测，最后对教育信息化投资潜力进行了分析。
20
郑重声明
21
本报告由中国报告大厅出版发行，报告著作权归宇博智业所有。
46 本报告是宇博智业的研究与统计成果，有偿提供给购买报告的客户使用。
未获得宇博智业书面授权，任何网站或媒体不得转载或引用，否则宇博智业有权依法追究其法律责任。
如需订阅研究报告，请直接联系本网站，以便获得全程优质完善服务。

22 width="100%"size="1"color="#000fff"> 23 Copyright©中国报告大厅京ICP备11010674号-
2 京公网安备11010502024380
24 25 上述代码中第4～7行是HTML的头部；第8～24行是HTML的主体，其中第10行、第17行定义2条水平分隔线；第11～16行应用预格式化标记；第18行和第20行应用标题字h4标记；第19行和第21行定义2个段落，分别应用空格和段落缩进标记；第23行应用段落居中和特殊符号。
本章小结本章主要介绍了格式化文字与段落的各种标记，包括标题字标记、字体标记、文本修饰标记以及段落相关的标记。
～
是标题字标记，通过align属性设置标题字的对齐方式。
空格与特殊字符都需要通过代码控制来添加。
字体标记主要通过font标记的属性改变字体、颜色、大小。
文本修饰标记主要是对文本进行一些特殊的修饰。
段落与排版标记会使网页文字显得更加清晰，介绍了段落p标记、换行br标记、水平分隔线hr标记、注释ruby标记、段落缩进blockquote标记的使用方法。
在网页设计中，对网页的文字进行必要的布局并添加页面效果，从而使网页更加美观和丰富，要合理地使用本节介绍到的各种文字和段落标记。
练习与实验练习
3 1.选择题
（1）下列不是字体标记的属性的是（）。
（A）align （B）size （C）color
（2）关于标题字标记对齐方式，标记属性取值不正确的是（（A）居中对齐：…
（B）居右对齐：… （C）居左对齐：… （D）两端对齐：…
（3）下列选项中表示字体标记的是（）。
（D）face）。
（A）（B）（C）
（D）

（4）下列选项中表示段落标记的是（）。
（A）<／html> （B）（C）
（D）
<／pre>
（5）在HTML中，
<／h3>是（）标记。
（A）标题字（B）预格式化（C）换行（D）随意显示信息
（6）下列标记中，设置页面标题的标记是（）。
（A）（B）（C）（D）
（7）下列标记中表示单个标记的是（）。
（A）body标记（B）br标记（C）html标记（D）title标记
（8）标记是放在（）标记内。
（A）
（B）（C）（D）
（9）下列选项中表示版权符号的是（）。
（A）< （B）> （C）®（D）© （10）HTML中
的作用是（）。
（A）插入一条水平分隔线（B）换行（C）插入一个空格（D）加粗字体
2.填空题
（1）HTML网页文件的主体标记是______，设置页面标题的标记是______。

（2）一个HTML文档的开始标记是______；结束标记是______。

（3）设置文档标题以及其他不在Web网页上显示的信息的开始标记是______；结束标记是______。

（4）网页中可显示的信息是包含在以______为开始标记，以______为结束标记之间。

（5）网页标题会显示在浏览器的标题栏中，则网页标题可使用______标记来定义。

（6）与标记功能相同的标记是________；与标记功能相同的标记是 _________。
（7
）_________标记是由一个或多个需要解释/发音的字符和一个提供该信息的 ________标记组成，还包括可选的____________标记，定义当浏览器不支持ruby标记时显示的内容。

3．简答题
（1）简述格式化文本标记分几类，并举例说明。

（2）简述有哪些段落与排版标记及其作用。
实验
3 47
1.编写代码实现如图3-12所示的页面效果。
设计要求：页面上方水平分隔线粗细为第 1px、颜色为#000fff，页面下方水平分隔线粗细为1px、颜色为#00ffff。

3 章科格式化文本与段落 Web前端开发技术——HTML5、CSS3、JavaScript（第3版） 48 图3-12自荐信页面
2.按如下要求设计Web页面，如图3-13所示。
要求如下：（1）3号标题字设置标题“数学方程式”，样式采用style标记定义，格式为字体大小24px、颜色红色、文本居中对齐；
（2）一条宽度为80%、大小为2px、颜色为蓝色的水平线；
（3）方程式1：2x2+3x=9;
（4）方程式2：x1+x2=10;
（5）在头部插入样式标记，定义如下： h3{font-size:24px;color:red;text-align:center;} 图3-13标题字标记及文本标记的应用

本文地址：https://www.apjn.cn/w/1239/9995.html

声明：该资讯来自于互联网网友发布，如有侵犯您的权益请联系我们。

标签： #刷机 #cf #边框 #蓝屏 #测试 #英语 #排位 #战绩

第3章格式化文本与段落,web前端设计怎么学

换行与水平分隔线标记的应用

注释ruby标记-标注读音

段落缩进标记的应用

10 春晓 11 12 孟浩然 13 春眠不觉晓， 14 处处闻啼鸟。 15 夜来风雨声， 16 花落知多少。 17

郑重声明

～

如何进行web前端开发，web前端开发怎么做网页

如何进行web前端开发，web前端开发工作流程

如何开发web前端开发web前端开发需要学习什么？需要哪些开发工具

10 春晓 11 12 孟浩然 13 春眠不觉晓， 14 处处闻啼鸟。
15 夜来风雨声， 16 花落知多少。
17