静态网页制作教程(入门级)_第1页
静态网页制作教程(入门级)_第2页
静态网页制作教程(入门级)_第3页
静态网页制作教程(入门级)_第4页
静态网页制作教程(入门级)_第5页
已阅读5页，还剩260页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第1章网页基础一.www基础二.网站和网页三.Html基础及简单页面设计四.Web页面的颜色五.给html文档加注释一.www基础www（worldwideweb，简称互联网），一直被人们称作internet的“杀手应用程序”。它可以显示普通文字和图像并访问其他页面，而信息子页则使得它成为internet上发展最快的部分。你可能已经掌握了在web上如何探索信息世界，但也有可能不太清楚如何向全世界发布你自己的信息——有关你自己的信息，如你个人的兴趣、你的工作等。要创建自己的页面，最基础技术就是html（hypertextmakeuplanguage，超文本标记语言），现在绝大多数web文档都是由html编写的。www是一个全球性的、交互式的、动态的、多平台的、分布式的、图像超文本的信息系统。要能在web上四处遨游，首先必须安装一个web浏览器。有了自己的web浏览器后，在web上导航最简单的方法就是结合浏览器的各种性能在各页上移动。你可以通过选择指定的高亮度显示的文字、词或图像从一个页面移至另一页面，也可以利用该页的地址或url（uniformresourcelocator）统一资源定位器来直接移至该指定页。不受地域的限制，只要互联网保持连通就可以访问者和网站有交互的过程，提交信息、反馈信息网站上的信息可以随时随地进行更新不受操作系统平台的限制，如windows、linnux等系统平台一台服务器，多台客户机构成分布式可以在www上发布多媒体信息，如图像和声音、视频等Web浏览器的选用现在可以得到许多web浏览器，他们遍及了几乎所有的计算机系统。Web浏览器的功能是充当与web的接口，它们在internet上对特定的web页面和文档发出请求，当它们接收到文件后，就将格式化后的版本返回html文件并显示到屏幕之上。安装了web浏览器的计算机还可以处理ftp等方法的信息请求。以下是常用的浏览器1.Mosaic：最早开始web研究时使用的浏览器，不过现在一般没人用了。2.Lynx：基于文本的浏览器，是web访问中仅限于文本访问的最佳选择。但无法通过该浏览器看到web页面的图像。3.Netscapenavigator：曾一度是最流行的浏览器，它通过开发html扩展来提高web页面的图形品质。4.Internetexplor：简称ie，已经拥有同netscapenavigator基本相同的特性，更由于其方便快捷、免费等特性而成了当今最流行的浏览器寻找一个web编写工具Html编辑器或编写工具是指不用进入html核心而为web页面创建html文档的程序。这些程序所使用的格式与允许人们在一页上输入文件或图形的字处理器或页面设计程序相似。许多字处理器，如microsoftword都具有html的编辑功能。一般的，人们都使用windows自带的文本编辑器——记事本程序来编写。还有一些软件，如microsoftfrontpage和dreamweaver都内置一web编写工具，这使得初学者在创建web页面时更简单。但是要学习更好的网页设计制作（如动态网页等），必须要掌握html的基本原理，所以这种情况下不宜使用frontpage和dreamweaver等可视化的网页开发工具。了解html的发展信息要掌握html，就必须了解它的发展。大家可以通过下面俩个链接了解html文档草案的现状、未来html的发展已经url的工作原理的升级文档等。1./:提供一个链接指向描述已被确认为internet标准及现在被所有浏览器支持的html特性的文档。2./hypertext/www/addressing/addressing.html:讲解url的各种类型和如何在web文档中使用它们。创建自己web页面的要点有了上诉基本知识以后，就可以开始学习创建自己的web页面了。不过，在创建自己的页面过程中，有一些非常有用的技巧，必须好好的记住。1.首先要搞清楚自己要说的东西。这看起来是很自然的，但是许多页面的不成功就是由于它们缺少重点，因为要展示给读者的观点一定要清楚明了。如果别人搞不懂你想说什么，就不会有兴趣去读你的主页和其他页面。2.确定好目标之后，就应该考虑页面应包括的内容。此时就应该按内容分割材料。材料可以分布在几页上，也可以组合在同一页面中，这取决于你的写作方式。3.除非页面非常短，否则编写一个简单介绍web站点的目标、可得到信息及途径的简单页面是很有帮助的。这一页面应包括内容介绍及目录，它可以使读者能对继续阅读哪一页做出迅速的判断。此外，这一页上还可包括指向有关所述论题的、更多信息的页面链接。4.如果可能，应该将每一页都设计的简短一些，每一页的文本及图形不应该超过一到两个屏幕。如果一页太长，则读者不得不来回滚动屏幕以阅读整份页面，这样就会打断文档的流畅性。如果页面必须很长，则应在文档中包括目录和指向特殊位置的链接，以使读者便于找到所需信息。5.不要在页面上设置太多的图形。图形文件很大，意味着浏览器装载一页包括图形的页面会非常费时。尽管你的网络连接可能非常的迅速，但是别人访问你网页可能相对很慢。6.在决定将自己的页面推向世界之前，应仔细检查一下是否有错误和不佳之处。二.网站和网页在我们开始学习网页制作之前呢，先让我们了解一下关于网页的一些知识。1.网页和网站2.动态网站和静态网站3.web1.0和web2.0三.Html基础及简单页面设计HTML的编写是指创制和定义html文档的过程。重要内容:1.Html标记2.Html的基本结构3.创建一个简单页面4.浏览自己的页面文档结构和格式的定义是由html元素来完成的。而html元素是由单个或一对标记定义的包含范围。一对标记是指一个起始标记和一个结束标记。一个起始标记是由一个元素名和后面的一个在小于号（<）和大于号（>）之间的属性/值对系列组成。结束标记在元素前有一个斜杠（/），此外，它并不包括属性/值列表。1.Html标记在html中，标记的语法如下：<标记名称>要控制的文字</标记名称>当用一组html标记将一段文字夹在中间时，这段文字与夹文字的标记被称为一个组件。如：<title>hehe</title>这就是一个组件，其中的title即为元素名，<title>就是一个标记，hehe为该元素的内容，有时在元素名后面还有属性。因此，在html文件中某个组件的完整定义语法如下:<标记名称属性1=“值1”属性2=“值2”属性3=“值3”……>组件数据</标记名称>由以上可知，标记元素有四种格式：空元素（没有内容的元素）带有属性的空元素带有内容的元素带有内容和属性的元素注意：在html标记中，英文大小写字母的意义是相同的，也就是说<html>和<HTML>标记是一样的。由于标记的存在和使用，html拥有层次极为分明的基本结构。这对页面的制作有很大的帮助。2.Html的基本结构由于在HTML语法中，每个由html标记与文字所形成的组件还可以包括另一组组件，因此，整个html文件就像一个大组件，还包含了许多小组件。其中，所有的html文件最外层的组件，是由<html>标记所建立的，在<html>标记所建构的组件中，还包含了两个主要的子组件，这两个子组件是由<head>标记与<body>标记建立的。<head>标记：建立的组件的内容为文件标题。其中并不放网页的任何内容，而是放置有关有关html文件的信息，例如：文件的标题、编辑方式……等等。这些信息大部分是提供索引、辨认和其他应用之使用。<body>标记：建立的组件是html文件的主体，也就是网页的主要内容。依照各种html的控制，这些内容将呈现在浏览器的窗口中。因此，所有文件的最基本结构如下：<html><head>……</head><body>……</body></html>Htmlheadbody从上图中，我们可以容易的了解到整个html文件中所有的数据均被建立为一个一个组件，并组织为一个层次化的结构。当利用html标记来定义组件时，定义标记不可交错，否则将造成错误。下面的语法中，<head>标记与<body>标记彼此交错，这样是不对的，如果标记交错时，我们无法区别两个组件的范围<html> <head> …… <body> </head> …… </body></html>错误使用记事本程序

