第三章 html 标记功能详述 ( 第 1 部分 )

第三章 HTML 标记功能详述 ( 第 1 部分 )

本章要点

文本格式标记文本修饰标记（字体标记）列表标记超链接标记图像和多媒体标记

HTML 标记基础

什么是标记？标记是网页文档中的一些有特定意义的符号。

这些符号指明如何显示文档中的内容。标记可以具有相应属性即各种参数，如 size 、

color 、 text 、 width 和 noshade 等。例如： <p>

<font size="+1" color="red"></font></p>

文本格式标记

网页中添加文本的方法

网页中添加文本的方法

文本格式标记是网页中定义文本格式的标记1 ）直接写文本 <div> 文本 </div> 、 <td> 文本 </td> 、

<body> 文本 </body> 、 <li> 文本 </li> ；2 ）用段落标记 <p>……</p> 格式化文本，各段落文本将分

行显示；3 ）用标题标记 <hn>……</hn> 格式化文本，作用：定义第

n 号标题字体， n=1~6 ， n 值越大，字越小；文本将变为粗体显示，可看成特殊的段落标记；

4) 用预格式化标记 <pre>……</pre> 格式化文本，标记内的文本将按原来的格式显示，保留文本中的所有空格、换行和定位符；

用标题标记 <hn>……</hn> 格式化文本

<h1> 第 1 号标题字体 </h1>



<h5 align="center"> 第 5 号标题字体（居中） </h5>

标题标记和段落标记

<body>

<h1 align="center">1 号标题 </h1>

<p> 第一段 </p>

<h3>3 号标题 </h3>

<p> 第二段 </p>

<h5 align="right">5 号标题 </h5>

<p align="right"> 第三段 </p>

</body>

用预格式化标记 <pre>…</pre> 格式文本

<pre> 网页设计师这一职业在今后来说还是有需求的。

因为随着网络越来越普及，像我国的房地产市场 </pre>

文本的强制换行 <br />

电子商务顾名思义就是在 internet 上做生意， <br /> 商品展示，广告宣传、发布

供求信息等活动实现的途径就是网页。

强制不换行标记 <nobr>……</nobr> ，常用英文人名

<nobr>Bill Gates</nobr>

文本中的空格

标记 (<pre> 除外 ) 内字符前的空格浏览器将全部忽略，字符与字符间的空格浏览器将只保留一个空格显示，回车视为一个空格，

块级元素之间忽略所有空格。如果要输入多个空格或需要在字符之前输入空格

需在源代码中插入（表示一个半角空格）。

行内元素可看成一个字符

文本中的转义字符

在 HTML 源代码中，有些字符有特别的含义，比如小于号“ <” 就表示 HTML 标记的开始， html 源代码中的“ <” 是不会在浏览器中显示的，如果要浏览器显示这些字符，就需要输出他们对应的转义字符。

例如： < 表示 < , > 表示 > , &quot 表示“ , & 表示 & , 表示空格等；

通常，一个字符实体是由三部分组成的：（ 1 ）一个“ &” 符号（ 2 ）字符专用名称或者字符代号（ 3 ）一个“ ;” 符号在 DW 的设计视图中输入这些特殊字符， DW 会自动在代

码视图添加它们对应的转义字符

DW 中插入 HTML 文本元素的快捷键

1. Enter 插入 <p> </p> （硬回车）2. shift ＋ enter 插入 <br /> （软回车）3. Ctrl ＋ shift ＋ space 插入一个

综合实例

<html><head> <title> 分段换行与预格式 </title> </head><body> <h3> 以下是直接写文本的情况： </h3> 星期一、星期二、星期三、星期四、星期五、星期六、星期日。 <h3> 以下是使用了三个换行标记的情况： </h3> 星期一、星期二、 <br /> 星期三、星期四、 <br/> 星期五、星期六、星期日。 <br /> <h3> 以下使用分段标记（分为两段）： </h3> <p> 星期一、星期二、星期三、 </p><p> 星期四、星期五、星期六、星期日。 </p> <h3> 以下使用预格式： </h3> <pre> 星期一、星期二、星期三、星期四、星期五、星期六、星期日。 </pre> </body></html>

