web应用程序客户端界面设计第2章.ppt

第二章 XHTML基础回顾rHTML标签区分大小写吗？rHTML的基本结构并说明各部分的含义。r网络经过那几个阶段。rhttp协议包含几个部分，分别是什么。预习检查r分隔线标签是那个。r图片标签是什么。有什么属性。r创建一个表格必须需要哪些标签？目标理解理解XHTML标记标记掌握掌握XHTML基本语法基本语法掌握掌握XHTML基本结构基本结构 掌握文档级、块级、字符集的掌握文档级、块级、字符集的XHTML标记标记掌握超链接、超媒体的掌握超链接、超媒体的XHTML标记标记掌握数据表格和内部框架的掌握数据表格和内部框架的XHTML标记标记XHTML语法基础r扩展名.htm或.htmlr元素r开始标记r结束标记r元素内容r空标记r属性r元素和属性的名字必须小写本文本是一个示例段落定义HTML文档总体结构 标题部分 .文档正文部分.所有的XHTML文档都有三个文档级的元素：html、head和bodyXHTML元素r注释r文档正文标题r段落r引用文本r列表r预编排文本r分区块r跨字符r实体r超级链接r图形r多媒体信息r表格r插入其他网页注释r注释不会出现在浏览器中r标识了注释的结束。r注释内容中间不能出现-。定义正文标题 r六个级别的正文标题，标题重要性随标签的数字递减r标题以较大的粗体显示Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6定义一个段落 r段落元素p用于将文本界定为整个段落段落示例段落示例1段落示例段落示例2段落示例段落示例3定义引用文本 rblockquote元素用于界定一个引用文本块rblockquote将段落缩进，使其与周围的文字偏离 独立宣言的一段：独立宣言的一段：HTML文档是由文档是由HTML元素构成的文本文件。元素构成的文本文件。HTML元素是通过使元素是通过使用用HTML标签进行定义的。标签进行定义的。HTML标签标签 HTML标签是用来标记标签是用来标记HTML元素的。元素的。HTML标签被和符号包围。标签被和符号包围。这些包围的符号叫这些包围的符号叫作。作。HTML标签是成对出现的。例如标签是成对出现的。例如b和和/b。位于起始标签和终位于起始标签和终止标签之止标签之 定义列表 r三种不同类型的列表r有序列表：用元素ol定义r无序列表：用元素ul定义r定义列表：用元素dl定义r用于表示多行单列或者单行多列的数据：无序列表示例无序列表示例 编写编写XHTML文件文件 编写编写XML文件文件 编写编写JSP文件文件有序列表示例有序列表示例 编写编写XHTML文件文件 编写编写XML文件文件 编写编写JSP文件文件定义列表示例定义列表示例 猫猫 一个奴役自己的动物一个奴役自己的动物 手电筒手电筒 使用电池的设备使用电池的设备 白痴白痴 不知道如何做事，却假装很重要的人不知道如何做事，却假装很重要的人有序列表序号类型rType=“1”数字序列rType=“a”字母序列rType=“i”罗马数字序列定义预编排文本 r预编排元素pre可以使文本完全按照源文件中的编排格式，一模一样地在浏览器中显示。2.9 +1.2 -4.1定义分区块文本 rdiv通常和CSS一起用于页面布局 .bordered border-style:solid;这是一个常规段落这是一个常规段落 这是一个用这是一个用div样式界定的段落样式界定的段落 跨越多个字符 r跨字符元素span用于将内嵌样式跨越多个字符或词rspan是内嵌元素 .emphasis color:red;text-decoration:underline;font-weight:bold;这段文本被重要强调这段文本被重要强调，而这段文本没有。，而这段文本没有。特殊字符（实体）常见的实体符号实体含义 空格<左尖括号或大于号©版权符号®已注册符号&and符号—长破折号这是一个这是一个XHTML标记标记<XHTML>版权符号的实体代码为版权符号的实体代码为&©Microsoft®Office Word 2003版权所有版权所有©1983-2003 Microsoft Corporation.保留所有权力保留所有权力创建超链接 描述文本描述文本Microsoft公司网站公司网站绝对链接和相对链接 创建锚点 第一章第一章转到第一章转到第一章链接标题、快捷键与Tab次序 更多的信息可以在更多的信息可以在这里这里找到找到Table of Contents这是这是第一个链接第一个链接这是这是第二个链接第二个链接在网页中显示图形 使用object插入flash 使用object插入多媒体信息 为什么使用表格r表格应用场合r论坛r门户网站r购物网站论坛中应用论坛中应用表格表格门户网站应门户网站应用表格用表格购物网站购物网站应用表格应用表格表格的基本结构行行列列单元格单元格在在 HTML 文档中，广泛使用文档中，广泛使用表格表格来存放网页上的文本和图像来存放网页上的文本和图像表格的基本语法 单元格内容单元格内容 .定义表格定义表格 定义列定义列 定义行定义行 border用来设置表用来设置表格边框尺寸大小格边框尺寸大小如何创建表格 移动移动 联通联通 铁通铁通 IBM 惠普惠普 华硕华硕 什么是跨行跨列的表格跨跨3列列跨跨3行行下图中的表格哪里用了跨行？哪里用了跨列？下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列跨了几行几列?跨多列的表格 学生成绩表学生成绩表 英语英语 数学数学 语文语文 95 98 89 COLSPAN=“n”属性表示跨多少列？属性表示跨多少列？跨多行的表格 早上菜谱早上菜谱 食物食物 鸡蛋鸡蛋 饮料饮料 牛奶牛奶 甜点甜点 开心粉开心粉 rowspan=“n”属性表示跨多少行？属性表示跨多少行？手机充值、手机充值、IP卡卡 办公设备、文具办公设备、文具 各种卡的总汇各种卡的总汇 铅笔铅笔 彩笔彩笔 打印打印 刻录刻录 如何创建跨行跨列的表格小结1编写如下图所示效果对应的html代码第一行第一个第一行第一个格子跨了格子跨了2行行此格子此格子跨了跨了3列列什么是表格的美化修饰背景图片背景图片背景色背景色表格的高度表格的高度表格的宽度表格的宽度文字对文字对齐方式齐方式根据理解根据理解,下面表格应该从哪些方面进行美化修饰？下面表格应该从哪些方面进行美化修饰？如何设置表格的尺寸和边框 品牌商城品牌商城 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 width用来设置表格的宽度用来设置表格的宽度height用来设置表格的高度用来设置表格的高度border用来设置表用来设置表格边框尺寸大小格边框尺寸大小bordercolor用来设用来设置表格边框颜色置表格边框颜色如何设置背景 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 background属性用来设置表格的背景图片属性用来设置表格的背景图片bgcolor属性用来设置表格、行、列属性用来设置表格、行、列的背景色。的背景色。“#EBEFFF”是用是用RGB表表示的一种颜色值，示的一种颜色值，RGB指的是红绿指的是红绿蓝蓝，下图就是，下图就是RGB颜色对照表颜色对照表。如何设置对其方式 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 align属性用来设置表属性用来设置表格、行、列的对齐方式格、行、列的对齐方式为什么要使用填充属性单元格里的内容太靠近边线，怎么办？未填充的效果，字与单元格边未填充的效果，字与单元格边框之间的距离靠得太近框之间的距离靠得太近什么是填充属性和间距属性border(边框的厚度边框的厚度)内容内容内容内容内容内容内容内容cellpadding(单元格填充单元格填充)cellspacing(单元格间距单元格间距)如何使用填充、间距属性border(边框的厚度边框的厚度)cellpadding(单元格填充单元格填充)cellspacing(单元格间距单元格间距)如何设置表格的填充属性 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 .cellspacing属性用来设属性用来设置表格置表格内框宽度内框宽度 cellpadding属性用来属性用来设置表格内填充距离设置表格内填充距离填充之后填充之后的效果的效果小结2表格的高度、宽表格的高度、宽度、背景图像、度、背景图像、边框和填充属性边框和填充属性行的背景色行的背景色单元格居单元格居中对齐中对齐编写如下图所示效果对应的HTML代码r如何实现图文内容的布局，达到如左图所示页面的效果？r分析上图所示页面，应该用什么进行布局？什么是表格布局使用使用表格表格进行布局进行布局用表格对网页的内用表格对网页的内容进行整体控制容进行整体控制如何使用表格进行布局使用表格布局下图，需要几行几列？使用表格布局下图，需要几行几列？需要需要7行行2列列 如何使用表格进行布局 超值变形金钢超值变形金钢2.5折折!人们为啥对电视吼叫人们为啥对电视吼叫 编写如下图所示效果对应的html代码小结3跨跨2行行，并放了，并放了一副图片一副图片此单元格放此单元格放了一副图片了一副图片此单元格此单元格跨了跨了3列列用iframe实现框架结构用超链接在iframe中打开网页块级元素与内嵌元素rXHTML元素分为块级元素和内嵌元素两种类型，二者的不同之处在于块级元素定义的文本是换行的，而内嵌元素定义的文本是不换行的。r常见的块级元素包括：div、blockquote、列表元素（dl、ol、ul）、fieldset、form、h1-h6、hr、p、pre、table等。r内嵌元素包括：span、a、img、label、所有的表单输入元素、iframe、object等。r在没有后面我们要学到的CSS指定元素的位置、高度、宽度情况下，浏览器按照默认的文本流的输出规则，在浏览器窗口中输入HTML元素，即：r如果是内嵌元素，下一个元素就显示在该元素同一行上的后续位置。r如果是块级元素，下一个元素就在浏览器下一行显示。r元素中的文本按照元素的级别，浏览器使用不同大小的默认字体表示。例如，H1一直到H6采用不同大小的字体在浏览器中显示。总结rXHTML文档由元素组成，元素定义了文本和图形在浏览器中显示的方式，告诉Web浏览器如何显示页面。rXHTML元素使用XHTML标记定义，每个标记都出现在一对尖括号（）中。标记通常成对出现，第一个标记定义了标记的起点，称为“开始标记”；第二个标记定义了标记的结尾，称为“结束标记”。在开始标记和结束标记之间的文本称为元素内容。r标记具有属性，属性提供了关于页面上XHTML元素的附加信息。rXHTML文档的总体结构由、这三个文档级的标记构成。rXHTML包含了几个块级的标记来限定和格式化段落文本。这些标记包括：、到、。r创建超链接的XHTML标记为。r创建图形信息的XHTML标记为。r创建多媒体信息的XHTML标记为。r在网页中创建表格信息的XHTML标记为。rXHTML元素分为块级元素和内嵌元素两种类型，二者的不同之处在于块级元素定义的文本是换行的，而内嵌元素定义的文本是不换行的参考资料rhttp:/www.w3cn.orgrHTML和CSS网页标准指南rhttp:/ Definitive Guide,5th Edition 作业r利用所学的标记做一个博客首页