重点内容： HTML 语言结构 HTML 非正文标记 HTML 正文标记 HTML 特殊标记

第2章 ASP框架语言——HTML • 重点内容： • HTML语言结构 • HTML非正文标记 • HTML正文标记 • HTML特殊标记

一、HTML语言结构 HTML是一种超文本标记语言，是标准的ASCII文本文件。从本质上说，一个HTML文件就是添加了许多标识性字符串——HTML标记（tag）的普通文本文件。从结构上讲，HTML文件由各种标记元素（elements）组成，每个标记由“< >”包含起来，且大部分成对出现。例如<title>是一个开始标记，在其前面加一斜杠后，即</title>就构成了它的结束标记。HTML网页就是由内容及标记组成的页面。

二、HTML非正文标记 1、开始和结束标记 HTML文档的开始标记是<html>，它告诉浏览器下面的内容是HTML文档，同时在HTML文档结束处要有对应的</html>，它告诉浏览器HTML文档结束了。其作用在于指明HTML文档的开始和结束。所有其他标记都必须置于HTML标记中间，否则客户浏览器将忽略不在其间的标记。因此用<html>开始Web页面，以</html>结束。

二、HTML非正文标记 2、头部标记 HTML文档的头部标记是<head>……</head>，其作用在于初始化文档的信息。虽然在其间编写的内容不会显示在浏览器的窗口中，但它的功能主要表现如下。示例：循环密码登录程序 <html> <head>  <script language="vbscript"> dim s s="" do while s<>"123456" s=prompt("请输入密码：") loop </script> </head> </html>

三、HTML正文标记 1、标题字体标记标题字体通过<Hx>…</Hx>标记实现，夹在<Hx>和</Hx>中间的文字为加黑、加大显示。标题元素共有6种，分别为h1，h2，…，h6，用于表示文档中的各级标题。标题号x越小，则表示的标题字体就越大。默认情况下，浏览器对各级标题做如下解释。语法格式： <Hx [align=#]> …… </Hx> <html> <head><title>不同的标题字体</title></head> <body> <h1>清平调</h1> <h2>李白</h2> <h3 align="left">云想衣裳花想容，</h3> <h4 align="right">春风拂槛露华浓。</h4> <h5 align="center">若非群玉山头见，</h5> <h6>会向瑶台月下逢。</h6> </body> </html>

三、HTML正文标记 2、段落标记与换行标记在HTML文件中为了排版整洁、表述清楚，正文信息通常需要被分成多个段或多行，所以需要用到段落标记<p >、换行标记< br >。<p>表示新的一段开始，不同段之间将产生一空白行。<br>表示新的一行开始，与换段标记区别是，将不会产生空白行。示例： <html> <body> 这首《清平调》诗，以牡丹花比贵妃的美艳。（加换段标记）<p>首句以云霞比衣服，以花比容貌；二句写花受春风露华润泽，犹如妃子受君王宠幸；三句以仙女比贵妃；四句以嫦娥比贵妃。（加换行标记）<br>这样反复作比，塑造了艳丽有如牡丹的美人形象。 </body> </html>

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

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

三、HTML正文标记 5、列表标记为了使文章条理清晰，通常将文本作为列表上的一个项目来显示。常用的列表有3种即有序列表、无序列表和定义列表，每种列表均由列表起止标记和列表条目标记共同构成。输出时每一列表条目缩进，并且以不同的项目符号表示。

三、HTML正文标记 5、列表标记示例： <html> <body> 有序列表： <ol> <li>第一章 <li>第二章 </ol> 无序列表： <ul> <li>第一章 <li>第二章 </ul> 定义列表： <dl> <dt>第一章 <dd>说明：第一章为自学内容，请认真学习 <dt>第二章 <dd>说明：第二章为授课内容，请提前做好预习 </dl> </body> </html>

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

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

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

三、HTML正文标记 8、超链接标记使用超链接标记可以在某个页面上访问其他任何一个文件，使顺序存放的文件具有一定程度上随机访问的能力。超链接的组织体现了一个Web站点的页面（文件）存储的逻辑关系，在浏览器中显示出非常好的层次关系。一个超链接大致由两部分组成。一部分是被指向的目标，它可以是同一HTML文档中的另一部分，也可以是硬盘上的文件，甚至可以是其他任何一个站点的某个文件；另一部分是指向目标的链接主体，可以是文本，也可以是图片，甚至是图片的一部分。 <a href="链接目标的地址" [name="创建锚的名称" | target="打开窗口的方式" ]>链接主体</a>

三、HTML正文标记 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>  <table border=3> <caption align=left>成绩表</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> </body> </html>

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

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

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

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

四、HTML特殊标记 1、表单标记示例： <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>

四、HTML特殊标记 2、框架标记框架将浏览器的窗口分成多个区域，每个区域可以单独显示一个HTML文件，各个区域也可相关联地显示某一个内容。比如可以将索引放在一个区域，文件内容显示在另一个区域。在分配时可以将窗口横向或纵向分成多个部分，还可以混合框架。框架由<frameset>指定，允许层次嵌套，各栏显示的页面用<frame>指定。 <frameset [rows | cols]= "……" ] …… <frame src="待链接的文件名"> …… </frameset>

四、HTML特殊标记 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>间，以使其能够被大多数的浏览器解释。

重点内容： HTML 语言结构 HTML 非正文标记 HTML 正文标记 HTML 特殊标记