跑马灯 <marquee> 标记

一个特殊的文本标记，能使其中的文本在浏览器屏幕上不断滚动。

其中 behavior=“alternate” 设置滚动方式为来回滚动，设置为 scroll 表示循环滚动，设置为 slide 表示滚动到目的地就停止。 direction属性用于控制滚动的方向，可以上下滚动或左右滚动。 loop 设置滚动的次数， loop 为 0 表示不断滚动。 scrollamount属性设置滚动的速度， scrolldelay属性设置两次滚动间的间隔时间。

<marquee> 示例

<marquee direction="up" behavior="scroll" scrollamount="10" scrolldelay="4" loop="-1" align="middle" onmouseover=this.stop()

onmouseout=this.start() height="120"> 测试 :网页设计与制作学习：可以将 swf 文件下载下来用 flash播放器全屏播放以达到最好效果，也可以在 IE 浏览器中按 F11 键达到全屏效果 .

</marquee>

水平线标记 <hr />

<hr/> 标记是在 HTML 文档中加入一条水平线，它可以直接使用，具有 size 、 color 、 width 和 noshade属性。 size 是设置水平线的厚度，而 width 是设定水平线的宽度，默认单位是像素。 noshade属性用来加入一条没有阴影的水平线。

<hr size="3" width="85%" color =“red" noshade="noshade" align="center" />

文本修饰标记（字体标记）

文本修饰标记

文本修饰标记是对文本的外观进行修饰的标记，如让文字变色，加大，变粗体，添加下划线等。

1 ） font 标记：定义文字的各种属性。例： <font face="fontname" size= "n" color= "#006

6CC">……</font>

加粗、倾斜与下划线标记

2 ）加粗、倾斜与下划线的定义标记（ b 、 i 、 u ）<b>……</b> <i>……</i> <u>……</u> <em>……</em> <strong>……</strong> 使用加粗、倾斜与下划线标记（ b 、 i 、 u ）的组合，可对

文本文字进一步修饰。如： <b><font color="red" size="5">此处以红色五号字粗

体显示 </font></b>

上标（ sup ）和下标（ sub ）标记

用于书写数学公式或分子式。如： H<sub>2</sub>O  X<sup>2</su

p> 由于字体标记属于对文本外观进行修饰的标记，

是由于当时 CSS语言尚未出现时 html 定义的表现的范畴，随着 CSS 的出现，这些表现功能均可以由 CSS完成，所以不含有语义的字体标记慢慢过时了。

列表标记

列表标记

为了合理地组织文本，网页中常常要用到列表。在 HTML 中可以使用的列表标记有无序列表、有序列表和定义列表三种。

无序列表 (Unordered List) <ul>, <li> 有序列表 (Ordered List) <ol>, <li>定义列表 (Defined List) <dl>, <dt>, <dd>

嵌套的无序列表示例

<ul id="nav"> <li><a href=""> 文章 </a> <ul> <li><a href="">CSS教程 </a> </li>

<li><a href="">DOM教程 </a></li> <li><a href="">XML教程 </a></li> </ul> </li> <li><a href="">参考 </a> <ul>

<li><a href="">XHTML</a></li> <li><a href="">XML</a></li>

<li><a href="">CSS</a></li> </ul> </li></ul>

有序列表 (Ordered List)

<ul id="nav"> <li><a href=""> 文章 </a> <ol> <li><a href="">CSS教程 </a> </li>

<li><a href="">DOM教程 </a></li> <li><a href="">XML教程 </a></li> <li><a href="">Flash教程 </a></li>

</ol> </li></ul>

定义列表 (Defined List)

<dl> <dt>湖南城市 </dt><dd>长沙 </dd><dd>衡阳 </dd><dd> 常德 </dd></dl><dl> <dt>湖北城市 </dt><dd>武汉 </dd><dd>襄樊 </dd><dd>宜昌 </dd></dl>

