网页的设计制作2章ppt课件

1、第第 2 章章 HTML根底与文字版面设计根底与文字版面设计 本章知识技艺要点：本章知识技艺要点：HTML的根本构造组成简单页面的编排在HTML中颜色的运用掌握文字版面编辑的根本要领以及,和标签的根本用法熟练掌握利用标签设置各种字体款式的方法掌握各类列表的编排方法2.1 HTML根底根底2.1.1 HTML概述2. HTML2. HTML的历史的历史HTML 3.22019HTML 3.22019年年1 1月月1414日，日，W3CW3C引荐规引荐规范范 HTML 4.02019HTML 4.02019年年1212月月1818日，日，W3CW3C引荐引荐规范规范 HTML 4.01HTML 4

2、.01微小改良微小改良20192019年年1212月月2424日，日，W3CW3C引荐规范引荐规范 XHTML 1.0XHTML 1.0发布于发布于20002000年年1 1月月2626日，是日，是W3CW3C引荐规范，后来经过修订于引荐规范，后来经过修订于20192019年年8 8月月1 1日重新发布。日重新发布。 可以说是可以说是HTML4.01HTML4.01的修正版的修正版XHTML XHTML 是什么？是什么？ XHTML XHTML 指可扩展超文本标签言语指可扩展超文本标签言语EXtensible HyperText Markup EXtensible HyperText Mark

3、up LanguageLanguage。 XHTML XHTML 的目的是取代的目的是取代 HTML HTML。 XHTML XHTML 与与 HTML 4.01 HTML 4.01 几乎是一样的。几乎是一样的。 XHTML XHTML 是更严厉更纯真的是更严厉更纯真的 HTML HTML 版本。版本。XHTMLXHTML是一种加强了的是一种加强了的HTML,HTML,它的可扩它的可扩展性和灵敏性将顺应未来网络运用更展性和灵敏性将顺应未来网络运用更多的需求。目前通常说的多的需求。目前通常说的webweb规范普通规范普通指网站建立采用基于指网站建立采用基于XHTMLXHTML语语最主要的不同：最

4、主要的不同：XHTML XHTML 元素必需被正确地嵌套。元素必需被正确地嵌套。 XHTML XHTML 元素必需被封锁。元素必需被封锁。 标签名必需用小写字母。标签名必需用小写字母。 XHTML XHTML 文档必需拥有根元素。文档必需拥有根元素。n在在HTML中每个用来作标签的符号都是一条命中每个用来作标签的符号都是一条命令，它通知阅读器如何显示文本。这些标签均令，它通知阅读器如何显示文本。这些标签均由由“符号以及一个字符串组成。而符号以及一个字符串组成。而阅读器的功能是对这些标签进展解释，显示出阅读器的功能是对这些标签进展解释，显示出文字、图像、动画、播放声音。文字、图像、动画、播放声音

5、。nHTML的标签由首标签的标签由首标签 和尾标签和尾标签组成的组成的2.1 HTML根底根底2.1.4 HTML的根本构造2.1 HTML根底根底超文本文档分文档头和文档体两部分，在文档头里，对这个文档进展了一些必要超文本文档分文档头和文档体两部分，在文档头里，对这个文档进展了一些必要的定义，文档体中才是要显示的各种文档信息。的定义，文档体中才是要显示的各种文档信息。头头 部部 信信 息息文文 档档 主主 体，体， 正正 文文 部部 分分n例例2-1：以下是一个超文本文档的源代码：以下是一个超文本文档的源代码nn n 我的第一个网页我的第一个网页n n n n 学习学习HTML网页制造网页制

