《HTML页面基本元素》由会员分享，可在线阅读，更多相关《HTML页面基本元素（85页珍藏版）》请在金锄头文库上搜索。
1、HTML、CSS、JavaScript网页制作网页制作Email: 学无止境学无止境乐在其中乐在其中1第第3 3章章 HTML页面基本元素页面基本元素 3.1 HTML文本字符、注释及标记分类文本字符、注释及标记分类3.2 文本与修饰文本与修饰3.3 列表标记列表标记3.4 插入图像标记插入图像标记3.5 超链接标记超链接标记3.6 图像映射标记图像映射标记 3.7 表格标记表格标记 3.8 表格与表格与DIV布局布局 23.1 HTML文本字符、注释及标记分类文本字符、注释及标记分类 在浏览器页面内显示的内容在浏览器页面内显示的内容(包括文本、图像、音频或视频等包括文本、图像、音频或视频等)
2、都必须放在都必须放在HTML文档的主体标记文档的主体标记内。一个内。一个HTML文档最多一个文档最多一个body且必须在且必须在head之后。之后。3.1.1 普通文本、实体字符与注释标记普通文本、实体字符与注释标记 1普通文本普通文本 在页面中显示不需要任何外观、布局修饰的普通文本可在在页面中显示不需要任何外观、布局修饰的普通文本可在标记中直接输入，文本的字体、字号、颜色使用标记中直接输入，文本的字体、字号、颜色使用标记的设置，如不设置则按浏览器的默认设置。标记的设置，如不设置则按浏览器的默认设置。2实体字符实体字符 实体字符就是文本中使用的特殊字符，例如实体字符就是文本中使用的特殊字符，例
3、如“”在在HTML中已经作为标记的定界符，当我们作为尖括号、小于或中已经作为标记的定界符，当我们作为尖括号、小于或大于号使用时必须使用这些字符的实体名称或实体编号，否则大于号使用时必须使用这些字符的实体名称或实体编号，否则被浏览器解析为标记符号，就会引起混乱出现错误。被浏览器解析为标记符号，就会引起混乱出现错误。 注意：注意：在在HTML文档的文本中不论使用多少空格或回车换行，文档的文本中不论使用多少空格或回车换行，在浏览器显示时不起作用，最多只显示一个空格，空格符必须在浏览器显示时不起作用，最多只显示一个空格，空格符必须使用使用 或或 ，换行用，换行用标记。标记。 3常用
4、字符实体表常用字符实体表特殊字符可以使用特殊字符可以使用实体名称实体名称、也可以使用、也可以使用实体编号实体编号代替。代替。字符字符 描述描述 实体名称实体名称 实体编号实体编号 空格空格 大于号大于号 > > & 和号和号 & & 人民币人民币 ¥ ¥ 版权版权 © © 注册商标注册商标 ® ® 度度 ° ° 加减号加减号 ± ± 乘号乘号 × × 除号除号 ÷ ÷ 平方平方2 ²
5、² 立方立方3 ³ ³ 开始开始程序程序附件附件系统工具系统工具字符映射字符映射可获取字符编号可获取字符编号43注释标记注释标记 如果需要在如果需要在HTML文档中添加一些便于阅读理解代码、但不文档中添加一些便于阅读理解代码、但不需要显示在浏览器页面中的注释文字，可将注释内容放在需要显示在浏览器页面中的注释文字，可将注释内容放在注释标记内。注释标记内。 或：或： 注释内容注释内容 注释内容作为注释内容作为HTML文档的内容也会被下载到客户机器上，文档的内容也会被下载到客户机器上，虽然浏览器页面不显示，但查看源代码时可以看到。虽然浏览器页面不显示，但查看源代码时可以
6、看到。 注意：注意：XHTML规范除了在注释标记的开头结尾使用规范除了在注释标记的开头结尾使用“-”字符外，不能在注释内容中间连续使用字符外，不能在注释内容中间连续使用“-”。 5【例【例h3-1.html】显示实体字符，注意文档与页面的换行】显示实体字符，注意文档与页面的换行 显示普通字符和实体字符显示普通字符和实体字符 不需要任何外观、布局修饰的文本可在不需要任何外观、布局修饰的文本可在<body>标记中标记中 直接输入。直接输入。 HTML文档中的空格、换行对浏览器页面的显示无效。文档中的空格、换行对浏览器页面的显示无效。 这里使用了这里使
7、用了 空格符和空格符和<br />换行标记。换行标记。 这也是注释内容这也是注释内容 63.1.2 HTML文档的标记与分类文档的标记与分类 在浏览器页面内显示的所有内容都必须作为标记的内容或属在浏览器页面内显示的所有内容都必须作为标记的内容或属性放在不同的标记内性放在不同的标记内由客户端浏览器解析执行这些标记。由客户端浏览器解析执行这些标记。 HTML标记按页面布局可分为块级标记、行内标记、列表标标记按页面布局可分为块级标记、行内标记、列表标记三大类，了解标记的分类可为学习记三大类，了解标记的分类可为学习CSS打下基础。打下基础。1块级标记（块级标记（displ
8、ay:block） 块级标记在页面中以区域块的形式出现，可设置块的高度、块级标记在页面中以区域块的形式出现，可设置块的高度、宽度和边框，在页面中独自占据一整行宽度和边框，在页面中独自占据一整行在开头结尾都会自动在开头结尾都会自动换行。如换行。如标题标记、标题标记、段落标记和段落标记和层标记。层标记。2行内标记（行内标记（display:inline） 行内标记也称为内联或内嵌标记行内标记也称为内联或内嵌标记与它前后的标记构成一行，与它前后的标记构成一行，是某个区域块中的一部分，不能独立设置高度、宽度和边框。是某个区域块中的一部分，不能独立设置高度、宽度和边框。如如超链接标记、超链接标记、图像标
9、记、图像标记、标记。标记。3列表项标记（列表项标记（display:list-item） 列表标记中的每个列表项都会独立分行显示，如列表标记中的每个列表项都会独立分行显示，如标记。标记。注意：注意：在在CSS中以上中以上3类标记都可通过类标记都可通过display属性的属性的none值转变值转变为另一类隐藏元素，在用户操作时通过为另一类隐藏元素，在用户操作时通过JavaScript代码显示。代码显示。73.2 文本与修饰文本与修饰3.2.1 设置文本标记设置文本标记 文本字体设置、修饰标记都是行内标记，文本字体设置、修饰标记都是行内标记，XHTML不赞成使不赞成使用单纯设置外观的标记用单纯设置
10、外观的标记用用标记配合标记配合CSS设置。设置。1换行标记换行标记 换行标记只是在文本中插入一个换行符，但它没有块级标记换行标记只是在文本中插入一个换行符，但它没有块级标记划分段落的功能，前后内容仍属于同一区域块划分段落的功能，前后内容仍属于同一区域块是行内标记。是行内标记。 注意：注意：传统传统HTML可以使用可以使用，XHTML必须写为必须写为2水平线标记水平线标记 size 指定线条粗细用像素为单位，默认指定线条粗细用像素为单位，默认2（边框（边框1）align 指定对齐方式，取值为指定对齐方式，取值为left、center（默认）、（默认）、rightwidth 指定宽度（线条长度），
11、可用像素数字，也可用相对当指定宽度（线条长度），可用像素数字，也可用相对当前浏览器宽度的百分比，默认前浏览器宽度的百分比，默认100%color 指定颜色，可用颜色名称、指定颜色，可用颜色名称、#RGB、rgb(r,g,b) 默认黑色默认黑色 尽管前后插入换行符单独一行尽管前后插入换行符单独一行仍是行内标记。仍是行内标记。 XHTML不赞成使用呈现属性不赞成使用呈现属性用用id, class, style配合配合CSS83 缩写标记缩写标记 缩写短语缩写短语 该标记用于定义短语缩写，如该标记用于定义短语缩写，如Inc.、etc.IE7以下不支持以下不支持 缩写名称缩写名称 该标记用于只取首字母
12、的缩写名称短语，如该标记用于只取首字母的缩写名称短语，如 CCTV，可为，可为拼写检查程序、翻译系统或搜索引擎提供有用的信息。拼写检查程序、翻译系统或搜索引擎提供有用的信息。 、标记可配合标记可配合title属性当鼠标移至缩略词语属性当鼠标移至缩略词语上时，即可显示完整内容。上时，即可显示完整内容。4等宽文本标记等宽文本标记、显示打字机风格的文本效果显示打字机风格的文本效果 显示键盘输入的文本效果显示键盘输入的文本效果 显示计算机代码的文本效果显示计算机代码的文本效果显示样本的文本效果显示样本的文本效果、标记一般都显示为固定宽度的标记一般都显示为固定宽度的字体。字体。 95上下标标记上下标标记
13、、上标：上标： 上标文本上标文本下标：下标： 下标文本下标文本【例【例h3-2.html】使用字体设置标记，当鼠标指向】使用字体设置标记，当鼠标指向etc.时显示时显示“多余的人多余的人”，当鼠标指向，当鼠标指向UN时显示时显示“United Nations联合国联合国” 设置文本设置文本 使用缩写：不需要使用缩写：不需要etc.。 使用缩写：这里是使用缩写：这里是UN 。 this is a book! ABCDEFG正常显示文本。正常显示文本。 this is a book! ABCDEFG tt打字机风格文字打字机风格文字 this is a book! ABCDEFG kbd键盘输入文
14、字效果键盘输入文字效果 this is a book! ABCDEFG code计算机代码效果计算机代码效果 this is a book! ABCDEFG samp样本文本效果样本文本效果 使用上标：使用上标：a2+b2=c2 使用下标：使用下标：xy上标上标+x1下标下标=z 106文本字体标记文本字体标记文本文本 XHTML不赞成使用不赞成使用可用可用或或配合配合CSS样式。样式。 113.2.2 文本修饰标记文本修饰标记加粗：加粗： 加粗文本加粗文本 推荐使用：推荐使用：斜体：斜体： 斜体文本斜体文本 推荐使用：推荐使用：删除线：删除线： 或或 推荐：推荐：引用：引用： 可引用外部文档
15、作标注可引用外部文档作标注斜体显示斜体显示项目：项目： 可定义项目可定义项目 斜体显示斜体显示插入文本：插入文本： 加底划线，配合加底划线，配合产生更改效果产生更改效果 使用使用cite属性可引用外部文档作标注，解释插入文本的原因属性可引用外部文档作标注，解释插入文本的原因 使用使用datetime属性可定义文本插入的日期属性可定义文本插入的日期YYYYMMDD 加引号：加引号： 在行内为文本自动加引号在行内为文本自动加引号IE不支持不支持大字体：大字体：加大字号文本加大字号文本 小字体：小字体：减小字号文本减小字号文本下划线：下划线： 容易混淆为超链接，容易混淆为超链接，xhtml不赞成使用
16、不赞成使用 注意：注意：以上标记均可使用以上标记均可使用标记配合标记配合CSS样式设置。样式设置。 12【例【例h3-3.html】传统文本修饰及】传统文本修饰及CSS设置字体与鼠标指向设置字体与鼠标指向时的提示标注时的提示标注 字体修饰字体修饰 .font font-family:楷体楷体_GB2312; font-weight:bold; font-size:18pt; color:blue; 正常显示文本正常显示文本 cite引用文本引用文本，dfn项目文本项目文本 传统传统b加粗文本加粗文本，推荐推荐strong加粗文本加粗文本 传统传统i斜体文本斜体文本，推荐推荐em斜体文本斜体文本
17、 传统传统big大字体大字体，传统传统small小字体小字体 传统传统u带下划线文本带下划线文本，容易与超链接混淆，容易与超链接混淆13【例【例h3-3.html】传统文本修饰及】传统文本修饰及CSS设置字体设置字体 传统传统s带删除线文本带删除线文本，传统传统strike带删除线文带删除线文本本， 推荐推荐del带删除线文本带删除线文本 ins标记插入文本标记插入文本，可配合，可配合del产生更改效果：产生更改效果： 跳楼大甩卖！原价跳楼大甩卖！原价180，现价，现价30！ 用用span标记标记CSS设置蓝色设置蓝色18磅楷体加粗磅楷体加粗文本文本 当代最可爱的人当代最可爱的人鼠标指向时鼠标
18、指向时显示提示内容显示提示内容 143.3.3 块级文本标记块级文本标记 单纯设置文本段落的块级标记目前已逐渐被单纯设置文本段落的块级标记目前已逐渐被标记取代。标记取代。1标题标记标题标记 标题标题 前后自动换行块级标记，前后自动换行块级标记，字号最大字号最大 XHTML不赞成使用不赞成使用align属性，可用属性，可用style=text-align:对齐方对齐方式式 属性或属性或CSS设置。设置。2段落标记段落标记 分段显示的文本分段显示的文本 标记是前后自动换行并保持一定间距（空行）的块级标记，标记是前后自动换行并保持一定间距（空行）的块级标记，用于定义一个文本段落。用于定义一个文本段落
19、。 XHTML不赞成使用所有设置字体、字号、颜色、背景、对不赞成使用所有设置字体、字号、颜色、背景、对齐方式的呈现属性，可使用齐方式的呈现属性，可使用style属性或属性或CSS设置。设置。 由于由于标记段落之间的距离非常大，而且无法通过样式表调标记段落之间的距离非常大，而且无法通过样式表调整，往往不能完全符合页面设计要求，已逐渐被整，往往不能完全符合页面设计要求，已逐渐被取代。取代。 注意：注意：传统传统HTML中可省略中可省略直到下一个直到下一个，XHTML规规范不能省略必须闭合。范不能省略必须闭合。 15【例【例h3-4.html】使用标题与段落标记】使用标题与段落标记 标题与段落标题与
20、段落 正常显示文本正常显示文本标题标题1：享受快乐：享受快乐这是普通的正文这是普通的正文 这是换行后的正文这是换行后的正文这是使用段落的第一段文本这是使用段落的第一段文本 这是使用段落的第二段文本这是使用段落的第二段文本 居中标题居中标题2：享受生活：享受生活 居中显示的段落文本居中显示的段落文本 右对齐标题右对齐标题3：享受学习生活的：享受学习生活的快乐快乐 右对齐显示的段落文本右对齐显示的段落文本 标题标题4：享受学习生活的快乐：享受学习生活的快乐 标题标题5：享受学：享受学习生活的快乐习生活的快乐 标题标题6：享受学习生活的快乐：享受学习生活的快乐正常显示文本正常显示文本 163缩进段落
21、标记缩进段落标记 段落缩进文本段落缩进文本与与标记类似可定义一个文本段落，但该标记内标记类似可定义一个文本段落，但该标记内的段落文本会在左、右两边都自动缩进的段落文本会在左、右两边都自动缩进5个字符，有的浏览器可个字符，有的浏览器可能会使用斜体字。能会使用斜体字。标记可以嵌套，嵌套时每一级标记可以嵌套，嵌套时每一级文本都会在左、右两边逐级缩进文本都会在左、右两边逐级缩进5个字符。个字符。注意：注意：标记内应包含块级标记而不是纯文本。标记内应包含块级标记而不是纯文本。4地址文本标记地址文本标记 地址或邮箱文本地址或邮箱文本 标记可以突出显示一个地址标记可以突出显示一个地址(比如电子邮件比如电子邮
22、件)、签名、签名或者文档作者，通常显示为斜体。大多数浏览器会在或者文档作者，通常显示为斜体。大多数浏览器会在前后添加换行符并作为块级标记。前后添加换行符并作为块级标记。17【例【例h3-5.html】缩进段落标记与地址文本标记】缩进段落标记与地址文本标记 段落缩进与地址文本段落缩进与地址文本 正常显示文本正常显示文本1级缩进文本级缩进文本 1级缩进文本级缩进文本 2级缩进文本级缩进文本 blockquote标记类可定义一个自动缩进的文本段落，标记类可定义一个自动缩进的文本段落，嵌套时每一级文本都会在左、右两边逐级缩进嵌套时每一级文本都会在左、右两边逐级缩进5个字符，有的浏个字符，有的浏览器可能
23、会使用斜体字。览器可能会使用斜体字。 1级缩进文本级缩进文本 请联系我们：请联系我们：商职学院计算机系商职学院计算机系 Email: 185预格式化标记预格式化标记 等宽字体并保持原状的文本等宽字体并保持原状的文本 标记可完全按标记可完全按HTML文档内书写的格式显示该标记内的文档内书写的格式显示该标记内的文本，标记内整块文本显示为等宽字体并保持原状，包括空格、文本，标记内整块文本显示为等宽字体并保持原状，包括空格、制表符制表符tab和换行符。和换行符。标记前后换行并保持一定间距。标记前后换行并保持一定间距。 6忽略忽略html标记的标记标记的标记 包括包括HTML标记都会保持原状的文本标记都
24、会保持原状的文本 与与标记作用类似可原样显示标记内文本，但该标标记作用类似可原样显示标记内文本，但该标记内的记内的HTML标记也会作为文本原样显示。标记也会作为文本原样显示。19【例【例h3-6.html】预格式化标记与忽略】预格式化标记与忽略HTML标记的标记标记的标记 预格式化与忽略预格式化与忽略HTML标记标记 登黄鹤楼登黄鹤楼 白日依山尽，白日依山尽， 黄河入海流。黄河入海流。 登黄鹤楼登黄鹤楼 欲穷千里目，欲穷千里目， 更上一层楼。更上一层楼。这是这是pre标记内的标记内的p段落文本段落文本 登黄鹤楼登黄鹤楼 欲穷千里目，欲穷千里目， 更上一层楼。更上一层楼。这是这是xmp标记内的标
25、记内的p段落文本段落文本 正常显示文本正常显示文本 207居中显示文本标记居中显示文本标记 居中显示的文本居中显示的文本 标记可对所包括的文本前后换行后居中显示，包括标记可对所包括的文本前后换行后居中显示，包括其中没有单独设置对齐方式的其他块级元素内容。其中没有单独设置对齐方式的其他块级元素内容。 XHTML不赞成使用该标记，可用不赞成使用该标记，可用 style属性或配合属性或配合CSS代替。代替。 213.2.4 样式组织标记样式组织标记 样式组织标记样式组织标记和和也称为布局元素，是也称为布局元素，是HTML4.0及及XHTML1.0后增加的一种中性伪标记，即没有特定功能也不后增加的一种
26、中性伪标记，即没有特定功能也不对页面添加任何东西，仅仅通过对页面添加任何东西，仅仅通过id, class, title, style, dir, lang等等标准属性结合标准属性结合CSS样式表、样式表、JavaScript脚本实现对页面内容的控脚本实现对页面内容的控制，为页面增添视觉效果和动态效果。制，为页面增添视觉效果和动态效果。1行内样式标记行内样式标记 行内显示文本行内显示文本 是一个行内标记，通过是一个行内标记，通过CSS样式表可为行内部分文本样式表可为行内部分文本设置视觉效果或配合设置视觉效果或配合JavaScript产生动态效果。产生动态效果。 目前大多数行内修饰标记例如综合设置
27、字体字号颜色标记目前大多数行内修饰标记例如综合设置字体字号颜色标记、加粗、加粗|、斜体、斜体|、大号、大号、小号、小号、下划线、下划线等都已被等都已被取代。取代。 注意：注意：是行级容器标记，标记内只能包含文字内容而是行级容器标记，标记内只能包含文字内容而不能包含图像或标题、段落等块级标记，可以被块级标记包含不能包含图像或标题、段落等块级标记，可以被块级标记包含22 2块级样式标记块级样式标记 文本、图像、多媒体等任意页面元素文本、图像、多媒体等任意页面元素 div是是division的简写，意为分割、区域或分组。的简写，意为分割、区域或分组。W3C 对对div的定义是：的定义是：div元素通
28、过与元素通过与 id、class 等属性配合，可提供向文等属性配合，可提供向文档添加额外结构的通用机制。档添加额外结构的通用机制。 标记也称为图层标记，标记中的内容自动在开始和结标记也称为图层标记，标记中的内容自动在开始和结束时插入换行但没有多余的间距，通过束时插入换行但没有多余的间距，通过CSS样式可分层格式样式可分层格式化整块文本，配合化整块文本，配合JavaScript产生动态效果。产生动态效果。 目前大多数块级文本标记如标题目前大多数块级文本标记如标题、段落、段落、居中、居中、缩进、缩进、列表、表格都可用、列表、表格都可用代替代替 注意：注意：标记是块级容器标记，可包含多个段落、行、标
29、记是块级容器标记，可包含多个段落、行、标题、图像，标题、图像，也可以嵌套多层也可以嵌套多层，但不能在段落标，但不能在段落标记记中使用中使用。 23【例【例h3-7.html】使用】使用、标记标记 用用设置区域块背景颜色显示本杰明设置区域块背景颜色显示本杰明弗兰克林的名言，弗兰克林的名言，并用并用设置红色、黑体显示重点单词设置红色、黑体显示重点单词(配合配合JavaScript还可还可在鼠标指向单词时变换字体或显示图像在鼠标指向单词时变换字体或显示图像)。 使用使用span标记标记 span color:red;font-family:黑体黑体; 正常显示文本正常显示文本 早睡早起使人早睡早起使
30、人健康健康、富裕富裕和和聪颖聪颖。 正常显示文本正常显示文本 243.3 列表标记列表标记 列表可提供容易阅读、结构化的索引信息，如提纲、目列表可提供容易阅读、结构化的索引信息，如提纲、目录、索引清单，可以帮助访问者方便地找到信息，并引起录、索引清单，可以帮助访问者方便地找到信息，并引起访问者对重要信息的注意。例如以下列表类型的介绍就是访问者对重要信息的注意。例如以下列表类型的介绍就是一个无序列表：一个无序列表：l 有序列表：有序列表： 列表项前有数组或字母变化的顺序缩列表项前有数组或字母变化的顺序缩进列表进列表l 无序列表：无序列表： 列表项前有特殊项目符号的缩进列表列表项前有特殊项目符号的
31、缩进列表l 定义列表：定义列表： 列表项前没有任何编号或符号的缩进列表项前没有任何编号或符号的缩进列表列表l 目录列表：目录列表： 类似无序列表类似无序列表l 菜单列表：菜单列表： 类似无序列表类似无序列表 列表标记都是块级标记。列表标记都是块级标记。 253.3.1 有序列表有序列表 列表项列表项1 列表项列表项2 列表项列表项3 标记定义有序列表，至少包含一个标记定义有序列表，至少包含一个列表项，每个列表项，每个列表项前自动添加列表项前自动添加指定的递增编号或字母，自动分行且每指定的递增编号或字母，自动分行且每行自动缩进。行自动缩进。及及标记都必须闭合。标记都必须闭合。 type编号类型编
32、号类型 显示内容显示内容 start默认值默认值 1 (默认默认) 数字数字 1、2、3 1 a 或或 A 英文字母英文字母a b c或或A B C a或或A i 或或 I 罗马数字罗马数字i ii iii 或或I II III i或或I XHTML不赞成不赞成使用使用type、start、value属性，应使用属性，应使用style 或设置或设置CSS样式。样式。 263.3.2 无序列表无序列表 列表项列表项1 列表项列表项2 标记定义无序列表，至少包含一个标记定义无序列表，至少包含一个列表项，每个列表项，每个列表项前自动添加列表项前自动添加指定的项目符号，自动分行且每行自动指定的项目符号
33、，自动分行且每行自动缩进。缩进。及及标记都必须闭合。标记都必须闭合。 type项目符号类型项目符号类型 显示内容显示内容 disc (第第1级默认级默认) circle (第第2级默认级默认) square (第第3级默认级默认) XHTML不赞成不赞成使用使用type属性，应使用属性，应使用style或或CSS样式。样式。 注意：注意：项目符号类型必须小写，例如项目符号类型必须小写，例如 Circle、Square无效。无效。 27【例【例h3-8.html】使用有序、无序列表】使用有序、无序列表 有序无序列表有序无序列表 苹果苹果香蕉香蕉茄子茄子 苹果苹果 香蕉香蕉 茄子茄子 美国民主党总
34、统：美国民主党总统： 富兰克林富兰克林.D.罗斯福罗斯福哈利哈利.S.杜鲁门杜鲁门 约翰约翰.F.肯尼迪肯尼迪林登林登.B.约翰逊约翰逊 吉米吉米.卡特卡特比尔比尔.克林顿克林顿贝拉克贝拉克奥巴马奥巴马 28【例【例h3-8.html】使用有序、无序列表】使用有序、无序列表 美国共和党总统：美国共和党总统： 德怀特德怀特.D.艾森豪威尔艾森豪威尔理查德理查德.尼克松尼克松 杰拉尔德杰拉尔德.福特福特罗纳德罗纳德.里根里根 乔治乔治.布什布什乔治乔治.W.布什布什 293.3.3 定义列表定义列表 名词名词1 名词名词1定义定义1 名词名词1定义定义2 名词名词2 名词名词2定义定义1 名词名词
35、2定义定义1 标记定义无编号、无符号的术语标记定义无编号、无符号的术语“定义列表定义列表”，是一种，是一种两个层次的列表，可提供术语名词和该名称解释的两级信息。两个层次的列表，可提供术语名词和该名称解释的两级信息。 标记指定术语名称不缩进，标记指定术语名称不缩进，可省略但必须有文本可省略但必须有文本 标记指定对术语的解释自动缩进，标记指定对术语的解释自动缩进，可省略。可省略。 一个一个术语定义可以有多个术语定义可以有多个内容解释、也可内嵌块级内容解释、也可内嵌块级元素。元素。 30【例【例h3-9.html】定义列表】定义列表 定义列表定义列表 星期日星期日 一周的第一天一周的第一天 HTML
36、 超文本标记语言超文本标记语言 描述页面内容描述页面内容 网页三剑客网页三剑客 Dreamweaver Flash Fireworks 313.3.4 目录、菜单列表目录、菜单列表、1、目录列表、目录列表 列表项列表项1 列表项列表项2 2、菜单列表、菜单列表 列表项列表项1 列表项列表项2 目录列表目录列表、菜单列表、菜单列表的功能与显示效果与无序的功能与显示效果与无序列表列表相同。相同。32【例【例h3-10.html】目录、菜单列表】目录、菜单列表 目录、菜单列表目录、菜单列表 联系人联系人联系地址联系地址邮政编码邮政编码 联系人：张明联系人：张明 联系地址：济南彩石联系地址：济南彩石
37、邮政编码：邮政编码：250100 333.3.5 列表嵌套应用列表嵌套应用【例【例h3-11.html】三种列表的嵌套示例】三种列表的嵌套示例自动按所在层次缩进自动按所在层次缩进 列表嵌套列表嵌套 水果类水果类 苹果苹果 香蕉香蕉 茄子茄子 蔬菜类蔬菜类 萝卜萝卜 白菜白菜 土豆土豆 体育三大球体育三大球 足球足球 篮球篮球 排球排球 音乐分类音乐分类 民族音乐民族音乐中国传统音乐中国传统音乐 流行音乐流行音乐中西结合音乐中西结合音乐 古典音乐古典音乐 昨天的昨天的今天的今天的 明天的明天的 34【例【例h3-12.html】使用列表发布】使用列表发布HTML教材部分目录教材部分目录 HTML
38、部分目录部分目录 目录目录 HTML页面基本元素页面基本元素 HTML文本字符、注释标记及标记分类文本字符、注释标记及标记分类 普通文本、实体字符与注释标记普通文本、实体字符与注释标记 HTML文档的标记与分类文档的标记与分类 文本与修饰标记文本与修饰标记 设置文本标记设置文本标记 文本修饰标记文本修饰标记 块级文本标记块级文本标记 标题标记标题标记 段落标记段落标记 预格式化标记预格式化标记 样式组织标记样式组织标记 span标记标记 div标记标记 35发布发布HTML教材部分目录教材部分目录 HTML框架、表单、多媒体框架、表单、多媒体 框架集、框架标记框架集、框架标记 框架集文档的结构
39、框架集文档的结构 框架集标记框架集标记 框架标记框架标记 浮动框架标记浮动框架标记 表单标记表单标记 创建表单标记创建表单标记 表单输入标记表单输入标记 文本区标记文本区标记 按钮标记按钮标记 363.4 插入图片标记插入图片标记 标签是标签是行内元素行内元素，可在当前行中插入一副图像，可在当前行中插入一副图像无论无论图像大小都是区域块中的一行，前后文本默认与图像底部对齐图像大小都是区域块中的一行，前后文本默认与图像底部对齐 注意：注意：传统传统HTML可写为可写为，XHTML必须必须闭合闭合1、必需属性、必需属性 src 指定图片路径及文件名（绝对或相对路径指定图片路径及文件名（绝对或相对路
40、径见超链接），见超链接），文件必须是文件必须是jpeg(jpg)、gif及及png格式。格式。 alt 指定图像不能显示时的替代文本，如果省略了指定图像不能显示时的替代文本，如果省略了title当鼠标当鼠标指向图片时也显示该文本作为提示指向图片时也显示该文本作为提示不超过不超过1024个字符。个字符。2、可选属性、可选属性 width 设置图片在页面中的显示宽度设置图片在页面中的显示宽度(像素或页面像素或页面%) height 设置图片的高度设置图片的高度(像素或页面像素或页面%) lowsrc 低分辨率图片低分辨率图片 longdesc 指向图像描述文档的指向图像描述文档的URL ismap
41、 与与标签配合指定图像为服务器端图像映射标签配合指定图像为服务器端图像映射 usemap 与与和和配合指定图像为客户端图像映射配合指定图像为客户端图像映射373、xhtml不赞成使用的属性不赞成使用的属性采用采用CSS样式样式 border：设置图片的边框宽度：设置图片的边框宽度(像素像素) vspace：设置图片上下两边空白区域的垂直外间距：设置图片上下两边空白区域的垂直外间距(像素像素) hspace：设置图片左右两边空白区域的水平外间距：设置图片左右两边空白区域的水平外间距(像素像素) align： 设置同一行中图片与文字的设置同一行中图片与文字的垂直对齐垂直对齐方式方式 align 属
42、性的取值：属性的取值： CSS样式对应属性样式对应属性 vertical-alignu left： 图像浮动在左侧图像浮动在左侧原左侧有文本会下移原左侧有文本会下移u right：图像浮动在右侧：图像浮动在右侧原右侧有文本会下移原右侧有文本会下移u top 或或 texttop ： 图片顶端与第一行文字上方对齐图片顶端与第一行文字上方对齐u middle 或或 absmiddle ：图片中间线与第一行文字对齐：图片中间线与第一行文字对齐u bottom 或或 absbottom ：图片底线与第一行文字对齐：图片底线与第一行文字对齐u baseline： 图片底线与第一行文字基线对齐图片底线与第
43、一行文字基线对齐 注意：注意：图像可美化页面，但图像太多会影响下载时间。图像可美化页面，但图像太多会影响下载时间。 如果设置图像在页面的左、中、右水平对齐，必须将如果设置图像在页面的左、中、右水平对齐，必须将标记放在标记放在或或父标记中，用父标记中，用CSS“text-align:对对齐方式齐方式”对父标记设置对齐方式。对父标记设置对齐方式。 38【例【例h3-13.html】用表格显示图片】用表格显示图片 显示图片显示图片 设置图片尺寸和边框设置图片尺寸和边框 原图原图379x400 设置设置450x550 设置设置300x300带边框带边框 鼠标指向鼠标指向title关闭浏览器图像关闭浏览
44、器图像刷新测试刷新测试：工具工具Internet选项选项高级高级多媒体多媒体取消取消显示图片显示图片鼠标指向鼠标指向alt鼠标指向鼠标指向alt39【例【例h3-14.html】图片间距与对齐】图片间距与对齐 图片间距与对齐图片间距与对齐 设置图片间距与对齐设置图片间距与对齐 图片水平间距图片水平间距10，与文本上对齐，与文本上对齐 图片水平间距图片水平间距20，与文本中对齐，与文本中对齐 图片水平间距图片水平间距30、垂直、垂直30带边框，与文本下对齐带边框，与文本下对齐 如果将如果将3幅图像的幅图像的height属性分别设置为占浏览器高度的属性分别设置为占浏览器高度的15%、25%、35%
45、则必须去掉则必须去掉标记，否则标记，否则XHTML不支持不支持height属性的百分比设置无效，如果必须使用属性的百分比设置无效，如果必须使用百分比必须用百分比必须用CSS设置。设置。 注意：注意：目前流行的网页制作中，装饰性的图像都不要放在页目前流行的网页制作中，装饰性的图像都不要放在页面中，而是在面中，而是在CSS中作为背景图像实现。中作为背景图像实现。 403.5 超链接标记超链接标记 一个网站往往有许多页面，使用超链接可以建立彼此的关一个网站往往有许多页面，使用超链接可以建立彼此的关系，单击超链接文本或图像就可以转向或打开另一个页面。系，单击超链接文本或图像就可以转向或打开另一个页面。
46、 超链接的含义是通过链接文本或图形抛锚超链接的含义是通过链接文本或图形抛锚anchor到另一个到另一个页面，或者抛锚到当前页面中的某一个锚点页面，或者抛锚到当前页面中的某一个锚点anchor。 413.5.1 超链接、设置锚点标记超链接、设置锚点标记 链接文本或图像链接文本或图像热点文字热点文字 标记是一个行内标记不会自动换行。使用标记是一个行内标记不会自动换行。使用href属性就是属性就是超链接标记，点击热点文字就可抛锚到超链接标记，点击热点文字就可抛锚到href指定的网页或锚点。指定的网页或锚点。省略省略href属性仅仅在文档中设置一个锚点。属性仅仅在文档中设置一个锚点。 href 属性指
47、定链接文档的属性指定链接文档的URL、锚点或用、锚点或用Email发送邮件发送邮件 target属性指定链接页面的显示窗口属性指定链接页面的显示窗口xhtml1.1已已禁用禁用 _blank新窗口、新窗口、_self当前窗口当前窗口(默认默认)、框架、框架_parent、_top rel/rev 定义当前文档与目标定义当前文档与目标URL之间的关系之间的关系 type 规定目标规定目标URL的的MIME类型：类型：MIME_type 链接热点文本如果没有设置链接热点文本如果没有设置CSS样式，默认以蓝色带下划线样式，默认以蓝色带下划线显示，点击后变为紫红色，对链接图像则默认带蓝色边框，点显示，
48、点击后变为紫红色，对链接图像则默认带蓝色边框，点击后为紫红色边框。可通过击后为紫红色边框。可通过CSS设置各种操作状态的外观样式。设置各种操作状态的外观样式。 423.5.2 超链接页面的超链接页面的URL路径路径 标记用标记用href指定链接页面的指定链接页面的URL路径时可以采用绝对、路径时可以采用绝对、相对或根路径相对或根路径 也适用图片的也适用图片的src路径。路径。1、绝对路径、绝对路径 绝对路径：文件的完整路径绝对路径：文件的完整路径主要用于其他网站的友情链接主要用于其他网站的友情链接 如：如：/index.html 默认首页文件名：默认首页文件名：index.html、defau
49、lt.html 、index.jsp2、相对路径、相对路径 相对路径：相对于当前文件的路径相对路径：相对于当前文件的路径用于同网站内其他页面用于同网站内其他页面 同一目录内：只写被链接的同一目录内：只写被链接的文件名文件名 如：如：abc.html 下一级目录：下一级目录：目录名目录名/文件名文件名 如：如：view/abc.html 上一级目录：上一级目录： ./目录名目录名/文件名文件名 如：如：./view/abc.html3、根路径、根路径 根路径是设置为网站的文件夹并以根路径是设置为网站的文件夹并以/表示，后面是文件所在表示，后面是文件所在路径及文件名路径及文件名用于同一网站不同文件
50、夹内的其他页面。用于同一网站不同文件夹内的其他页面。 如：如： /view/abc.html4#表示链接当前页面自己表示链接当前页面自己 43【例【例h3-15.html】主页文件】主页文件 被链接页面被链接页面h3-16.html与主页面保存在同一文件夹目录下、与主页面保存在同一文件夹目录下、h3-17.html及图像及图像p3-3.jpg保存在当前目录下一级文件夹保存在当前目录下一级文件夹img中中 超链接页面超链接页面 163网站网站 学习页面学习页面 44【例【例h3-16.html、img/h3-17.html】超链接子页面】超链接子页面【例【例h3-16.html】必须与主页面保存
51、在同一目录中。必须与主页面保存在同一目录中。 学习页面学习页面 学习学习HTML课程页面课程页面 被链接子页面，与主页面保存在同一目录中。被链接子页面，与主页面保存在同一目录中。 【例【例h3-17.html】必须保存在主页目录的下一级文件夹必须保存在主页目录的下一级文件夹img中中 图像页面图像页面 图像原图图像原图 被链接子页面，被链接子页面，连同图像连同图像p3-3.jpg保存在主页文件目录中的下一级文件夹保存在主页文件目录中的下一级文件夹img中。中。 45*3.5.3 关于关于target属性属性 target 指定打开链接页面的窗口指定打开链接页面的窗口 xhtml已已禁用禁用该属
52、性防止该属性防止有些网站恶意自动打开众多的广告页面。有些网站恶意自动打开众多的广告页面。 xhtml1.1虽然禁用，但可用虽然禁用，但可用javascript设置设置的的target属性、属性、或在单击事件中利用或在单击事件中利用window对象的对象的open方法方法打开新窗口显示打开新窗口显示 在需要打开新窗口的在需要打开新窗口的标记中增加标记中增加rel属性属性也可设置也可设置id或或class属性作为标识。属性作为标识。 文本或图片文本或图片 在页面文档或外部在页面文档或外部.js文件中添加以下文件中添加以下JavaScript代码：代码： window.onload=external
53、Links; /页面装载完毕调用函数页面装载完毕调用函数 function externalLinks() /设置打开新窗口函数设置打开新窗口函数 var anchors=document.getElementsByTagName(a); for (var i=0; ianchors.length; i+) var a=anchorsi; if ( a.getAttribute(rel)=external ) a.target=_blank; 463.5.4 链接到普通文档、图像或多媒体文件链接到普通文档、图像或多媒体文件 使用超链接标记使用超链接标记也可以链接到普通的文档、表格、图像也可以链
54、接到普通的文档、表格、图像或音频、视频等多媒体文件，当用户单击链接文本时浏览器会或音频、视频等多媒体文件，当用户单击链接文本时浏览器会提示用户提示用户“打开打开”或或“保存保存”该文件。该文件。 对音频或视频等多媒体文件，如果用户机器上安装了播放软对音频或视频等多媒体文件，如果用户机器上安装了播放软件则可选择件则可选择“打开打开”文件进行播放，如果没有安装播放软件一文件进行播放，如果没有安装播放软件一般浏览器会为用户提供下载软件并自动播放。如果不能播放可般浏览器会为用户提供下载软件并自动播放。如果不能播放可选择选择“保存保存”，浏览器会将该文件下载保存到用户计算机上供，浏览器会将该文件下载保存
55、到用户计算机上供以后播放。以后播放。 47【例【例h3-18.html】链接图像或多媒体文件】链接图像或多媒体文件使用了背景图片使用了背景图片 链接视频文件链接视频文件 单击超链接小图像可打开查看或保存原图：单击超链接小图像可打开查看或保存原图： 单击该动画可以链接播放或保存视频文件：单击该动画可以链接播放或保存视频文件： 483.5.5 设置锚点与设置锚点与Email链接链接 锚点链接是点击链接后跳转到同一文档或其他文档中的某一锚点链接是点击链接后跳转到同一文档或其他文档中的某一个指定位置个指定位置必须用不带必须用不带href的的标记在该位置设置锚点。标记在该位置设置锚点。 定义锚点不能使用
56、定义锚点不能使用href属性，传统属性，传统html使用使用name属性，而属性，而 XHTML统一使用统一使用id属性，锚点标识符必须惟一且不能数字开属性，锚点标识符必须惟一且不能数字开头，不同页面的锚点可以相同。头，不同页面的锚点可以相同。1、跳转链接到同一页面内的指定锚点：、跳转链接到同一页面内的指定锚点： 链接文本或图像链接文本或图像2、链接其他页面中的指定锚点、链接其他页面中的指定锚点 链接文本或图像链接文本或图像493、链接、链接Email地址发送电子邮件地址发送电子邮件 链接文本或图像链接文本或图像 如果用户机器已安装如果用户机器已安装Outlook邮件发送软件，点击该超链接邮件
57、发送软件，点击该超链接时即可自动启动邮件发送。时即可自动启动邮件发送。 Email地址地址“?”可以带有多个属性，但属性之间必须用可以带有多个属性，但属性之间必须用&隔隔开，例如：开，例如： 提交作提交作业业 应用技巧：应用技巧：为防止垃圾邮件制造者自动收集为防止垃圾邮件制造者自动收集Email地址，可地址，可用字符实体替换其中的一些字符，如字母用字符实体替换其中的一些字符，如字母f使用使用“f” 例如：例如：lf 可写为：可写为：lf 链接文本中的逗号可用链接文本中的逗号可用%2C代替、空格可用下划线代替、空格可用下划线_代替代替50【例【例h3-19.html】链接锚点
58、页面】链接锚点页面 超链接本页面超链接本页面A、top锚点锚点h3-20.htmlA、B锚点并发送邮件。锚点并发送邮件。 带锚点主页面带锚点主页面 HTML学习学习 第一章第一章 索引：索引：1-1 1-2 2-1 2-2 1-1第一节：标记第一节：标记 1-2第二节：属性第二节：属性 返回开始返回开始 联系我们联系我们 提交提交作业作业 51【例【例h3-20.html】被链接页面与主页面保存在同一目录】被链接页面与主页面保存在同一目录 带锚点子页面带锚点子页面 HTML学习学习 第二章第二章 2-1第一节：第一节： 2-2第二节：第二节： 返回返回 523.6 图像映射标记图像映射标记 一
59、幅图像可以整体作为超链接使用，如果需要将一幅图像分一幅图像可以整体作为超链接使用，如果需要将一幅图像分为几个部分分别链接不同的页面可以使用图像映射。为几个部分分别链接不同的页面可以使用图像映射。 例如医疗用人体图像，不同部位可链接不同医疗方案的页面，例如医疗用人体图像，不同部位可链接不同医疗方案的页面，再如用户单击中国地图中的不同城市，则可链接到该城市的详再如用户单击中国地图中的不同城市，则可链接到该城市的详细地图页面。细地图页面。 图像映射一般仅用于不规则比较复杂的图像，对有规则的图图像映射一般仅用于不规则比较复杂的图像，对有规则的图像可用图像处理软件将图像分割为若干块独立的小图像，每个像可
60、用图像处理软件将图像分割为若干块独立的小图像，每个图像块用一个超链接将它们单独链接到不同页面，然后再把小图像块用一个超链接将它们单独链接到不同页面，然后再把小图像按原顺序排列起来。图像按原顺序排列起来。 注意：注意：这些小图像的超链接标记虽然比较多但属于同一行，这些小图像的超链接标记虽然比较多但属于同一行，如果需要换行时必须在标记内部换行，标记之间不要换行或使如果需要换行时必须在标记内部换行，标记之间不要换行或使用空格，避免图像排列后有间隙。用空格，避免图像排列后有间隙。 533.6.1 图像映射方式图像映射方式 图像映射可以采用两种方式。图像映射可以采用两种方式。 1服务器端图像映射服务器端
61、图像映射 在在图像标记中用图像标记中用ismap=ismap属性指定由服务器处属性指定由服务器处理图像映射，配合理图像映射，配合提交给服务器处理程序，服务器根据用户提交给服务器处理程序，服务器根据用户点击的坐标链接到不同页面。目前这种方式已不采用。点击的坐标链接到不同页面。目前这种方式已不采用。2客户端图像映射客户端图像映射 用用映射标记、映射标记、区域标记划分出区域标记划分出图像的图像的各个超链接区域，直接在客户端页面中创建图像映射链接到不各个超链接区域，直接在客户端页面中创建图像映射链接到不同的页面，而不需要编写专门的服务器程序，目前大多采用这同的页面，而不需要编写专门的服务器程序，目前大
62、多采用这种方式。种方式。 543.6.2 创建图像映射标记创建图像映射标记 在文档中位置任意，也可单独保存在文档中位置任意，也可单独保存.html文件文件1、图像映射标记、图像映射标记 标记定义客户端图像映射标记定义客户端图像映射必须包含内嵌必须包含内嵌 name|id 指定唯一映射名称指定唯一映射名称针对不同浏览器可同时指定针对不同浏览器可同时指定 552、指定图像区域及链接页面标记、指定图像区域及链接页面标记 标记指定图片中一个可单击区域及对应的链接页面，标记指定图片中一个可单击区域及对应的链接页面，当用户单击这个区域时即可自动超链接到指定的页面。当用户单击这个区域时即可自动超链接到指定的
63、页面。 shape 指定区域形状：指定区域形状：rectangle矩形矩形, circle圆圆, polygon多边多边形形 coords 指定区域坐标指定区域坐标(像素像素)：图像左上角：图像左上角0,0忽略超出边界忽略超出边界u矩形：矩形：x1,y1,x2,y2 为矩形左上角为矩形左上角(x1,y1)右下角右下角(x2,y2)坐标坐标u圆形：圆形：x,y,r 为圆心坐标为圆心坐标(x,y)和半径和半径ru多边形：多边形：x1,y1,x2,y2,x3,y3,. 分别为按顺序的顶点坐分别为按顺序的顶点坐标，结尾不需要与开始重复标，结尾不需要与开始重复 nohref 指定图像映射排除的区域，取值
64、为：指定图像映射排除的区域，取值为： true|false 注意：注意：HTML可使用可使用title或或alt显示鼠标指向对应区域时的提示显示鼠标指向对应区域时的提示信息，对信息，对XHTML文档文档IE7及以下可使用及以下可使用title或或alt，IE8及火狐及火狐只能用只能用title显示鼠标指向的提示信息。显示鼠标指向的提示信息。 如果如果指定区域重叠，则先定义的优先，可用指定区域重叠，则先定义的优先，可用href= 定义定义“死区域死区域”，覆盖暂时不需要超链接的区域。，覆盖暂时不需要超链接的区域。 563.6.3 使用图像映射的使用图像映射的图片图片 定义图像映射后即可在需要的位
65、置用定义图像映射后即可在需要的位置用插入图像映射的插入图像映射的图片图片但必须使用但必须使用usemap属性关联属性关联的图像映射：的图像映射： 如果将图像映射单独存放在如果将图像映射单独存放在xxx.html文件中则可使用：文件中则可使用： 注意：注意：XHTML1.0需要在映射名前加需要在映射名前加#，XHTML1.1不需不需要加要加#，而目前有的浏览器尚不支持不加，而目前有的浏览器尚不支持不加#，因此使用图像，因此使用图像映射时应使用映射时应使用XHTML1.0标准。标准。 57【例【例h3-21.html 】图像映射】图像映射 使用图像映射制作一个介绍项目工作流程的页面，项目工作使用图
66、像映射制作一个介绍项目工作流程的页面，项目工作流程图像流程图像p3-9.jpg设置了设置了6个热点映射区域，分别对应个热点映射区域，分别对应h3-21文件文件夹子目录夹子目录中的中的h3-21-1.html h3-21-6.html共共6个页面文档，通过个页面文档，通过超链接对应的页面可以了解每个阶段的工作任务。超链接对应的页面可以了解每个阶段的工作任务。 图像映射区域图像映射区域58h3-21.html 主文档主文档 项目工作流程项目工作流程 项目工作流程项目工作流程 下面是授课过程中软件开发的工作流程，在图片上移动鼠标可了解每下面是授课过程中软件开发的工作流程，在图片上移动鼠标可了解每个过
67、程的大致需要完成的任务。个过程的大致需要完成的任务。 593.7 表格标记表格标记3.7.1 表格语法结构表格语法结构 表格标记在传统网页制作的布局方面举足轻重，几乎所有布表格标记在传统网页制作的布局方面举足轻重，几乎所有布局都采用表格，而且多重表格层层嵌套，代码非常混乱，不易局都采用表格，而且多重表格层层嵌套，代码非常混乱，不易阅读也不易维护修改。在目前基于阅读也不易维护修改。在目前基于Web2.0标准的网页制作中，标准的网页制作中，布局都采用了布局都采用了CSS，表格也恢复了它原有的功能，仅仅用于显，表格也恢复了它原有的功能，仅仅用于显示数据而已。示数据而已。 如果在页面中显示一个如下表格
68、：如果在页面中显示一个如下表格：60表格示例对应的简化代码表格示例对应的简化代码 表格标记，块级元素表格标记，块级元素 表格标题表格标题 表格前大标题表格前大标题 行标记，每行必须独立使用行标记，每行必须独立使用 行列标题行列标题 第第1列数据标题列数据标题 表内行列小标题标记表内行列小标题标记 等价等价align=center属性属性 第第1行数据行标题行数据行标题 数据数据1.1 列标记，每列必须独立使用列标记，每列必须独立使用 数据数据1.2 数据数据1.3 第第2行数据行标题行数据行标题 数据数据2.1 613.7.2 创建表格标记创建表格标记 表格内容表格内容行标记、列标记行标记、列
69、标记 标记是块级元素，标记内可以放置表格大标题、行、标记是块级元素，标记内可以放置表格大标题、行、行列标题和列标记等表格内容构成一个完整的数据表格，也可行列标题和列标记等表格内容构成一个完整的数据表格，也可以在每个单元格中放置任意的文本块、图像或其他表格，起到以在每个单元格中放置任意的文本块、图像或其他表格，起到排版定位的效果，但表格嵌套不宜超过三层否则会影响页面打排版定位的效果，但表格嵌套不宜超过三层否则会影响页面打开的速度。开的速度。 621、可选属性、可选属性2XHTML不赞成使用的属性不赞成使用的属性 width/height 指定表格的总宽度指定表格的总宽度/总高度总高度 borde
70、r 指定边框宽度，省略或指定边框宽度，省略或border=0则无边框则无边框 bordercolor 指定边框颜色指定边框颜色 bordercolorlight亮边框颜色、亮边框颜色、bordercolordark暗边框颜色暗边框颜色 frame 指定表格外围哪一侧边框可见指定表格外围哪一侧边框可见与与border配合使用配合使用 border|box四周四周(默认默认)、 void全无、全无、above上、上、below下下 hsides上下、上下、lhs左、左、rhs右、右、vsides左右左右 rules 指定表格内部分界线边框，必须与指定表格内部分界线边框，必须与border配合使用配
71、合使用 all全部全部(默认默认)、none|groups全无、全无、rows行框、行框、cols列框列框 cellspacing 指定单元格与单元格指定单元格与单元格边框之间边框之间的空白间距的空白间距 cellpadding 指定单元格指定单元格内容与边框内容与边框的空白间距的空白间距 CSS有等价属性，考虑浏览器支持仍建议使用有等价属性，考虑浏览器支持仍建议使用 bgcolor 指定背景颜色指定背景颜色 background 指定背景图片指定背景图片 align 指定表格在浏览器中的水平对齐方式指定表格在浏览器中的水平对齐方式注意：注意：不接受或者说不继承外部父标记设置的样式属不接受或者
72、说不继承外部父标记设置的样式属性，必须独立设置。性，必须独立设置。 633.7.3 标题标记标题标记3.7.4 行标记行标记 表格标题表格标题 定义表格前的大标题，必须在定义表格前的大标题，必须在内第一个内第一个行标记之前且只能有一个，默认在表格之前居中显示。行标记之前且只能有一个，默认在表格之前居中显示。 一行内容一行内容 标记定义表格中的一行，可继承使用标记定义表格中的一行，可继承使用设置的属性，设置的属性，也可自己单独设置覆盖也可自己单独设置覆盖属性。属性。align 指定本行内所有单元格文本的水平对齐方式指定本行内所有单元格文本的水平对齐方式 left(默认默认)、right、cent
73、er、justify两端、两端、char按字符对齐按字符对齐valign 指定本行所有单元格中文本的垂直对齐方式指定本行所有单元格中文本的垂直对齐方式 top、middle(默认默认)、bottom、baseline按基线对齐按基线对齐bgcolor 指定本行的背景颜色指定本行的背景颜色char=字符字符 当当align=char时指定对齐的字符时指定对齐的字符charoff 当当align=char时指定第一个对齐字符的偏移量时指定第一个对齐字符的偏移量注意：注意：属性对本行内的所有单元格有效，属性对本行内的所有单元格有效，XHTML不赞成不赞成使用使用align、bgcolor属性。属性。
74、 643.7.5 单元格标记单元格标记 1、列标记列标记 单元格内容单元格内容 标记定义行的数据单元格，继承标记定义行的数据单元格，继承属性属性可覆盖。可覆盖。 colspan 指定该单元格可横跨的列数指定该单元格可横跨的列数 rowspan指定该单元格可竖跨的行数指定该单元格可竖跨的行数 align 水平对齐水平对齐(char=字符字符、charoff)覆盖父属性覆盖父属性 valign 垂直对齐垂直对齐 abbr 指定单元格中内容的缩写版本指定单元格中内容的缩写版本 axis 为单元格定义一个为单元格定义一个(类型类型)名字名字category_names headers=header_c
75、ells_id空格分隔的表头单元格空格分隔的表头单元格ID列表列表 用于将表头和单元格联系起来用于将表头和单元格联系起来 scope 规定此单元格是否为可以将单元格与表头联系规定此单元格是否为可以将单元格与表头联系 xhtml不赞成不赞成bgcolor、height、width及及nowrap(环绕环绕)属性属性 如果某个单元格内没有文本数据内容，通常该单元格也不如果某个单元格内没有文本数据内容，通常该单元格也不会显示，为保证表格视觉上的完整性，最好使用空格实体字会显示，为保证表格视觉上的完整性，最好使用空格实体字符：符： 。652行列标题标记行列标题标记 行或列标题行或列标题 标记
76、一般用于第一行定义每列的列标题，或用于每行标记一般用于第一行定义每列的列标题，或用于每行的第一列定义该行的行标题。的第一列定义该行的行标题。 标记与标记与标记的属性、用法完全相同，区别是标记的属性、用法完全相同，区别是标记默认普通文本左对齐显示，而标记默认普通文本左对齐显示，而标记默认以粗体居中标记默认以粗体居中显示。显示。66【例【例h3-22.html】使用行、列标题】使用行、列标题 使用行、列标题使用行、列标题 使用行、列标题使用行、列标题 网页设计网页设计 数据库开发数据库开发 程序设计程序设计 清华出版社清华出版社 Dreamweaver Access C+ 北大出版社北
77、大出版社 FrontPage SQL SERVER C# 中内联中内联CSS属性属性style=text-align:center对表格内所有对表格内所有单元格都有效，但对表格本身无效，可使用单元格都有效，但对表格本身无效，可使用CSS布局设置。这布局设置。这里用传统里用传统align=center设置表格在浏览器中的对齐方式。设置表格在浏览器中的对齐方式。 去掉去掉width=500则采用默认宽度。则采用默认宽度。 67【例【例h3-23.html】表格边框及背景】表格边框及背景 设置表格设置表格边框与边框与背景背景 Dreamweaver Access C+ FrontPage SQL S
78、ERVER C# 改为：改为：rules=cols68【例【例h3-24.html】单元格间距及内容边距】单元格间距及内容边距 设置设置单元格间距与边距单元格间距与边距 Dreamweaver Access C+ FrontPage SQL SERVER C# Dreamweaver Access C+ FrontPage SQL SERVER C# cellpaddingcellspacing69【例【例h3-25.html】合并单元格】合并单元格跨行、跨列跨行、跨列 合并单元格合并单元格 第一学期第一学期 第二学期第二学期 数学数学 科学科学 英语英语 数学数学 科学科学 英语英语 98
79、95 80 95 87 88 螺母螺母 螺栓螺栓 锤子锤子 第一季度第一季度 一月一月 2500 1000 1240 二月二月 3000 2500 4000 三月三月 3200 1000 2400 703.7.6 表格结构划分标记表格结构划分标记、 可对表格结构进行划分，对内容较可对表格结构进行划分，对内容较多的表格实现表格头和页脚的固定，只对表格正文滚动、或多的表格实现表格头和页脚的固定，只对表格正文滚动、或在分页打印时能将表表头和页脚分别打印在每张页面上。在分页打印时能将表表头和页脚分别打印在每张页面上。 定义表格头，必须包含定义表格头，必须包含标签，一般包含表格大标签，一般
80、包含表格大标题和第一行列标题。标题和第一行列标题。 定义表格页脚可不包含定义表格页脚可不包含，一般是合计行或脚注，一般是合计行或脚注 定义一段表格主体定义一段表格主体只包含只包含标签，可将多行数标签，可将多行数据划分为一组。据划分为一组。 、标记还很少被浏览器支持，目标记还很少被浏览器支持，目前仅前仅IE5.0或更高版本可用。或更高版本可用。 注意：注意：u表格结构划分标记必须在表格结构划分标记必须在内使用，一个表格只能有内使用，一个表格只能有一个一个、一个、一个、可以有多个、可以有多个。u三种标记不能相互交叉，且必须按三种标记不能相互交叉，且必须按、顺序全部使用三种标记。之所以顺序全部使用三
81、种标记。之所以在在之之前是为了浏览器能在收到全部数据之前即可显示页脚。前是为了浏览器能在收到全部数据之前即可显示页脚。 71【例【例h3-26.html】使用结构划分】使用结构划分 设置表格结构设置表格结构 表格结构划分表格结构划分 网页设计网页设计 数据库开发数据库开发 程序设计程序设计 页脚合计：页脚合计： 合计合计1 合计合计2 合计合计3 72【例【例h3-26.html】使用结构划分】使用结构划分 清华出版社清华出版社 DreamweaverAccessC+ 北大出版社北大出版社 FrontPage SQL SERVE
82、R C# 733.8 表格与表格与DIV页面布局页面布局3.8.1 布局示例一布局示例一 传统网页布局大都采用表格进行布局，假设某网站采用如下传统网页布局大都采用表格进行布局，假设某网站采用如下布局结构。布局结构。 1表格布局一表格布局一 采用采用3行行3列表格布局，第列表格布局，第1行合并单元格显示站标、导航区，行合并单元格显示站标、导航区，第第2行的行的3列分别显示网站导航区、正文发布区、新闻链接区，列分别显示网站导航区、正文发布区、新闻链接区，第第3行合并单元格显示版权、脚注区。行合并单元格显示版权、脚注区。 742表格布局二表格布局二
83、 最外层用最外层用3行行1列表格，第列表格，第2行嵌套一个行嵌套一个1行行3列表格：列表格： 3行行1列表格列表格 站标、导航区站标、导航区 若包含不同区域块还需内嵌表格若包含不同区域块还需内嵌表格 1行行3列内嵌表格列内嵌表格 网站导航区网站导航区 包含不同区域块还需内嵌表格包含不同区域块还需内嵌表格 正文发布区正文发布区 新闻链接区新闻链接区 版权、脚注区版权、脚注区 若包含不同区域块还需内嵌表格若包含不同区域块还需内嵌表格 使用表格布局时使用表格布局时如果某个区域又由不同区域块组成，还必如果某个区域又由不同区域块组成，还必须再内嵌一层表格，表格嵌套太多会影响页面加载速度。而须再内嵌一层表
84、格，表格嵌套太多会影响页面加载速度。而如果行列的尺寸不同、显示的外观不同还必须使用大量属性如果行列的尺寸不同、显示的外观不同还必须使用大量属性进行设置，如果布局结构不规则，表格嵌套会很繁琐，也会进行设置，如果布局结构不规则，表格嵌套会很繁琐，也会使页面代码臃肿。虽然可以使用可视化工具自动生成代码，使页面代码臃肿。虽然可以使用可视化工具自动生成代码，但对日后的维护会带来很大的麻烦。但对日后的维护会带来很大的麻烦。 753DIV布局布局 现代流行的现代流行的Web2.0标准用标准用块标记表示任意的区域块，块标记表示任意的区域块，一个区域块用一个一个区域块用一个标记，可以任意层次的嵌套，只需配标记，
85、可以任意层次的嵌套，只需配合合CSS样式即可轻松实现任意结构的网页布局。样式即可轻松实现任意结构的网页布局。站标、导航区，不同区域块只需内嵌站标、导航区，不同区域块只需内嵌div 标记标记 网站导航区，不同区域块只需内嵌网站导航区，不同区域块只需内嵌div 标记标记 正文发布区，不同区域块只需内嵌正文发布区，不同区域块只需内嵌div 标记标记 新闻链接区，不同区域块只需内嵌新闻链接区，不同区域块只需内嵌div 标记标记版权、脚注区，不同区域块只需内嵌版权、脚注区，不同区域块只需内嵌div 标记标记 如果这三个区域块具有某些相同的如果这三个区域块具有某些相同的CSS外观样式，如字体、外观样式，如
86、字体、字号、颜色、背景、对齐等，则可以在最外层再增加一个字号、颜色、背景、对齐等，则可以在最外层再增加一个标记以设置这三个区域的共同样式。标记以设置这三个区域的共同样式。 763.8.2 布局示例二布局示例二 设计某个足球运动员的个人页面设计某个足球运动员的个人页面 771表格布局表格布局 采用表格布局的外层可使用采用表格布局的外层可使用4行行3列表格，第列表格，第1行合并单元格行合并单元格显示运动员姓名，第显示运动员姓名，第2行的行的3列单元格分别放置照片、基本资列单元格分别放置照片、基本资料、业余爱好和特长，第料、业余爱好和特长，第3行合并单元格内嵌一个表格显示该行合并单元格内嵌一个表格显
87、示该运动员的比赛数据，第运动员的比赛数据，第4行合并单元格用行合并单元格用Email链接。链接。 78表格布局代码结构表格布局代码结构 运动员姓名运动员姓名 照片照片 基本资料基本资料 业余爱好、特长业余爱好、特长 比赛数据表格比赛数据表格 与我联系与我联系 792DIV布局布局运动员姓名运动员姓名 照片照片 基本资料基本资料 业余爱好、特长业余爱好、特长 比赛数据表格比赛数据表格 与我联系与我联系 803.8.3 简单布局应用简单布局应用 设计页面如图设计页面如图 本例布局使用了三层表格嵌套，最外层为本例布局使用了三层表格嵌套，最外层为2行行3列，内层列，内层2行行1列表格中再嵌套一个列表格
88、中再嵌套一个3行行1列表格。列表格。 也可采用也可采用3行行3列表格布局。列表格布局。81【例【例h3-27.html】表格布局】表格布局 表格表格页面布局页面布局 网站导航网站导航 导航列表导航列表1 导航列表导航列表2 导航列表导航列表3 82【例【例h3-27.html】表格布局】表格布局 表格语法结构表格语法结构 在在table内可以放置任意文本块、图像内可以放置任意文本块、图像或嵌套表格，实现页面布局。或嵌套表格，实现页面布局。 目前表格布目前表格布局已经全部被局已经全部被<div>+CSS代替。代替。 新闻链接
89、新闻链接 联系我们联系我们:Email 83【例【例h3-28.html】DIV布局布局 采用采用配合配合CSS可实现任意外观及布局，本例使用可实现任意外观及布局，本例使用4个个div标记布局，并使用不带项目编号的标记布局，并使用不带项目编号的无序列表代替内嵌表格无序列表代替内嵌表格 DIV页面布局页面布局 网站导航网站导航 导航列表导航列表1导航列表导航列表2导航列表导航列表3 表格语法结构表格语法结构 在在table内可以放置任意文本块、图像或嵌套内可以放置任意文本块、图像或嵌套表格，实现页面布局。表格，实现页面布局。 目前表格布局已经目前表格
90、布局已经全部被全部被<div>+CSS代替。代替。 84【例【例h3-28.html】DIV布局布局 新闻链接新闻链接 联系我们联系我们:Email 在同一目录下创建在同一目录下创建CSS文件文件c3-28.css如下：如下：#left, #center, #right width:140px; height:165px; float:left; margin-top:8px; #center width:260px; #bottom font-size:10pt;font-weight:bold; color:blue; clear:left; ul list-style-type:none; margin:10px; padding:0px; img width:100px; height:100px; h3 color:red; #middle color:#000; text-align:center; 85