超链接标记 <a>

超链接标记 <a>

超链接是网页的基本元素，网页正是通过超链接而相互链接组织成一个网站，并将 internet 上的各个网站联系在一起。浏览者通过超链接选择阅读路径。

超链接是通过 URL （统一资源定位器）来定位目标信息的。 URL包括 4 部分：网络协议、域名或IP 地址、路径和文件名。

URL 分为绝对 URL 和相对 URL

绝对 URL

绝对 URL 是采用完整的 URL 来规定文件在 internet 上的精确地点，包括完整的协议类型、计算机域名或 IP 地址、包含路径信息的文档名。书写格式为：协议： // 计算机域名或 IP 地址 [/ 文档路径 ]［ / 文档名］

例如： http://www.hyshopgo.com/download/download.gif

相对 URL

相对 URL 是相对于包含超链接页的地点来规定文件的地点。

如链接到同一路径下的文档，直接输入文件名即可，如 news.htm

如链接到同一路径下子文件夹的文档，则先输入子文件夹名和斜杠（ / ），再输入文件名，如 yule/news.htm

如链接到上一级路径中，要在文件名前输入“ ../” ，如“ ../news.htm” ，其中“ ..” 表示上级目录，“ .” 表示本级目录。

相对 URL 示例

wgzx

yuleindex

.htm

oa.

htm

pop

.htmnews

.htm1.href="yule/news.htm"

2

1

2.href="../oa.htm"

3.href=“pop.htm”

3

相对 URL 的优势

可以看出相对 URL 方式比较简便，不需输入一长串完整的 URL ；另外相对路径还有一个非常重要的特点是：可以毫无顾忌地修改Web 网站的域名或网站在服务器硬盘中的存放目录。

超链接的种类－根据源对象划分

1) 用文本做超链接： <a href="index.htm" target="_blank">首页 </a>

2) 用图像做超链接：<a href="index.htm"><img src="images/info.gif" title="返

回首页 " border="0" /></a>

3) 文本图像混合做链接：<a href="brand1.htm"><img src="green.gif" /><br /> 格力

空调 1型 </a>

该方法在商品展示的网站上较常用。使用图像做超链接后，图像会自动增加边框，可设置边框为 0去掉

超链接的种类－根据源对象划分 2

4) 热区链接：使用 map 在图像上定义一幅地图，地图上可包含多个热区，每个热区用 area单标记定义， area 的 shape属性定义了热区的形状， coords 定义了热区的坐标点，href 定义了热区链接的文件。同时 img 标记用 usemap指明用了哪幅地图

<img src="images/163227.png" width="600" height="518" border="0" usemap="#Map" />

<map name="Map" id="Map"><area shape="rect" coords="51,131,188,183" href="default.asp" />

<area shape="rect" coords="313,129,450,180" href="#h3" />

</map>

超链接的种类－根据 href的取值

1) 链接到其他网页或文件（ jpg, rar 等）内部链接 <a href="../index.htm">返回首页 </a>

外部链接 <a href="http://www.163.com"> 网易网站 </a>

下载链接 <a href="software/wybook. rar"> 点击下载 </a>

2) 电子邮件链接<a href="mailto:[email protected]">

给我留言 </a> 如果 IE 不能打开该文件，则会弹出文件下载的对话框

比普通链接多了个”mailto:”

比普通链接多了个”mailto:”

超链接的种类－根据 href的取值 2

3) 锚链接（链接到页面中某一指定的位置）当网页内容很长，需要进行页内跳转链接时，就需要定义锚点

和锚点链接，锚点可使用 name属性或 id属性定义。<a id="yyyy"></a> 

<a href="#yyyy">……</a> 

也可以链接到其他网页某个锚点处<a href="intro.htm#yyyy">……</a> 

4) 空链接和脚本链接 :

<a href=“#”>……</a> 