6、造n n n n HTML英语是：英语是：Hypertext Marked Language，即超文本标签，即超文本标签言语。言语。n n n n2.1 HTML根底根底图2-1 例2-1的运转效果2.2 页面的整体编排页面的整体编排2.2.1 页面的头标签页面的头标签和构成HTML文档的开头部分。头部信息用以阐明文件的标题和整个文件的一些公用属性。标题标签 决议了显示在页面标题栏中的文字。运用过阅读器的人能够都会留意到阅读器窗口最上边蓝色部分显示的文本信息。页面内容的格式该网页的编码言语2.2.3 主体标签主体标签标签是标签是HTML文档的主体文档的主体部分，其中放置的是页面中一切的内容，如

7、部分，其中放置的是页面中一切的内容，如图片、文字、表格、表单、超链接等设置。图片、文字、表格、表单、超链接等设置。在此标签对之间可包含在此标签对之间可包含、等等众多等等众多的标签，它们所定义的文本、图像等将会在的标签，它们所定义的文本、图像等将会在阅读器的框内显示出来。阅读器的框内显示出来。标签有本人的属性，设置标签有本人的属性，设置 标标签内的属性，可控制整个页面的显示方式。签内的属性，可控制整个页面的显示方式。2.2 页面的整体编排页面的整体编排表表2-1 标签的主要属性标签的主要属性 2.2 页面的整体编排页面的整体编排n仔细阅读下面一个例子，便可以了解以上各个标志对在一个HTML文档中

8、的规划或所运用的位置。n例2-2：nnn显示在阅读器最标题栏中的文本nnn红色背景、蓝色文字nn2.2 页面的整体编排页面的整体编排n2.4.1 标题标签标题标签n 普通文章都有标题、副标题、章和节等普通文章都有标题、副标题、章和节等构造，构造，HTML中也提供了相应的标题标签中也提供了相应的标题标签,标签用于设置网页中的标题文标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显字，被设置的文字将以黑体或粗体的方式显示在网页中。其中示在网页中。其中n为标题的等级。为标题的等级。HTML总总共提供六个等级的标题，共提供六个等级的标题，n越小，标题字号越小，标题字号就越大。就越大。2.

