- 1、本文档共60页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
模块3文本排版标签;
3.1标题标签
;
【例3-1】标题标签详解。
;
标题标签在浏览器中的显示效果如图3-1所示。
;
3.2段落标签
;
;
段落标签在浏览器中的显示效果如图3-2所示。
;
从图3-2中可以看到,首先段落标签会自动换行,其次段落与段落之间有一定的空白,这都是由p元素的默认样式定义的。如何自定义p元素的样式,如何更改默认空白的
大小等,将在后续的CSS模块中详细介绍。
;
3.3水平线标签
;
【例3-3】在页面中定义水平线。
;
;
3.4列表标签
;
3.4.1?有序列表
有序列表从ol开始,到/ol结束,每个列表项用li标签定义。
【例3-4】在页面中定义有序列表。
;
;
有序列表在浏览器中的显示效果如图3-4所示。;
有序列表的列表项默认是采用数字进行标记的。我们可以通过有序列表的type属性值来改变列表项的符号。有序列表的type属性值如表3-1所示。
;
【例3-5】在页面中自定义有序列表的type属性。
;
有序列表在浏览器中的显示效果如图3-5所示。
;
3.4.2?无序列表
【例3-6】在页面中定义无序列表。;
无序列表在浏览器中的显示效果如图3-6所示。
;
一般情况下,ul和ol一样,ul里面也只能嵌套li标签。无序列表的列表项默认是采用●进行标记的。我们可以通过无序列表的type属性来改变列表项符号。无序列表的type属性值如表3-2所示。
;
【例3-7】在页面中自定义无序列表的type属性。
;
无序列表在浏览器中的显示效果如图3-7所示。
;
3.4.3?定义列表
【例3-8】定义列表的应用。;
定义列表在浏览器中的显示效果如图3-8所示。
;
这三种列表中,最常用的是无序列表,无序列表type属性实现的效果也可以用CSS的list-style-type属性来实现。我们现在可以先练习使用type属性,在学习了CSS相关内
容之后,??可以改用CSS控制样式。;
3.5网页特殊符号
;
;
【例3-9】在段落p元素中定义空格。
;
定义空格在浏览器中的显示效果如图3-9所示。
;
3.6文本格式化标签
;
【例3-10】文本加粗。
;
文本加粗在浏览器中的预览效果如图3-10所示。
;
3.6.2?斜体标签i、cite、em
在HTML中实现文本斜体,可以使用以下三个标签。
(1)i/i;
(2)cite/cite;
(3)em/em。
;
【例3-11】文本斜体。;
文本斜体在浏览器中的预览效果如图3-11所示。
;
3.6.3?上标标签sup
【例3-12】上标标签。;
文本上标在浏览器中的预览效果如图3-12所示。
;
3.6.4?下标标签sub
【例3-13】下标标签。
;
文本下标在浏览器中的预览效果如图3-13所示。
;
3.6.5?删除线标签del
【例3-14】删除线标签。
;
文本删除在浏览器中的预览效果如图3-14所示。
;
3.6.6?下划线标签ins
【例3-15】下划线标签。
;
文本下划线在浏览器中的预览效果如图3-15所示。
;
3.7块元素和行内元素
;
1.块元素
在HTML中,独占一行的元素叫块元素,块元素在默认显示状态下将占据浏览器的一行。块元素可以看作一个矩形盒子,它可以容纳行内元素和其他的块元素。
常见的入门块元素包括div块元素、h1~h6标题元素、p段落元素、hr分割线元素、ol有序表元素、ul无序表元素。;
2.行内元素
在HTML中,可以与其他元素位于同一行的元素叫行内元素,行内元素默认显示状态也是由它的默认宽度定义的。相比于块元素,行内元素也可以看作一个小盒子,可以与
其他行内元素共存于同一行,但是不能容纳块元素。
常见的入门行内元素包括span行内元素、strong加粗强调元素、em斜体强调元素、del删除元素、ins下划线元素、a超链接元素、img图片元素、input表单元素。
;
3.8案例:综合应用文本排版标签
;
【案例源代码】
;
;
;
;
;
;
;
【运行结果】
案例运行结果如图3-16所示。
;
【案例分析】
这个案例的HTML页面设计中,运用了h1/h1、h2/h2以
您可能关注的文档
- 《电机学》课件_2.8 直流电动机的运行特性.ppt
- 《电动汽车高压安全及防护》课件_第6章.pptx
- 《电动汽车高压安全及防护》课件_第3章.pptx
- 《机电一体化技术》课件_第二章 机电一体化系统模型.pptx
- 《PCB设计与制作》课件_项目7 单面和双面PCB的制作.pptx
- 《电动汽车高压安全及防护》课件_第8章.pptx
- 《机电一体化技术》课件_第四章 4.2 机电一体化系统中常用的传感器.pptx
- 《PCB设计与制作》课件_项目3 呼吸灯单面混装PCB设计.pptx
- 《电动汽车高压安全及防护》课件_第4章.pptx
- 《光纤通信》课件_第1章:绪论.pptx
- 2025年继电保护员技能竞赛备赛试题库-下(判断、简答题汇总).pdf
- 2025年金属非金属矿山支护作业理论考试题库(浓缩500题).pdf
- 公共教学实验楼高大模板安全专项施工 投标方案(技术方案).pdf
- 学院办公家具采购 投标方案(技术方案).pdf
- 慢性心力衰竭的中西医结合诊疗方案.pdf
- 2025届人教版(2019)高考英语一轮话题复习高考题型通关练:话题15 影视、音乐等领域的概况及其发展(学生版).pdf
- 2025届人教版(2019)高考英语一轮话题复习高考题型通关练:话题17 小说、戏剧、诗歌、传记、文学简史、经典演讲、文学名著等(学生版).pdf
- 新 22R2城镇天然气输配工程设计与施工.pptx
- 新22R2城镇天然气输配工程设计与施工.pptx
- 2024年青年调查报告.docx
文档评论(0)