<a href="JavaScript:alert('确定删除吗 ')">……</a>

超链接的打开方式（ target属性的取值）

在本窗口打开： _self （ target 的默认值）在新窗口打开： _blank在父窗口打开： _parent 将链接的文件载入到父框架

在整个窗口打开： _top ：将链接的文件载入到整个浏览器窗口中，并删除所有框架

_parent 、 _top仅仅在网页被嵌入到其他网页中有效，如框架中的网页，所以这两种取值用得很少。

超链接的 title属性

title属性在很多标记里都有，其作用是在鼠标停留在该元素上时显示设置的说明文字

如 <p><a href=" 定义列表 .html" title=" 格力太阳能喜获国家免检产品称号 "> 格力太阳能喜获…</a></p>

超链接制作的原则

1) 可以使用相对链接尽量不要使用绝对链接，如 ../index.htm

而不是 http://www.hynu.cn

2) 链接目标尽可能简单如 http://www.hynu.cn ，而不是 http://www.hynu.c

n/index.jsp

课后思考

url （统一资源定位器）url 一般作为哪些属性的取值？

href=“index.asp” src=“logo.gif”url 的种类相对 url

绝对 urlurl 格式的类型协议名 ://主机 ip 或域名 / 文件目录 / 文件名

url协议的类型

常见的 url协议的类型 http ftp file://192.168.88.6/web/wy.gif

当在 DW 中建立网站目录后，那么网站目录内的文件之间建立链接就会自动采用相对链接的方式，相对链接以网站目录为基准。若没建立网站目录， DW则采用 file协议方式，以磁盘根目录为基准，建立链接，而这是我们应该避免的

图像标记 <img />

图像标记： <img src=“ 图像文件名” /> 将图形文件嵌入到网页文档中的当前位置

说明：网页中插入图像有两种方法，一是插入一个 <img> 元素，二是将图像作为背景嵌入到网页中

由于 CSS 的背景属性的功能很强大，现在更推荐将所有的图像都作为背景嵌入。

图像标记 <img>

网页中支持的图像文件格式

网页中可以插入的图像文件的类型有 jpg 格式， gif 格式和 png 格式。这些文件都是压缩格式的图像格式，其中 jpg 格式适合用于网页中较大尺寸的真彩色图片，是一种有损压缩的格式； gif 格式一般用于较小尺寸的图片，是一种无损压缩的格式，只支持 256色， GIF 在存储非连续色调的图像或具有大面积单一色彩的图像方面比较出色，gif 格式的特点是可以实现 gif 动画，和 gif 全透明的图像； png 格式可以用于 alpha透明效果，但 IE6 不能够支持。

<img> 标记的常见属性

<img> 是一个行内元素，插入 <img> 元素不会导致任何换行。下面是 <img> 标记的常见属性：

img的属性含义

src 图片文件的 url地址

alt 当图片无法显示时显示的替换文字

title 鼠标停留在图片上时显示的说明文字

align图片的对齐方式，默认为基线对齐，即图片的下边缘和文字的下边缘对齐

width、 height 图片在网页中的宽和高

在单元格中插入图像的方法

对于表格布局的网页，所有的元素都是放置在单元格中的，图像也不例外，要在单元格中插入图像，且单元格的边框和图像之间没有间隙。那么必须将该单元格的宽和高设置为图片的宽和高，且表格中其它单元格的大小也必须固定，然后确保 <td> 与 </td> 之间只有 <img> 标记，没有空格和换行符，否则单元格会被空格撑开。如：

<td width="768" height="132"><img src="images/info.gif" />

</td>

<img> 插入图像的对齐方式

<img> 标记的对齐方式仍然通过 align属性实现，但其取值多达 9种，其中要实现图片和文本混排可使用“左对齐”或“右对齐”，要实现文本和图片顶部对齐可使用“文本上方”。

<img src="images/info.gif" width="158" height="41" align="left"/> ，但通常是将图片放在表格里，通过表格定位来实现文本和图像的混排。

复习题

