第71章超文本标记语言.ppt

第7章 超文本标记语言（HTML） 7.4图像标记img 7.5表格标记table/table 7.6地址标记address/address 7.7表单标记form/form 图7-16 创建单选框 创建单选框语法格式为： /form input type=radio name=NAME value=x …… input type=radio name=NAME value=n /form 注意，单选框的属性name的属性值NAME是相同的，因为只需选一个输入信息。 7.7.7多选框 多选框是给用户提供选择多项内容。要创建一个多选框，只需在form标记后加上input type=“checkbox”，再以/form结束即可，在每一个“checkbox”后跟有要用于选择的文本内容或者图像。可以再插入间隔划线或者分段标记。 例 3-17.html，创建多选框。 HTML body form H3多选框/H3 input type=checkbox name=x1北京br input type=checkbox name=x2上海br input type=checkbox name=x3西安br input type=checkbox name=x4 checked广州(已被选择)br input type=submit value=提交 input type=reset value=重置 /form /body /HTML 显示结果如图7-17所示。 图7-17创建多选框 如果Web页面上全是文字，会使人觉得很单调。怎样才能使页面活泼一点呢？我们可以插入一些图像，从而使页面变得图文并茂。 插入图像的语法格式如下： img src=图像的URL地址 img提示下面要将插入一个图像，src指出图像的来源URL地址。注意，图像标记img没有结束标记。 例 3-8.html，在Web页面中插入一个图像。 HTML head titleWeb页面制作/title /head body 这里要插入一个图像 img src=shu.gif /body /HTML 例3-8.HTML显示结果如图3-8所示。 图3-8 插入图像 加入表格可使页面整齐直观。但写起来非常麻烦，这里只介绍其部分语法格式。 其语法格式可分为以下五部分： 1.表格标记 table…/table table表示下面是一个表格的内容的开始，/table表示表格结束。 2.表格标题标记 caption align=#表格标题/caption 这是表示一个表格的标题。表格的标题也可不要。Align可选择top（标题放在表格上面居中），bottom（标题放在表格下面居中），缺省时，标题放在表格上面居中。 3.表格行标记 TR…/TR 此标记表示表格一行的开始和结束。 4.字段名标记 TH字段名/TH 在TH/TH中间加入字段名，有几个字段名就加入几个TH/TH标记。 5.数据标记 TD数据/TD 在TD/TD中间加入数据，一般有几个字段名就加入几个TD/TD标记。其属性有：border=#表示表的边框，取像素值，缺省时，表格没有边框。 例 3-9.html,这是两个普通的表格，一个不带边框，一个带边框。 HTML table caption 商品价格表/caption TRTH日期/THTH白菜/THTH鸡蛋/TH/TR TRTD6.1/TDTD1.20/TDTD4.80/TD/TR TRTD6.2/TDTD1.00/TDTD5.00/TD/TR /tablebr table border=5 caption 商品价格表/caption TRTH日期/THTH白菜/THTH鸡蛋/TH/TR TRTD6.1/TDTD1.20/TDTD4.80/TD/TR TRTD6.2/TDTD1.00/TDTD5.00/TD/TR /table /HTML 显示结果如图7-9所示。 图7-9 带框和不带框的表格 这个标记通常用来告诉读者本文作者的联系地址、电话、E-mail信箱。经常是将E-mail地址放