9、4 文字版面的编辑文字版面的编辑 2.4.1 标题标签标题标签格式：格式：hn align=参数标题内容参数标题内容阐明：在阐明：在.之间的文字之间的文字就是第一级标题，是最大最粗的标就是第一级标题，是最大最粗的标题；题；.之间的文字是之间的文字是最后一级，是最小最细的标题文字。最后一级，是最小最细的标题文字。align属性用于设置标题的对齐方式，属性用于设置标题的对齐方式，其参数为其参数为 left靠左对齐，靠左对齐，enter居中对齐居中对齐)，right (靠右对齐。靠右对齐。2.4 文字版面的编辑文字版面的编辑 n例2-3：nnn设定各级标题nnn这是一行普通文字n一级标题文字n二级标

10、题文字n三级标题文字n四级标题文字n靠右对齐的五级标题文字n靠左对齐的六级标题文字nn 2.4 文字版面的编辑文字版面的编辑 图2-2 例2-3的运转效果2.4.2 段落标签段落标签标签对是用来创建一个段落。标签对是用来创建一个段落。段落的开场由段落的开场由来标签，段落的终了来标签，段落的终了由由来标签。来标签。标签还有一个属性标签还有一个属性align，它用来指，它用来指名对象显示时的对齐方式，普通值有名对象显示时的对齐方式，普通值有center、left、right三种。这三个参数三种。这三个参数设置段落文字的左设置段落文字的左,中中,右位置的对齐方式。右位置的对齐方式。 2.4 文字版面

11、的编辑文字版面的编辑 例2-4:测试分段控制标签花儿什么也没有。它们只需凋谢在风中的细微、凄楚而又无法的吟怨，就像那遭到了致命损伤的秋雁，悲痛无助地发出一声声垂死的鸣叫。或许，这便是花儿那短暂终身最凄凉、最伤感的归宿。而美丽苦短的花期却是那最后悲伤的秋风挽歌中的瞬间插曲。2.4 文字版面的编辑文字版面的编辑 2.4.3 换行标签换行标签需求断行的地方，应加上需求断行的地方，应加上标签。标签。2.4 文字版面的编辑文字版面的编辑 2.4.4 程度线段标签程度线段标签这个标签可以在屏幕上显示一条程度线，这个标签可以在屏幕上显示一条程度线，用以分割页面中的不同部分，使文档构用以分割页面中的不同部分，

12、使文档构造明晰明朗，使文字的编排更整齐。经造明晰明朗，使文字的编排更整齐。经过设置过设置标签的属性值，可以控制程标签的属性值，可以控制程度分隔线的款式。度分隔线的款式。的属性见表的属性见表2-3：2.4 文字版面的编辑文字版面的编辑 例例2-7：程度线的设定程度线的设定以下是第一条线段，运用默许的属性来显示以下是第一条线段，运用默许的属性来显示 以下是第二条线段，设置了粗细以下是第二条线段，设置了粗细=5 颜色为红色的程度线颜色为红色的程度线 以下是第三条线段，设置了程度线宽度以下是第三条线段，设置了程度线宽度width=50%(百分比如百分比如式式) 以下是第四条线段，设置了程度线对齐方式以

13、下是第四条线段，设置了程度线对齐方式align=left(向左对齐向左对齐) 2.4 文字版面的编辑文字版面的编辑 2.4 文字版面的编辑文字版面的编辑 例例2-7的运转效果的运转效果 2.4.7 注释标签注释标签 在在HTML文档中可以参与相关的注释标签，便于文档中可以参与相关的注释标签，便于查找和记忆有关的文件内容和标识查找和记忆有关的文件内容和标识2.4 文字版面的编辑文字版面的编辑 2.4.8 文字格式控制标签文字格式控制标签可以对网页中文字的字可以对网页中文字的字体、大小、颜色进展随意地改动体、大小、颜色进展随意地改动2.4 文字版面的编辑文字版面的编辑 3例例2-11：文字的属性设

14、置文字的属性设置设置文字的字体、颜色、大小设置文字的字体、颜色、大小欢迎光临我的网站字号欢迎光临我的网站字号size=5欢迎光欢迎光临我的网站字号临我的网站字号size=3欢迎欢迎光临我的网站字号光临我的网站字号size=+2 2.4 文字版面的编辑 2.4 文字版面的编辑 例例2-11的运转效果的运转效果 2.4 文字版面的编辑 例2-13：特殊字符<赋得古原草送别>离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。白居易 ©2.4 文字版面的编辑文字版面的编辑 n在在HTML页面中，运用列表标签可以起到编排提纲和格式排序页面中，运用列表标签可以起

15、到编排提纲和格式排序文件的作用。对于强化文档的条理性有很大的协助。文件的作用。对于强化文档的条理性有很大的协助。nHTML有三种列表方式：无序列表有三种列表方式：无序列表(ul)；有序列表；有序列表(ol)；定义；定义列表列表(dl)。n无序列表就是工程各条列间并无顺序关系，纯粹只是利用条列无序列表就是工程各条列间并无顺序关系，纯粹只是利用条列来呈现资料而已，此种无序标签，在各条列前面均有一符号以来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔；而有序条列就是指各条列之间是有顺序的，比如从示区隔；而有序条列就是指各条列之间是有顺序的，比如从1、2、3不断延伸下去；定义列表那么用于对

16、一系列给定的术语不断延伸下去；定义列表那么用于对一系列给定的术语给出解释和阐明。表给出解释和阐明。表2-7给出了创建列表时经常用到的主要标给出了创建列表时经常用到的主要标签。签。2.5.1无序列表无序列表无序列表运用无序列表运用标签，每一个列表项前运标签，每一个列表项前运用用标签。无序列表不用数字标志每个列表项，标签。无序列表不用数字标志每个列表项，而采用一个符号来标志每个列表项，比如圆黑点。而采用一个符号来标志每个列表项，比如圆黑点。在在和和中可运用属性中可运用属性type。type有三个取值：有三个取值：type=disc表示运用实心园作为列表的符号此为表示运用实心园作为列表的符号此为ty

17、pe的默许值的默许值type=circle表示运用空心园作为列表的符号表示运用空心园作为列表的符号type=square表示运用小方块作为列表的符号表示运用小方块作为列表的符号无序列表的根本格式如下无序列表的根本格式如下:第一项第一项第二项第二项第第N项项例例2-14：这是一个默许的无序列表：这是一个默许的无序列表：国际互联网提供的效力有：国际互联网提供的效力有：WWW效力效力文件传输效力文件传输效力电子邮件效力电子邮件效力运用空心园作为列表符号的列表运用空心园作为列表符号的列表国际互联网提供的效力有：国际互联网提供的效力有：WWW效力效力文件传输效力文件传输效力电子邮件效力电子邮件效力运用各

18、种符号作为列表符号的列表运用各种符号作为列表符号的列表国际互联网提供的效力有：国际互联网提供的效力有：WWW效力效力文件传输效力文件传输效力电子邮件效力电子邮件效力例例2-14运转效果运转效果 2.5.2 有序列表有序列表顺序编号的设置是由顺序编号的设置是由的两个属性的两个属性type和和start来完成的。来完成的。type=用于编号的数字用于编号的数字,字母字母等的类型，如等的类型，如type=a，那么编号用小写英文，那么编号用小写英文字母排序。字母排序。start=编号开场的数字，如编号开场的数字，如start=2那么编号从那么编号从2开场。开场。也可以在也可以在标签中设定标签中设定va

19、luen改动列表改动列表行工程的特定编号，例如行工程的特定编号，例如，那么表示该列表项的序号为那么表示该列表项的序号为7。原始代码原始代码显示结果显示结果 靓仔靓仔 靓女靓女 靓世界靓世界 靓仔靓仔 靓女靓女 10.靓世靓世标签的根本格式如下：标签的根本格式如下：第第1项项第第2项项第第3项项例例2-15：有序列表有序列表默许的有序列表默许的有序列表国际互联网提供的效力有：国际互联网提供的效力有：www效力效力文件传输效力文件传输效力电子邮件效力电子邮件效力用小写英文字母标志序号，序号从用小写英文字母标志序号，序号从c起始起始国际互联网提供的效力有：国际互联网提供的效力有： www效力效力 文

20、件传输效力文件传输效力 电子邮件效力电子邮件效力 远程登录效力远程登录效力用大写罗马字母标志序号，用大写罗马字母标志序号，其中改动了序号的列表其中改动了序号的列表 国际互联网提供的效力有：国际互联网提供的效力有：www效力效力文件传输效力文件传输效力电子邮件效力电子邮件效力远程登录效力远程登录效力例例2-15的运转效果的运转效果 2.5.3 嵌套列表嵌套列表将一个列表嵌入到另一个列表中，作为另将一个列表嵌入到另一个列表中，作为另一个列表的一部分，叫嵌套列表。无论一个列表的一部分，叫嵌套列表。无论是有序列表和无序列表的嵌套，阅读器是有序列表和无序列表的嵌套，阅读器都可以自动地分别陈列。都可以自动地分别陈列。例例2-16： 嵌套列表嵌套列表目录目录动物肉类食物动物肉类食物水产品水产品 带鱼带鱼 螃蟹螃蟹 北极虾北极虾 家禽家禽三黄鸡三黄鸡湖鸭湖鸭乌鸡乌鸡植物类食物植物类食物蔬菜蔬菜番茄番茄青菜青菜黄瓜黄瓜水果水果苹果苹果葡萄葡萄香蕉香蕉谷物谷物大米大米 高梁高梁 玉米玉米 人工合成类食物人工合成类食物 例例2-16的运转