《基于Web标准的网页设计与制作》第3章1 html标记

基于Web标准的网页设计与制作唐四薪唐四薪 编著编著 清华大学出版社清华大学出版社 2009年11月 http:/第三章 HTML标记功能详述 本章要点本章要点v文本格式标记文本格式标记v文本修饰标记（字体标记）文本修饰标记（字体标记）v列表标记列表标记 v超链接标记超链接标记v图像和多媒体标记图像和多媒体标记HTMLHTML标记基础标记基础v2.什么是标记什么是标记？标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。标记可以具有相应属性即各种参数，如size、color、text、width和noshade等。例如：文本格式标记网页中添加文本的方法网页中添加文本的方法网页中添加文本的方法 文本格式标记是网页中定义文本格式的标记文本格式标记是网页中定义文本格式的标记1）直接写文本）直接写文本文本文本、文本文本、文本文本、文本文本；2）用段落标记）用段落标记格式化文本，各段落文本将分行格式化文本，各段落文本将分行显示；显示；3）用标题标记）用标题标记格式化文本，作用：定义第格式化文本，作用：定义第n号标题字体，号标题字体，n=16，n值越大，字越小；文本将变为粗体值越大，字越小；文本将变为粗体显示，可看成特殊的段落标记；显示，可看成特殊的段落标记；4)用预格式化标记用预格式化标记格式化文本，标记内的格式化文本，标记内的文本将按原来的格式显示，保留文本中的所有空格、换行文本将按原来的格式显示，保留文本中的所有空格、换行和定位符；和定位符；用标题标记用标题标记 格式化文本格式化文本第第1号标题字体号标题字体 第第3号标题字体号标题字体 第第4号标题字体号标题字体 第第5号标题字体（居中）号标题字体（居中）标题标记和段落标记标题标记和段落标记 1号标题号标题第一段第一段3号标题号标题第二段第二段5号标题号标题第三段第三段 用预格式化标记用预格式化标记格式文本格式文本 网页设计师这一职业在今后来说还是有需网页设计师这一职业在今后来说还是有需求的。求的。因为随着网络越来越普及，因为随着网络越来越普及，像我国的房地产市场像我国的房地产市场文本的强制换行文本的强制换行 /电子商务顾名思义就是在电子商务顾名思义就是在internet上做生意，上做生意，商品展示，广告宣传、发布商品展示，广告宣传、发布供求信息等活动实现的途径就是网页。供求信息等活动实现的途径就是网页。v强制不换行标记强制不换行标记，常用英文人，常用英文人名名vBill Gates 文本中的空格文本中的空格v标记标记(除外除外)内内字符前的空格字符前的空格浏览器将全部忽浏览器将全部忽略，略，字符与字符间的空格字符与字符间的空格浏览器将只保留一个空浏览器将只保留一个空格显示，格显示，回车回车视为一个空格，视为一个空格，v块级元素之间忽略所有空格。块级元素之间忽略所有空格。v如果要输入多个空格或需要在字符之前输入空格如果要输入多个空格或需要在字符之前输入空格需在源代码中插入需在源代码中插入 nbsp;（表示一个半角空格）。（表示一个半角空格）。v行内元素可看成一个字符行内元素可看成一个字符 文本中的转义字符文本中的转义字符v在在HTML源代码中，有些字符有特别的含义，比如小于源代码中，有些字符有特别的含义，比如小于号号“”就表示就表示HTML 标记的开始，标记的开始，html源代码中的源代码中的“”是不会在浏览器中显示的，如果要浏览器显示这是不会在浏览器中显示的，如果要浏览器显示这些字符，就需要输出他们对应的转义字符。些字符，就需要输出他们对应的转义字符。v例如：例如：<表示表示,"表示表示“,&表表示示&, 表示空格等；表示空格等；通常，一个字符实体是由三部分组成的：通常，一个字符实体是由三部分组成的：（1）一个）一个“&”符号符号（2）字符专用名称或者字符代号）字符专用名称或者字符代号（3）一个）一个“;”符号符号在在DW的设计视图中输入这些特殊字符，的设计视图中输入这些特殊字符，DW会自动在代会自动在代码视图添加它们对应的转义字符码视图添加它们对应的转义字符DWDW中插入中插入HTMLHTML文本元素的快捷键文本元素的快捷键 1.Enter 插入插入 （硬回车）（硬回车）2.shiftenter 插入插入 （软回车）（软回车）3.Ctrlshiftspace 插入一个插入一个 综合实例综合实例 分段换行与预格式分段换行与预格式 以下是直接写文本的情况：以下是直接写文本的情况：星期一、星期二、星期三、星期四、星期一、星期二、星期三、星期四、星期五、星期六、星期日。星期五、星期六、星期日。以下是使用了三个换行标记的情况：以下是使用了三个换行标记的情况：星期一、星期二、星期一、星期二、/星期三、星期四、星期三、星期四、/星期五、星期六、星期日。星期五、星期六、星期日。/以下使用分段标记（分为两段）：以下使用分段标记（分为两段）：星期一、星期二、星期三、星期一、星期二、星期三、星期四、星期四、星期五、星期六、星期日。星期五、星期六、星期日。以下使用预格式：以下使用预格式：星期一、星期二、星期三、星期四、星期一、星期二、星期三、星期四、星期五、星期六、星期日。星期五、星期六、星期日。跑马灯跑马灯标记标记v一个特殊的文本标记，能使其中的文本在浏览器一个特殊的文本标记，能使其中的文本在浏览器屏幕上不断滚动。屏幕上不断滚动。示例示例v其中其中behavior=“alternate”设置滚动方式为来回滚设置滚动方式为来回滚动，设置为动，设置为scroll表示循环滚动，设置为表示循环滚动，设置为slide表示表示滚动到目的地就停止。滚动到目的地就停止。direction属性用于控制滚属性用于控制滚动的方向，可以上下滚动或左右滚动。动的方向，可以上下滚动或左右滚动。loop设置设置滚动的次数，滚动的次数，loop为为0表示不断滚动。表示不断滚动。scrollamount属性设置滚动的速度，属性设置滚动的速度，scrolldelay属属性设置两次滚动间的间隔时间。性设置两次滚动间的间隔时间。示例示例  测试测试:网页设计与制作学习：可以将网页设计与制作学习：可以将swf文件下载下来用文件下载下来用flash播播放器全屏播放以达到最好效果，也可以在放器全屏播放以达到最好效果，也可以在IE浏览器中按浏览器中按F11键达到全屏效果键达到全屏效果.水平线标记水平线标记 v标记是在标记是在HTML文档中加入一条水平线，它文档中加入一条水平线，它可以直接使用，具有可以直接使用，具有size、color、width和和noshade属性。属性。size是设置水平线的厚度，而是设置水平线的厚度，而width是设定水平线的宽度，默认单位是像素。是设定水平线的宽度，默认单位是像素。noshade属性用来加入一条没有阴影的水平线。属性用来加入一条没有阴影的水平线。v文本修饰标记（字体标记）文本修饰标记文本修饰标记v文本修饰标记是对文本的外观进行修饰的标记，文本修饰标记是对文本的外观进行修饰的标记，如让文字变色，加大，变粗体，添加下划线等。如让文字变色，加大，变粗体，添加下划线等。v1）font标记：标记：定义文字的各种属性。定义文字的各种属性。例：例：vv注意：文本修饰标记由于是行内标记，没有注意：文本修饰标记由于是行内标记，没有align属性属性(说明说明）加粗、倾斜与下划线标记加粗、倾斜与下划线标记v2）加粗、倾斜与下划线的定义标记（）加粗、倾斜与下划线的定义标记（b、i、u）使用加粗、倾斜与下划线标记（使用加粗、倾斜与下划线标记（b、i、u）的）的组合组合，可对文本，可对文本文字进一步修饰。文字进一步修饰。如：如：此处以红色五号字粗此处以红色五号字粗体显示体显示上标（上标（supsup）和下标（）和下标（subsub）标记）标记 v用于书写数学公式或分子式。用于书写数学公式或分子式。v如：如：H2O X2v由于字体标记属于对文本由于字体标记属于对文本外观外观进行修饰的标记，进行修饰的标记，是由于当时是由于当时CSS语言尚未出现时语言尚未出现时html定义的表现定义的表现的范畴，随着的范畴，随着CSS的出现，这些表现功能均可以的出现，这些表现功能均可以由由CSS完成，所以不含有语义的字体标记慢慢过完成，所以不含有语义的字体标记慢慢过时了。时了。列表标记 列表标记列表标记v为了合理地组织文本，网页中常常要用到列表。为了合理地组织文本，网页中常常要用到列表。在在HTML中可以使用的列表标记有无序列表、有中可以使用的列表标记有无序列表、有序列表和定义列表三种。序列表和定义列表三种。v无序列表无序列表(Unordered List),v有序列表有序列表(Ordered List),v定义列表定义列表(Defined List),嵌套的无序列表示例嵌套的无序列表示例 文章文章 CSS教程教程 DOM教程教程 XML教程教程 参考参考 XHTML XMLCSS 有序列表有序列表(Ordered List)(Ordered List)文章文章 CSS教程教程 DOM教程教程 XML教程教程 Flash教程教程 定义列表定义列表(Defined List)(Defined List)湖南城市湖南城市长沙长沙衡阳衡阳常德常德 湖北城市湖北城市武汉武汉襄樊襄樊宜昌宜昌超链接标记 超链接标记超链接标记 v超链接是网页的基本元素，网页正是通过超链接超链接是网页的基本元素，网页正是通过超链接而相互链接组织成一个网站，并将而相互链接组织成一个网站，并将internet上的各上的各个网站联系在一起。浏览者通过超链接选择阅读个网站联系在一起。浏览者通过超链接选择阅读路径。路径。v超链接是通过超链接是通过URL（统一资源定位器）来定位目（统一资源定位器）来定位目标信息的。标信息的。URL包括包括4部分：网络协议、域名或部分：网络协议、域名或IP地址、路径和文件名。地址、路径和文件名。vURL分为绝对分为绝对URL和相对和相对URL 绝对绝对URL URL v 绝对绝对URL是采用完整的是采用完整的URL来规定文件在来规定文件在internet上的精确地点，包括完整的协议类型、计上的精确地点，包括完整的协议类型、计算机域名或算机域名或IP地址、包含路径信息的文档名。书地址、包含路径信息的文档名。书写格式为：协议：写格式为：协议：/计算机域名或计算机域名或IP地址地址/文档文档路径路径/文档名文档名v例如：例如：http:/ URL v相对相对URL是相对于包含超链接页的地点来规定文件的地点。是相对于包含超链接页的地点来规定文件的地点。v如链接到同一路径下的文档，直接输入文件名即可，如如链接到同一路径下的文档，直接输入文件名即可，如news.htmv如链接到同一路径下子文件夹的文档，则先输入子文件夹如链接到同一路径下子文件夹的文档，则先输入子文件夹名和斜杠（名和斜杠（/），再输入文件名，如），再输入文件名，如yule/news.htmv如链接到上一级路径中，要在文件名前输入如链接到上一级路径中，要在文件名前输入“./”，如，如“./news.htm”，其中，其中“.”表示上级目录，表示上级目录，“.”表示表示本级目录。本级目录。相对相对URLURL示例示例wgzxyuleindex.htmoa.htmpop.htmnews.htm1.href=yule/news.htm212.href=./oa.htm3.href=“pop.htm”3相对相对URLURL的优势的优势v可以看出相对可以看出相对URL方式比较简便，不需输入一长方式比较简便，不需输入一长串完整的串完整的URL；另外相对路径还有一个非常重要；另外相对路径还有一个非常重要的特点是：可以毫无顾忌地修改的特点是：可以毫无顾忌地修改Web网站的域名网站的域名或网站在服务器硬盘中的存放目录。或网站在服务器硬盘中的存放目录。超链接的种类根据源对象划分超链接的种类根据源对象划分 1)用文本做超链接用文本做超链接：首页首页2)用图像做超链接：用图像做超链接：3)文本图像混合做链接：文本图像混合做链接：格力格力空调空调1型型该方法在商品展示的网站上较常用。该方法在商品展示的网站上较常用。使用图像做超链使用图像做超链接后，图像会自接后，图像会自动增加边框，可动增加边框，可设置边框为设置边框为0去掉去掉超链接的种类根据源对象划分超链接的种类根据源对象划分2 24)热区链接热区链接：使用：使用map在图像上定义一幅地图，地图上可包在图像上定义一幅地图，地图上可包含多个热区，每个热区用含多个热区，每个热区用area单标记定义，单标记定义，area的的shape属属性定义了热区的形状，性定义了热区的形状，coords定义了热区的坐标点，定义了热区的坐标点，href定义了热区链接的文件。同时定义了热区链接的文件。同时img标记用标记用usemap指明用了指明用了哪幅地图哪幅地图 超链接的种类根据超链接的种类根据hrefhref的取值的取值1)链接到其他网页或文件链接到其他网页或文件（jpg,rar等）等）内部链接内部链接返回首页返回首页外部链接外部链接 网易网站网易网站 下载链接下载链接点击下载点击下载2)电子邮件链接电子邮件链接给我留言给我留言如果如果IE不能打开该文不能打开该文件，则会弹出件，则会弹出文件文件下载下载的对话框的对话框比普通链接多了个比普通链接多了个”mailto:”超链接的种类根据超链接的种类根据hrefhref的取值的取值2 23)锚链接（链接到页面中某一指定的位置）锚链接（链接到页面中某一指定的位置）当当网网页页内内容容很很长长，需需要要进进行行页页内内跳跳转转链链接接时时，就就需需要要定定义义锚锚点和锚点链接，锚点可使用点和锚点链接，锚点可使用name属性或属性或id属性定义。属性定义。也可以链接到其他网页某个锚点处也可以链接到其他网页某个锚点处 4)空链接和脚本链接空链接和脚本链接:超链接的打开方式（超链接的打开方式（targettarget属性的取值）属性的取值）v在本窗口打开：在本窗口打开：_self（target的默认值）的默认值）v在新窗口打开：在新窗口打开：_blankv在父窗口打开：在父窗口打开：_parent 将链接的文件载入到父将链接的文件载入到父框架框架v在整个窗口打开：在整个窗口打开：_top：将链接的文件载入到整：将链接的文件载入到整个浏览器窗口中，并删除所有框架个浏览器窗口中，并删除所有框架v_parent、_top仅仅在网页被嵌入到其他网页中有仅仅在网页被嵌入到其他网页中有效，如框架中的网页，所以这两种取值用得很少。效，如框架中的网页，所以这两种取值用得很少。超链接的超链接的titletitle属性属性vtitle属性在很多标记里都有，其作用是在属性在很多标记里都有，其作用是在鼠鼠标停留停留在在该元素上元素上时显示示设置的置的说明文字明文字v如如格力太阳能喜获格力太阳能喜获…超链接制作的原则超链接制作的原则 1)可以使用相对链接尽量不要使用绝对链接，如可以使用相对链接尽量不要使用绝对链接，如./index.htm而不是而不是http:/2)链接目标尽可能简单链接目标尽可能简单如如http:/，而不是，而不是http:/ v图像标记图像标记：将图形将图形文件嵌入到网页文档中的当前位置文件嵌入到网页文档中的当前位置v说明：网页中插入图像有两种方法，一是插入说明：网页中插入图像有两种方法，一是插入一个一个元素，二是将图像作为背景嵌入到网元素，二是将图像作为背景嵌入到网页中页中v由于由于CSS的背景属性的功能很强大，现在更推荐的背景属性的功能很强大，现在更推荐将所有的图像都作为背景嵌入。如果图像是通将所有的图像都作为背景嵌入。如果图像是通过过元素插入，则可以在浏览器上通过按住元素插入，则可以在浏览器上通过按住鼠标左键拖动选中图片，或者将它拖动到地址鼠标左键拖动选中图片，或者将它拖动到地址栏里，如果作为背景嵌入，则无法选中图片栏里，如果作为背景嵌入，则无法选中图片图像标记图像标记 网页中支持的图像文件格式网页中支持的图像文件格式 v网页中可以插入的图像文件的类型有网页中可以插入的图像文件的类型有jpg格式，格式，gif格式和格式和png格式。这些文件都是压缩格式的图像格格式。这些文件都是压缩格式的图像格式，其中式，其中jpg格式适合用于网页中较大尺寸的格式适合用于网页中较大尺寸的真彩真彩色图片色图片，是一种有损压缩的格式；，是一种有损压缩的格式；gif格式一般用格式一般用于较小尺寸的图片，是一种无损压缩的格式，只于较小尺寸的图片，是一种无损压缩的格式，只支持支持256色，色，GIF在存储非连续色调的图像或具有在存储非连续色调的图像或具有大面积单一色彩的图像方面比较出色，大面积单一色彩的图像方面比较出色，gif格式的格式的特点是可以实现特点是可以实现gif动画动画，和，和gif全透明的图像全透明的图像；png格式可以用于格式可以用于alpha透明效果透明效果，但，但IE6不能够支不能够支持。持。标记的常见属性标记的常见属性v是一个行内元素，插入是一个行内元素，插入元素不会导致任何换元素不会导致任何换行。下面是行。下面是标记的常见属性：标记的常见属性：img的属性的属性含含义src图片文件的片文件的url地址地址alt当当图片无法片无法显示示时显示的替示的替换文字文字title鼠鼠标停留在停留在图片上片上时显示的示的说明文字明文字align图片的片的对齐方式，默方式，默认为基基线对齐，即，即图片的片的下下边缘和文字的下和文字的下边缘对齐width、height图片在网片在网页中的中的宽和高和高在单元格中插入图像的方法在单元格中插入图像的方法 v对于表格布局的网页，所有的元素都是放置在单对于表格布局的网页，所有的元素都是放置在单元格中的，图像也不例外，要在单元格中插入图元格中的，图像也不例外，要在单元格中插入图像，且单元格的边框和图像之间没有间隙。那么像，且单元格的边框和图像之间没有间隙。那么必须将该单元格的宽和高设置为图片的宽和高，必须将该单元格的宽和高设置为图片的宽和高，且表格中其它单元格的大小也必须固定，然后确且表格中其它单元格的大小也必须固定，然后确保保与与之间只有之间只有标记，标记，没有空格和没有空格和换行符换行符，否则单元格会被空格撑开。如：，否则单元格会被空格撑开。如：v!-不能换行不能换行-插入图像的对齐方式插入图像的对齐方式 v标记的对齐方式仍然通过标记的对齐方式仍然通过align属性实现，属性实现，但其取值多达但其取值多达9种，其中要实现图片和文本混排可种，其中要实现图片和文本混排可使用使用“左对齐左对齐”或或“右对齐右对齐”，要实现文本和图，要实现文本和图片顶部对齐可使用片顶部对齐可使用“文本上方文本上方”。v，但通常是将图片放在，但通常是将图片放在表格里，通过表格定位来实现文本和图像的混排。表格里，通过表格定位来实现文本和图像的混排。复习题复习题va标记的常用属性有哪些标记的常用属性有哪些vhref target name titlevimg标记的常用属性有哪些标记的常用属性有哪些vsrc width height alt title 作作 业（第一次）业（第一次）v用用DW制作一个个人求职的网页，要求用制作一个个人求职的网页，要求用表格布表格布局局，网页中必须包含，网页中必须包含图像图像、文本文本、列表列表、链接链接及及表格表格等基本元素，制作完成后，把该网页的源代等基本元素，制作完成后，把该网页的源代码抄写两遍交上来码抄写两遍交上来v或者直接用编写代码的方式制作该网页，再在作或者直接用编写代码的方式制作该网页，再在作业本上抄写两遍业本上抄写两遍v下次上课前必须交，否则扣下次上课前必须交，否则扣10分分(10/30)媒体元素插入标记 插入插入flashflash的两种方法的两种方法 v方法一：执行菜单命令方法一：执行菜单命令：“插入媒体插入媒体flash”，在代码视图中可看到插入在代码视图中可看到插入flash元素是通过同时插入元素是通过同时插入object标记和标记和embed标记实现的，以确保在标记实现的，以确保在IE5和和Firefox中都获得应有的效果中都获得应有的效果 v方法二：执行菜单命令：方法二：执行菜单命令：“插入媒体插件插入媒体插件”，此方法在代码视图中仅插入了此方法在代码视图中仅插入了embed元素。由于元素。由于IE6和和Firefox都能正常显示效果，而代码更简洁，都能正常显示效果，而代码更简洁，所以推荐用这种方式所以推荐用这种方式（但不能用来插入透明（但不能用来插入透明flash，否则，否则IE浏览器中没有浏览器中没有object标记的标记的parm属性不会属性不会透明）透明）在图像上添加透明在图像上添加透明flash flash v首先可以将一张需要放置透明首先可以将一张需要放置透明flash的图片作为单元格的背的图片作为单元格的背景导入，然后在此单元格内插入一个透明景导入，然后在此单元格内插入一个透明flash文件，可以文件，可以调整此调整此flash元素的大小与单元格相一致，选中该元素的大小与单元格相一致，选中该flash文件，文件，点击属性面板里的点击属性面板里的“参数参数”按钮，新建一个参数按钮，新建一个参数“wmode”值设置为值设置为“transparent”。vv v v v v这句使这句使flash在在IE浏览器中透明浏览器中透明这句使这句使flash在非在非IE浏览器中透明浏览器中透明插入视频或音频文件插入视频或音频文件 插入视频可分别使用插入视频可分别使用ActiveX按钮或插件按钮实现按钮或插件按钮实现 ActiveX 方式方式 插件方式插件方式流媒体简介流媒体简介v流媒体实际指的是一种新的流媒体实际指的是一种新的媒体传送方式媒体传送方式，而非一种新的，而非一种新的媒体媒体,流式传输方式将整个多媒体文件经过特殊的压缩方流式传输方式将整个多媒体文件经过特殊的压缩方式分成一个个式分成一个个压缩包压缩包，由视频服务器向用户计算机连续、，由视频服务器向用户计算机连续、实时传送。在采用流式传输方式的系统中，用户不必像采实时传送。在采用流式传输方式的系统中，用户不必像采用下载方式那样等到整个文件全部下载完毕用下载方式那样等到整个文件全部下载完毕v常见的流媒体文件格式常见的流媒体文件格式vreal公司：公司：rmrmvbra vapple公司：公司：quicktimemov vmicrosoft公司：公司：asfwmvwma 插入流媒体元素的方法插入流媒体元素的方法v网页中插入流媒体也能向插入一般媒体一样使用网页中插入流媒体也能向插入一般媒体一样使用embed标标记，只是要在记，只是要在classId框中设置流媒体的类型框中设置流媒体的类型插入插入Real Player流格式的视频文件流格式的视频文件 属性面板中设置属性面板中设置:ClassID为为RealPlayer。选中选中Embed复选框。复选框。Src为为zhaodan.rm。单击单击“参数参数”按钮，设置属性。按钮，设置属性。parmparm参数示例参数示例v参数：参数：console 属性：可以将各种不同的属性：可以将各种不同的RealPlayer控制聚集在网页上，这样它们可以交控制聚集在网页上，这样它们可以交互使用或是保持独立，而且互相不影响互使用或是保持独立，而且互相不影响 演示演示vhttp:/59.51.24.41:8000/ec/youhua/kclx-1.htm容器标记 divdiv和和spanspanvdiv和和span是不含有任何语义的标记，用来在其中是不含有任何语义的标记，用来在其中放置任何网页元素，就象一个容器一样，当把文放置任何网页元素，就象一个容器一样，当把文字放入后，文字的格式外观都不会发生任何改变，字放入后，文字的格式外观都不会发生任何改变，应用容器标记的主要作用是通过引入应用容器标记的主要作用是通过引入CSS属性对属性对容器内元素内容的表现进行设置。容器内元素内容的表现进行设置。vdiv和和span的唯一区别是的唯一区别是div是块级元素是块级元素，span是行是行内元素内元素。divdiv和和spanspan 块块状区域状区域1 块状区域块状区域2 行间区域行间区域1 行间区域行间区域2 v标记是一个块状的容器，其默认的状态就是占据整标记是一个块状的容器，其默认的状态就是占据整个一行。个一行。v标记是一个行内的容器，其默认状态是行内的一标记是一个行内的容器，其默认状态是行内的一部分，占据行的长短由内容的多少来决定部分，占据行的长短由内容的多少来决定v需要注意的是需要注意的是div并不是层，以前说的层是指通过并不是层，以前说的层是指通过CSS设设置成了绝对定位属性的置成了绝对定位属性的div元素，但实际上也可以对其他元素，但实际上也可以对其他任何标记的元素设置成绝对定位，此时其他标记也成了任何标记的元素设置成绝对定位，此时其他标记也成了层，因此层并不对应于任何层，因此层并不对应于任何html标记，所以标记，所以Dreamweaver CS3去掉了层这一概念，将这些设置成了去掉了层这一概念，将这些设置成了绝对定位元素的标记统称为绝对定位元素的标记统称为AP（Absolute Position）元）元素素 表格标记、表格标记表格标记v表格的主要作用：网页布局表格的主要作用：网页布局v因为表格可以固定文本或图像的显示位置，还可以使用多因为表格可以固定文本或图像的显示位置，还可以使用多重表格，并可以设置前景色和背景色重表格，并可以设置前景色和背景色v网页中的表格是由网页中的表格是由标记定义的，一个表格被分成许标记定义的，一个表格被分成许多行多行，每行又被分成许多个单元格，每行又被分成许多个单元格，因此，因此、是表格中三个最基本的标记，是表格中三个最基本的标记，必须一起出现必须一起出现。表格中的单元格能容纳网页中的任何元素，如图像，文本，表格中的单元格能容纳网页中的任何元素，如图像，文本，列表，表单，表格等。列表，表单，表格等。Theelementsthatmake upthebasic structure ofatable下面这段代码在浏览器中如何显示下面这段代码在浏览器中如何显示 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2 表格标记表格标记的常见属性的常见属性table的属性的属性含义含义border表格边框的宽度表格边框的宽度bordercolor表格边框的颜色，若不设置，将显示立体边表格边框的颜色，若不设置，将显示立体边框效果框效果bordercolordarkbordercolorlight设置边框暗部分和明亮部分效果，设置边框暗部分和明亮部分效果，IE才支持才支持这两个属性这两个属性bgcolor表格的背景色表格的背景色background表格的背景图像表格的背景图像cellspacing表格的间距表格的间距cellpadding表格的填充表格的填充width，heightalign表格的宽和高，可以使用象素或百分比做单表格的宽和高，可以使用象素或百分比做单位，位，align是水平对齐属性是水平对齐属性设置表格边框为设置表格边框为2020象素的效果象素的效果 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2设置表格边框为设置表格边框为0 0 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2可见：设置表格边框为可见：设置表格边框为0 0时，会使单元格边框也变为时，会使单元格边框也变为0 0象素，象素，而设置表格边框为其他数值时，不会影响单元格边框的宽而设置表格边框为其他数值时，不会影响单元格边框的宽再设置边框颜色为青色再设置边框颜色为青色 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2Firefox效果效果IE效果效果再设置背景颜色为玫瑰色再设置背景颜色为玫瑰色 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2设置间距为设置间距为1010，取消背景色，取消背景色 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2总结总结:间距间距cellspacingcellspacing的作用的作用再设置填充为再设置填充为1010 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2总结：填充总结：填充cellpaddingcellpadding的作用的作用表格的表格的rulesrules属性属性vrules属性：可实现只显示表格的行边框或列边框，属性：可实现只显示表格的行边框或列边框，取值为取值为rows时只显示行边框，取值为时只显示行边框，取值为cols时只显示时只显示列边框，如：列边框，如：v 单元格标记单元格标记的常见属性的常见属性td的属性的属性含义含义bordercolor单元格边框的颜色，该属性仅单元格边框的颜色，该属性仅IE支持支持bgcolor单元格的背景色单元格的背景色background单元格的背景图像单元格的背景图像align/valign单元格里的内容的水平或垂直对齐方式单元格里的内容的水平或垂直对齐方式colspan/rowspan合并同一列相邻的几个单元格合并同一列相邻的几个单元格/合并同一行的合并同一行的几个单元格几个单元格width，height单元格的宽和高，可以使用象素或百分比做单单元格的宽和高，可以使用象素或百分比做单位位注意：单元格注意：单元格td无无border属性，因此无法设置单属性，因此无法设置单元格边框的宽度，单元格边框宽度元格边框的宽度，单元格边框宽度只能是只能是1或或0设置第一个单元格边框为红色设置第一个单元格边框为红色 row 1,cell 1row 1,cell 2row 2,cell 1row 2,cell 2IE的显示的显示Firefox的显示的显示设置第一行单元格背景色为蓝色设置第一行单元格背景色为蓝色 row 1,cell 1row 1,cell 2等价于：等价于：row 1,cell 1row 1,cell 2 设置所有单元格背景色为蓝色设置所有单元格背景色为蓝色 row 1,cell 1row 1,cell 2 row 1,cell 1row 1,cell 2 等价于等价于再设置再设置表格表格的背景色为红色的背景色为红色v再设置表格的边框再设置表格的边框border为为0实现实现1 1象素边框表格象素边框表格v此时将表格的此时将表格的间距间距cellspacing设为设为1，即实现，即实现1象素象素边框表格，边框表格，v其原理是通过把表格的背景色和（所有单元格的其原理是通过把表格的背景色和（所有单元格的背景色）调整成不同的颜色，使间距看起来象一背景色）调整成不同的颜色，使间距看起来象一个边框一样个边框一样 v所有单元格的背景色设为同一颜色后，我们也称所有单元格的背景色设为同一颜色后，我们也称为表格的前景色为表格的前景色用用CSSCSS属性属性border-collapseborder-collapse做做1 1象素边框的表格象素边框的表格v在默认情况下表格边框和单元格边框是不叠加的，在默认情况下表格边框和单元格边框是不叠加的，此时表格的边框和单元格的边框紧挨在一起，所此时表格的边框和单元格的边框紧挨在一起，所以边框的宽度为以边框的宽度为112象素，这是象素，这是border-collapse属性的默认值为属性的默认值为separate，即不重叠时的，即不重叠时的情况。当我们把情况。当我们把border-collapse属性值设为属性值设为collapse（重叠）时，表格边框和单元格边框将发（重叠）时，表格边框和单元格边框将发生重叠，则边框的宽度为生重叠，则边框的宽度为1象素。象素。vborder-collapse:collapse;v双细线边框表格的原理双细线边框表格的原理v将表格的边框颜色将表格的边框颜色bordercolor属性设置为某种颜属性设置为某种颜色，则表格的暗边框和亮边框会变为同一种颜色，色，则表格的暗边框和亮边框会变为同一种颜色，表格的边框立体效果消失，（在表格的边框立体效果消失，（在IE中单元格边框中单元格边框的颜色也会跟着改变，而的颜色也会跟着改变，而Firefox中单元格边框颜中单元格边框颜色不会改变）此时表格的边框和单元格的边框都色不会改变）此时表格的边框和单元格的边框都为为1象素，只要间距象素，只要间距cellspacing不设为不设为0，则两组边，则两组边框不会重合，显示为双细线边框表格。框不会重合，显示为双细线边框表格。双细线边框表格的实现双细线边框表格的实现 row 1,cell 1row 1,cell 2 row 1,cell 1row 1,cell 2 IE的显示的显示例例2 2 下面的表格是如何实现的下面的表格是如何实现的v用间距做的边框，但并没有把表格的边框用间距做的边框，但并没有把表格的边框border设为设为0，而是设为，而是设为1，白色。因此在红色，白色。因此在红色“边框边框”的外面还有的外面还有1象素白色的表格边框，单元格外也有象素白色的表格边框，单元格外也有1象素的白色单元格边框象素的白色单元格边框v表格间距为表格间距为1，表格背景色为红色，单元格背景色，表格背景色为红色，单元格背景色为淡红色为淡红色单元格内容的对齐属性单元格内容的对齐属性align/align/valignvalignvalign属性可以让单元格中的内容是水平居中或左属性可以让单元格中的内容是水平居中或左右对齐，默认是左对齐右对齐，默认是左对齐vvalign属性是垂直对齐属性，可以让内容在垂直方属性是垂直对齐属性，可以让内容在垂直方向对齐，默认是垂直居中对齐向对齐，默认是垂直居中对齐单元格的合并属性（单元格的合并属性（colspancolspan、rowspanrowspan）v单元格的合并属性是单元格的合并属性是td标记特有的两个属性，分别是跨多标记特有的两个属性，分别是跨多列属性列属性colspan和跨多行属性和跨多行属性rowspan，它们用于合并列或，它们用于合并列或合并单元格。如：合并单元格。如：v 单元格内容单元格内容 v表示该单元格是由表示该单元格是由3列（列（3个并排的单元格）合并而成，它个并排的单元格）合并而成，它将使该行将使该行标记中减少两个标记中减少两个标记。标记。v单元格内容单元格内容v表示该单元格由表示该单元格由3行（行（3个上下排列的单元格）合并而成，个上下排列的单元格）合并而成，它将使该行下的两行，两个它将使该行下的两行，两个标记中分别减少一个标记中分别减少一个标记。标记。v注意：注意：colspan和和rowspan属性也可以在一个单元属性也可以在一个单元格格标记中同时出现，如：标记中同时出现，如：v 标题单元格标题单元格 标记标记v标题单元格标记标题单元格标记相当于一个单元格内字体以相当于一个单元格内字体以粗体居中显示的粗体居中显示的标记标记 表格标题标记表格标题标记v标题标记标题标记的常用属性有的常用属性有align、valignv（valign表示标题在表格的上部或下部，值为表示标题在表格的上部或下部，值为bottom|top）标记标记 v浏览器默认是将整个表格的代码下载完再显示整浏览器默认是将整个表格的代码下载完再显示整个表格，如果想让浏览器分行下载，即个表格，如果想让浏览器分行下载，即下载一行下载一行显示一行显示一行，可以在所有行标记外加上，可以在所有行标记外加上标记，标记，这个对表格中内容很多时比较实用。这个对表格中内容很多时比较实用。v有时如果要把所有单元格的背景色设置成同一种有时如果要把所有单元格的背景色设置成同一种颜色，可以设置颜色，可以设置tbody的背景色，这样就不必为每的背景色，这样就不必为每个单元格都添加一条个单元格都添加一条bgcolor属性，可节省很多代属性，可节省很多代码码 普通表格与布局表格的区别普通表格与布局表格的区别 v在布局模式下绘制的布局表格是特殊设置了的普在布局模式下绘制的布局表格是特殊设置了的普通表格，布局表格将通表格，布局表格将border、cellpadding、cellspacing三个属性都设置为了三个属性都设置为了0，因此我们看不，因此我们看不到它的边框，布局单元格将到它的边框，布局单元格将valign属性设置为属性设置为top，因此往布局单元格中插入内容默认都是往单元，因此往布局单元格中插入内容默认都是往单元格最顶端排列的。格最顶端排列的。v实验：用普通标格和布局表格分别进行实验：用普通标格和布局表格分别进行1-3-1版式版式布局布局在在DreamweaverDreamweaver中选中表格的方法中选中表格的方法v选择整个表格：单击表格左上角或右边框或底边选择整个表格：单击表格左上角或右边框或底边框或框或状态条中的状态条中的标签标签。v选择一行或一列单元格：将鼠标指针置于一行的选择一行或一列单元格：将鼠标指针置于一行的左边框上，或置于一列的顶端边框上，当选定箭左边框上，或置于一列的顶端边框上，当选定箭头出现时单击，或状态条中的头出现时单击，或状态条中的标签标签（推荐）。（推荐）。v选择连续的几个单元格：在一个单元格中单击并选择连续的几个单元格：在一个单元格中单击并拖动鼠标横向或纵向移至另一单元格。拖动鼠标横向或纵向移至另一单元格。v选择不连续的几个单元格：按住选择不连续的几个单元格：按住Ctrl键，单击欲键，单击欲选定的单元格、行或列。选定的单元格、行或列。v选择单元格中的网页元素：点击单元格中的网页选择单元格中的网页元素：点击单元格中的网页元素。元素。DWDW在表格中插入行或列的方法在表格中插入行或列的方法v当光标位于表格内时，按右键在弹出菜单中选择当光标位于表格内时，按右键在弹出菜单中选择“表格表格插入行（或插入列）插入行（或插入列）”可在表格的当可在表格的当前行的上方插入一行，或当前行的左边插入一列，前行的上方插入一行，或当前行的左边插入一列，若要在表格的最右边插入一列或最下方插入一行，若要在表格的最右边插入一列或最下方插入一行，可选择可选择“表格表格插入行或列插入行或列”，在所选列之，在所选列之后或所选行之下插入列或行。后或所选行之下插入列或行。插入行也可以在代插入行也可以在代码视图中复制一行的代码码视图中复制一行的代码“”再粘再粘贴几次就插入几行，插入列则在代码视图中不好贴几次就插入几行，插入列则在代码视图中不好进行。进行。制作固定宽度的表格制作固定宽度的表格 v如果我们不定义表格中每个单元格的宽度，当向单元格如果我们不定义表格中每个单元格的宽度，当向单元格中插入网页元素时，表格往往会变形，要制作固定宽度中插入网页元素时，表格往往会变形，要制作固定宽度的表格，通常有两种方法：的表格，通常有两种方法：v 定义所有列的宽度，但定义所有列的宽度，但不定义整个表格的宽度不定义整个表格的宽度，整个，整个表格的实际宽度为：所有列的宽度和表格的实际宽度为：所有列的宽度和+边框宽度和边框宽度和+间距间距和和+填充和，这时候，只要单元格内的内容不超过的单元填充和，这时候，只要单元格内的内容不超过的单元格的宽度时，表格不会变形。格的宽度时，表格不会变形。v 定义整个表格的宽，如定义整个表格的宽，如500像素、像素、98%等，再等，再留一列的留一列的宽度不定义宽度不定义，未定义的这一列的宽度为整个表格的宽度，未定义的这一列的宽度为整个表格的宽度-已定义列的宽度和已定义列的宽度和-边框宽度和边框宽度和-间距和间距和-填充和，同样在填充和，同样在插入内容时也不会变形。插入内容时也不会变形。用单元格制作水平线或占位表格用单元格制作水平线或占位表格 v关键：去掉单元格关键：去掉单元格中的中的“ ”空格空格 制作占位表格：演示制作占位表格：演示 用表格制作圆角栏目框用表格制作圆角栏目框 v网页中经常可以看到漂亮的圆角栏目框，在这里我们来网页中经常可以看到漂亮的圆角栏目框，在这里我们来制作一个固定宽度的圆角栏目框制作一个固定宽度的圆角栏目框 圆角栏目框制作步骤圆角栏目框制作步骤1.插入一个插入一个三行一列三行一列的表格，把表格的填充、间距和边框设的表格，把表格的填充、间距和边框设为为0，宽设置成，宽设置成190象素（圆角图片的宽），高不设置。象素（圆角图片的宽），高不设置。2.分别设置表格内三个单元格的高。第一个单元格高设置为分别设置表格内三个单元格的高。第一个单元格高设置为38象素（上圆角图片的高）；第二个单元格高为象素（上圆角图片的高）；第二个单元格高为148象素；象素；第三个单元格高为第三个单元格高为17象素（下圆角图片的高）。在象素（下圆角图片的高）。在第第1、3个单元格内分别插入上圆角和下圆角的图片个单元格内分别插入上圆角和下圆角的图片。3.把第二个单元格的水平对齐方式设置为居中把第二个单元格的水平对齐方式设置为居中（align=center），单元格的背景颜色设置为圆角图片），单元格的背景颜色设置为圆角图片边框的颜色（边框的颜色（bgcolor=#E78BB2）。）。v4.这时在第二个单元格内再插入一个一行一列的表格，这时在第二个单元格内再插入一个一行一列的表格，把该表格的间距和边框设为把该表格的间距和边框设为0，填充设为，填充设为8象素（让栏目象素（让栏目框中的内容和边框之间有一些间隔），宽设为框中的内容和边框之间有一些间隔），宽设为186象素，象素，背景颜色设置为比边框浅的颜色背景颜色设置为比边框浅的颜色（bgcolor=#FAE4E6）。）。v说明：第四步也可以不插入表格，而是把第二个单元格说明：第四步也可以不插入表格，而是把第二个单元格拆分成拆分成3列，把三列对应的三个单元格的宽分别设置为列，把三列对应的三个单元格的宽分别设置为2象素、象素、186象素和象素和2象素，并在代码视图把这三个单元格象素，并在代码视图把这三个单元格中的中的“ ”去掉，然后把去掉，然后把1、3列的背景色设置为圆列的背景色设置为圆角边框的颜色，第角边框的颜色，第2列的背景色设为圆角背景的颜色，列的背景色设为圆角背景的颜色，并用并用CSS属性设置它的填充为属性设置它的填充为8象素象素（style=padding:8px）