a 标记的常用属性有哪些 href target name title

img 标记的常用属性有哪些 src width height alt title

实验 ( 作业 ):

用 DW 制作一个个人求职的网页，要求用表格布局，网页中必须包含图像、文本、列表、链接及表格等基本元素。

或者直接用编写代码的方式制作该网页。下次上课前必须交，否则扣平时成绩。

媒体元素插入标记 <embed />

<object> </object>

插入 flash 的两种方法

方法一：执行菜单命令：“插入－媒体－ flash” ，在代码视图中可看到插入 flash 元素是通过同时插入 object 标记和 embed 标记实现的，以确保在 IE5和 Firefox 中都获得应有的效果

方法二：执行菜单命令：“插入－媒体－插件”，此方法在代码视图中仅插入了 embed 元素。由于 IE6 和 Firefox都能正常显示效果，而代码更简洁，所以推荐用这种方式（但不能用来插入透明 flash ，否则 IE 浏览器中没有 object 标记的 parm属性不会透明）

在图像上添加透明 flash

首先可以将一张需要放置透明 flash 的图片作为单元格的背景导入，然后在此单元格内插入一个透明 flash 文件，可以调整此 flash 元素的大小与单元格相一致，选中该 flash 文件，点击属性面板里的“参数”按钮，新建一个参数“ wmode” 值设置为“ transparent” 。

插入视频或音频文件

插入视频可分别使用 ActiveX 按钮或插件按钮实现 <object width="280" height="216">

<param name="autostart" value="false" />

<embed src="2.mpg" width="280" height="216" autostart="false"></embed>

</object> ActiveX 方式<embed src=“2.mpg” width=“276” height=“218” autostart=

“false”></embed> 插件方式

流媒体简介

流媒体实际指的是一种新的媒体传送方式，而非一种新的媒体 ,流式传输方式将整个多媒体文件经过特殊的压缩方式分成一个个压缩包，由视频服务器向用户计算机连续、实时传送。在采用流式传输方式的系统中，用户不必像采用下载方式那样等到整个文件全部下载完毕

常见的流媒体文件格式 real公司： rm\rmvb\ra apple公司： quicktime\mov microsoft公司： asf\wmv\wma

插入流媒体元素的方法

网页中插入流媒体也能向插入一般媒体一样使用 embed标记，只是要在 classId框中设置流媒体的类型

插入 Real Player流格式的视频文件属性面板中设置 :

ClassID 为 RealPlayer…… 。选中 Embed复选框。Src 为 zhaodan.rm 。单击“参数…”按钮，设置属性。

parm参数示例

参数： console 属性：可以将各种不同的 RealPlayer控制聚集在网页上，这样它们可以交互使用或是保持独立，而且互相不影响

语法示例 :<EMBED style="WIDTH: 491px; HEIGHT: 423p

x" src=abc.rm width=355 height=288 autostart="true" controls="ImageWindow,ControlPanel">

</EMBED>

容器标记 <div> <span>

div和 span

div 和 span 是不含有任何语义的标记，用来在其中放置任何网页元素，就象一个容器一样，当把文字放入后，文字的格式外观都不会发生任何改变，应用容器标记的主要作用是通过引入 CSS属性对容器内元素内容的表现进行设置。

div 和 span 的唯一区别是 div 是块级元素， span是行内元素。

div和 span

<body> <div style="background-color:#3399ff"> 块状区域 1</div>

<div style="background-color:#99ccff"> 块状区域 2</div>

<span style="background-color:#ffccff"> 行间区域1</span>

<span style="background-color:#993399"> 行间区域 2</span> </body>

<div> 标记是一个块状的容器，其默认的状态就是占据整个一行。

<span> 标记是一个行内的容器，其默认状态是行内的一部分，占据行的长短由内容的多少来决定

