1、1.2 HTML入门,HTML是网页制作的一种规范、一种标准。本节介绍了用HTML制作网页的各种标记符的设置方法，包括网页数据的编辑与格式化、在网页中使用超链接和插入图片、网页中的表格设计以及表格与文字的混排等。,1,学习目标 HTML的概念 HTML的语法与结构 掌握HTML的各种标记符号及其属性 能够制作简单网页,教学重点与难点,在网页中使用超链接与图片的编排列表的使用表格与文字的混排,3,1.2.1 HTML概述,一、HTML简介HTML（Hypertext Markup Language超文本标记语言）是一种专门用于创建web超文本文档的结构语言，它能告诉Web浏览程序如何显示Web文
2、档（即网页）的信息，如何链接各种信息。使用Html语言可以在其生成的文档中含有其他文档，或者含有图像、声音、视频等，从而形成超文本、超媒体文档。它不需要编译，由浏览器（如IE）解释执行。,4,二、HTML的功能,出版在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。通过超链接检索在线的信息。为获取远程服务而设计表单，可用于检索信息、订购产品。在文档中直接包含了电子表格、视频剪辑、声音剪辑以及其他的一些功能。,5,三、创建HTML文档的工具,1用工具软件创建HTML文档 用比较完善的工具软件来制作网页，像FrontPage，Dreamweaver 等2用编辑工具编写HTML文档 HTM
3、L是纯文本文件，可采用Windows中的记事本、写字板、Word等编辑工具来编辑，也可以用DOS下的Edit等文本编辑器，保存时文件名的后缀为.htm或.html。,6,四、HTML的基本概念,HTML的主要语法是元素和标记。HTML以标记符来标识、排列各对象。标记符本身以“”标记，标记符内的内容称为元素（element），元素代表了标记符的意义。元素是符合文档类型定义的文档组成部分，如title（文档标题）、img（图像）、table（表格）等。元素名不区分大小写。标记用来规定元素的属性和它在文档中的位置。例如：网页设计教程 title是元素名，与之间的内容都属于元素title，是标记，用来
4、说明元素title。,7,1. 标记,标记符又称标签，指的是对于元素内容进行控制的符号，其具体形式是用一对尖括号“”括起来的字符串。 HTML是影响网页内容显示格式的标记符集合， HTML使用标记来告诉Web浏览器如何对文本进行格式化和显示。如何对网页元素进行分割和标记，以形成文本的布局、文字的格式及五彩缤纷的画面，浏览器根据标记符决定网页的实际显示效果。在HTML中，所有的标记符都用尖括号括起来。例如，表示HTML标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。 如： 。HTML标记符是不区分大小写的，但通常约定标记符使用大写字母，这有利于HTML文档的维护。标记有单标记和
5、双标记之分。,8,（1）单标记,只需单独使用就能完整地表达意思的标记称为“单标记”这类标记的语法是： 最常用的单标记是, 它表示换行。,9,（2）双标记,另一类标记称为“双标记”，它由“始标记”和“尾标记”两部分构成，必须成对使用，其中始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器在这里结束该功能。始标记前加一个斜杠（/）即成为尾标记。这类标记的语法是： 内 容 其中“内容” 部分就是要被这对标记施加作用的部分。例如你想对某段文字以粗体字显示，就将此段文字放在 标记中：第一：,10,2.标记属性,属性是用来描述对象特征的特性。在HTML中，所有的属性都放置在开
6、始标记符的尖括号里，属性与标记符之间用空格分隔，属性的值放在相应属性之后，用等号分隔，而不同的属性之间用空格分隔。格式为： 受影响的内容 HTML属性通常也不区分大小写。一个标记可以有多个属性，各属性之间无先后次序，属性也可省略（即取默认值）。属性值可以直接书写，也可以使用引号括起来。例如单标记表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。也可以带一些属性，如：其中SIZE属性定义线的粗细，属性值取整数，缺省值为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH
7、属性定义线的长度，可取相对值，（由一对双引号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是100%。,11,3. 注释语句,注释语句可以放在任何地方，注释内容不在浏览器中显示出来，仅供设计人员阅读方便。注释语句的格式为：文件中的注释用“！”标记,“”表示注释结束，中间的所有内容表示注释。,12,五、HTML的基本结构,一个HTML文档，通常由两部分组成：即文件头（head）和文件体（body）。文件头（head）：用于存放该HTML文档的属性内容，即该页面的序言，一般情况下，此处都包含有Web页面的标题（Title
8、）；文件体（body）：定义Web页面的具体内容。,13,HTML文档的基本结构,一个HTML文档的基本结构如下例所示： 这里是网页的标题 这里是网页的正文 其中在最外层， 表示这对标记间的内容是HTML文档。 之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。 标记一般不省略， 表示正文内容的开始。,14,六、HTML的基本语法,1每一个HTML文件以开始，以结束，浏览器遇到标志时，会按照HTML的标准来解释后面的文本，直到才停止解释。和是成对出现的，所有的文本和命令都在它们之间。2是网页的头部标记，通常紧跟之后。与之间的文本是整个文件的序言，不属于HTML文件本体部分，
9、不在浏览器屏幕中显示。3用来说明文件标题，TITLE元素的格式为：文件题目 ，一个好的题目应该使读者能从中判断出该文件的大概内容。浏览时文件题目将显示在IE浏览器标题栏上。中不包含其他标记。4和之间是网页主体内容。在标记中可以规定整个文档的一些基本属性，如：“bgcolor” 属性，用于指定文档的背景颜色,“text” 属性用于指定文档中文字的颜色。5所有标记可以嵌套但不得交叉，如与必须包含在与中间。,15,六、HTML的基本语法,6. HTML标记不区分大小写，如和是相同的。7. HTML文件一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。8. HTML源文件中的换行、回车符
10、和多个连续空格在显示效果中是无效的。9. 网页中所有的显示内容都应该受限于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生错误。,16,七、常用的HTML标记种类,HTML标记的命令种类繁多，常用HTML标记命令可分为以下几种类型：文件结构命令文字版面编辑命令链接命令列表命令表格命令表单命令图像命令框架命令,17,1. 文件结构命令(基本标记),文件结构命令用来标记出HTML文件的结构，常用的文件结构命令有：HTML文件标记: 文件头部标记: 文件标题标记: 文件体标记: ,18,2.文字版面编辑命令,文字版面编辑命令用来将HTML文件中的文字以特定的格式显示。常用的文字版面编辑命
11、令有：标题标记：文件段落标记：文字格式控制标记格式化文本标记：设置文字的风格有13种行中断标记: 文字滚动标记: 预排格式标记: 插入水平线标记: 文本缩进标记: ,19,3. 链接命令,超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。链接命令就是用来标记超文本链接。一个链接的基本格式如下：链接文本标记表示一个链接的开始，表示链接的结束；属性“HREF”定义了这个链接所指的地方；通过点击“链接文字”可以到达指定的文件。链接分为本地链接、URL链接和内部链接。在各种链接的各个要素中，资源地址是最重要的，一旦路径上出现差错，该资源就无法从用户端取得。,
12、20,链接分类,本地链接对同一台机器上的不同文件进行的连接称为本地链接，它使用文件路径的表示方法来指示一个文件。URL链接URL意思是统一资源定位器，通过它可以以多种通讯协议与外界沟通来存取信息。 URL链接的形式是： 协议名：/主机.域名路径文件名内部链接所谓内部链接就是指链接的目的文件是位于同一HTML文件中的某个段落。,21,在HTML页面中，列表命令可以起到提纲挈领的作用。列表主要分为两种类型：一是符号列表，二是有序列表。1符号列表符号列表使用的一对标记是，每一个列表项前使用。2序号列表序号列表使用标记，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字表示。3. 定义列表定义列
13、表使用标记，每一个列表项前使用， 用标记定义的条目说明文字自动向右缩进。,4. 列表命令,22,HTML中常用的表格命令有：. 定义了表格的开始和结束.定义表格标题 定义表行 定义表头 定义表元(表格的具体数据),5. 表格命令,23,表单在HTML页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下“提交资料”按钮，这样所填资料就会通专门的接口传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。在HTML中，设计表单常用的标记命令是
14、：、和等标记。,6. 表单命令,24,网页中插入图片用单标记，当浏览器读取到标记时，就会显示此标记所设定的图像。超文本支持的图像格式一般有XBitmap(XBM)、GIF、JPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。插入图像的标记的格式为：,7. 图像命令,25,框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的 URL 网页。使用框架可以非常方便的在浏览器中同时浏览不同的页面效果，也可以非常方便的完成导航工作。在有Frames结构的HTML文件中，Frames文件的整体结构为： 基本框架 .,8. 框架命令,26,八、简单的HT
15、ML实例,一个简单网页的制作：第一步：打开Windows下的记事本。第二步：输入下面代码 HTML基础 一个简单的网页 第三步：以chapter01_1.htm为文件名保存文件并关闭该文件。第四步：双击该文件，浏览器会自动执行它。,27,在桌面上找到它双击。此时windows默认的IE浏览器打开了它，如图1-2所示。,图1-2 创建一个简单的HTML网页,查看所创建的文件,28,1.2.2文件结构命令标记 （1）HTML标记符（文档标志）,这两个标记符是HTML文档的标记符。处于文档的最前端，表示文档的开始，即浏览器从开始解释。而则位于文件的最后一行，这样的结果表示这一整份的文档都是HTML语
16、法的文档，两个标志必须成对使用。,29,（2）HEAD标记符 （文件头标志）,是HTML文件头标记符，用来描述HTML首部的内容，说明文档的整体信息。所有首部信息并不会出现在利用WWW浏览器所看到的窗体中。两个标志必须成对使用。通常与某些标记符一起使用，如、等标记符。,30,（3）TITLE标记符（文件标题标志）,指的是一份文档的标题。使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是网页的“主题”。要将网页的主题显示到浏览器的顶部其实很简单，只要在标志对之间加如显示的文本即可。通常来说，每一份文档都应该有一个标题来简述这一份文档的特色或是主题。对于WWW浏
17、览器而言，标题所在的位置虽然依照浏览器的不同而不同，但是大部分都位于浏览器的最上方。,31,（4）BODY标记符（文件主体标志）,指的是定义出一个HTML文档的主体部分，位于首部下面，在此标志对之间可以包含、等众多标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须成对使用。BODY标记格式： ,32,BODY标记的各属性含义：,background：设置网页背景图像。image-URL：图像文件的路径。bgcolor：设置网页背景颜色，默认为白色。text：设置网页正文文字，默认为黑色。link：设置网页可链接文字的色彩，默认为蓝色。alink：设置网页被鼠标点中时可链接文
18、字的色彩，默认为蓝色。vlink：设置网页已经单击（访问）过的可链接文字的色彩，默认为蓝色。leftmargin：设置页面左边空白。topmargin：设置页面上面空白。value：表示空白量，可以是数值，也可以是相对页面窗口宽度和高度的百分比。color：设置页面的颜色。颜色值可以是颜色代码，如：RED、GREEN、BLUE、YELLOW、WHITE、BLACK等，也可以是#加6为十六进制数”# rrggbb”，如#000000（黑）、#0000FF（蓝）、#FFFFFF（白）、FF0000（红）等。例如：红色背景蓝色文本链接为蓝色,33,下面是一个综合的例子，说明了HTML文档中最基本标志
19、的使用。,显示在浏览器最上边蓝色条中的文本红色背景、蓝色的文本,34,作业3,一、填空题：HTML即_语言，作为网页的一种规范，它通过_来定义网页内容来显示，表现形式为用两个_括起来。标记之间的内容将显示在_。 标签表示_。二、操作题：利用记事本程序，通过HTML语言的方法建立一个蓝底白字的带 一句文本的简单网页。,35,1.2.3 页面文本格式标记,页面文本格式化标记是一组用来控制页面文字显示效果的标记,包括文字字型控制、段落控制、显示方式控制等。这些格式标记都是用于标记对之间的。常用标记总结如下：,36,一、标题（Heading）格式标记,HTML提供六种标题格式，其所用的标记符为（标题n
20、，n=16）， 的字体最大， 的字体最小。使用标题样式时，必须使用结束标记符。标题文字标记符的格式： 标题文字 属性align用来设置标题在页面中的对齐方式：left（左对齐）、center（居中）或right（右对齐）。如: 计算机系标记符默认显示宋体。标记符会自动插入一个空行，不必再用空行标记符。在一个标题行下无法使用不同大小的字体。与HEAD中的定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。,39,二、文字格式标记,在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型和颜色，通常用FONT标记符来完成。FONT标记符格式为： 被设置的文字 属性
21、说明：size属性是字号属性，用于控制文字的大小，它可以取值：-N、N和+N，既可以是绝对值，也可以是相对值。face属性是字体属性，用来指定字体样式。 color属性可用来控制文字的颜色，属性值可以是6位十六进制值或HTML预定义的颜色常量名（olive, teal, maroon, navy , gray, lime, fuchsia, purple)。,40,三、字型设置标记,HTML定义了多种用于字体和字型修饰的标记。其功能：设置文字的风格，如粗体、斜体、带下划线等。这是一组标记，它们可以单独使用，也可以混合使用产生复合修饰效果。,41,常用的字型标记,使文本以粗体字的形式输出。(bo
22、ld)使文本以斜体字的形式输出。(italic)加下划线的形式输出。(underline)加删除线的形式输出。(strikeout)作为下标显示。(Subscript)作为上标显示。(Superscript)输出打字机风格字体的文本（等宽体显示西文字符）。,42,常用的字型标记,使文字大小相对于前面的文字减小一级使文字大小相对于前面的文字增大一级输出引用方式的字体，通常是斜体。输出需要强调的文本（通常是斜体加粗体）。（emphasis)输出加重文本（通常是斜体加粗体）。,43,文本标志的综合应用,文本标志的综合示例 最大的标题 使用h3的标题 最小的标题 粗体并斜体字文本 下划线并比前面字号大
23、一级的文本 打字机风格的文本 引用方式的文本 强调文本 加重文本 size取值+1color取值为红色时的文本,44,四、换行(Line Break)标记:,在HTML文档中，无法用多个回车、空格、Tab键来调整文档段落的格式。要用HTML的标记符来强制换行、分段。是一个很简单的标志，它没有结束标志，因为它是用来创建一个回车换行的。它不产生一个空行，但连续多个标记可以产生多个空行的效果。在的使用上面还有一定的技巧，如果把加在标志对的外边,将创建一个很大的回车换行,即前面和后面的文本的行与行之间的距离很大,若放在的里面,则前面和后面的文本行与行之间的距离比较小。,45,五、段落(Paragrap
24、h)标记:,分段标记符用于将文档划分为段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。设置段落标记符的格式为： 文字 ALIGN属性用于设置段落的对齐方式，其常见取值有3种：RIGHT（右对齐）、LEFT（左对齐）、CENTER（居中对齐）。,46,六、居中排列标记：,该标记使作用的对象在屏幕的中央显示例如：居中显示此文本在屏幕的中央显示此为居中排列标记外的文本,47,七、文本缩进标记,功能：在标记对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。格式： 文本,48,八、水平线标记:,在页面中插入一条水平标尺线（Horizontal Rules），可以使不同功能的文字分隔开
25、，看起来整齐、明了。 水平线标记符的格式为：属性说明：“对齐方式”值为：LEFT、RIGHT、CENTER（默认值）“横线粗细”可以是绝对点数或（相对长度的）百分比，默认高度为1。“横线长度”可以是绝对点数或（相对窗口的）百分比，默认是100%。Noshade表示加入一条没有阴影的水平线（不写此属性水平线将有阴影）。与BR类似，HR也不包括结束标记符。例如：,49,九、特殊字符显示标记,由于字符、空格在HTML中用作控制字符，如果要将它们当作一般字符显示在画面上，就必须用以下方式来表示：: > (greater than)空格: (nonbreaking space ),50,
26、 有关文本标记的使用 这一个段落我们分两行显示，需用到将作为纯文本符号而不是标记。-标记，而只是在形式上分行的效果， 该段落到此结束 下面是第二段。该段只有一行，在该行下面加一条绿色水平线。,例常用文本标记符举例,十、预排文本(Preformatted Text)标记：,当用其他编辑工具编排好了一段文字后，其中很可能有一些HTML文件不支持的控制符号，如回车、多个空格、Tab键等。如果希望在浏览网页时仍保留在编辑工具中已经排好的段落格式，可以使用标记符将预先排好的格式保留下来。我们并不推荐使用这种方式，因为这种方式是机械地将文本置入网页，文本不会随着浏览器窗口的大小自动换行。如果一行文本很长，
27、还需要拖动页面的滚动条，才能看完整。,52,十一、分区（division）显示标记符,标志对用来排版大块HTML段落，也用于格式化表，设置多个段落的文本对齐方式。此标志对的用法与标志对非常相似。分区显示标记符的格式为： 文本或图像 对齐方式可以在多个标记中实现，如、等。如果多个段落有相同的对齐方式，则可以将这些段落嵌套进分区显示标记中。,53,十二、滚动字幕标记,适用于IE,译为“跑马灯”。例如status Bar，其意思是指走动或卷动的文字，能使网页生动活泼，增加视觉效果。标记为： 。标记有这样几个常用属性：1direction属性，用于指定文字移动方向，属性值有：left、right。2b
28、ehavior属性，指定文字移动方式。属性值有：scroll文字一圈一圈的绕着走、 slide如幻灯片一格格的,效果是文字一接触左边便全部消失。、 alternate文字向左右两边撞来撞去来回走动。3loop属性，用于指定循环次数，其值可以是正整数或infinite, infinite是内定的，表示无限次。4scrollamount属性，用于指定文字移动的速度，即设定每“格”文字之间的间隔，单位是像素。scrolldelay设定文字滚动的停顿时间，单位是毫秒。5bgcolor属性，用于指定文字滚动范围的背景颜色。6. Height、width属性：设置文字滚动范围，可以采取相对或绝对，如30%
29、或30等，单位为像素。7. Hspace、 vspace属性：设定文字的水平及垂直空白位置。,54, 滚动字幕 请进入音乐休闲屋看我还会动呢,并且是从右向左移动 我从左向右一圈一圈的移动 我是不是移动的比较快？ 我的底色是黄的，我循环三次即停止移动 hello ,滚动字幕举例,55,1.2.4 列表（List）标记,分段排列出一组级别相同的项目称为列表。列表（清单）标记主要用于目录等内容的显示。HTML定义了3种列表：无序列表(Unordered Lists)有序列表(Ordered Lists)定义列表(Definition Lists),56,一、 有序列表(Ordered Lists),
30、有序列表用于对网页中的一些内容进行编号排列，以便读者清晰地了解其每行的顺序。 在HTML中插入有序列表是通过标签来实现的。首标签和尾标签之间的内容是有序列表的内容，排序列表的每一项列表项（List item）必须用标签标识，语法如下：List item1 List item2举例： 有序列表 下面是有序列表 这是列表第一项 这是列表第二项 这是列表第三项 ,57,二、无序列表(Unordered Lists),无序列表是指列表内容可以按任意顺序排列。每一列表项前不是用连续编号，而是用一个特定符号来标记，通常是在每一列表项前加上一个圆点儿。无序列表与有序列表的实现方法很相似，只是用标记来代替有序
31、列表中的来代替列表中的。 无序列表举例 ： 无序列表 以下是娱乐休闲版的列表： 音乐影视游戏,58,有序和无序列表综合举例,有序和无序列表中国城市北京上海广州,美国城市华盛顿芝加哥纽约,59,三、定义列表(Definition Lists),定义列表用于对清单条目进行简短说明，首标签和尾标签之间的内容就是定义列表的内容，列表项目用引导，它的说明用引导，即定义术语（Definition term）标记符，用来指定第一层数据；定义描述（Definition Description）标记符，用来指定第二层数据。标记符必须有结束标记，但和标记符的结束标记可以省略。通常和是成对出现的，即一个列表项目对应
32、一个说明项，当然也可以一个列表项目对应多个说明项。,60,创建定义列表的例子：,定义列表中国城市北京上海广州,美国城市华盛顿芝加哥dd纽约,61,1.2.5 表格（table）标记,表格能将HTML的内容按行或列的方式组织，使网页的组织井然有序。表格是用于在网页上显示数据表以及对文本和图形进行布局的强有力的的工具，它清晰、直观，是HTML页面中最为重要的页面布局方式。一、创建基本表格 可以用标记符创建一个表格，并在它的中间加入标题和需要的数据。,62,标记中常用属性,63,1. 表格的标题,元素定义了表格的说明，一般放在表中第一行的前面 。如： 在这里输入标题 行里的内容 的属性包括对齐属性a
33、lign决定了标题的对齐方式，取值为top、bottom、right、left、middle。决定标题放在表格的顶部、底部、右边、左边、中间。,2. 行(row)、表头(head)和数据(data),表是由行和列内的单元格组成的。定义一个表格，需从第一行逐级向下，并且按行中单元格的顺序开始定义。表格的定义顺序是首先定义表的一行，行标记用。然后依此是行的单元格，单元格用标记，如果一个表格中某个单元格的内容很长，可以使用标记强制内容折行。再定义第二行，依次定义第二行的单元格。表的列由每行包含的单元格数目自动计算得到。为确保表中每列对齐，应在每行包含相同单元格。标志用来设置表格头，文字通常是粗体居中
34、显示。行、表头和数据定义的代码为： 表头 数据 ,65,行、单元格标记的属性,属性:align是水平对齐方式，取值为left(左对齐)、center（居中对齐）、right（右对齐）。valign是垂直对齐方式，取值为top(靠顶端对齐)、 middle(居中间对齐)、bottom(靠底部对齐)。属性:width是单元格的宽度，单位用绝对像素值或总宽度的百分比。Colspan、rowspan设置一个表格单元格跨占的列数行数（缺省值为1）。nowrap禁止对表格单元格内的内容自动换行。,66,行、单元格和表格标志的关系,标志对用来创建表格的每一行。此标志对只能放在标志对之间使用，而在此标志对之间
35、加入文本是无用的，因为之间只能紧跟标志对才是有效的语法。 不能嵌套标志对用来创建表格中每一行中的每一个单元格，此标志对只有放在标志对之间才有效，输入的文本也只有放在标志对之间才有效（即才能被显示出来）。,67,、和标志对之间的关系,二、 表格及文字的对齐与布局,1表格在页面中的对齐 利用表格的ALIGN属性，可以将表格显示在页面的左边或右边。如果没有设置这一属性，表格单独显示为页面的一行，在页面的左侧。ALIGN=”LEFT”将表格按左边对齐，而表格的所有文本显示在表格右侧和页面之间的位置。ALIGN=”RIGHT”将表格按右边对齐，文本显示在表格的左侧。,69,2. 表格内数据的对齐,、标记
36、中加入align 和valign属性：ALIGN属性为单元格数据提供水平对齐方式，该属性有LEFT（左对齐）、RIGHT（右对齐）、CENTER（居中）3个值。VALIGN属性定义单元格数据的垂直对齐方式，该属性有TOP（顶部对齐）、BOTTOM（底部对齐）、MIDDLE（中间对齐）3个值。,70,三、设置表格尺寸, 设置表格边框尺寸 利用的BORDER属性可以设置表格边框的尺寸，它以指定的粗度来显示表格边框。如： 2. 设置表格尺寸 利用的WIDTH和HEIGHT属性可以设置表格尺寸。如： 3. 设置表元间隙 利用标记符的CELLSPACING属性可以设置表元的间隙。如： 4. 设置表元内部
37、空白 利用标记符中的CELLPADDING属性来，以像素为单位来设置它的值。如： ,71,四、设置表格的色彩,设置表格、行或行中单元的相关颜色，可以在、和标记符里使用BGCOLOR、BORDERCOLOR、BORDERCOLORLIGHT、BORDERCOLORDARK等属性。COLOR的值可以是以十六进制表示的颜色，或者是16种颜色（BLACK、WHITE、GREEN、MAROON、OLIVE、MAVY、PURPLE、GRAY、RED、YELLOW、BLUE、TEAL、LIME、AQUA、FUCHSIA和SILVER）中的一种。,72,五、创建跨多行、多列的表元, 跨越多列 在或标记符里利用
38、COLSPAN属性，并在其后写上想要跨越的列数。 跨越多行 在或标记符里利用ROWSPAN属性，并在其后写上想要跨越的列数。,73,六、拆分单元格,手写代码在拆分单元格时需要反复使用”colspan”和”rowspan”这两个属性，但这样做，表格的结构不容易分辨。所以用手写代码编写网页时，遇到拆分单元格的情况，一般都使用在单元格中嵌套表格的方法。注意，这里嵌套的表格的边框宽度设为0，这样从浏览器中就看不出是单元格中嵌套表格了。,74,表格标志的综合应用,表格标志的综合示例意大利英格兰西班牙AC米兰拂罗伦莎曼联纽卡斯尔巴塞罗那皇家社会,75,尤文图斯桑普多利亚利物普阿申纳皇家马德里.拉奇奥国际米
39、兰切尔西米德尔斯堡马德里竞技.,76,77,1.2.6 HTML的图像与多媒体标记,一、图像（image ）标记超文本支持的图像格式一般有X Bitmap(XBM)、GIF、JPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，才可以在浏览器中看到。插入图像的标签是，格式为：。,78,属性说明,src属性指明了所要链接的图像文件所在地址，这个图像文件可以在本地机器上，也可以位于远端主机上。img还有两个属性是height和width，分别表示图形的高度和宽度，默认单位是像素。 网页上不仅有图形还有文字，文字与图形之间有各种不同的对齐方式，用align属性定义对齐方式。align的取
40、值可以是 top|middle|bottom|right|left。图文之间的距离用属性hspace和vspace来规定，分别表示文字与图像的水平距离和垂直距离。alt属性是当鼠标移动到图像上时显示的文本。border属性是图形的边框，可以取大于或者等于0的整数，默认单位是像素。,79,图像属性赋值标志,标志并不是真正地将图像加入到HTML文档中，而是将标志对的SRC属性赋值。这个值是图像文件的文件名，包括路径，这个路径可以是相对路径，也可以是网址。实际上就是通过路径将图形文件嵌入到文档中。 所谓相对路径是指所要链接或嵌入到当前HTML文档的文件与当前文件的相对位置所形成的路径。通常有如下情况
41、： 假如HTML文件与图形文件（假设文件名为logo.gif）在同一个目录下，则可以将代码写成。 .假如图形文件放在当前的HTML文档所在的目录的一个子目录（子目录名假设是images）下，则代码应该为。 .假设图形文件放在当前的HTML文档所在的目录的上层目录（目录名假设是home）下，则相对路径就必须是准网址了。即用“./”表示网站，然后在后面紧跟文件在网站中的路径。假设home是网站下的一个目录，则代码应为，若home是网站下的目录king下面的一个子目录，则代码应该为了。必须强调，src属性在标志中是必须赋值的，是不可缺少的一部分。,80,二、音乐标记插入背景音乐标志, 标签用以插入背
42、景音乐，但只在 IE中才能听到。其格式如下： src用来指出音乐文件地址；autostart 用来指出在音乐下载传送完之后是否自动播放，默认false（否），选true（是）则自动播放；Loop用来指出播放的次数。Loop=3表示重复三次，Infinite 或-1表示重复多次。,81,输入各种多媒体标志,我们可以让音乐自动载入，让它出现控制面板或当背景音乐来使用。用以插入各种多媒体，格式可以是MIDI、MAV、AIFF、AU等等，netscape及新版的IE都支持。其参数设定较多。基本语法：,82,属性,src=“音乐文件地址” :用于设定音乐文件的路径autostart=true/false
43、 :音乐文件传送完后是否自动播放，true是要，false是不要，默认为false。loop=循环次数:设定播放重复次数，loop=3为重复3次，true为无限次播放，false播放一次即停止。startime=“分:秒”:设定乐曲的开始播放时间，若30秒后播放可写为 :startime=00:30。volume=0-100:设定音量的大小。如果没设定的话，就用系统的音量。width height:设定控制面板的大小。hidden=true:隐藏控制面板，true为是,no为否（内定）。 controls=console/smallconsole:设定控制面板的样子。预设值是console一般
44、正常的面板；smallconsole较小的面板；piaybutton只显示播放按钮；pausebutton只显示暂停按钮；stopbutton只显示停止按钮；volumelever只显示音量调整按钮。,83,播放音乐举例,播放音乐下面的音乐是作为背景音乐来播放的。下面的音乐是用控制面板来控制播放的,84,三、视频标记,功能：在网页中加入视频信息，格式一般为*.AVI。格式： 属性说明：Src：设置一幅情态图像的URL地址，在未载入.AVI文件时，先在.AVI的播放区域显示该图像。Dynsrc：设置视频文件存放的路径和文件名。Loop：设置视频文件的播放次数，INFINITE表示反复播放直至离开
45、。Start：设置何时开始播放视频文件，有两个属性值fileopen（默认值）指在链接到含本标记的页面时开始播放和mouseover是指将鼠标移动到.AVI播放区时开始播放。Controls：在视频窗口下附加windows的AVI文件播放控制条。Loopdelay：设置两次播放的间隔时间，单位是毫秒。还有常见属性width、height、align等，也可以使用。,85,1.2.7 超链接标记,在浏览网页过程中，有时点击某处的文字或图像会跳转到另一部分，这是因为在网页中使用了超文本链接。使用超文本链接可以使顺序存放的文件在一定程度上具有随机访问的能力，更加符合人类的思维方式。支持文档的超连接是HTML最吸引人优点之一。 一个超文本链接指针由两部分组成：被指向的目标和是锚点。目标可以是同一文件的另一部分，也可以是另一个文件，还可以是动画或音乐。而当用户把鼠标移到锚点时，鼠标的形状会变成小手状，这时点击鼠标，就会跳转到链接的目标。,86,一、超链接标记符,创建一个超链接需要使用标记符，A是Anchor的首字母标记符的最基本属性是HREF，用于指定链接到的文件位置。href属性无论如何是不可缺少的，标志对之间假如需要链接的文本和图像（链接图像即加入标志）。Href的值可以是网址或相对路径，也可以mailto:形式。,
