理解 HTML 语言与高级语言（如 VB 、 C 等）的区别；熟知网页常用标记及属性，如标题、字体、段落、图像、超链接、表格等；

理解HTML语言与高级语言（如VB、C等）的区别；理解HTML语言与高级语言（如VB、C等）的区别； • 熟知网页常用标记及属性，如标题、字体、段落、图像、超链接、表格等； • 熟练掌握HTML表单中各界面对象的标记符号和属性，如表单、文本域、列表域、复选框与单选钮、命令按钮等； • 教学重点 • 对HTML表单的理解； • 教学难点 • HTML表单的应用

ASP基本原理 • HTML工作原理 • 静态网页和动态网页 • ASP运行环境配置

一、 HTML语言结构

二、 HTML非正文标记 1、开始和结束标记开始标记：<html> 结束标记：</html> 分别指明HTML文档的开始和结束。所有其他标记必须置于HTML标记中间，否则客户端浏览器将忽略不在其间的标记。 2、头部标记 <head>……</head>，其作用在于初始化文档的信息。 <html> <head>  <script language="vbscript"> dim s s="" do while s<>"123456" s=prompt("请输入密码：") loop </script> </head> </html> 示例：循环密码登录程序

3、主体标记 <body>……</body>，是HTML文档最核心的部分 Web页面的主要内容都放在这里

三、 HTML正文标记 1、标题字体标记标题字体通过<Hx>…</Hx>标记实现，夹在<Hx>和</Hx>中间的文字为加黑、加大显示。标题元素共有6种，分别为h1，h2，…，h6，用于表示文档中的各级标题。标题号x越小，则表示的标题字体就越大。默认情况下，浏览器对各级标题做如下解释:

2、段落标记与换行标记 为了排版整洁、表述清楚，正文信息通常需要被分成多个段或多行，所以需要用到: 段落标记<p > 换行标记< br > <p>表示新段开始，不同段之间将产生一空白行。 <br>表示新的一行开始，与换段标记区别是，不会产生空白行。

示例： <html> <body> 这首《清平调》诗，以牡丹花比贵妃的美艳。（加换段标记）<p>首句以云霞比衣服，以花比容貌；二句写花受春风露华润泽，犹如妃子受君王宠幸；三句以仙女比贵妃；四句以嫦娥比贵妃。（加换行标记）<br>这样反复作比，塑造了艳丽有如牡丹的美人形象。 </body> </html>

3、预格式化文本标记 由于浏览器不会识别普通文本段中的缩进部分和空白，当使用格式化文本的方法时，不能使浏览器按照所指定的格式显示文本。这时就要使用预格式化文本标记<pre>……</pre>，控制其按原输入模式显示在浏览器上，并且此时显示的内容不会因浏览器窗口的调整而自动换行。示例： <html> <body><pre> 《清平调》诗共有三首，是李白在长安为翰林时所作。有一次，唐明皇与杨贵妃在沉香亭观赏牡丹，因命李白作新乐章，李白奉旨作了三章。 </pre></body> </html>

4、水平线标记 可以在Web页面中插入一条横向水平线。 size可以定义横线的厚度，align可设置横线的对齐方式（Left、Righ、Center），width可设置横线的宽度，noshade用于设置水平线为实心线（默认情况下为阴影线）示例： <html> <body> 第一条水平线，厚度为5个像素。<hr size=5> 第二条水平线，宽度为200个像素，对齐方式为左对齐。<hr width=200 align=left> 第三条水平线，为实心线，厚度为10个像素。<hr size=10 noshade> </body> </html>

5、列表标记 常用列表有3种: 有序列表、无序列表和定义列表。输出时每一列表条目缩进，并且以不同的项目符号表示。 <html> <body> 有序列表： <ol> <li>第一章 <li>第二章 </ol> 无序列表： <ul> <li>第一章 <li>第二章 </ul> 定义列表： <dl> <dt>第一章 <dd>说明：第一章为自学内容，请认真学习 <dt>第二章 <dd>说明：第二章为授课内容，请提前做好预习 </dl> </body> </html> 示例：

6、字符格式化标记 在Web页面中，可以使用<font>……</font>标记来格式化文本，使浏览器按照指定的字体类型、字号大小及字体颜色来显示文本。它的语法格式为：

示例： <html> <body> <font face=楷体_gb2312 size=8> <b> 对《清平调》的评论 </b> </font> <p>诗人采用<i>云、花、露、玉山、瑶台、月色</i>，一色素淡字眼，赞美了<u>贵妃</u>的丰满姿容，却不露痕迹。 </body> </html>

7、图像标记 在网页中加入丰富多彩的图片，可以增强页面的吸引力。目前，在Internet中较为流行的图片格式是GIF（动态压缩文件）和JPG（有损压缩文件），由于两种格式的文件所占用空间少，现已广泛应用。那么，如何在Web页面上插入图像呢？可使用图像标记IMG，它的语法结构为： <img src=”图像地址”[alt=”文字说明”| align=”对齐方式”| border=”边框值”]>

8、超链接标记 一个超链接大致由两部分组成: 一部分是被指向的目标，它可以是同一HTML文档中的另一部分，也可以是硬盘上的文件，甚至可以是其他任何一个站点的某个文件. 另一部分是指向目标的链接主体，可以是文本，也可以是图片，甚至是图片的一部分。 <a href="链接目标的地址" [name="创建锚的名称" | target="打开窗口的方式" ]>链接主体</a>

9、表格标记 在编写Web页面时，能应用表格无疑可增加管理的灵活性，且可使页面整齐美观。但表格元素过多，写起来较麻烦，所以人们也常使用网页编辑软件（如FrontPage、Dreamweaver）来完成。通常将表格分解成以下5部分。