需要注意的是 div并不是层，以前说的层是指通过 CSS设置成了绝对定位属性的 div 元素，但实际上也可以对其他任何标记的元素设置成绝对定位，此时其他标记也成了层，因此层并不对应于任何 html 标记，所以 Dreamweaver CS3去掉了层这一概念，将这些设置成了绝对定位元素的标记统称为 AP （ Absolute Position ）元素

表格标记 <table> 、<tr> 、 <td>

<th> 、 <tbody> 、 <caption>

表格标记

表格的主要作用：网页布局因为表格可以固定文本或图像的显示位置，还可以使用多重表格，并可以设置前景色和背景色

网页中的表格是由 <table> 标记定义的，一个表格被分成许多行 <tr> ，每行又被分成许多个单元格 <td> ，因此 <table> 、 <tr> 、 <td> 是表格中三个最基本的标记，必须一起出现。表格中的单元格能容纳网页中的任何元素，如图像，文本，列表，表单，表格等。

The elements that make up the basic structure of a table

下面这段代码在浏览器中如何显示

<table border="1"> <tr>

<td>row 1, cell 1</td><td>row 1, cell 2</td>

</tr><tr>


</tr></table>

表格标记 <table> 的常见属性table的属性含义

border 表格边框的宽度

bordercolor 表格边框的颜色，若不设置，将显示立体边框效果

bordercolordark

bordercolorlight

设置边框暗部分和明亮部分效果， IE才支持这两个属性

bgcolor 表格的背景色

background 表格的背景图像

cellspacing 表格的间距

cellpadding 表格的填充

width ， height

align

表格的宽和高，可以使用象素或百分比做单位， align 是水平对齐属性

设置表格边框为 20象素的效果

<table border="20"><tr>


</tr><tr>


</tr></table>

设置表格边框为 0

<table border="0"><tr>


</tr><tr>


</tr></table>

可见：设置表格边框为 0时，会使单元格边框也变为 0象素，而设置表格边框为其他数值时，不会影响单元格边框的宽

再设置边框颜色为青色

<table border="20" bordercolor="#0099FF"><tr>


</tr><tr>


</tr></table>

Firefox效果

IE效果

再设置背景颜色为玫瑰色

<table border="20" bgcolor="#9933CC" bordercolor="#0099FF">

<tr>

<td>row 1, cell 1</td>


</tr>

<tr>



</tr>

</table>

设置间距为 10，取消背景色

<table border="20" cellspacing="10" bordercolor="#0099FF">

<tr>



</tr>

<tr>



</tr>

</table>

总结 :间距 cellspacing的作用

再设置填充为 10

<table border="20" cellspacing="10 " cellpadding="10" bordercolor="#0099FF">

<tr>



</tr>

<tr>



</tr>

</table>

总结：填充 cellpadding的作用

表格的 rules属性

rules属性：可实现只显示表格的行边框或列边框，取值为 rows时只显示行边框，取值为 cols时只显示列边框，如：

<table rules="rows" width="200" border="1" cellpadding="0" cellspacing="2">

单元格标记 <td> 的常见属性td的属性含义

bordercolor 单元格边框的颜色，该属性仅 IE支持

bgcolor 单元格的背景色

background 单元格的背景图像

align/valign 单元格里的内容的水平或垂直对齐方式

colspan/rowspan 合并同一列相邻的几个单元格 / 合并同一行的几个单元格

width ， height 单元格的宽和高，可以使用象素或百分比做单位

注意：单元格 td无 border属性，因此无法设置单元格边框的宽度，单元格边框宽度只能是 1 或0

设置第一个单元格边框为红色

<table border="20" align="center" cellpadding="10" cellspacing="10" bordercolor="#0099FF">

<tr>

<td bordercolor="#FF0000">row 1, cell 1</td>


</tr>

<tr>



</tr>

</table>

IE 的显示

Firefox 的显示

设置第一行单元格背景色为蓝色

<tr>

<td bgcolor="#99CCFF">row 1, cell 1</td>


</tr>

等价于：<tr bgcolor="#99CCFF">



</tr>

设置所有单元格背景色为蓝色<tr>



</tr>