3.创建一个简单页面创建一简单页面的基本步骤1.打开一个html编辑器2.编辑你的html文档3.保存html文档4.浏览你做的页面文件扩展名为.html格式

两种方法：1.打开ie浏览可以通过ie的菜单选项打开.html文件

<html><head><title>我终于会自己设计页面了</title></head><body>我终于会自己设计页面了哈哈</body></html>四.Web页面的颜色通过<body>标记内属性的设置，来达到控制web页面的颜色的效果，主要内容：1.为web页面设置背景颜色2.为web页面设置文本颜色3.在web页面设置中为超文本链接设置颜色4.利用图像作为web页面使得背景1.为web页面设置背景颜色Html允许编写者为其web页面选择各种各样的颜色，包括背景、文本等等，这通过这种<body>标记的常用属性Bgcolor属性（用来控制页面的背景颜色）语法：bgcolor=“颜色”其中，颜色可以通过两种方式来表示，可以直接指定颜色的英文名称，常用的基本颜色名称如表：另外，也可以利用十六进制数值方式来指定颜色，颜色的表示方法如下：#RRGGBB其中，RR代表红色、GG代表绿色、BB代表蓝色，我们以00到FF的值表示三种颜色成分的多少，以指定出三种原色以多少的成分组成新颜色。语法如下：<bodybgcolor=“#00ff00”>另外，ie支持3位数的颜色表示方法。与六位数的表示方法类似，不过就是位数少而已#RGB分别表示红绿蓝的成分。例如：绿色可以用“#0F0”表示（实例）2.为web页面设置文本颜色Text属性此属性用于控制网页中文字的颜色Text=“颜色值”有关颜色值的设定，与前面bgcolor属性的说明一样。（实例）3.在web页面设置中为超文本链接设置颜色Link属性、alink属性、vlink属性Link属性：控制的是网页中未被选择过的超链接的颜色vlink属性：控制的是网页中已经被选择过的超链接的颜色Alink属性：设置超链接在被选择时的颜色它们的语法分别为：Link=颜色值Vlink=颜色值Alink=颜色值有关颜色值的设定，与bgcolor的颜色值的设定完全相同4.利用图像作为web页面使得背景Background属性指定作为html文件背景的图片，可以使用的图文件格式为gif和jpg，其语法如下：Background=“文件名称与路径”假如引用c:/html/sub/目录下的bg.gif图文件作为html文件背景时，此属性的设置语法如下：Background=“c:/html/sub/bg.gif”五.给html文档加注释和一般的程序语言一样，html编辑者也可以对自己的语句进行注释。一般来说，注释是用来标示html语句的作用的，对程序的读写都有重要的作用。注释的格式如下:<!—注释的内容-->或<!注释内容>一般来说，注释有两个用途;1.在创建文档时，为编辑文档设计提供途径，此类注释将会对维护和修改极有帮助2.一些应用程序要利用注释在html中包括额外应用程序的特定信息注释的一般步骤如下：1.打开一个html文档2.确定要添加注释的位置3.将插入点移至该位置，插入注释语句4.保存文档为.html文档，在浏览器中查看显示效果（实例）第1章特殊字符、逻辑效果一.特殊字符二.字符的物理效果三.字符的逻辑效果一.特殊字符在网页中会看到许多特殊的符号标记，其中许多标记是不可能通过键盘直接输入的，比如“<”和“>”是html的一种标记，如果直接输入这些标记，就会产生意想不到的错误。而一些ASCII之外的特殊字符也是无法直接输入的。如果要显示这些字符，就必须进行特殊符号的引用。在html文档中可以指定任何isolatin1字符，但是一般的编译环境却不一定包括这些字符。Html提供两种引用类型来包含字符，这样可以很方便地使用它们。（实例1.html）1.字符引用：通过使用isolatin1字符代码可以包含任何字符。2.实体引用：一些常用的字符已经被指定了助记符。可以通过指定恰当的助记符来包含这些字符。无论是字符的引用还是实体引用，都可在html文档中输入任何一个isolatin1字符。只是因为许多平台并不支持全部的isolatin1字符集，html才提供了这两种方法。二.字符的物理效果创建html页面时，我们有时需要强调或将一个单词或词组同其他文本分开。这需要给特定的字符或文本以特殊的效果。正如字处理器提供了一些样式（如黑体或斜体）来改变文本的显示一样，html也提供了一套改变字符显示效果的手法，如黑体、斜体、下划线以及替换文本的尺寸和颜色。这样的效果被称为字符的物理效果。字符显示效果有黑体、斜体、下划线等等，每种效果对应一个标记(2.html)<b></b>:可使短至一个字母长至一整段的文本成为黑体。<i></i>:使其间的任何文本用斜体显示出来<tt></tt>:任何位于<tt></tt>之间的文本均以固定宽度的字体显示出来，从而保证字的准确定位。<u></u>:给其间任意长的文本加下划线。<s></s>:将位于<s></s>之间的文本以删除线格式显示出来。<sub></sub>和<sup></sup>:Sub标记将其间的文本放置在低于一行的位置上。Sup标记之间的文本则比一行中的其他文本都要高一些。对于文字而言，我们除了可以使用以上标记来控制其显示效果外，还可以通过<font>标记控制字符的字体、大小与颜色等。<font属性=值1属性=2属性=3……>要控制的文字</font>Font标记的属性1.Face属性：控制字符使用字体的属性，其语法如下：Face=“字体名称”，如果在所指定的字体名称并不存在于用户的系统中，将使用默认的字体。2.Size属性：控制字符大小的属性。语法如下：Size=“字符等级”在ie中，字符的等级共有7级，7为最大的字号。3.Color属性：控制字符的颜色，语法如下：Color=“颜色”颜色的设定可运用英文名称或十六进制数值，与<body>标记中bgcolor的设定方法一样。实例(4.html)<basefont>标记在文档的开头位置使用<basefont>标记来改变整个文档的大小，利用size属性来改变默认的字符大小。例如，要创建一个默认字符大小为2的文档。<basefontsize=2>其余同<font>标记实例(9.html)专门控制字符大小的标记<big>和<small>实例(3.html)以上几种方法可以达到改变字符大小原理：当浏览器遇到一个<big>或<small>标记时，它就会将<big>和</big>(或<small></small>)之间的文本按预定量放大或缩小。当浏览器遇到一个<font>标记时，它读取其属性并对字符的大小和颜色作出变动。当浏览器遇到一个<basefont>标记时，它按size属性指定的字符大小调整这个页面上所有文本。三.字符的逻辑效果除了字符的物理效果外，html还提供了一套称为逻辑效果的标记，它们不仅可以指定在文档文本中特定格式的效果，还能标出文本的含义。如标题样式的使用、特别强调、制定引用等。1.标题样式的使用2.增加强调和特别强调3.包含小段代码和变量4.提供文字字符的样本5.指示作为键盘输入的文本6.指定一个地址1.标题样式的使用有时候，我们要给页面添加几个标题，有主标题和副标题等，但是又不想使各个标题的字号一样大。这时候，我们可以通过<hn>标记来标识文档中包含不同大小字号的主标题和副标题。Hn标记标示的字符将以粗体的形式显示在网页中，语法如下：<hn>标题字符</hn>其中n是1至6的数字，表示标题的层次。<h1>的标题最大，<h6>的标题最小在<hn>标记中有一个较为常用的属性align，用于控制标题的对齐方式。语法如下：Align=left或Align=center或Align=right这三个设定值依序把标题文字的对齐方式设为靠左对齐、居中对齐、靠右对齐。实例(6.html)2.增加强调和特别强调在页面中，我们可以不通过黑体或斜体的方法，而达到强调页面中某些字词的目的，这需要使用<em></em>和<strong></strong>标记。它们分别用作一般性强调和特别强调，可以高亮度显示文本的特定区域。当浏览器遇到一个<em>标记时，它就使用浏览器中强调文本的特殊指示来强调位于<em></em>之间的文本。当浏览器遇到一个<strong>标记时，它就强调位于该标记之间的文本，如果再一次使用该标记，表示特别强调文本的特殊指示。实例(7.html)3.包含小段代码和变量有时候我们有一些程序代码样本和变量需要放置在web页面上。我们想使其同其他文本有所区别，但又不愿在物理形式处理上花费太多时间。我们可以使用<code>和<var>标记来实现这种效果。<code>标记将程序代码段以固定宽度字符显示。这是因为浏览器将位于<code>和</code>标记之间的文本按其显示代码的样式显示。而位于<var>和</var>之间的文本则按变量的样式处理，所以<var>标记将程序或其他程序的变量以斜体显示。4.提供文字字符的样本在html中，我们使用<samp>标记来将位于<samp>和</samp>作为文字字符的样本显示。当浏览器遇到一个<samp>标记时，它就根据其内置的规则格式化位于<samp>和</samp>之间的文本，通常，这种显示文本的字符是固定宽度的。另外，尽管<samp>标记的文本同用其他样式标出的文本的显示看起来是一样的，但是最好还是用<samp>来引用一个特殊的样本。5.指示作为键盘输入的文本有时候设计者想在web页中将一些输入的样本包括在一段计算机程序中，且使这些样本样式与格式化的标准文本不同。在html中，我们使用html键盘样式标记<kbd>来标记由用户自己输入的文本，还可以使用它显示计算机命令、参数，尤其是由用户输入的内容。由<kbd>标记的文本通常是使用固定宽度的字符。6.指定一个地址Html还运行用户使用<address>标记来指导有关web页的创建者或维护者的信息。这一信息可以包括姓名、电子邮件地址、电话号码、信件地址或其他相关信息。实例(8.html)以上我们掌握了字符效果的基本样式，包括字符的物理效果和逻辑效果。在实际应用中，如何利用这些样式来美化自己的主页，提出几点建议1.只有越少使用它们，才能越有效果。如果每隔一个词就用黑体表示或将一大段文本显示为斜体，是不会引起读者任何注意的。2.除了要少用强调外，频繁地把普通样式改为黑体或斜体等样式也会使文档的阅读变得困难，这是因为研究必须先停下来并调整到新的类型样式之后才能继续的阅读下去。减少样式的变换可以防止这个问题。3.在www用户和文档创建者之间一直有很多关于正确使用<b>与<strong>及<i>与<em>的讨论。在大多数浏览器中，这些标记的功能是相同且可互换的。这里并没有一条使用这些标记的正确方法。但是作为一条普通规律，我们应该考虑一下规则：在要强调一个字或词时，使用<em>或<strong>。当某个字或词要求一个特殊的样式时，例如书名或特定名称，则使用<I>或<b>。当有疑问的适合，则强调包含这些字词的句子，这时用<I>或<b>。如果想格式化一个文档突出强调的字词时，则用<em>或<strong>。4.Html还提供了一些在大多数浏览器中显示时难以区分的标记：<tt>、<code>、<samp>、<kbd>，它们均可使文本以固定宽度字符样式显示。但实际上，它们之间差别很大。当从一个程序中插入一些代码时，使用<code>标记。当你想要显示用户输入程序的信息时，请使用<kbd>标记。而利用<samp>标记就可以显示文字字符的一个样本，其他需要用固定宽度字符显示的情况则可用<tt>处理。这些区别不仅使浏览器选用最佳方式来显示信息，还可使扫描web页的索引程序通过标记的使用准确识别代码和键盘输入等等。如果对于所有需要使用固定宽度字符的要求均只使用<tt>,则大多数浏览器的输出看起来都是一样的，但索引程序却很难找出web页面中的代码和键盘输入。准确使用这些样式，可以为自己的新主页添色不少，也可使它们更易阅读。如果小心使用，物理样式可以提高web页的显示效果。此外，正确使用内容样式可以使读者找到它们感兴趣的东西，同时也便于索引程序更好地做出web页内容的目录。第3章表格表格在对web页上的信息格式和布局进行控制的较好方法，它定义格式化信息有着强大的功能，能够控制各种信息的位置，使得页面结构协调一致。一.创建一个简单表格二.定义单元格的高度和宽度三.控制表格的边框及边框线四.创建跨单元格的存储格在网页中，表格的运用是非常重要的技巧。在html中，表格的建立主要就运用<table>、<tr>、<td>、<th>四种标记来显示完成的1.<table>和</table>标记：用于表示一个表格的组件。一个表格组件将由数个行<tr>、存储格<td>、标题格<th>子组件所组成。2.<tr></tr>：用于定义表格的一行，一组<tr>标记内通常包含数组由<td>或<th>标记所定义的存储格。3.<td></td>用于定义表格的存储格。4.<th></th>：用于定义表格的标题存储格，此存储格中的文字将以粗体的方式显示。在一个最基本的表格组件中，必须包含一组<table>标记，一组<tr>标记与一组<td>标记。语法如下：<table><tr><td></td></tr></table>一.创建一个简单表格1.创建一个简单的表格2.给表格添加一个标题3.如果需要，把表格的第一行设计为表头4.给单元格和表格元素定义数据1.创建一个简单的表格输入<table>和</table>标记。如果要显示表格单元格的边框，则需在<table>标记中添加border属性。并为Border属性设置值。如：<tableborder=2></table>2.给表格添加一个标题使用<caption>和</caption>标记来添加标题，语法：<caption>表格标题</caption>如果要添加的标题位于表格的上方，则将<caption>表格标题</caption>置于<table>标记下一行，如：<table><caption>表格标题</caption>……</table>如果要将标题置于表格下方，则将<caption>表格标题</caption>置于</table>标记之前。如：<table>……<caption>表格标题</caption></table>我们还可以像对待其他文本一样，格式化<caption>和</caption>中的文本<caption>表格标题</caption>3.把表格的第一行设计为表头通过<th>标记来指定表格中特殊表头单元格，<th>标记之后的文本作为表头单元格的一部分。可以在表格的任意地方使用这个标记，表头也不是必须要放在各列的顶部。当表格的<table>标记和表格标题输入之后，在表格的每一列中放置一个<th>标记和该列中的文本。<table><caption>表格标题</caption><th>第一列<th>第二列<th>第三列</table>4.给单元格和表格元素定义数据使用<td>标记来建立单元格，并往其中添加数据，它的用法与<th>标记的用法十分相似。<table><caption>个人资料</caption><tr><th>姓名<th>居住地<th>职业</tr><tr><td>张三<td>北京<td>学生</tr><tr><td>李四<td>上海<td>工程师</tr><tr><td>王五<td>深圳<td>老师</tr></table><tr>标记的用法同<th>类似，表格是用来创建表格中行的。如实例所示，表格的每一行都是由<tr>标记来建立。根据需要，可把某个单元格设置成空数据格，即不输入数据到该格中，也就是在<td>标记之后不输入数据。<tr><td>李四<td><td>工程师</tr>二.定义单元格的高度和宽度表格的宽度由<table>标记的width属性来控制，而高度则是由<table>标记的height属性来控制的。语法分别为：Width=数值Height=数值数值的设定值若为一整数，则其单位为像素，若设定值为n%，则代表表格的宽度为整个网页宽度的百分之n。如：将width属性设为50%，代表此表格宽度为整个网页宽度的一半。<tablewidth=300height=50><caption>个人资料</caption><tr><th>姓名<th>居住地<th>职业</tr><tr><td>张三<td>北京<td>学生</tr><tr><td>李四<td>上海<td>工程师</tr><tr><td>王五<td>深圳<td>老师</tr></table><tablewidth=50%height=40%><caption>个人资料</caption><tr><th>姓名<th>居住地<th>职业</tr><tr><td>张三<td>北京<td>学生</tr><tr><td>李四<td>上海<td>工程师</tr><tr><td>王五<td>深圳<td>老师</tr></table>两者设置宽度和高度的区别，当改变浏览器窗口大小的时候，用百分比设置的表格会随浏览器窗口的变化而变化，而通过像素设定宽度和高度的表格的大小不会变化。以上是对整个表格的所有单元格的高度和宽度的控制，也可以在<tr>标记中添加width和height属性来控制某一行的宽度和高度。如：<trwidth=300height=100></tr><trwidth=40%height=20%></tr>三.控制表格的边框及边框线通过<table>标记的属性可以控制整个表格组件的格式。1.Border属性：用来控制表格边框线的厚度，语法如下：Border=数值，数值的设定若为整数，则其单位为像素(pixel)。2.Cellspacing属性：用于控制存储格边框到表格边框的距离，框线的宽度。Cellspacing=数值3.cellpadding:用于控制存储格内文字的边缘到存储格边框的距离。cellpadding=数值<tableborder=10width=500height=500><caption>设置表格的边框</caption><tr><th>姓名<th>居住地<th>职业</tr><tr><td>张三<td>北京<td>学生</tr><tr><td>李四<td>上海<td>工程师</tr><tr><td>王五<td>深圳<td>老师</tr></table>4.设置表格背景颜色与边框厚度颜色<table>标记还有两个属性Bgcolor属性：控制表格的背景颜色bordercolor属性：控制表格厚度的颜色<tablebgcolor=bluebordercolor=red>5.设置表格的对齐方式表格对齐方式有两种：水平方向和垂直方向align(水平方向)：Align=left（水平左对齐）Align=right(水平右对齐)Align=center(水平居中对齐)Valign(垂直方向)Valign=top(垂直顶部对齐)valign=bottom(垂直底部对齐)Valign=baseline(垂直一条公共基线对齐)valign=middle(垂直居中对齐)(1).align属性可以放置于<table>标记中，控制整个表格在网页中的对齐方式。<html><body><tablealign=left><tr><td>靠左对齐表格</tr></table><br><tablealign=center><tr><td>居中对齐表格</tr></table><br><tablealign=right><tr><td>靠右对齐表格</tr></table><br></body></html>(2).align和valign属性也可以在<tr>标记中控制对齐方式<html><body><table><tralign=leftvalign=top><td>张三<td>北京<td>学生</tr><tralgin=centervalign=bottom><td>李四<td>上海<td>工程师</tr><tralign=rightvalign=center><td>王五<td>深圳<td>老师</tr></table></body></html>四.创建跨单元格的存储格我们常常会看到有的表格里的某些存储格跨了好几个单元格，这是通过colspan和rowspan属性来控制而达到的。Colspan属性：水平延伸存储格，语法：Colspan=nN为整数，代表此存储格水平延伸的存储格数。Rowspan属性：垂直延伸存储格数<html><body><tableborder=3><tr><thcolspan=3>个人资料</tr><tr><th>姓名<th>居住地<th>职业</tr></table><br><tableborder=3><tr><throwspan=3>个人资料<th>姓名</tr><tr><th>居住地</tr><tr><th>职业</tr></table><br><tableborder=3><tr><throwspan=2>姓名<thcolspan=2>个人资料</tr><tr><th>居住地<th>职业</tr><tr><td>张三<td>北京<td>学生</tr><tr><td>李四<td>上海<td>工程师</tr><tr><td>王五<td>深圳<td>老师</tr></table><br></body></html>第3章列表有些信息最好是以列表的形式表现出来，比如一个菜谱的配料、最喜欢的10套唱片、一个演出大纲以及一套术语的定义。虽然可以利用<p>和<br>之类的标记来管理在文档中各项目的位置及创建列表，但是这些标记使用起来很麻烦，而且对于最合适信息的列表类型的创建也无多大的灵活性。所有html提供了一些标记用来创建包括有数字编号、点或圈标志、缩进及其他性能的列表：而且，html4.0还包含了一些为建立以最佳形式表达数据的列表提供更多功能的属性。将文字内容以条列的方式显示，对于阅读者来说通常是比较清除而易读的。Html共提供了三种用于条列文字的标记，它们是有序条列与无序条列以及说明项目条列标记1.有序号条列就是有一定顺序的列表，比如有数字编号的列表和指定编号的列表等。2.无序号条列就是有标志但不管顺序的列表，如点圈标志等。3.说明项目条列就是没有标志，且排列内容无一定次序的列表。1.建立一个有数字编号的列表2.指定编号的格式和顺序3.创建一个带有点或圈标志的列表4.创建一个无标志列表5.建立一个菜单列表6.建立目录列表7.建立术语列表8.嵌套列表9.利用列表使主页更有活力1.建立一个有数字编号的列表在html中可以创建一个在各项目之前自动生成数字编号的排序类别。项目之前的数字取决于该项目在列表中的位置：若第一项是1，则第二项是2，以此类推。这是通过<ol>和<li>标记来实现的语法如下：<ol><li>条列1<li>条列2<li>条列3……</ol>建立一个有数字编号的列表的一般步骤如下：<html><body><ol><li>红色<li>绿色<li>蓝色<li>紫色</ol></body></html>实例：1.html一些浏览器允许将列表做的更紧凑一些来节省空间。在一个紧凑的列表中列表项目间通常空格很小，且会使用更小更紧缩的字体。如要指定一个压缩的列表，只需用<olcompact>标记代替列表开头的<ol>标记。2.指定编号的格式和顺序有时候编号不一定是数字，或者是数字也不一定是从1开始。如果是这样，我们可以通过<ol>标记的属性start和type来控制。如果不是以数字1开始，则在列表的开始处的<ol>标记中放置一个start属性，其后是等号(=)及第一个数字的值。例如要创建一个以100为开头的列表如下：<html><body><olstart=100><li>红色<li>绿色<li>蓝色<li>紫色</ol></body></html>可以在<li>标记中使用value属性来改变列表内的标号顺序。例如要从3开始，但是列表后部的值更大一些，下面的html语句创建的列表首先从3开始，到了蓝色这一栏将从10开始。（实例：13.html）<html><body><olstart=3><li>红色<li>绿色<livalue=10>蓝色<li>紫色</ol></body></html>利用type属性来控制序号的种类，语法如下：Type=1type=Atype=atype=itype=I属性值定义1使用标准数字，此为默认值(1、2、3等)A使用大写字母(A、B、C等)a使用小写字母(a、b、c等)I使用罗马大写字母(I、II、III等)i使用罗马小写字母(i、ii、iii等)例如要在列表中使用大写字母，则输入：<oltype=A> <li>红色 <li>绿色 <li>蓝色 <li>紫色</ol>我们还可以在<li>标记中使用type属性来更改列表中的编号体系。例如将标准数字改为罗马大写数字，则输入：<html><body><ol><li>红色<li>绿色<litype=I>蓝色<li>紫色</ol></body></html>实例：2.html3.html当一个html浏览器遇到一个带有等于某值的start属性编号列表时，它可用这个值开始为列表编号。类似的，当它遇到一个等于某值的type属性时，它就用此数值匹配编号类型的预定义列表，并使用恰当类型为列表编号。当浏览器在一列表元素中遇到一个type或value标记时，它就根据标记中设置的值改变列表编号系统。3.创建一个带有点或圈标志的列表Html可以用来创建带有圈标志的或称为无序的列表，其中的点圈能够自动生成并置于每一个列表项之前。这一技术极像编号列表中使用的技术，其唯一区别仅在于使用的标记不同。这里使用的标记是<ul>和<li>。用法与<ol>和<li>基本相同。不同的地方在于type属性的不同，此标记的语法如下：<ul> <li>条列1 <li>条列2 <li>条列3 ……</ul>这里type属性用于设定项目符号，用法为：Type=circleType=discType=square其中，三种type值所代表的条列符号分分别为圆圈○、实心圆●、实心正方体■。实现步骤与前面有数字编号的列表的建立步骤完全一样，只不过是要把<ol>和</ol>换成<ul>和</ul>。实例：4.html4.创建一个无标志列表在html中，我们可以创建一个没有任何标志的列表，这个通过使用<dl>和<dt>标记来完成。建立无标志列表步骤与有数字列表建立步骤一样。不过要把<ol>和</ol>换成<dl>和</dl>,同时把<li>换成<dt>。如果要创建的是不同于普通文本的缩进式列表，则不用<dt>而用<dd>代替<li>实例：5.html上例中缩进式列表原理是<dd>标记在列表项之前又加了一个制表符。不过，缩进量是由浏览器设置的，而不能由文档控制。5.建立一个菜单列表使用<menu>标记和<li>标记可以使列表各项以菜单的形式显示。用法与<ol>和<li>基本相同。用<menu>标记替换<ol>标记。实例：6.html6.建立目录列表使用<dir>标记和<li>标记可以使列表各项以一个相关条目的形式显示。用法与<ol>和<li>基本相同。实例：6.html7.建立术语列表通过前面的学习，我们已经了解<dl>、<dt>、和<dd>标记。在那里，<dd>和<dt>标记是分开使用的。但是它们却可以共同使用来创建一个术语列表。也就是说，以带有术语及其带有的列表形式显示处理，并且强调指出这些词语及其定义。实例：7.html8.嵌套列表我们经常可以看到这样的列表，既有主标题，每个主标题下又有子标题，并能以此类推。这就叫嵌套式列表。在html中，嵌套是很容易实现的1.数字编号列表（实例：8.html）2.点圈标志列表（实例：9.html）3.菜单列表（实例：10.html）4.无标志列表（实例：11.html）5.混合列表（实例：12.html）9.利用列表使主页更有活力列表的使用有利也有弊。用的好，读者通过它能很快地找到所需的信息。通过将相关信息分组并使用平行结构，用户可以很容易地根据提供信息进行分类。但是，如果用得不好，反而会有很差的效果。在使用html创建列表时，要注意以下几点：1.避免列表太长。太长的列表会令人生厌并不易阅读，而且读者也很难找到所需的特定信息。在这种情况下，应该把它拆成小的列表，并标以不同的题目。这也就是嵌套式列表的有用之处。2.保持列表的一贯性，在一个列表中间不要更换动词时态或做其他形式上的改动。3.在各行中，使各项保持相同的长度。列表可以做成只有一个词的短表，也可以做成包括成段句子的长表；但是这两种类型不能混用。第4章超级链接只需少量的标记就可以格式化文本文件并使其在worldwideweb上高效地显示出来，它使html和www成为在internet上发表文档的好方法。但这仅仅是利用了worldwideweb的极少量的能力。文档阅读者可以设想只需通过简简单单的键盘敲击和鼠标摁动，就可移至该文档的其他位置上、本台计算机的其他文档上，或者是全世界的internet资源上。www提供了一种工具来完全地实现上述功能。它就是超级链接。1.url介绍2.创建链接3.创建一个简单的链接4.创建一个指向页面特定部分的链接5.在表格和列表中使用链接1.url介绍url（uniformresourcelocator，全球资源定位器），是worldwideweb浏览器用来定位在internet上文件的工具，为使用各种协议访问信息提供了一个简单连贯的方法。一个url包括3部分：一个协议代码、一个装有所需文件的计算机地址（或一个电子邮件地址或是新闻组名称），以及包含所需信息的文件地址和文件名。如：/main.html当浏览器遇到一个url时，它首先检查其协议以决定程序获取信息必须使用的方法。之后浏览器取得计算机的地址，然后访问站点，并使用url中的路径信息找到文件并将它的一个拷贝返回到浏览器所在的计算机上。1.解释一个urlurl包括3个部分，第一部分是协议，协议表明应使用何种方法获得所需信息。现在worldwideweb上共有7个主要协议。在这7种协议中的5种（ftp、gopher、http、telnet和wais）协议后均需接一个冒号和两个斜杠（//），斜杠之后则是相关信息的主机地址。如：而在mailto协议之后紧跟一个冒号，其后就是e-mail地址了。如：mailto:john@263.net在news协议中，协议后跟一个冒号，其后是usenet新闻的名称。如：News:alt.widgets对于除了mailto和news之外的协议，计算机地址之后都接着所需文件或目录的路径。如：/pub/teams/yankees.html/incoming/fjm/1.doc2.理解相对的url有时候url只是一个文件或某种路径，并不包括任何种类的协议。此时可以利用路径名来寻找各个目录中的文件，如:C://mydocuments/mydoc/2.doc同时，web浏览器会假设给出的位置与当前页面的位置相关，它将使用路径信息在目录中上移或下移以达到该位置并检索此文件。也就是说，不用写出完整的路径名就能指定页面和其他文件的位置如下目录结构图如要访问一个与当前页面所处目录相同的文件，则只需将该文件的名称作为url。如：现在是在page1.html中，想要到page2.html中，则只需输入：page2.html如果要访问的文件位于当前页面所在目录的子目录中，则需包括子目录名，并将其余文件名用一个斜杠（/）分开，如由page1.html到page3.html中，则输入：flash/page3.html如果对于父目录（高于当前目录所在目录的目录）中的文件，则在两个句号（..）和文件名之间用一个斜杠分隔开。例如，想由page3.html到page1.html中，则输入：../page1.html由上两步综合起来使用，可由一个目录转移到任何一个其他目录。例如要从page3.html到page4.html中，则输入：../image/page4.html实例：1.html2.创建链接要将你的文档或信息与别的资源连接起来，就必须创建它们之间的链接。创建链接的方式有两种：1.可以使用<link>来指定一个文档同其他资源的关系，包括之前和之后的文档、表格内容、索引以及其他文档部分。浏览器阅读和存储包含在<link>元素中的信息，并将其作为相关文件的位置。2.使用<a></a>标记可以创建各种各样的链接，如指向本地页面的链接、指向其他页面的链接、指向页面特定部分的链接以及指向服务器或站点的链接等。当用户选择建立于页面中的链接后，浏览器便会浏览该超级链接位置的网页。建立超级链接所使用的标记为<a></a>，其语法为：<ahref=“链接位置”>超级链接名称</a>此语句的各个部分1.超级链接名称此字符串将显示于网页中，代表此超级链接，并供用户选择超级链接之用。除了可以使用字符串外，在<a></a>标记中，也可以插入图像文件，这样该图像文件便可代表该超级链接。当用户把鼠标移到代表该超级链接的文字或图片上时，光标的形状将变成手状，表示该用户可选择该链接。2.链接位置用于指定href属性中超级链接的目标位置，这可使用url来指定。url的格式由使用的通讯协议、链接地址与文件位置所组成下面列举一些常见的链接位置的设定方式(1).通过http协议链接至其他网页<ahref=/main.html>(2).指定通过ftp协议链接至网络上的ftp服务器<ahref=>(3)telnet链接：<ahref=“telnet://”?>(4)电子邮件<ahref=mailto:hehe@263.net>(5)链接至同一服务器上的其他网页<ahref=“c:\index.html”>3.创建一个简单的链接创建简单链接的一般步骤：1.打开或创建一个需要使用链接的文档，并定位要用于链接的字或词。2.通过在锚点文本的前后放置<a>和</a>标记来标出用作链接的文本。3.在<a>标记中放置href属性并使其等于要链接的对象的url4.保存文档，查看效果实例：2.html5.创建一个指向页面特定部分的链接通过上面的学习，我们能够创建从一个页面到另外一个页面的链接，但有时候你只需从一个页面到另一个页面的一个指定位置之间的链接，例如链接到第二个页面的第四部分，这应该怎么达到呢？方法就是在第二个页面的html文档中建立一个锚。所谓锚，就是链接到文档内部的指定位置。在第一个页面建立的链接将包含链接的文件名和锚的名字。然后，当浏览器按这个链接查找时，就把第二个页面装入，然后向下滚动到锚的指定位置。如果第二个页面就是第一个页面，这也是可行的。也就是说，进行的是从一个页面到该页面本身某个位置的链接。这种链接常用在web页面较长，无法在一页中显示的情况下。实例：first.html6.在表格和列表中使用链接设计者可以将表格或列表与超级链接联合起来使用，比如建立一个菜单用以组织一套指向不同页面的链接。可以像为普通页面添加链接一样在列表和表格中添加链接。实例：2.html第3章分节分栏、html扩展1.在web页中创建分节2.利用表格进行web页面的布局控制3.给滚动的文本添加滚动的文本框4.控制页面的显示效果的一些方法1.在web页中创建分节在web页中创建分节是由<div>和</div>标记来实现的。当浏览器遇到<div>标记时，它取出<div>和<div>之间的所有文本，并根据<div>标记中的属性所包含的指示格式化该文本。<div>标记的属性主要有align,设置文本的定位，可设置为left、right和center。实例12.利用表格进行web页面的布局控制表格的应用非常广泛且灵活，为控制web页的图像、文本和其他对象提供了极有力的途径。我们可以在表格单元格中插入文本、图像及其他对象，并控制它们在浏览器窗口中的确切位置。1.安排图像、嵌入对象和文本2.创建分栏文本，将文本分为若干列，在屏幕上一个挨一个地排列1.安排图像、嵌入对象和文本实例12.创建分栏文本，将文本分为若干列，在屏幕上一个挨一个地排列所谓在web页中分栏，就是说将文本分为若干列，在屏幕上一个挨一个地排列。在html中，我们可以利用表格来达到。实例1由于www的迅猛发展，计算机技术更新速度越来越快。浏览器的升级速度更是如此，随着浏览器的不断升级，可供web页的创建者使用的技术范围越来越广。3.给滚动的文本添加滚动文本框4.控制页面的显示效果的一些方法3.给滚动的文本添加滚动的文本框让文本在一个页面滚动是吸引读者注意力的一个独特的技巧。通过<marquee>标记可以达到此效果。主要语法如下：<marquee>要控制的文本</marquee>我们还可以使用它的各种属性来控制滚动文本框的尺寸、滚动行为和颜色等。<marquee>标记的属性主要有：1.Behavior属性：用来控制滚动类型。它支持3种值，如下表，默认为scroll设置值描述alternate文本在屏幕的两端来回滚动scroll从屏幕的一边开始显示文本，并在文本框中不断的移动直到屏幕的另一端slide从屏幕的一边开始显示文本，并在滚动文本框中移动文本直到文本碰到屏幕另一边的界面2.Direction属性：控制文本在滚动文本框中移动的方向。有两个设定值：left和right。分别代表文本从右向左滚动和从左向右滚动。默认值为left。3.Scrollamount属性：用来设置滚动文本框每次重画间隔的像素数，也就是说，控制的是在滚动文本框下一次显示时，滚动文本框的内容将要向下移动的像素数。4.Scrolldelay控制重画间的延迟，也就是重画之间的间隔时间，一微秒为单位。5.Loop属性：用来设置滚动文本框滚动的次数。Loop=nN代表滚动的次数。如果n=-1或infinite，则此时代表滚动文本框将连续不停的滚动。6.Bgcolor属性：用来设置滚动文本框的背景颜色。与以前学过的bgcolor的设置完全相同。7.Height属性：控制滚动文本框的高度。8.Width属性：控制滚动文本框的宽度。9.Align属性：控制滚动文本框周围的文本对齐方式。有3个设定值：top、middle和bottom。分别代表文本与滚动文本框的顶部、中部和底部对齐。10.Hspace属性：用于调整滚动文本框的水平边界。设定值单位为像素。11.Vspace属性：用于调整滚动文本框的垂直边界。设定值单位为像素。实例1第3章管理文档空间Web页的布局或空间设计对于使页面的结构紧凑且易懂是十分重要的。在设计页面时，设计者通常不太注意空间的布置，而这恰恰是错误的。一个空间布局合理的页面是很容易阅读的，因此人们也就会经常的访问它。一个空间布置不当的页面会因为其结构过于松散或拥挤不堪而使读者错过了应注意的信息。1.在文档中添加水平线2.利用表格将文本与一条线对齐、居中对齐文本3.分段与换行1.在文档中添加水平线使用<hr>标记来实现，它没有关闭标记，只在页面上创建一条水平线，将文档页面中一部分信息同其他信息分隔开。例如，标题在前，或从一个项目列表中分离出文本主体，都可使用水平线来实现。<hr>标记注意主要属性有：Width属性：控制表现的长度，单位为像素Width=n或width=n%Size属性：控制标线的宽度Size=nN为数字，代表以像素为单位的该线的粗细程度，默认为2Align属性：控制标线的对齐方式。Align=leftrightcenter实例12.利用表格将文本与一条线对齐表格可以将文本与一表格行的顶部或底部对齐，这是格式化文本的一个有用的性能。这是通过<valign>标记来实现的。<valign>属性的语法如下：<valign>=top<valign>=center<valign>=bottom当浏览器在一个表格单元格中遇到<valign>标记时，它将单元格的内容与单元格的顶部、中部或底部对齐。单元格的大小由该行中所有单元格的内容决定。实例23.分段与换行分段使用<p>,而换行使用的是<br>标记。实例1同其他的标记使用的方法相同，即在不想有行中断的位置放置<nobr>标记，在保持不中断的文本片段末尾放置</nobr>标记。浏览器遇到<nobr>标记且当前行中没有足够的空间来放置<nobr>标记和</nobr>标记之间的文本时，它就将文本移至新的一行中。如果当前行有足够的空间放置，则仍位于此行中。4.在web页面中包含预先格式化的文本同其他的标记使用的方法相同，即在预先设置了格式的文本的开头放置<pre>标记，末尾放置</pre>标记。浏览器以固定的字体显示<pre></pre>标记之间的所有文本，且不忽略回车符和制表符等。实例1第六章样式表Html可以定义文档的结构，但是有些具体的内容并不能被精确的定义。从前面我们所学的各种标记和属性的应用可以看出，到目前为止没有一种方式能够精确指定某一元素的绝对位置，元素的位置随着浏览器窗口的变化而不断地变化。利用样式表可以精确地定义如何表达元素、方便地改变文档的风格。一个很经典的样式表能为开发web网页起到事半功倍的作用。多个样式表可以精确地控制html文档在浏览器中的显示效果，并能创造出更多的效果，同时还可以表达某些特定页面的内容。样式表提供了增强、扩展和改进浏览器显示web页面的方法，所以它已经成为html功能最为强劲的特性之一。样式表的各种长度单位如下表样式表可以分为级联样式表css(cascadingstylesheets)和动态样式表。后者是由级联式样式表和javascript组合在一起的，它具有级联式样式表的功能，所以它的功能要比前者强大得多。我们所要学习的是级联样式表，一般来讲，样式表是级联式样式表的简称，而不包含动态样式表。样式表主要是通过把各种样式属性按照要求组合在一起，从而形成对指定元素的样式修饰。而这些放在一起的样式属性就构成了样式规则，因为它们规定了指定元素在页面中的显示样式。下面主要介绍有关样式表的基本内容和应用样式表的常用标记。1.级联样式表的基本规则样式表实际上是由一些具体的样式属性所组成的，如颜色属性、文本属性、以及位置属性等，并由这些样式属性来精确、详细地格式化文档显示。尤其是样式表中可以应用位置属性，主要就可以控制元素在页面中的具体位置，如元素在页面中的绝对位置等。显示在页面上的元素样式可能很复杂，样式表可以根据具体的要求，通过添加相关的样式属性来描述指定的样式，所以这就使得样式表的使用及其灵活、多样。在实践的基础上可以创建各种经典的样式表应用与各种html文档中的描述元素，同时主要做还可以使不同的页面达到比较一致的显示效果。总之，样式表是由<style>标记及其属性来实现的，使用标记或者属性可以指定任意的样式属性来组成样式表。级联样式表主要分为内部级联和外部级联。内部级联是指在html文档代码中直接使用样式标记或者样式属性来描述元素的样式，而外部级联是指通过引用在html文档以外建立的样式表来描述文档元素。现在大部分情况下所谓的样式表或者级联样式表都是指内部级联样式表。级联样式表的一般语法格式为：<styletype=“text/css”>样式标记名1{样式规则1}……样式标记名n{样式规则n}</style>或<标记style=“样式规则”>这里使用的“text/css”属性值所表示的是级联式样式表，而不是“text/javascript”形式的动态样式表。在样式表的应用中，只要语法格式正确，浏览器就可以自动识别是哪种样式表，所以在html文档中不标志级联样式表也是允许的。在上面两种形式中，第一种是用标记来进行样式表处理的，它的样式标记名就是前面涉及到的标记名称。在这里，标记不能包含两边的尖括号（“<”和“>”），例如，表格标记<table>在样式表中作为样式名称只能写出table，而不能包含尖括号。样式规则的格式为：属性名1:属性值1；属性名2：属性值2；……属性名和属性值之间用一个：分开，不同的属性之间用；分开，而其中最后一个属性值后可以不加；所以的属性都使用{}包含起来。例如：<styletype=text/css>P{font-family:’宋体’;font-size:10pt;font-color:yellow}p.Isleft{text-align:left}p.Isright{text-align:right}p.Iscenter{text-align:center}</style>上面的代码将所有段落标志的字体都设置为宋体，大小为10pt，颜色为黄色。另外，由于排版的需要又分成了3个样式类，它们分别具有不同的排版属性。第二种形式就是直接在标记内使用属性style，其中的样式规则和第一种一样：属性名1：属性值1；属性名2：属性值2；……这种方法比较常见，又很灵活，可以在任何位置直接使用。例如：<pstyle=“font-size:24;font-style:italic;font-color:red;”>这样就设置<p>标记的样式为：段落内的字符大小为24，颜色为深蓝色，字符为斜体。2.级联式样式表的属性级联式样式表共有8种属性，如下表应用样式表的两个常用标记<div>和<span>在html文档中经常会用到样式表的两个标记<div>和<span><div>标记表示分界，通过这个标记可以对文本的元素进行分界格式化的处理。<span>标记则定义了html文档的间隔，使用<span>标记可以限定标记范围内元素的背景范围（这也是应用样式表的结果）创建一个级联样式表创建一个级联样式表的一般步骤:1.选择想要插入的元素和属性。2.在文本编辑器中打开样式单3.如果要修改已有的条目或为其增添一个属性，则移到表单中的那个条目上，并按步骤（4）进行处理。否则指定要修改的html元素选项4.在“{”和“}”之间插入该选项的声明。例如下面的声明至少浏览器用绿色显示特定的元素。{color:green}5.返回到步骤（3）继续编辑，否则保存样式表级联样式表的创建方式上面介绍了样式表的一般创建步骤。实际上，样式表的创建方法有很多种。可以在html中之间创建，也可以通过文本编辑器或者专门的样式表编辑器以外部文件的形式创建。样式表的创建方式大体上分为五类1.声明方式2.限定范围方式3.归类引用方式4.联合声明方式5.使用id方式1.声明方式声明方式可以把单个标记元素或者多个元素放在一起，以同一类别的方式进行声明。所谓声明，就是指直接对标记进行样式的定义。它的语法格式为：声明{样式规则}或声明1，声明2，……声明n{样式规则}前面的表达式是对单独的标记元素进行样式设定，样式规则就是内部级联样式表中所讲的以分号分割各种属性和属性值的联合体，即“属性：属性值；……”的形式。后面一种是把多种标记做相同的样式规则处理，即把它们当作样式相同的同一类。每两个（标记声明）之间都要逗号“，”分隔开，它的样式规则也是“属性：属性值；……”的形式。这两种表达方式在级联式样式表种比较常用，用法也相对简单。例如对于单独的样式声明：P{font-size:18pt;margin-left:50px}上面的样式声明设定了段落标记<p>的样式表样式为：段落中字符大小为18pt，左边距50px。而对于多种标记的样式声明，如果是同一类的声明，样式规则将它们设定相同的样式。例如：P,ul,ol{color:red;text-decoration:underline;Font-style:italic;font-weight:bold}该段代码表示所有的标记<p>、<ul>、和<ol>都应该遵守背景红色，字符加下划线，其字体为斜体和粗体的样式规则。实例：1.html2.限定范围方式这种样式表的创建方法是根据声明的某一标记，把它的作用范围放到指定的标记元素之内。语法格式为：指定标记元素产生样式标记元素{样式规则}指定元素和产生样式标记元素之间要有空格，这样按照样式规则产生的样式表就只在指定元素标记范围内起作用了。例如：Pem{font-size:30pt;color:red;font-weight:bold}Ulli{font-weight:bold;color:yellow}Olli{font-style:italic;color:yellow}此段html代码可解释为：<em>标记内的样式为：字符大小为30pt，粗体，字符的颜色为红色。但是它的的作用范围是<p>和</p>标记，也就是说，只在两者之间有效，放在其他地方则该样式表将失效，只按默认效果显示。对于无序列表中的每一个条目<li>标记所限定的样式为：字符字体为粗体，字符颜色为黄色。这种样式只在无序列表中有效。同样的，有序列表中的每一个条目<li>标记所限定的样式为：字符字体为斜体，字符颜色为黄色，这种样式只在有序列表中有效。实例：2.html3.归类引用方式该方式可以把不同的样式表描述为不同的类，这样可以组合成任意的类供不同标记的引用。这种创建方法极大地提高了样式表的灵活性和可扩充性。语法规则：.类名称{样式规则}在引用的时候，只需要使用标记的class属性来引用类名称就可以了，即：<标记名class=类名称>需要注意的是，类名称前面的句点“.”符号一定不能丢掉，而且这个符号不能写成与句号容易混淆的符号。如：.11{font-weight:bold;color:red}这个语句描述了红色粗体的字符。所有的标记属性class都能够标志该标记所属的类别。在这里定义了样式类名称class1，同样也可以定义成其他任意的名称。大部分标记都有class属性，例如<p>标记、<span>标记等，这样就可以引用样式表中创建的样式类来描述元素的样式。例如：<pclass=11>使用class属性</p><spanclass=11>使用class属性</span>这样就完成了样式引用。其中有一点需要注意：在创建样式类时样式类名称前面一定要加上句点，而在标记中引用时却不能在样式类名称前面加句点。实例：3.html4.联合声明方式这种方式是对标记进行类声明，使得该标记只有使用相应的类时才改变样式效果。标记名称.类名称{样式规则}标记名称和类名称之间一定要加上句点”.“，而不能添加句点之类的相似符号。例如：p.class1{font-size:15pt;font-weight:bold;color:purple}此句代码表示对于<p>标记的class1类样式表描述了字符大小为15pt，字符为粗体，字符颜色为紫色的样式。只有当class1类被标记<p>引用的时候，<p>标记所指定范围内的字符才能以类所标记的样式显示。和上面的归类引用方式一样，class1也可以被定义成其他任意的名称，同时也应该保证类名称容易理解。实例：4.html5.使用id方式这种创建方法是利用了html文档中每一个标记元素都有惟一的标志号”id“的特性，为样式表创建一个标志名称，标记就可以进行惟一的引用来应用样式了。语法格式如下：#id名称{样式规则}在id名称前一定要加上“#”。Id名称可以是字母组合、数字组合或者数字和字母的组合，只有“#”和id名称完整才能构成一个标准的标准名称，而且“#”和id名称之间不能有空格，如果有空格则标记即使引用了id名称也不能显示样式表定义的样式效果。由于这里的id名称可以是任意的合法字符，所以灵活性就体现出来了，即用户可以定义大量的带有不同id名称的样式表来描述元素的样式。一般也要求id名称具有一定的意义而且比较简短，这样比较容易理解。#font1{font-style:italic;color:red}实例：5.html应用样式的两个常用标记——<div>和<span>标记<span>标记和<div>标记便于在html文件的某一部分中应用样式，他们可以和class、id等属性连用。例如：<spanclass=idname>网页元素</span>可以应用样式表中idname类的样式。Span和div的区别在于：div是一个块级元素，div可以包含段落、标题、表格甚至其他部分，这使得div便于建立不同集成的类，如章节、摘要或备注；而span是个行内元素，如同<a>标记一样，span前后都不会换行。Span没有结构的意义，它的存在纯粹是应用样式。当其他的行内元素都不适用时，可以命名为span。实例：6.html第六章样式表的继承和冲突继承是css中一个非常重要的概念。通过前面的学习，我们已经学会了怎么去创建一个样式表，它们只是单独在html文档中的应用。这种情况比较简单。Html还提供了样式表的嵌套，即在一个标记范围内又有另一个标记而两种标记又使用了不同的样式表，那么就可能出现内部标记所修饰的元素具有外部标记所引用的样式表所描述的样式，这就是样式表的继承，也就是，除了自身的样式之外，这些被修饰的元素遗传了上一层标记所引用样式表的样式。例如：<h1>这个标题<em>文本</em>很重要。</h1>在上面的代码中，<h1>标记中包含了<em>标记。现在假设把<h1>的颜色设置为蓝色，而不去设置<em>颜色，那么<em>标记中的“文本”将“继承”上级元素<h1>的样式设置，仍为蓝色。这就是继承。对于样式表的继承，其中的内部标记引用的样式表与外部引用的一样。如果他们引用的样式表的定义不一样，那么对于内部的标记而言，它将采用哪一种样式定义呢？例如对于上面的例子<h1>这个标题<em>文本</em>很重要。</h1>如果<h1>的颜色设置为蓝色，而<em>的颜色色设置为红色，浏览器将显示什么呢？这就是样式表的冲突。样式表的继承当子元素没用被定义样式的情况下，它将继承上级元素的样式定义。实例：1.html通过1.html实例，可以看出，数字编号的列表的每个条目除来自自身的粗体形式外，还继承了无序列表斜体样式。样式冲突的解决对于样式冲突，在html文档中，样式表规则的最具体描述占

人人文库> 全部分类> 专业文献 > 医学资料

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论