项目3 HTML语言
任务1 认识HTML语言 任务2 页面排版标记 项目3 HTML语言 任务3 表格标记 任务4 超链接标记 任务5 表单标记
任务1 认识HTML语言 任务分析 该任务通过一个简单的网页实例来认识HTML文件的基本结构和HTML语言的基本语法。网页背景颜色为深红色，文本颜色为白色。
任务1 认识HTML语言 一．什么是HTML语言 HTML（Hyper Text Markup Language，超文本标记语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，通常它的扩展名为“.html”或“.htm”。
任务1 认识HTML语言 二．HTML基本语法 1．单标记 单独使用就可以表达语意的标记。 语法：<标记> 如，换行标记 <br>。 2．双标记 双标记必需成对出现，由“始标记”和“尾标记”两部分 组成。“尾标记”是在“始标记”前加一个斜杠（/）。 语法：<标记> …… </标记> 如，段落标记 <p> …… </p>
任务1 认识HTML语言 二．HTML基本语法 3.标记属性 为了使呈现的页面更加美观，除了使用标记，还可以使用标记的属性对 标记之间的内容进行修饰， 其语法为：<标记 属性1="值" 属性2="值" 属性3="值" ……> 如，<body bgcolor="#880000" text="#FFFFFF"> 属性是可以省略的，省略时即取默认值。各个属性之间无先后次序，但是各属性间必须用空格隔开，属性的值用英文半角的双引号括起来。
任务1 认识HTML语言 <html> <head> 4.文档的结构 <html> <head> <title>网页的标题</title> …… </head> <body> 网页正文部分 </body> </html> 头部 主体 HTML文档 HTML文档通常由包含在 <html>标记和</html> 标记之间的头部和正文两大 部分构成，基本结构如图： 头部 HTML文档 主体
任务1 认识HTML语言 二．HTML基本语法 文档结构的几点说明： 信息都是都包含在这一对标签中。 ②<head>……</head>是html文档的头部，这一对标签中的内容用于说明网页 文件的标题(<title>……</title>)和其他公共的属性，是不显示在浏览器窗口中的。 ③<body>……</body>这对标记之间的内容是浏览器窗口中显示的内容。
任务1 认识HTML语言 二．HTML基本语法 5.文档的属性 <body>标记对应网页的主体部分，其标记属性就是页面的属性。 如bgcolor、background、text等。 bgcolor="颜色" 设置文档背景色 background="图像文件的路径/图像文件的名字" 设置文档背景图像文件 text="颜色" 设置文档文字默认颜色 在HTML中，色彩的表示方法有两种：一种是用英文单词来表示的，如“red”、“blue”等几种常用颜色。另一种是用16进制的红（R）、绿（G）、蓝（B），即数字0-9和字母A-F来表示的，如“#FF0000”（红色）。
任务1 认识HTML语言 三. 任务实施 1．使用“我的电脑”或“资源管理器”在我们已经创建的example站点（mwmw文件夹）， 三. 任务实施 1．使用“我的电脑”或“资源管理器”在我们已经创建的example站点（mwmw文件夹）， 创建一个新文件夹，命名为exam。 2．打开Windows记事本程序。输入如下HTML语句： <html> <head> <title>例3-1</title> </head> <body bgcolor="#880000" text="#FFFFFF"> 这是一个简单的例子 </body> </html>
任务1 认识HTML语言 三. 任务实施 3．保存此文件到exam文件夹中，命名为ex01.html。 三. 任务实施 3．保存此文件到exam文件夹中，命名为ex01.html。 4．打开mwmw文件夹中的exam文件夹，双击ex01.html网页文件，在浏览器中可以 观察到其效果。
任务1 认识HTML语言 网页的预览效果 返回
任务2 页面排版标记 任务分析 该任务结合“优秀员工评比的通知”网页，介绍页面标记的使用方法。
任务2 页面排版标记 一．标题标记 格式：<h#>……</h#> 任务2 页面排版标记 一．标题标记 格式：<h#>……</h#> 其中，“#”的取值范围为1-6。取1时为一级标题，字体最大；取6时为六级标题，字体最小。 作用：设置文档的各级标题。 常用属性：align，用于定义标题的对齐方式， 默认值为“左对齐”，属性值如表所示。 属性值 功能 示例 left 左对齐 <h2 align="left">二级标题左对齐</h2> center 居中对齐 <h2 align="center">二级标题居中对齐</h2> right 右对齐 <h2 align="rigth">二级标题右对齐</h2>
任务2 页面排版标记 二．版面格式标记 1．说明标记 格式：<！——说明的文字——> 任务2 页面排版标记 二．版面格式标记 1．说明标记 格式：<！——说明的文字——> 作用：为文档加上说明，但是不显示在网页页面中。 2．段落标记 格式：<p>或者<p>……</p> 作用：使标记后的内容另起一段，并加一个空白行。 常用属性：align，用于定义段落的对齐方式。 （取值方式如上表 ） 3．换行标记 格式：<br> 作用：使标记后的内容换一行显示，但是不换段落。
任务2 页面排版标记 二．版面格式标记 4．字体标记 格式：<font>……</font> 任务2 页面排版标记 二．版面格式标记 4．字体标记 格式：<font>……</font> 作用：设置标记间内容的字体、大小、颜色等格式。 常用属性：如表所示。 常用属性 功能 示例 face 字体 <font face="宋体">文本</font> size 大小，取值范围为1-7 <font size="1">文本</font> color 颜色 <font color="red">文本</font> title 当鼠标指向文本时，出现的信息 <font title="标记">文本</font>
任务2 页面排版标记 二．版面格式标记 5．字体修饰标记 作用：设置标记间内容的粗体、斜体、下划线等特殊效果， 功能 示例 粗体 任务2 页面排版标记 二．版面格式标记 5．字体修饰标记 作用：设置标记间内容的粗体、斜体、下划线等特殊效果， 标记 功能 示例 <b>……</b> <strong>……</strong> 粗体 <b>字体加粗显示</b> <i>……</i> 斜体 <i>字体斜体显示</i> <u>……</u> 下划线 <u>字体加下划线显示</u> <s>……</s> <strike>……</strike> 删除线 <strike>字体加删除线显示</strike> <big>……</big> 字体加大 <big>字体加大显示</big> <small>……</small> 字体缩小 <small>字体缩小显示</small> <sup>……</sup> 上标 <sup>字体变上标显示</sup> <sub>……</sub> 下标 <sub>字体变下标显示</sub> <em>……</em> 强调 <em>字体强调显示</em> 字体修饰标记的 功能如表所示。
任务2 页面排版标记 二．版面格式标记 6．文本居中对齐标记 格式：<center>……</center> 任务2 页面排版标记 二．版面格式标记 6．文本居中对齐标记 格式：<center>……</center> 作用：设置居中对齐方式。 功能与<p>等标记中的属性align="center"相同。
任务2 页面排版标记 二．版面格式标记 7．水平线标记 格式：<hr> 作用：在文档中插入一根水平线。 常用属性：如表所示。 任务2 页面排版标记 二．版面格式标记 7．水平线标记 格式：<hr> 作用：在文档中插入一根水平线。 常用属性：如表所示。 常用属性 功能 示例 align 水平线对齐方式 若省略属性值，则默认为居中对齐 <hr align="right"> color 水平线的颜色 <hr color="#666666"> size 水平线的宽度，单位默认为像素 <hr size="5"> width 水平线的长度，单位为像素或百分比 (百分比指的是占页面宽度的比例) <hr width="95%"> noshade 水平线无阴影 <hr noshade color="red">
任务2 页面排版标记 二．版面格式标记 8．特殊符号 作用：在文档中显示特殊符号。 各种特殊符号的字符名称如表所示。 字符名称 显示结果 任务2 页面排版标记 二．版面格式标记 8．特殊符号 作用：在文档中显示特殊符号。 各种特殊符号的字符名称如表所示。 字符名称 显示结果  ； 空格 <； 小于号（<） >； 大于号（>） "； 双引号（"） ×； 乘号（×） ©； 版权所有（©） ®； 已注册（®）
任务2 页面排版标记 三．项目符号标记 有序列表：它的主要标记有<ol>……</ol>和 任务2 页面排版标记 三．项目符号标记 格式： <ul> <li>列表项1</li> …… <li>列表项n</li> </ul> 作用：列表分为有序列表和无序列表两类。 有序列表：它的主要标记有<ol>……</ol>和 <li>……</li>。其中，标记<ol>……</ol> 放在外层，标记<li>……</li>放在内层用于区分 每个列表项。列表效果如图所示。
任务2 页面排版标记 三．项目符号标记 无序列表:即项目符号，它的主要标记有<ul>……</ul> 任务2 页面排版标记 三．项目符号标记 格式： <ul> <li>列表项1</li> …… <li>列表项n</li> </ul> 作用：列表分为有序列表和无序列表两类。 无序列表:即项目符号，它的主要标记有<ul>……</ul> 和<li>……</li>。其中，标记<ul>……</ul>放在外 层，标记<li>……</li>放在内层用于区分每个列表项。 列表效果如图所示。
任务2 页面排版标记 三．项目符号标记 属性值 功能 decimal 数字（默认值） lower-roman 小写罗马数字 任务2 页面排版标记 三．项目符号标记 属性值 功能 decimal 数字（默认值） lower-roman 小写罗马数字 upper-roman 大写罗马数字 upper-alpha 小写字母 大写字母 项目符号<ol>标记的属性 属性值 功能 disc 实心圆点（默认值） circle 空心圆 square 实心小方块 项目符号<ul>标记的属性
任务2 页面排版标记 四．图像标记 格式：<img> 任务2 页面排版标记 四．图像标记 格式：<img> 作用：在文档中插入图像文件，其中插入的图像文件的格式可以是：.JPG、.GIF和.PNG。 常用属性：如表显示。 常用属性 功能 示例 src 指定插入图像文件的路径和名称 <img src="imgage/1.jpg"> align 对齐方式，属性值：left、right、top、middle、bottom。 <img src="imgage/1.jpg" left="middle"> alt 当鼠标指向图像时，显示的文本。 <img src="imgage/1.jpg" left="middle" alt="文本"> width 指定图像的宽度，单位为像素。 <img src="imgage/1.jpg" width="200" height="150" border="2"> height 指定图像的高度，单位为像素。 border 指定图像的边框，默认为0，即无边框。 hspace 指定图像左右两边与其他对象之间的距离，单位为像素。 <img src="imgage/1.jpg" hspace="15" vspace="15"> vspace 指定图像上下两端与其他对象之间的距离，单位为像素。
任务2 页面排版标记 五. 任务实施 1．运行Dreamweaver CS3，打开站点example。 任务2 页面排版标记 五. 任务实施 1．运行Dreamweaver CS3，打开站点example。 2．新建一个文件夹article，在此文件夹中新建一个空白的网页文件 notice.html。切换到代码视图。 3．删除其中原有的语句，输入语句。 4．认识并分析网页文件中所使用的标记及其属性。 5．保存此网页文件，并浏览。
任务2 页面排版标记 网页的预览效果 返回
任务3 表格标记 任务分析 任务2中的通知网页结构过于单调，在网页中增加一些相关元素后就会有较好的显示效果。为了使得这些增加的内容和原先的通知内容有机结合、统一布局，使用表格是一种可取的方法。
任务3 表格标记 一．几种表格标记 1．表格标记 格式：<table>……</table> 任务3 表格标记 一．几种表格标记 1．表格标记 格式：<table>……</table> 作用：标志表格的开始和结束。 常用属性：如表所示。 常用属性 功能 Width 表格宽度，单位为像素或百分比。 Height 表格高度，单位为像素或百分比。 align 表格的对齐方式，属性值：left、right、center，默认为左对齐。 border 表格边框的宽度，单位为像素默认值为0，即无边框。 bordercolor 表格边框颜色。 bgcolor 表格的背景颜色。 background 表格的背景图像。 cellspacing 单元格与单元格之间的间距，单位为像素。 cellpadding 单元格内容与单元格边框的距离，单位为像素 表格中的主要 标记有五种：
任务3 表格标记 一．几种表格标记 2．表格标题标记 格式：<caption>……</caption> 表格中的主要 任务3 表格标记 一．几种表格标记 2．表格标题标记 格式：<caption>……</caption> 作用：用于设置表格的标题，该标记可省略。 表格中的主要 标记有五种：
任务3 表格标记 一．几种表格标记 3．行标记 格式：<tr>……</tr> 作用：表格中的一行。 任务3 表格标记 一．几种表格标记 3．行标记 格式：<tr>……</tr> 作用：表格中的一行。 常用属性：如表所示。 常用属性 功能 align 行中内容的水平对齐方式，属性值：left、right、center，默认为左对齐。 valign 行中内容的垂直对齐方式，属性值：top、middle、bottom，默认为居中对齐。 height 行高，单位为像素或百分比。 title 当鼠标指向该行是，显示的文字。 bgcolor 背景颜色。 bordercolor 边框颜色。 nowrap 设定行中所有单元格中内容不能自动换行。 表格中的主要 标记有五种：
任务3 表格标记 一．几种表格标记 表格中的主要 标记有五种： 4．单元格标记 格式：<td>……</td> 任务3 表格标记 一．几种表格标记 4．单元格标记 格式：<td>……</td> 作用：表示表格中的一个普通单元格，但是该标记必须放在<tr>标记中。 常用属性：如表所示。 常用属性 功能 align 单元格内容的水平对齐方式。 属性值：left、right、center，默认为左对齐。 valign 单元格内容的垂直对齐方式。 属性值：top、middle、bottom，默认为居中对齐。 width 单元格的宽度。 height 单元格的高度。 bgcolor 单元格的背景颜色。 bordercolor 单元格的边框颜色。 nowrap 设定单元格中内容不能自动换行。 rowspan 单元格所占的行数，用于合并单元格。 colspan 单元格所占的列数，用于合并单元格。 表格中的主要 标记有五种：
任务3 表格标记 一．几种表格标记 5．表头单元格标记 格式：<th>……</th> 任务3 表格标记 一．几种表格标记 5．表头单元格标记 格式：<th>……</th> 作用：表示表格中的表头单元格，该标记也必须放在<tr>标记中， 但是该标记可以省略。 常用属性：同<td>标记的常用属性，如上表所示。 表格中的主要 标记有五种： 注：如果<td>标记中属性值与<th>标记中的属性值冲突时，以<td>标记中属性值为主。
任务3 表格标记 二．合并单元格 在建立表格时，常常需要一些不规则的表格，那么就需要使用<td>标记中的rowspan属性和colspan属性来实现。其中colspan是横向合并，rowspan是纵向合并。 右图所示的表格就左图表格通过合并单元格后得到的。右图 中的A2单元格是纵向合并（设置rowspan=“2”）得到的， B3和C2单元格都是横向合并（分别设置colspan=“2”和 colspan=“3”）得到的。
任务3 表格标记 二．合并单元格 ①整个表格中，每行的列数和是相同的。 在进行单元格合并时要注意一下几点： 任务3 表格标记 二．合并单元格 ①整个表格中，每行的列数和是相同的。 在进行单元格合并时要注意一下几点： ②如果在某行中使用了colspan属性，即在该行中横向合并。 例如：colspan=“2”，则从当前单元格向右合并2个两个 单元格，那么在当前行<tr>标记中就要少包含一个<td> 标记，以此类推。 ③如果在某列中使用了rowspan属性，即在该列中纵向合并。 例如：rowspan=“2”，则从当前单元格向下合并2个两个 单元格。那么在下一行中，就少包含一个单元格，即下一行的 <tr>标记中要少写一个<td>标记，以此类推。
任务3 表格标记 三. 任务实施 1．运行Dreamweaver CS3，打开站点example的中article文件夹中 任务3 表格标记 三. 任务实施 1．运行Dreamweaver CS3，打开站点example的中article文件夹中 的notice.html文件。 2．切换到代码视图。 3．在原有的语句，进行补充。 4．认识并分析网页文件中所使用的标记及其属性。 5．保存此网页文件，并浏览。
任务3 表格标记 网页的预览效果 返回
任务4 超链接标记 任务分析 创建超链接是HTML语言中一个重要的部分，网站是有多个网页构成的，每个网页之间就是通过超链接将他们连接在一起，可以互相访问。
任务4 超链接标记 一．超链接标记 格式：<a>……</a> 作用：通过点击网页中的文本、 任务4 超链接标记 一．超链接标记 常用属性 功能 示例 href 链接文件的地址，可以是本机上的位置，也可以是网址。 <a href="1.jpg">图片</a> <a href="http://www.baidu.com">百度</a> target 链接的目标窗口，属性值：_blank、_parent、_self、_top。 <a href="1.jpg" target="_blank">图片</a> title 鼠标指向链接时，显示的文本。 <a href="1.jpg" title="图片1">图片</a> 格式：<a>……</a> 作用：通过点击网页中的文本、 图像等对象连接到其他的网页、 图像或文件等。 常用属性：如表所示。 其中，target属性值可取以下四种之一： _blank：在新窗口中打开。 _parent：在上一级窗口中打开。 _self：在当前窗口打开，为默认值。 _top：在浏览器的整个窗口中打开，会删除所有框架。
任务4 超链接标记 二．绝对路径和相对路径 1．绝对路径 完整的描述文件位置的路径就是绝对路径。 任务4 超链接标记 二．绝对路径和相对路径 1．绝对路径 完整的描述文件位置的路径就是绝对路径。 如，F:/mwmw/image/top.jpg或者 http://www.baidu.com。 HTML有两种路径： 绝对路径和相对路径。 2．相对路径 与文档保存位置相对的位置叫相对路径。
任务4 超链接标记 二．绝对路径和相对路径 ①如果网页文档和引用的文件在同一个文件夹中，直接 写引用文件的文件名。 任务4 超链接标记 二．绝对路径和相对路径 ①如果网页文档和引用的文件在同一个文件夹中，直接 写引用文件的文件名。 如：在当前站点中有index.html文件和home.html文件。 当网页文档index.html的超链接中引用home.html时， 可以直接写<a href="home.html">。 在使用相对路径时，需注意： ②如果引用的文件在网页文档的下级文件夹中，直接写文件 夹的路径即可。 如：在当前站点中有文件夹images，在images中有图像 文件top01.jpg,当网页文档index.html中引用top1.jpg 时，可以写<img src="image/top01.jpg">。 ③“../”来表示网页文档的上一级文件夹，“../../”表示 网页文档的上上级的文件夹，以此类推。 如：在当前站点中有文件夹article，在此文件夹中有 notice.html文件。则，此网页文件中要引用images文件夹 中的top.jpg文件，可以写<img src="../top.jpg">。
任务4 超链接标记 三．任务实施 1．运行Dreamweaver CS3，打开站点example的中index.html文件。 任务4 超链接标记 三．任务实施 1．运行Dreamweaver CS3，打开站点example的中index.html文件。 2．切换到代码视图。
任务4 超链接标记 三．任务实施 3．在文档偏后的位置找到下列语句： 任务4 超链接标记 三．任务实施 3．在文档偏后的位置找到下列语句： <p><span class="STYLE1">点击进入……</span> </p> 修改成：<p><span class="STYLE1"><a href="home.html"> 点击进入……</a></span> </p> 4．保存文件，并浏览网页。鼠标点击“点击进入……”时，会产生页面跳转。
任务4 超链接标记 网页的预览效果 返回
任务5 表单标记 任务分析 表单是网页上的一个特定的区域，是用户交互的控件集合，相当于一个容器，其中可以包含按钮、文本框，下拉框等，表单在HTML页面中发挥了重要作用，利用表单可以收集用户端提交的信息，是联系用户和站点拥有者的重要桥梁，是实现交互的重要手段。
任务5 表单标记 一．表单 格式：<form>……</form> 任务5 表单标记 一．表单 格式：<form>……</form> 作用：标志表单的开始和结束，在<form>和</form>之间，可以使用 <form>以外 的任何HTML标记，这使表单变得非常灵活。 常用属性：如表所示。 常用属性 功能 action 用于定义表单处理的信息的位置。 method 用于定义将表单结果从浏览器传送到服务器的方法，有两种：get和post，默认的提交方式为get，但是该方法不能用于传递大于1kb的信息，常用到的是post方法，它可以隐藏信息。 target 指定服务器返回时所显示的目标窗口，属性值：_blank、_parent、_self、_top。 title 当鼠标指向表单时，显示的内容
任务5 表单标记 二．常用的表单标记 元素 控件 功能 text 文本框：用于接收用户输入的文本。 Button 任务5 表单标记 二．常用的表单标记 元素 控件 功能 text 文本框：用于接收用户输入的文本。 Button 普通按钮：响应用户鼠标点击。 Submit 提交按钮：提交表单数据到相应的处理程序。 Reset 重置按钮：清空表单的内容，恢复到初始状态。 Radio 单选按钮：一组选项中只能选择一项。 Checkbox 复选框：一组选项中可以选择多项。 Select 下拉式菜单：从下拉列表中选择项。 Textarea 多行文本框：又称为文本域，用于接收用户输入的多行文本。 表单中主要元素
任务5 表单标记 二．常用的表单标记 ⑴文本框和密码框 类型分别：type=“text”——文本框， 任务5 表单标记 二．常用的表单标记 ⑴文本框和密码框 类型分别：type=“text”——文本框， type="password"——密码框。 常用的属性见下表： 1．<Input>标记 表单的不同类型的元素是通过设定属性TYPE="表单类型"。 属性 功能 name 设定文本框的名称。 size 设定文本框显示的宽度（字符数）。 value 设定文本框的初始值。 maxlength 设定文本框可输入字符串的最大长度。 align 文本框的对齐方式，属性值：top、middle、bottom、right、left。
任务5 表单标记 二．常用的表单标记 例如，下面这段语句对应下图所示的效果。 任务5 表单标记 二．常用的表单标记 例如，下面这段语句对应下图所示的效果。 用户名：<input type="text" name="t1" size="20"> <p>密 码：<input type="password" name="t2" size="20">
任务5 表单标记 二．常用的表单标记 ⑵按钮 按钮分为：普通按钮、提交按钮、复位按钮。 任务5 表单标记 二．常用的表单标记 ⑵按钮 按钮分为：普通按钮、提交按钮、复位按钮。 普通按钮：（type="buttom"）单击后执行设定的代码。 提交按钮：（type=“submit”）当用户单击这个按钮后， 用户的输入信息即被传送到服务器。 重置按钮：（type=“reset”）当用户单击这个按钮后， 用户输入的信息全部清除，用户重新输入信息。 常用的属性如表所示。 1．<Input>标记 表单的不同类型的元素是通过设定属性TYPE="表单类型"。 属性 功能 name 设定按钮的名称。 value 设定按钮上要显示的文字。 align 文本框的对齐方式，属性值：top、middle、bottom、right、left。
任务5 表单标记 二．常用的表单标记 ⑶单选框 类型为type=“radio”，单选框是好将多个选项让使用者 任务5 表单标记 二．常用的表单标记 ⑶单选框 类型为type=“radio”，单选框是好将多个选项让使用者 选择，一次只能选一个。 常用的属性见下表： 1．<Input>标记 表单的不同类型的元素是通过设定属性TYPE="表单类型"。 属性 功能 name 设定单选框的名称。 value 设定单选框中用于选择的选项。 checked 设定默认选择项。 align 文本框的对齐方式，属性值：top、middle、bottom、right、left。
任务5 表单标记 二．常用的表单标记 例如，下面这段语句对应下图所示的效果。 性 别： 任务5 表单标记 二．常用的表单标记 例如，下面这段语句对应下图所示的效果。 性 别： <input type="radio" name="r1" value="radio" checked="checked">男 <input type="radio" name="r2" value="radio2">女
任务5 表单标记 二．常用的表单标记 ④复选框 类型为type=“checkbox”，复选框是将多个选项让使用者 任务5 表单标记 二．常用的表单标记 ④复选框 类型为type=“checkbox”，复选框是将多个选项让使用者 选择，一次能选多个。常用的属性见下表： 1．<Input>标记 表单的不同类型的元素是通过设定属性TYPE="表单类型"。 属性 功能 name 设定复选框的名称。 value 设定复选框中用于选择的选项。 checked 设定默认选择项。 maxlength 设定复选框可输入的最大长度。 align 文本框的对齐方式，属性值：top、middle、bottom、right、left。
任务5 表单标记 二．常用的表单标记 例如，下面这段语句对应下图所示的效果。 爱好： 任务5 表单标记 二．常用的表单标记 例如，下面这段语句对应下图所示的效果。 爱好： <p><input type="checkbox" name="c1" >上网 <input type="checkbox" name="c2" >运动 <input type="checkbox" name="c3">看书 <input type="checkbox" name="c4">看电视
任务5 表单标记 二．常用的表单标记 2．<select>……</select>标记 任务5 表单标记 二．常用的表单标记 2．<select>……</select>标记 和<option>……</option>标记结合使用，用于产生一个下拉式列表框。 常用的属性见下表： 属性 功能 name 设定下拉列表框名称。 size 设定下拉列表框的选项个数。默认为1，如果为大于1，则有多个选项。 Multiple 设置是否能够多选。 <option>标记的常见属性为： Selected，用于设定选项 被默认 选中的初始状态。
任务5 表单标记 二．常用的表单标记 例如，下面这段语句对应下图所示的效果。 任务5 表单标记 二．常用的表单标记 例如，下面这段语句对应下图所示的效果。 <select name="s2" size="3"> <option selected>说明1</option> <option>说明2</option> <option>说明3</option> </select>
任务5 表单标记 二．常用的表单标记 3．<textarea>……</textarea>标记 任务5 表单标记 二．常用的表单标记 3．<textarea>……</textarea>标记 有时候我们希望使用者输入比较多的文字，此时，文本框就不能满足用户的需求，需要一个可以输入大量文字的元件，即文本域。常用的属性见下表： 属性 功能 name 设定文本域的名称。 wrap 设定文本域中的换行模式，属性值：off，不自动换行；virtual,当按下Enter键时视为换行，physical，自动换行。 cols 设定文本域的行数。 rows 设定文本域的列数。
任务5 表单标记 二．常用的表单标记 例如，下面这段语句对应下图所示的效果。 评论： <p> 任务5 表单标记 二．常用的表单标记 例如，下面这段语句对应下图所示的效果。 评论： <p> <input type="radio" name="r1" value="radio">好评 <input type="radio" name="r2" value="radio2">中评 <input type="radio" name="r3" value="radio3">差评 <textarea name="t3" cols="25" rows="5"></textarea>
任务5 表单标记 三．任务实施 2．切换到拆分视图。 任务5 表单标记 三．任务实施 1．运行Dreamweaver CS3，打开教学参考资源站点的中mark.html文件。 2．切换到拆分视图。 3．逐点认识表单对象的HTML标记及其使用方法。
任务5 表单标记 三．任务实施 <select name="catid" class="input" > 任务5 表单标记 三．任务实施 <select name="catid" class="input" > <option value="0">请选择店名</option> <option value="1">上海>淮海路店</option> <option value="2">上海>南京路店</option> </select>
任务5 表单标记 三．任务实施 <label> 任务5 表单标记 三．任务实施 <label> <input name="markroom" type="radio" id="markroom" value="markroom" checked="checked" /> 散座</label> <label> <input name="markroom" type="radio" id="markroom2" value="markroom" />包间 </label>
任务5 表单标记 三．任务实施 <input type="text" name="marktime" value="" class="input" /> 文本框 <textarea name="markother" cols="70" rows="7" style="width:565; height:138" class="textarea" > </textarea> 文本域 <input type="submit" name="Submit" value="提交" class="submit"> 按钮
任务5 表单标记 网页的预览效果 返回
Thank You !