<tr>



</tr> 等价于<tbody bgcolor="#99CCFF">

<tr>…</tr><tr>…</tr>

</tbody>

再设置表格的背景色为红色

再设置表格的边框 border 为 0

实现 1象素边框表格

此时将表格的间距 cellspacing 设为 1 ，即实现 1象素边框表格，

其原理是通过把表格的背景色和（所有单元格的背景色）调整成不同的颜色，使间距看起来象一个边框一样

所有单元格的背景色设为同一颜色后，我们也称为表格的前景色

用 CSS属性 border-collapse 做 1象素边框的表格

在默认情况下表格边框和单元格边框是不叠加的，此时表格的边框和单元格的边框紧挨在一起，所以边框的宽度为 1 ＋ 1＝ 2象素，这是 border-collapse属性的默认值为 separate ，即不重叠时的情况。当我们把 border-collapse属性值设为 collapse （重叠）时，表格边框和单元格边框将发生重叠，则边框的宽度为 1象素。

border-collapse:collapse;<table border="1" bordercolor="#FF0000" style

="border-collapse:collapse;">

双细线边框表格的原理

将表格的边框颜色 bordercolor属性设置为某种颜色，则表格的暗边框和亮边框会变为同一种颜色，表格的边框立体效果消失，（在 IE 中单元格边框的颜色也会跟着改变，而 Firefox 中单元格边框颜色不会改变）此时表格的边框和单元格的边框都为 1象素，只要间距 cellspacing 不设为 0 ，则两组边框不会重合，显示为双细线边框表格。

双细线边框表格的实现

<table border="1" cellpadding="10" cellspacing="2" bordercolor="#0099FF"> <tr bgcolor="#99CCFF">


</tr><tr>


</tr></table>

IE 的显示

例 2 下面的表格是如何实现的

用间距做的边框，但并没有把表格的边框 border设为 0 ，而是设为 1 ，白色。因此在红色“边框”的外面还有 1象素白色的表格边框，单元格外也有 1象素的白色单元格边框

表格间距为 1 ，表格背景色为红色，单元格背景色为淡红色

单元格内容的对齐属性 align/valign

align属性可以让单元格中的内容是水平居中或左右对齐，默认是左对齐

valign属性是垂直对齐属性，可以让内容在垂直方向对齐，默认是垂直居中对齐

单元格的合并属性（ colspan 、 rowspan ）

单元格的合并属性是 td 标记特有的两个属性，分别是跨多列属性 colspan 和跨多行属性 rowspan ，它们用于合并列或合并单元格。如：

<td colspan="3"> 单元格内容 </td> 表示该单元格是由 3 列（ 3 个并排的单元格）合并而成，

它将使该行 <tr> 标记中减少两个 <td> 标记。 <td rowspan="3">单元格内容 </td> 表示该单元格由 3 行（ 3 个上下排列的单元格）合并而成，

它将使该行下的两行，两个 <tr> 标记中分别减少一个 <td>标记。

注意： colspan 和 rowspan属性也可以在一个单元格 <td> 标记中同时出现，如：

<td colspan="3" rowspan="3"> </td>

标题单元格 <th> 标记

标题单元格标记 <th>相当于一个单元格内字体以粗体居中显示的 <td> 标记

表格标题标记 <caption>

标题标记 <caption> 的常用属性有 align 、 valign（ valign 表示标题在表格的上部或下部，值为 bo

ttom|top ）

<tbody>……</tbody> 标记

浏览器默认是将整个表格的代码下载完再显示整个表格，如果想让浏览器分行下载，即下载一行显示一行，可以在所有行标记外加上 <tbody> 标记，这个对表格中内容很多时比较实用。

有时如果要把所有单元格的背景色设置成同一种颜色，可以设置 tbody 的背景色，这样就不必为每个单元格都添加一条 bgcolor属性，可节省很多代码

普通表格与布局表格的区别

