JavaScript程序设计基础教程 作者 曾海 第2章 HTML文档.pptVIP

第2章 HTML文档 本章目录 2.1 HTML文档基础 HTML标记 HTML标记 HTML标记 HTML标记 HTML文档的基本结构 HTML文档的基本结构 HTML文档的基本结构 2.2 HTML文档的常用标记 文字标记 文字标记 文字标记 文字标记 文字标记 文字标记 段落标记 段落标记 段落标记 列表标记 列表标记 列表标记 列表标记 超链接标记 超链接标记 超链接标记 图像标记 图像标记 表格标记 表格标记 表格标记 表格标记 表格标记 表格标记 框架标记 框架标记 框架标记 框架标记 框架标记 框架标记 多媒体标记 多媒体标记 习题 如果希望网页达到美观吸引浏览者的效果，使用图片是不可缺少的。在HTML文档中可以使用img图像标记将图片插入到网页中。图像标记常用的属性及说明如表2.6所示。 例2.13 下面在网页中使用IMG标记插入图片flower.jpg，并将图片宽度属性设置为100%，将文字提示设置为“咖啡雪屋”，代码如下： html head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title在网页中插入图片/title /head body img src=IMG_0856.jpg width=100% height=100% align=left alt=咖啡雪屋 / /body /html 在浏览器中预览网页，效果如图2.16所示。 在HTML文档中通常使用3个标记来构成表格，分别为表格标记、行标记和单元格标记。创建一个表格的语法格式如下。 语法： table caption表格标题内容/caption tr th表头内容/th th表头内容/th … /tr tr td单元格内容/td td单元格内容/td … /tr table 1．表格标记table…/table table标记表示一个表格的开始位置，/table表示一个表格的结束位置。表格标记的常用属性及说明如表2.7所示。 2．表格标题标记caption…/caption caption…/caption标记用来设置一种比较特殊的单元格“标题单元格”。标题单元格位于整个表格的第一行位置，起到为表格显示标题的作用。 3．表格表头标记th…/th 在表格中还有一种特殊的单元格，此单元格为“表头”，表格的表头一般位于第一行的第一列位置，用来说明这一行内容的类别。表头中的内容是加粗显示的。 4．行标记tr…/tr 行标记用来设置表格中的行，在表格中包含几组行标记，就表示此表格为几行。行标记常用的属性及说明如表2.8所示。 5．单元格标记td/td 单元格标记用来表示每一行中有几个单元格。此标记的部分属性和行标记类似，这里将介绍colspan属性和rowspan属性。 ? colspan属性 在表格中有时需要将一行中的几个单元格合并成为一个单元格，此时可以使用colspan属性来实现，此属性值为正整数表示需要合并单元格的个数。 ? rowspan属性 此属性用来合并表格的行，此属性值为正整数表示需要合并行的个数。 例2.14 下面使用表格标记和部分属性创建一个表格，用来显示企业信息，代码如下。 html head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title表格标记的应用/title /head body !--表格宽度为418,边框宽为2,居中对齐,单元格间距为10,边距6,背景颜色为#3399FF,亮边框色为#CC6600-- table width=418 border=2 align=center cellpadding=10 cellspacing=6 bordercolor=#3399FF bordercolorlight=#CC6600 tr th height=35 colspan=3 scope=col吉林省明日科技有限公司/th /tr tr td width=20% rowspan=3img src=mr.gif width=84 height=114/td td width=30% height=25 valign=middle bgcolor=#D8E1F8技术总监：/td td width=46% height=25 valign=middle高经理/td /tr tr td height=25 valign=