示例： <html> <body>  <table> <caption>成绩表</caption> <tr> <th>姓名</th> <th>政治</th> <th>英语</th> </tr> <tr> <td>张三</td> <td>85分</td> <td>92分</td> </tr> <tr> <td>李四</td> <td>78分</td> <td>85分</td> </tr> </table> <hr>

四、HTML特殊标记 1、表单标记表单标记与动态网站设计分不开，凡是要求用户输入的信息基本上都由表单实现。表单作用: 从客户端浏览器收集信息，并将所收集的信息指定一个处理程序。可以为ASP的程序，也可为其他的如JSP、PHP等程序。表单的使用是制作动态网站的基础。是与用户进行信息交流的主要方式，细分成以下两块： <form name="名字" method="方式" action="文件"> 插入相应的表单域标记 </form>

表单标记可提供让浏览者输入文字信息，如姓名、密码、留言等。根据输入方式不同，又分为三类。表单标记可提供让浏览者输入文字信息，如姓名、密码、留言等。根据输入方式不同，又分为三类。（1）单行文本域其语法格式为： <input type="text" value="设置的初始值" name="文本域的名称"> （2）密码文本域其语法格式为： <input type="password" value="设置的初始值" name="文本域的名称"> （3）多行文本域与单行文本框的区别在于多行文本框可以指定文本框的宽度和高度。其语法格式为： <textarea cols="文本框的宽度" rows="文本框的高度" name="文本域的名称"> </textarea>

提供让浏览者在固定的范围内作出选择，如性别、爱好等。根据输入方式不同，分为两类：提供让浏览者在固定的范围内作出选择，如性别、爱好等。根据输入方式不同，分为两类：（1）单选域其语法格式为： <input type="radio" name="选择域的名称"> （2）复选域其语法格式为： <input type="checkbox" name="选择域的名称"> 提供让浏览者将所有输入的内容采取的一个响应动作，如提交给服务器处理，还是将该输入的内容清除后再重填。（1）提交按钮，把输入的内容提交给相关程序，让服务器处理。其语法格式为： <input type="submit" value="确定" name="按钮域的名称"> （2）重置按钮，把刚输入的内容清除，再由用户重新输入。其语法格式为： <input type="reset" value="重置" name="按钮域的名称">

提供让浏览者在给出的菜单中作一个选择，如选择籍贯、类别等。根据提供的方式不同，又分为以下两类。提供让浏览者在给出的菜单中作一个选择，如选择籍贯、类别等。根据提供的方式不同，又分为以下两类。（1）下拉菜单，提供一个下拉式菜单（例：）。其语法格式为： <select name="菜单的名称"> <option>菜单中的第1个值 <option>菜单中的第2个值 <option>菜单中的第N个值 </select> （2）滚动菜单，提供一个带有滚动条的菜单（例：）。其语法格式为： <select name="菜单的名称" multiple size="确定显示选择项的个数"> <option>菜单中的第1个值 <option>菜单中的第2个值 <option>菜单中的第N个值 </select>

<html> <body> <form action="abc.asp" method="post" name="f1"> <p> <font color="#0000FF" size="5" face="黑体">请填写如下个人信息：</font></p> <p> 　姓　名： <input name="t1" type="text" size="12"> </p> <p>　性　别： <input type="radio" name="r1">男 <input type="radio" name="r1">女 </p> <p>出生年月： <input name="t2" type="text" value="1983-03-09" size="12"> </p> <p>所在城市： <select multiple size=1 name="s1"> <option>北京</option> <option>天津</option> <option>长沙</option> </select> </p> <p>个人爱好： <input type="checkbox" name="c1">看书 <input type="checkbox" name="c2">打球 <input type="checkbox" name="c3">看电视 <input type="checkbox" name="c4">泡网吧 </p> <p>个人简介： <textarea name="t3"></textarea> </p> <p> <input name="s1" type="submit" value="确定"> <input name="s2" type="reset" value="重写"> </p> </form> </body> </html> 表单示例：

2、框架标记 框架将浏览器窗口分成多个区域，每个区域可以单独显示一个HTML文件。比如可以将索引放在一个区域，文件内容显示在另一个区域。框架由<frameset>指定，允许层次嵌套，各栏显示的页面用<frame>指定。 <frameset [rows | cols]= "……" ] …… <frame src="待链接的文件名"> …… </frameset>

3、其他标记 （1）会滚动的字标记，设置字按固定格式滚动。它的语法结构为： <marquee>滚动的字</marquee> 其属性有以下几种。 · 方向（direction）：left左、right右、up上、down下。 · 方式（behavior）：alternate来回走、slide走一圈。 · 速度（scrollamount）：值越大速度越快。如：<marquee direction="up" behavior="alternate" scrollamount="4"> 这些字在走呀 </marquee> （2）样式标记，保留给将来的格式表单。IE一起使用的另一类元素，常用此元素来定义其级联格式表单。它的语法结构为： <style>……</style> 如：<style type="text/css"> 指告诉浏览器要使用的样式表格式（此处可用类型为“text/css”）。该标记的使用一般放在<head>……</head>间，以使其能够被大多数的浏览器解释。

设置一个包含图文混排、无序及有序列表、表格及超链接在内的网页文件设置一个包含图文混排、无序及有序列表、表格及超链接在内的网页文件 • 试述表单的作用 • 在制作一个“信息反馈表”网页时，用到“用户名、口令、意见”3个文本域，请问应分别设计何种格式的文本域？ • 编写一个表单页面，内容为有关用户的个人资料注册，并编写表单处理程序111.asp,处理方式为POST,内容为输出一句话:”你好,欢迎你!”

理解 HTML 语言与高级语言（如 VB 、 C 等）的区别；熟知网页常用标记及属性，如标题、字体、段落、图像、超链接、表格等；