在布局模式下绘制的布局表格是特殊设置了的普通表格，布局表格将 border 、 cellpadding 、 cellspacing 三个属性都设置为了 0 ，因此我们看不到它的边框，布局单元格将 valign属性设置为 top ，因此往布局单元格中插入内容默认都是往单元格最顶端排列的。

实验：用普通标格和布局表格分别进行 1-3-1版式布局

在 Dreamweaver 中选中表格的方法

选择整个表格：单击表格左上角或右边框或底边框或状态条中的 <table> 标签。

选择一行或一列单元格：将鼠标指针置于一行的左边框上，或置于一列的顶端边框上，当选定箭头出现时单击，或状态条中的 <tr> 标签（推荐）。

选择连续的几个单元格：在一个单元格中单击并拖动鼠标横向或纵向移至另一单元格。

选择不连续的几个单元格：按住 Ctrl 键，单击欲选定的单元格、行或列。

选择单元格中的网页元素：点击单元格中的网页元素。

DW 在表格中插入行或列的方法

当光标位于表格内时，按右键在弹出菜单中选择“表格——插入行（或插入列）”可在表格的当前行的上方插入一行，或当前行的左边插入一列，若要在表格的最右边插入一列或最下方插入一行，可选择“表格——插入行或列…”，在所选列之后或所选行之下插入列或行。插入行也可以在代码视图中复制一行的代码“ <tr>……</tr>”再粘贴几次就插入几行，插入列则在代码视图中不好进行。

制作固定宽度的表格

如果我们不定义表格中每个单元格的宽度，当向单元格中插入网页元素时，表格往往会变形，要制作固定宽度的表格，通常有两种方法：

① 定义所有列的宽度，但不定义整个表格的宽度，整个表格的实际宽度为：所有列的宽度和 +边框宽度和 + 间距和 +填充和，这时候，只要单元格内的内容不超过的单元格的宽度时，表格不会变形。

② 定义整个表格的宽，如 500 像素、 98% 等，再留一列的宽度不定义，未定义的这一列的宽度为整个表格的宽度 -已定义列的宽度和 -边框宽度和 - 间距和 -填充和，同样在插入内容时也不会变形。

用单元格制作水平线或占位表格

关键：去掉单元格 <td> 中的“ ” 空格 <table width="200" border="0" cellpadding="0" cellspacing

="0">

<tr>

<td height="1" bgcolor="#FF00FF"></td>



</tr>

</table>

制作占位表格：演示

用表格制作圆角栏目框网页中经常可以看到漂亮的圆角栏目框，在这里我们来

制作一个固定宽度的圆角栏目框

圆角栏目框制作步骤

1. 插入一个三行一列的表格，把表格的填充、间距和边框设为 0 ，宽设置成 190象素（圆角图片的宽），高不设置。

2. 分别设置表格内三个单元格的高。第一个单元格高设置为38象素（上圆角图片的高）；第二个单元格高为 148象素；第三个单元格高为 17象素（下圆角图片的高）。在第 1 、3 个单元格内分别插入上圆角和下圆角的图片。

3. 把第二个单元格的水平对齐方式设置为居中（ align="center" ），单元格的背景颜色设置为圆角图片边框的颜色（ bgcolor="#E78BB2" ）。

4. 这时在第二个单元格内再插入一个一行一列的表格，把该表格的间距和边框设为 0 ，填充设为 8象素（让栏目框中的内容和边框之间有一些间隔），宽设为 186象素，背景颜色设置为比边框浅的颜色（ bgcolor="#FAE4E6" ）。

说明：第四步也可以不插入表格，而是把第二个单元格拆分成 3 列，把三列对应的三个单元格的宽分别设置为2象素、 186象素和 2象素，并在代码视图把这三个单元格中的“ ”去掉，然后把 1 、 3 列的背景色设置为圆角边框的颜色，第 2 列的背景色设为圆角背景的颜色，并用 CSS属性设置它的填充为 8象素（ style="padding:8px" ）

第三章 html 标记功能详述 ( 第 1 部分 )

Documents