项目3 HTML语言.

项目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．特殊符号作用：在文档中显示特殊符号。各种特殊符号的字符名称如表所示。字符名称显示结果 &nbsp；空格 &lt；小于号（<） &gt；大于号（>） &quot；双引号（"） &times；乘号（×） &copy；版权所有（©） &reg；已注册（®）

任务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=" 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或者 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 !

项目3 HTML语言.

Similar presentations

Presentation on theme: "项目3 HTML语言."— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

项目3 HTML语言.

Similar presentations

Presentation on theme: "项目3 HTML语言."— Presentation transcript:

Similar presentations

About project

反馈