《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块3 文本与段落.pptx

模块三文本与段落

目录任务一任务二任务三文字的基本排版对文字进行加强描述使用块级元素和行内元素制作专业信息页面任务四任务五特殊符号的使用添加注释

引入知识点任务1文字的基本排版3.2换行3.3预格式化3.4水平线3.5各级标题3.1段落

3.1段落在将页面中的文字标记为段落时，通常会使用p…/p对文字进行标记，浏览器会自动地在段落的前后添加空行。并且这个标记必须要成对出现，在段落开始处添加p，结束处添加/p。例如：任务1文字的基本排版p这是一个段落/p

3.2换行任务1文字的基本排版在对HTML文档进行编辑时，回车键是不能实现换行功能的，若要实现换行，则需要使用br/标记，在需要换行的位置添加br/即可。一个br/标记表示换一行，要实现换多行需要使用多个br/。虽然两个br/标记效果上和p标记类似，但是从文档结构上分析还是有所不同的，换行标记不能视为描述文档结构的行为，若要实现段落，还应使用p标记。例如，对一段文字强制换行的代码如下：p截止到2023年12月，图书馆馆藏图书总量达155.28万册，其中纸质图书120.38万册，电子图书34.90万册；中外文报刊4433种，其中纸质报刊111种，电子报刊4322种。br/随着学院规模的发展，根据《普通高等学校基本办学条件指标(试行)》中规定的生均图书册数的相关指标要求，我们将继续逐步分阶段地进行馆藏资源建设。同时图书馆正着手建设各种数据库资源，并探求馆际合作，为学院教学以及科研提供良好的信息资源保障。/p

3.3预格式化任务1文字的基本排版在对HTML文档进行编辑时，有时会希望一些文本在浏览器中显示的效果就是在HTML文档中编辑的格式，这个时候我们可以使用pre来进行标记，这个标记也是成对出现的pre/pre，被这对标签括起来的文本通常会保留其空格及一些换行等格式。我们以一段文字为例，具体使用方法如下：pre9月7日—8日，广东创新科技职业学院迎来了近7000名2023级高职新生，录取报到人数再创新高（因受天气影响，报到将延续至9月11日）。同学们从五湖四海如约而至，在青春洋溢的创新学院开启崭新的人生篇章和探索之旅。为了顺利保障2023级新生平安入学、有序报到，做到让学生满意，家长放心，学校专门成立迎新工作专项领导小组，多次召开专项工作会议，制定《2023年新生工作方案》，针对迎新工作统筹规划、统一部署，各职能部门和二级学院迅速响应、分工协作，用实际行动做好各项准备工作和应急预案迎接新生入校。/pre

3.4水平线任务1文字的基本排版在浏览网页时会经常看到用水平线来分割文字类别或内容，在编辑HTML文档时我们可以使用hr来标记出一条横线，它和br一样是一个空标记。我们以信工学院简介的样式为例来看一下横线标记的用法：pre信息工程学院简介/prehr/pre广东创新科技职业学院信息工程学院经过十二年的发展，现有在校学生近4050名，已开设计算机应用技术（省级重点专业）、通信技术、计算机网络技术(华为信息与网络技术学院)、软件技术、电子信息工程技术、动漫制作技术、物联网应用技术、大数据技术、云计算技术应用、人工智能技术应用、应急救援技术、安全智能监测技术、信息安全技术应用（筹）等13个专业。2021年由计算机应用技术牵头，联合计算机网络技术、软件技术、物联网应用技术、大数据技术等专业，申报省高职院校高水平专业群，获教育厅立项。/pre

3.5各级标题任务1文字的基本排版在使用Word软件编辑文档时，经常会使用标题样式直接创建不同样式的标题。在一段文字中，最基本的文本结构通常会分为不同等级的标题和正文，利用不同等级的标题使文字的结构更加清晰。HTML文档中包含6级标题，分别用h1~h6来标记，数字越大，字号越小，即h1标记字号最大的标题，h6标记字号最小的标题。设置这几个级别的标题的代码如下：h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6

具体任务任务1文字的基本排版（1）创建一个HTML5页面，为文档各个标题添加不同级别的标题标记；（2）添加水平线分隔题目和主体内容；（3）使内容保留文档原有格式。

任务实现任务1文字的基本排版（1）在HBuilderX中创建一个空白HTML5页面，保存为test.html，文档中包含head、body等基本的HTML结构。代码如下：!doctypehtmlhtmlheadmetacharset=utf-8/title文字基本样式设计/title/headbody/body/html

任务实现任务1文字的基本排版（2）在body标记中，使用标题标记h1将标题名设置为一级标题，并利用h3将作者名