1、第1章 网页基础,一.www基础 二.网站和网页 三.Html基础及简单页面设计 四.Web页面的颜色 五.给html文档加注释,一.www基础,www（world wide web，简称互联网），一直被人们称作internet的“杀手应用程序”。它可以显示普通文字和图像并访问其他页面，而信息子页则使得它成为internet上发展最快的部分。你可能已经掌握了在web上如何探索信息世界，但也有可能不太清楚如何向全世界发布你自己的信息有关你自己的信息，如你个人的兴趣、你的工作等。 要创建自己的页面，最基础技术就是html（hypertext makeup language，超文本标记语言），现在绝
2、大多数web文档都是由html编写的。,www是一个全球性的、交互式的、动态的、多平台的、分布式的、图像超文本的信息系统。 要能在web上四处遨游，首先必须安装一个web浏览器。有了自己的web浏览器后，在web上导航最简单的方法就是结合浏览器的各种性能在各页上移动。你可以通过选择指定的高亮度显示的文字、词或图像从一个页面移至另一页面，也可以利用该页的地址或url（uniform resource locator）统一资源定位器来直接移至该指定页。,不受地域的限制，只要互联网保持连通就可以,访问者和网站有交互的过程，提交信息、反馈信息,网站上的信息可以随时随地进行更新,不受操作系统平台的限制，
3、如windows、linnux等系统平台,一台服务器，多台客户机构成分布式,可以在www上发布多媒体信息，如图像和声音、视频等,Web浏览器的选用,现在可以得到许多web浏览器，他们遍及了几乎所有的计算机系统。Web浏览器的功能是充当与web的接口，它们在internet上对特定的web页面和文档发出请求，当它们接收到文件后，就将格式化后的版本返回html文件并显示到屏幕之上。安装了web浏览器的计算机还可以处理ftp等方法的信息请求。,以下是常用的浏览器 1.Mosaic：最早开始web研究时使用的浏览器，不过现在一般没人用了。 2.Lynx：基于文本的浏览器，是web访问中仅限于文本访问的
4、最佳选择。但无法通过该浏览器看到web页面的图像。 3.Netscape navigator：曾一度是最流行的浏览器，它通过开发html扩展来提高web页面的图形品质。 4.Internet explor：简称ie，已经拥有同netscape navigator基本相同的特性，更由于其方便快捷、免费等特性而成了当今最流行的浏览器,寻找一个web编写工具,Html编辑器或编写工具是指不用进入html核心而为web页面创建html文档的程序。这些程序所使用的格式与允许人们在一页上输入文件或图形的字处理器或页面设计程序相似。 许多字处理器，如microsoft word都具有html的编辑功能。一般
5、的，人们都使用windows自带的文本编辑器记事本程序来编写。还有一些软件，如microsoft frontpage和dreamweaver都内置一web编写工具，这使得初学者在创建web页面时更简单。但是要学习更好的网页设计制作（如动态网页等），必须要掌握html的基本原理，所以这种情况下不宜使用frontpage和dreamweaver等可视化的网页开发工具。,了解html的发展信息,要掌握html，就必须了解它的发展。大家可以通过下面俩个链接了解html文档草案的现状、未来html的发展已经url的工作原理的升级文档等。 1.http:/www.w3.org/:提供一个链接指向描述已被确
6、认为internet标准及现在被所有浏览器支持的html特性的文档。 2.http:/www.w3.org/hypertext/www/addressing/addressing.html:讲解url的各种类型和如何在web文档中使用它们。,创建自己web页面的要点,有了上诉基本知识以后，就可以开始学习创建自己的web页面了。不过，在创建自己的页面过程中，有一些非常有用的技巧，必须好好的记住。 1.首先要搞清楚自己要说的东西。这看起来是很自然的，但是许多页面的不成功就是由于它们缺少重点，因为要展示给读者的观点一定要清楚明了。如果别人搞不懂你想说什么，就不会有兴趣去读你的主页和其他页面。 2.确
7、定好目标之后，就应该考虑页面应包括的内容。此时就应该按内容分割材料。材料可以分布在几页上，也可以组合在同一页面中，这取决于你的写作方式。 3.除非页面非常短，否则编写一个简单介绍web站点的目标、可得到信息及途径的简单页面是很有帮助的。这一页面应包括内容介绍及目录，它可以使读者能对继续阅读哪一页做出迅速的判断。此外，这一页上还可包括指向有关所述论题的、更多信息的页面链接。,4.如果可能，应该将每一页都设计的简短一些，每一页的文本及图形不应该超过一到两个屏幕。如果一页太长，则读者不得不来回滚动屏幕以阅读整份页面，这样就会打断文档的流畅性。如果页面必须很长，则应在文档中包括目录和指向特殊位置的链接
8、，以使读者便于找到所需信息。 5.不要在页面上设置太多的图形。图形文件很大，意味着浏览器装载一页包括图形的页面会非常费时。尽管你的网络连接可能非常的迅速，但是别人访问你网页可能相对很慢。 6.在决定将自己的页面推向世界之前，应仔细检查一下是否有错误和不佳之处。,二.网站和网页,在我们开始学习网页制作之前呢，先让我们了解一下关于网页的一些知识。 1.网页和网站 2.动态网站和静态网站 3.web1.0和web2.0,三.Html基础及简单页面设计,HTML的编写是指创制和定义html文档的过程。重要内容: 1.Html标记 2.Html的基本结构 3.创建一个简单页面 4.浏览自己的页面,文档结
9、构和格式的定义是由html元素来完成的。而html元素是由单个或一对标记定义的包含范围。一对标记是指一个起始标记和一个结束标记。一个起始标记是由一个元素名和后面的一个在小于号（）之间的属性/值对系列组成。结束标记在元素前有一个斜杠（/），此外，它并不包括属性/值列表。,1.Html标记,在html中，标记的语法如下： 要控制的文字 当用一组html标记将一段文字夹在中间时，这段文字与夹文字的标记被称为一个组件。如： hehe 这就是一个组件，其中的title即为元素名，就是一个标记，hehe为该元素的内容，有时在元素名后面还有属性。因此，在html文件中某个组件的完整定义语法如下: 组件数据
10、由以上可知，标记元素有四种格式： 空元素（没有内容的元素） 带有属性的空元素 带有内容的元素 带有内容和属性的元素,注意：在html标记中，英文大小写字母的意义是相同的，也就是说和标记是一样的。 由于标记的存在和使用，html拥有层次极为分明的基本结构。这对页面的制作有很大的帮助。,2.Html的基本结构,由于在HTML语法中，每个由html标记与文字所形成的组件还可以包括另一组组件，因此，整个html文件就像一个大组件，还包含了许多小组件。 其中，所有的html文件最外层的组件，是由标记所建立的，在标记所建构的组件中，还包含了两个主要的子组件，这两个子组件是由标记与标记建立的。,标记：建立的
11、组件的内容为文件标题。其中并不放网页的任何内容，而是放置有关有关html文件的信息，例如：文件的标题、编辑方式等等。这些信息大部分是提供索引、辨认和其他应用之使用。 标记：建立的组件是html文件的主体，也就是网页的主要内容。依照各种html的控制，这些内容将呈现在浏览器的窗口中。 因此，所有文件的最基本结构如下：,从上图中，我们可以容易的了解到整个html文件中所有的数据均被建立为一个一个组件，并组织为一个层次化的结构。 当利用html标记来定义组件时，定义标记不可交错，否则将造成错误。下面的语法中，标记与标记彼此交错，这样是不对的，如果标记交错时，我们无法区别两个组件的范围,3.创建一个简
12、单页面,创建一简单页面的基本步骤 1.打开一个html编辑器 2.编辑你的html文档 3.保存html文档 4.浏览你做的页面,四.Web页面的颜色,通过标记内属性的设置，来达到控制web页面的颜色的效果，主要内容： 1.为web页面设置背景颜色 2.为web页面设置文本颜色 3.在web页面设置中为超文本链接设置颜色 4.利用图像作为web页面使得背景,1.为web页面设置背景颜色,Html允许编写者为其web页面选择各种各样的颜色，包括背景、文本等等，这通过这种标记的常用属性 Bgcolor属性（用来控制页面的背景颜色） 语法：bgcolor=“颜色” 其中，颜色可以通过两种方式来表示，
13、可以直接指定颜色的英文名称，常用的基本颜色名称如表：,另外，也可以利用十六进制数值方式来指定颜色，颜色的表示方法如下： #RRGGBB 其中，RR代表红色、GG代表绿色、BB代表蓝色，我们以00到FF的值表示三种颜色成分的多少，以指定出三种原色以多少的成分组成新颜色。语法如下：另外，ie支持3位数的颜色表示方法。与六位数的表示方法类似，不过就是位数少而已 #RGB分别表示红绿蓝的成分。 例如：绿色可以用“#0F0”表示 （实例）,2.为web页面设置文本颜色,Text属性 此属性用于控制网页中文字的颜色 Text=“颜色值” 有关颜色值的设定，与前面bgcolor属性的说明一样。 （实例）,3
14、.在web页面设置中为超文本链接设置颜色,Link属性、alink属性、vlink属性 Link属性：控制的是网页中未被选择过的超链接的颜色 vlink属性：控制的是网页中已经被选择过的超链接的颜色 Alink属性：设置超链接在被选择时的颜色 它们的语法分别为： Link=颜色值 Vlink=颜色值 Alink=颜色值 有关颜色值的设定，与bgcolor的颜色值的设定完全相同,4.利用图像作为web页面使得 背景,Background属性 指定作为html文件背景的图片，可以使用的图文件格式为gif和jpg，其语法如下： Background=“文件名称与路径” 假如引用c:/html/sub
15、/目录下的bg.gif图文件作为html文件背景时，此属性的设置语法如下： Background=“c:/html/sub/bg.gif”,五.给html文档加注释,和一般的程序语言一样，html编辑者也可以对自己的语句进行注释。一般来说，注释是用来标示html语句的作用的，对程序的读写都有重要的作用。 注释的格式如下: 或,一般来说，注释有两个用途; 1.在创建文档时，为编辑文档设计提供途径，此类注释将会对维护和修改极有帮助 2.一些应用程序要利用注释在html中包括额外应用程序的特定信息,注释的一般步骤如下： 1.打开一个html文档 2.确定要添加注释的位置 3.将插入点移至该位置，插入
16、注释语句 4.保存文档为.html文档，在浏览器中查看显示效果 （实例）,第1章 特殊字符、逻辑效果,一.特殊字符 二.字符的物理效果 三.字符的逻辑效果,一.特殊字符,在网页中会看到许多特殊的符号标记，其中许多标记是不可能通过键盘直接输入的，比如“”是html的一种标记，如果直接输入这些标记，就会产生意想不到的错误。而一些ASCII之外的特殊字符也是无法直接输入的。如果要显示这些字符，就必须进行特殊符号的引用。,在html文档中可以指定任何iso latin1字符，但是一般的编译环境却不一定包括这些字符。Html提供两种引用类型来包含字符，这样可以很方便地使用它们。（实例1.html） 1.
17、字符引用：通过使用iso latin1字符代码可以包含任何字符。 2.实体引用：一些常用的字符已经被指定了助记符。可以通过指定恰当的助记符来包含这些字符。 无论是字符的引用还是实体引用，都可在html文档中输入任何一个iso latin1字符。只是因为许多平台并不支持全部的iso latin1字符集，html才提供了这两种方法。,二.字符的物理效果,创建html页面时，我们有时需要强调或将一个单词或词组同其他文本分开。这需要给特定的字符或文本以特殊的效果。正如字处理器提供了一些样式（如黑体或斜体）来改变文本的显示一样，html也提供了一套改变字符显示效果的手法，如黑体、斜体、下划线以及替换文本
18、的尺寸和颜色。这样的效果被称为字符的物理效果。,字符显示效果有黑体、斜体、下划线等等，每种效果对应一个标记(2.html) :可使短至一个字母长至一整段的文本成为黑体。 :使其间的任何文本用斜体显示出来 :任何位于之间的文本均以固定宽度的字体显示出来，从而保证字的准确定位。 :给其间任意长的文本加下划线。 :将位于之间的文本以删除线格式显示出来。 和: Sub标记将其间的文本放置在低于一行的位置上。 Sup标记之间的文本则比一行中的其他文本都要高一些。,对于文字而言，我们除了可以使用以上标记来控制其显示效果外，还可以通过标记控制字符的字体、大小与颜色等。要控制的文字 Font标记的属性 1.F
19、ace属性：控制字符使用字体的属性，其语法如下： Face=“字体名称”，如果在所指定的字体名称并不存在于用户的系统中，将使用默认的字体。,2.Size属性：控制字符大小的属性。 语法如下： Size=“字符等级” 在ie中，字符的等级共有7级，7为最大的字号。 3.Color属性：控制字符的颜色，语法如下： Color=“颜色” 颜色的设定可运用英文名称或十六进制数值，与标记中bgcolor的设定方法一样。 实例(4.html),标记 在文档的开头位置使用标记来改变整个文档的大小，利用size属性来改变默认的字符大小。例如，要创建一个默认字符大小为2的文档。其余同标记 实例(9.html),
20、专门控制字符大小的标记 和 实例(3.html),以上几种方法可以达到改变字符大小原理： 当浏览器遇到一个或标记时，它就会将和(或)之间的文本按预定量放大或缩小。 当浏览器遇到一个标记时，它读取其属性并对字符的大小和颜色作出变动。 当浏览器遇到一个标记时，它按size属性指定的字符大小调整这个页面上所有文本。,三.字符的逻辑效果,除了字符的物理效果外，html还提供了一套称为逻辑效果的标记，它们不仅可以指定在文档文本中特定格式的效果，还能标出文本的含义。如标题样式的使用、特别强调、制定引用等。 1.标题样式的使用 2.增加强调和特别强调 3.包含小段代码和变量 4.提供文字字符的样本 5.指示
21、作为键盘输入的文本 6.指定一个地址,1.标题样式的使用,有时候，我们要给页面添加几个标题，有主标题和副标题等，但是又不想使各个标题的字号一样大。这时候，我们可以通过标记来标识文档中包含不同大小字号的主标题和副标题。 Hn标记标示的字符将以粗体的形式显示在网页中，语法如下： 标题字符 其中n是1至6的数字，表示标题的层次。 的标题最大，的标题最小,在标记中有一个较为常用的属性align，用于控制标题的对齐方式。 语法如下： Align=left 或 Align=center 或 Align=right 这三个设定值依序把标题文字的对齐方式设为靠左对齐、居中对齐、靠右对齐。 实例(6.html)
22、,2.增加强调和特别强调,在页面中，我们可以不通过黑体或斜体的方法，而达到强调页面中某些字词的目的，这需要使用和标记。它们分别用作一般性强调和特别强调，可以高亮度显示文本的特定区域。 当浏览器遇到一个标记时，它就使用浏览器中强调文本的特殊指示来强调位于之间的文本。 当浏览器遇到一个标记时，它就强调位于该标记之间的文本，如果再一次使用该标记，表示特别强调文本的特殊指示。 实例(7.html),3.包含小段代码和变量,有时候我们有一些程序代码样本和变量需要放置在web页面上。我们想使其同其他文本有所区别，但又不愿在物理形式处理上花费太多时间。我们可以使用和标记来实现这种效果。 标记将程序代码段以固
23、定宽度字符显示。这是因为浏览器将位于和标记之间的文本按其显示代码的样式显示。而位于和之间的文本则按变量的样式处理，所以标记将程序或其他程序的变量以斜体显示。,4.提供文字字符的样本,在html中，我们使用标记来将位于和作为文字字符的样本显示。 当浏览器遇到一个标记时，它就根据其内置的规则格式化位于和之间的文本，通常，这种显示文本的字符是固定宽度的。 另外，尽管标记的文本同用其他样式标出的文本的显示看起来是一样的，但是最好还是用来引用一个特殊的样本。,5.指示作为键盘输入的文本,有时候设计者想在web页中将一些输入的样本包括在一段计算机程序中，且使这些样本样式与格式化的标准文本不同。在html中
24、，我们使用html键盘样式标记来标记由用户自己输入的文本，还可以使用它显示计算机命令、参数，尤其是由用户输入的内容。 由标记的文本通常是使用固定宽度的字符。,6.指定一个地址,Html还运行用户使用标记来指导有关web页的创建者或维护者的信息。这一信息可以包括姓名、电子邮件地址、电话号码、信件地址或其他相关信息。 实例(8.html),以上我们掌握了字符效果的基本样式，包括字符的物理效果和逻辑效果。在实际应用中，如何利用这些样式来美化自己的主页，提出几点建议 1.只有越少使用它们，才能越有效果。如果每隔一个词就用黑体表示或将一大段文本显示为斜体，是不会引起读者任何注意的。 2.除了要少用强调外
25、，频繁地把普通样式改为黑体或斜体等样式也会使文档的阅读变得困难，这是因为研究必须先停下来并调整到新的类型样式之后才能继续的阅读下去。减少样式的变换可以防止这个问题。,3.在www用户和文档创建者之间一直有很多关于正确使用与及与的讨论。在大多数浏览器中，这些标记的功能是相同且可互换的。这里并没有一条使用这些标记的正确方法。但是作为一条普通规律，我们应该考虑一下规则：在要强调一个字或词时，使用或。当某个字或词要求一个特殊的样式时，例如书名或特定名称，则使用或。当有疑问的适合，则强调包含这些字词的句子，这时用或。如果想格式化一个文档突出强调的字词时，则用或。,4.Html还提供了一些在大多数浏览器中
26、显示时难以区分的标记：、，它们均可使文本以固定宽度字符样式显示。但实际上，它们之间差别很大。当从一个程序中插入一些代码时，使用标记。当你想要显示用户输入程序的信息时，请使用标记。而利用标记就可以显示文字字符的一个样本，其他需要用固定宽度字符显示的情况则可用处理。这些区别不仅使浏览器选用最佳方式来显示信息，还可使扫描web页的索引程序通过标记的使用准确识别代码和键盘输入等等。如果对于所有需要使用固定宽度字符的要求均只使用,则大多数浏览器的输出看起来都是一样的，但索引程序却很难找出web页面中的代码和键盘输入。,准确使用这些样式，可以为自己的新主页添色不少，也可使它们更易阅读。如果小心使用，物理样
27、式可以提高web页的显示效果。此外，正确使用内容样式可以使读者找到它们感兴趣的东西，同时也便于索引程序更好地做出web页内容的目录。,第3章 表格,表格在对web页上的信息格式和布局进行控制的较好方法，它定义格式化信息有着强大的功能，能够控制各种信息的位置，使得页面结构协调一致。 一.创建一个简单表格 二.定义单元格的高度和宽度 三. 控制表格的边框及边框线 四.创建跨单元格的存储格,在网页中，表格的运用是非常重要的技巧。在html中，表格的建立主要就运用、四种标记来显示完成的 1.和标记：用于表示一个表格的组件。一个表格组件将由数个行、存储格、标题格子组件所组成。 2.：用于定义表格的一行，
28、一组标记内通常包含数组由或标记所定义的存储格。 3.用于定义表格的存储格。 4.：用于定义表格的标题存储格，此存储格中的文字将以粗体的方式显示。,在一个最基本的表格组件中，必须包含一组标记，一组标记与一组标记。语法如下：,一.创建一个简单表格,1.创建一个简单的表格 2.给表格添加一个标题 3.如果需要，把表格的第一行设计为表头 4.给单元格和表格元素定义数据,1.创建一个简单的表格,输入和标记。如果要显示表格单元格的边框，则需在标记中添加border属性。并为Border属性设置值。如：,2.给表格添加一个标题,使用和标记来添加标题，语法： 表格标题 如果要添加的标题位于表格的上方，则将表格
29、标题置于标记下一行，如：表格标题 ,如果要将标题置于表格下方，则将表格标题置于标记之前。如： 表格标题我们还可以像对待其他文本一样，格式化和中的文本 表格标题,3.把表格的第一行设计为表头,通过标记来指定表格中特殊表头单元格，标记之后的文本作为表头单元格的一部分。可以在表格的任意地方使用这个标记，表头也不是必须要放在各列的顶部。 当表格的标记和表格标题输入之后，在表格的每一列中放置一个标记和该列中的文本。表格标题 第一列第二列第三列 ,4.给单元格和表格元素定义数据,使用标记来建立单元格，并往其中添加数据，它的用法与标记的用法十分相似。个人资料 姓名居住地职业 张三北京学生 李四上海工程师 王
30、五深圳老师 ,标记的用法同类似，表格是用来创建表格中行的。如实例所示，表格的每一行都是由标记来建立。 根据需要，可把某个单元格设置成空数据格，即不输入数据到该格中，也就是在标记之后不输入数据。 李四工程师,二.定义单元格的高度和宽度,表格的宽度由标记的width属性来控制，而高度则是由标记的height属性来控制的。语法分别为： Width=数值 Height=数值 数值的设定值若为一整数，则其单位为像素，若设定值为n%，则代表表格的宽度为整个网页宽度的百分之n。如： 将width属性设为50%，代表此表格宽度为整个网页宽度的一半。, 个人资料 姓名居住地职业 张三北京学生 李四上海工程师 王
31、五深圳老师 , 个人资料 姓名居住地职业 张三北京学生 李四上海工程师 王五深圳老师 ,两者设置宽度和高度的区别，当改变浏览器窗口大小的时候，用百分比设置的表格会随浏览器窗口的变化而变化，而通过像素设定宽度和高度的表格的大小不会变化。 以上是对整个表格的所有单元格的高度和宽度的控制，也可以在标记中添加width和height属性来控制某一行的宽度和高度。如：,三. 控制表格的边框及边框线,通过标记的属性可以控制整个表格组件的格式。 1.Border属性：用来控制表格边框线的厚度，语法如下： Border=数值，数值的设定若为整数，则其单位为像素(pixel)。 2.Cellspacing属性：
32、用于控制存储格边框到表格边框的距离，框线的宽度。 Cellspacing=数值 3.cellpadding:用于控制存储格内文字的边缘到存储格边框的距离。 cellpadding=数值, 设置表格的边框 姓名居住地职业 张三北京学生 李四上海工程师 王五深圳老师 ,4.设置表格背景颜色与边框厚度颜色 标记还有两个属性 Bgcolor属性：控制表格的背景颜色 bordercolor属性：控制表格厚度的颜色 ,5.设置表格的对齐方式 表格对齐方式有两种：水平方向和垂直方向 align(水平方向)： Align=left（水平左对齐） Align=right(水平右对齐) Align=center(
33、水平居中对齐) Valign(垂直方向) Valign=top(垂直顶部对齐) valign=bottom(垂直底部对齐) Valign=baseline(垂直一条公共基线对齐) valign=middle(垂直居中对齐),(1).align属性可以放置于标记中，控制整个表格在网页中的对齐方式。靠左对齐表格居中对齐表格靠右对齐表格,(2).align和valign属性也可以在标记中控制对齐方式张三北京学生 李四上海工程师 王五深圳老师,四.创建跨单元格的存储格,我们常常会看到有的表格里的某些存储格跨了好几个单元格，这是通过colspan和rowspan属性来控制而达到的。 Colspan属性：
34、水平延伸存储格，语法： Colspan=n N为整数，代表此存储格水平延伸的存储格数。 Rowspan属性：垂直延伸存储格数,个人资料 姓名居住地职业个人资料 姓名居住地 职业姓名 个人资料居住地职业 张三北京学生 李四上海工程师 王五深圳老师,第3章 列表,有些信息最好是以列表的形式表现出来，比如一个菜谱的配料、最喜欢的10套唱片、一个演出大纲以及一套术语的定义。虽然可以利用和之类的标记来管理在文档中各项目的位置及创建列表，但是这些标记使用起来很麻烦，而且对于最合适信息的列表类型的创建也无多大的灵活性。所有html提供了一些标记用来创建包括有数字编号、点或圈标志、缩进及其他性能的列表：而且，
35、html4.0还包含了一些为建立以最佳形式表达数据的列表提供更多功能的属性。,将文字内容以条列的方式显示，对于阅读者来说通常是比较清除而易读的。Html共提供了三种用于条列文字的标记，它们是有序条列与无序条列以及说明项目条列标记 1.有序号条列就是有一定顺序的列表，比如有数字编号的列表和指定编号的列表等。 2.无序号条列就是有标志但不管顺序的列表，如点圈标志等。 3.说明项目条列就是没有标志，且排列内容无一定次序的列表。,1.建立一个有数字编号的列表 2.指定编号的格式和顺序 3.创建一个带有点或圈标志的列表 4.创建一个无标志列表 5.建立一个菜单列表 6.建立目录列表 7.建立术语列表 8
36、.嵌套列表 9.利用列表使主页更有活力,1.建立一个有数字编号的列表,在html中可以创建一个在各项目之前自动生成数字编号的排序类别。项目之前的数字取决于该项目在列表中的位置：若第一项是1，则第二项是2，以此类推。 这是通过和标记来实现的 语法如下：条列1 条列2 条列3 ,建立一个有数字编号的列表的一般步骤如下：红色 绿色 蓝色 紫色实例：1.html,一些浏览器允许将列表做的更紧凑一些来节省空间。在一个紧凑的列表中列表项目间通常空格很小，且会使用更小更紧缩的字体。如要指定一个压缩的列表，只需用标记代替列表开头的标记。,2.指定编号的格式和顺序,有时候编号不一定是数字，或者是数字也不一定是从
37、1开始。如果是这样，我们可以通过标记的属性start和type来控制。 如果不是以数字1开始，则在列表的开始处的标记中放置一个start属性，其后是等号(=)及第一个数字的值。例如要创建一个以100为开头的列表如下：,红色 绿色 蓝色 紫色,可以在标记中使用value属性来改变列表内的标号顺序。例如要从3开始，但是列表后部的值更大一些，下面的html语句创建的列表首先从3开始，到了蓝色这一栏将从10开始。（实例：13.html）红色 绿色 蓝色 紫色,利用type属性来控制序号的种类，语法如下： Type=1 type=A type=a type=i type=I,例如要在列表中使用大写字母，
38、则输入：红色绿色蓝色紫色我们还可以在标记中使用type属性来更改列表中的编号体系。例如将标准数字改为罗马大写数字，则输入：,红色 绿色 蓝色 紫色实例：2.html 3.html,当一个html浏览器遇到一个带有等于某值的start属性编号列表时，它可用这个值开始为列表编号。类似的，当它遇到一个等于某值的type属性时，它就用此数值匹配编号类型的预定义列表，并使用恰当类型为列表编号。当浏览器在一列表元素中遇到一个type或value标记时，它就根据标记中设置的值改变列表编号系统。,3.创建一个带有点或圈标志的列表,Html可以用来创建带有圈标志的或称为无序的列表，其中的点圈能够自动生成并置于每
39、一个列表项之前。这一技术极像编号列表中使用的技术，其唯一区别仅在于使用的标记不同。 这里使用的标记是和。用法与和基本相同。不同的地方在于type属性的不同，此标记的语法如下：条列1条列2条列3 ,这里type属性用于设定项目符号，用法为： Type=circle Type=disc Type=square 其中，三种type值所代表的条列符号分分别为圆圈、实心圆、实心正方体。 实现步骤与前面有数字编号的列表的建立步骤完全一样，只不过是要把和换成和。 实例：4.html,4.创建一个无标志列表,在html中，我们可以创建一个没有任何标志的列表，这个通过使用和标记来完成。 建立无标志列表步骤与有数
40、字列表建立步骤一样。不过要把和换成和,同时把换成。如果要创建的是不同于普通文本的缩进式列表，则不用而用代替 实例：5.html 上例中缩进式列表原理是标记在列表项之前又加了一个制表符。不过，缩进量是由浏览器设置的，而不能由文档控制。,5.建立一个菜单列表,使用标记和标记可以使列表各项以菜单的形式显示。用法与和基本相同。用标记替换标记。 实例：6.html,6.建立目录列表,使用标记和标记可以使列表各项以一个相关条目的形式显示。用法与和基本相同。 实例：6.html,7.建立术语列表,通过前面的学习，我们已经了解、和标记。在那里，和标记是分开使用的。但是它们却可以共同使用来创建一个术语列表。也就
41、是说，以带有术语及其带有的列表形式显示处理，并且强调指出这些词语及其定义。 实例：7.html,8.嵌套列表,我们经常可以看到这样的列表，既有主标题，每个主标题下又有子标题，并能以此类推。这就叫嵌套式列表。 在html中，嵌套是很容易实现的 1.数字编号列表（实例：8.html） 2.点圈标志列表（实例：9.html） 3.菜单列表（实例：10.html） 4.无标志列表（实例：11.html） 5.混合列表（实例：12.html）,9.利用列表使主页更有活力,列表的使用有利也有弊。用的好，读者通过它能很快地找到所需的信息。通过将相关信息分组并使用平行结构，用户可以很容易地根据提供信息进行分类
42、。但是，如果用得不好，反而会有很差的效果。 在使用html创建列表时，要注意以下几点： 1.避免列表太长。太长的列表会令人生厌并不易阅读，而且读者也很难找到所需的特定信息。在这种情况下，应该把它拆成小的列表，并标以不同的题目。这也就是嵌套式列表的有用之处。 2.保持列表的一贯性，在一个列表中间不要更换动词时态或做其他形式上的改动。 3.在各行中，使各项保持相同的长度。列表可以做成只有一个词的短表，也可以做成包括成段句子的长表；但是这两种类型不能混用。,第4章 超级链接,只需少量的标记就可以格式化文本文件并使其在world wide web上高效地显示出来，它使html和www成为在intern
43、et上发表文档的好方法。但这仅仅是利用了world wide web的极少量的能力。文档阅读者可以设想只需通过简简单单的键盘敲击和鼠标摁动，就可移至该文档的其他位置上、本台计算机的其他文档上，或者是全世界的internet资源上。 www提供了一种工具来完全地实现上述功能。它就是超级链接。,1.url介绍 2.创建链接 3.创建一个简单的链接 4.创建一个指向页面特定部分的链接 5.在表格和列表中使用链接,1.url介绍,url（uniform resource locator，全球资源定位器），是world wide web浏览器用来定位在internet上文件的工具，为使用各种协议访问信息
44、提供了一个简单连贯的方法。一个url包括3部分：一个协议代码、一个装有所需文件的计算机地址（或一个电子邮件地址或是新闻组名称），以及包含所需信息的文件地址和文件名。如： http:/ 当浏览器遇到一个url时，它首先检查其协议以决定程序获取信息必须使用的方法。之后浏览器取得计算机的地址，然后访问站点，并使用url中的路径信息找到文件并将它的一个拷贝返回到浏览器所在的计算机上。,1.解释一个url url包括3个部分，第一部分是协议，协议表明应使用何种方法获得所需信息。现在world wide web上共有7个主要协议。,在这7种协议中的5种（ftp、gopher、http、telnet和wai
45、s）协议后均需接一个冒号和两个斜杠（/），斜杠之后则是相关信息的主机地址。如： http:/ http:/ 而在mailto协议之后紧跟一个冒号，其后就是e-mail地址了。如： mailto: 在news协议中，协议后跟一个冒号，其后是usenet新闻的名称。如： News:alt.widgets 对于除了mailto和news之外的协议，计算机地址之后都接着所需文件或目录的路径。如： http:/ ftp:/ 有时候url只是一个文件或某种路径，并不包括任何种类的协议。此时可以利用路径名来寻找各个目录中的文件，如: C:/my documents/my doc/2.doc 同时，web浏览
46、器会假设给出的位置与当前页面的位置相关，它将使用路径信息在目录中上移或下移以达到该位置并检索此文件。也就是说，不用写出完整的路径名就能指定页面和其他文件的位置 如下目录结构图,如要访问一个与当前页面所处目录相同的文件，则只需将该文件的名称作为url。如：现在是在page1.html中，想要到page2.html中，则只需输入：page2.html,如果要访问的文件位于当前页面所在目录的子目录中，则需包括子目录名，并将其余文件名用一个斜杠（/）分开，如由page1.html到page3.html中，则输入： flash/page3.html 如果对于父目录（高于当前目录所在目录的目录）中的文件，
47、则在两个句号（）和文件名之间用一个斜杠分隔开。例如，想由page3.html到page1.html中，则输入： /page1.html 由上两步综合起来使用，可由一个目录转移到任何一个其他目录。例如要从page3.html到page4.html中，则输入： /image/page4.html 实例：1.html,2.创建链接,要将你的文档或信息与别的资源连接起来，就必须创建它们之间的链接。 创建链接的方式有两种： 1.可以使用来指定一个文档同其他资源的关系，包括之前和之后的文档、表格内容、索引以及其他文档部分。浏览器阅读和存储包含在元素中的信息，并将其作为相关文件的位置。 2.使用标记可以创建
48、各种各样的链接，如指向本地页面的链接、指向其他页面的链接、指向页面特定部分的链接以及指向服务器或站点的链接等。 当用户选择建立于页面中的链接后，浏览器便会浏览该超级链接位置的网页。建立超级链接所使用的标记为，其语法为： 超级链接名称,此语句的各个部分 1.超级链接名称 此字符串将显示于网页中，代表此超级链接，并供用户选择超级链接之用。除了可以使用字符串外，在标记中，也可以插入图像文件，这样该图像文件便可代表该超级链接。当用户把鼠标移到代表该超级链接的文字或图片上时，光标的形状将变成手状，表示该用户可选择该链接。,2.链接位置 用于指定href属性中超级链接的目标位置，这可使用url来指定。ur
49、l的格式由使用的通讯协议、链接地址与文件位置所组成 下面列举一些常见的链接位置的设定方式 (1).通过http协议链接至其他网页(2).指定通过ftp协议链接至网络上的ftp服务器(3)telnet链接：(4)电子邮件(5)链接至同一服务器上的其他网页 ,3.创建一个简单的链接,创建简单链接的一般步骤： 1.打开或创建一个需要使用链接的文档，并定位要用于链接的字或词。 2.通过在锚点文本的前后放置和标记来标出用作链接的文本。 3.在标记中放置href属性并使其等于要链接的对象的url 4.保存文档，查看效果 实例：2.html,5.创建一个指向页面特定部分的链接,通过上面的学习，我们能够创建从一个页面到另外一个页面的链接，但有时候你只需从一个页面到另一个页面的一个指定位置之间的链接，例如链接到第二个页面的第四部分，这应该怎么达到呢？ 方法就是在第二个页面的html文档中建立一个锚。所谓锚，就是链接到文档内部的指定位置。在第一个页面建立的链接将包含链接的文件名和锚的名字。然后，当浏览器按这个链接查找时，就把第二个页面装入，然后向下滚动到锚的指定位置。,
