网站大量收购独家精品文档,联系QQ:2885784924

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

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

  1. 1、本文档共60页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 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以

文档评论(0)

酱酱 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档