《HTML5+CSS3网页制作教程》课件_第3章.pptx

模块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以