Embed Size (px)
DESCRIPTION
第 2 章 ASP 框架语言 —— HTML. 重点内容： HTML 语言结构 HTML 非正文标记 HTML 正文标记 HTML 特殊标记. 一、 HTML 语言结构. - PowerPoint PPT Presentation
Citation preview
——ASP——
重点内容： HTML 语言结构 HTML 非正文标记 HTML 正文标记 HTML 特殊标记
第第 22 章 章 ASPASP 框架语言——框架语言—— HTHTML ML
——ASP——
一、一、 HTMLHTML 语言结语言结构 构 HTML 是一种超文本标记语言，是标准的 ASCII 文本文件。从本质上说，一个 HTML 文件就是添加了许多标识性字符串——HTML 标记（ tag ）的普通文本文件。从结构上讲， HTML 文件由各种标记元素（ elements ）组成，每个标记由“ < >”包含起来，且大部分成对出现。例如<title> 是一个开始标记，在其前面加一斜杠后，即 </title> 就构成了它的结束标记。 HTML 网页就是由内容及标记组成的页面。
——ASP——
二、二、 HTMLHTML 非正文标非正文标记 记 HTML 文档的开始标记是 <html> ，它告诉浏览器下面的内容是 HTML文档，同时在 HTML 文档结束处要有对应的 </html> ，它告诉浏览器 HTML 文档结束了。其作用在于指明 HTML 文档的开始和结束。所有其他标记都必须置于 HTML 标记中间，否则客户浏览器将忽略不在其间的标记。因此用 <html> 开始 Web 页面，以 </html> 结束。
11 、开始和结束标、开始和结束标记 记
——ASP——
<html><head><!-- 以下设置密码为 123456 --><script language="vbscript">dim s s="" do while s<>"123456" s=prompt(" 请输入密码： ") loop</script></head></html>
二、二、 HTMLHTML 非正文标非正文标记 记 HTML 文档的头部标记是 <head>……</head> ，其作用在于初始化文档的信息。虽然在其间编写的内容不会显示在浏览器的窗口中，但它的功能主要表现如下。
22 、头部标记 、头部标记
示例：循环密示例：循环密码登录程序码登录程序
——ASP——
二、二、 HTMLHTML 非正文标非正文标记 记 HTML 文档的主体标记是 <body>……</body> ，是 HTML 文档最核心的部分。 Web 页面的主要内容都放在这里。即使在这里只输入几个字，而不加入任何正文标记修饰，其输入的字也会原样显示在浏览器的窗口中。
33 、主体标记 、主体标记
<body [Background=# | Bgcolor=# | Text =# | Link =# | Alink=# | Vlink =# | Leftmargin =# | Topmargin =# ]>……</body>
语法格式 ：语法格式 ：
——ASP——
三、三、 HTMLHTML 正文标正文标记 记 标题字体通过 <Hx>…</Hx> 标记实现，夹在 <Hx> 和 </Hx> 中间的文字为加黑、加大显示。标题元素共有 6种，分别为 h1， h2 ，…， h6 ，用于表示文档中的各级标题。标题号 x越小，则表示的标题字体就越大。默认情况下，浏览器对各级标题做如下解释。
11 、标题字体标记 、标题字体标记
<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>
——ASP——
三、三、 HTMLHTML 正文标正文标记 记 在 HTML 文件中为了排版整洁、表述清楚，正文信息通常需要被分成多个段或多行，所以需要用到段落标记 <p > 、换行标记 < br > 。 <p> 表示新的一段开始，不同段之间将产生一空白行。 <br> 表示新的一行开始，与换段标记区别是，将不会产生空白行。
22 、段落标记与换行标记 、段落标记与换行标记
<html><body> 这首《清平调》诗，以牡丹花比贵妃的美艳。（加换段标记） <p> 首句以云霞比衣服，以花比容貌；二句写花受春风露华润泽，犹如妃子受君王宠幸；三句以仙女比贵妃；四句以嫦娥比贵妃。（加换行标记） <br> 这样反复作比，塑造了艳丽有如牡丹的美人形象。 </body></html>
示例 ：示例 ：
——ASP——
三、三、 HTMLHTML 正文标正文标记 记 由于浏览器不会识别普通文本段中的缩进部分和空白，当使用格式化文本的方法时，不能使浏览器按照所指定的格式显示文本。这时就要使用预格式化文本标记 <pre>……</pre> ，控制其按原输入模式显示在浏览器上，并且此时显示的内容不会因浏览器窗口的调整而自动换行。
33 、预格式化文本标、预格式化文本标记 记
<html> <body><pre>《清平调》诗共有三首，是 李白 在长安为翰林时所作。有一次，唐明皇与杨贵妃在沉香亭观赏牡丹，因命李白作新乐章，李白奉旨作了三章。 </pre></body></html>
示例 ：示例 ：
——ASP——
三、三、 HTMLHTML 正文标正文标记 记 使用水平线标记 <hr>可以在 Web 页面中插入一条横向水平线。参数 size可以定义横线的厚度， align可设置横线的对齐方式（ Left 、Righ 、 Center ）， width可设置横线的宽度， noshade 用于设置水平线为实心线（默认情况下为阴影线）
44 、水平线标、水平线标记 记
<Hr [size=# | align=# | width=# | noshade ]>
示例 ：示例 ：<html> <body> 第一条水平线，厚度为 5 个像素。 <hr size=5> 第二条水平线，宽度为 200 个像素，对齐方式为左对齐。 <hr width=200 align=left> 第三条水平线，为实心线，厚度为 10 个像素。 <hr size=10 noshade> </body></html>
——ASP——
三、三、 HTMLHTML 正文标正文标记 记 为了使文章条理清晰，通常将文本作为列表上的一个项目来显示。常用的列表有 3种即有序列表、无序列表和定义列表，每种列表均由列表起止标记和列表条目标记共同构成。输出时每一列表条目缩进，并且以不同的项目符号表示。
55 、列表标、列表标记 记
——ASP——
三、三、 HTMLHTML 正文标正文标记 记
55 、列表标、列表标记 记
示例 ：示例 ：<html><body>有序列表： <ol> <li> 第一章 <li> 第二章 </ol>无序列表： <ul> <li> 第一章 <li> 第二章 </ul>定义列表： <dl> <dt> 第一章 <dd> 说明：第一章为自学内容，请认真学习 <dt> 第二章 <dd> 说明：第二章为授课内容，请提前做好预习 </dl></body></html>
——ASP——
三、三、 HTMLHTML 正文标正文标记 记 在 Web 页面中，可以使用 <font>……</font> 标记来格式化文本，使浏览器按照指定的字体类型、字号大小及字体颜色来显示文本。它的语法格式为：
66 、字符格式化标记 、字符格式化标记
<font [face=# | size=# | color =# >……</font>
——ASP——
示例 ：示例 ：<html><body> <font face= 楷体 _gb2312 size=8> <b> 对《清平调》的评论 </b> </font> <p> 诗人采用 <i> 云、花、露、玉山、瑶台、月色 </i> ，一色素淡字眼，赞美了 <u> 贵妃 </u> 的丰满姿容，却不露痕迹。</body></html>
三、三、 HTMLHTML 正文标正文标记 记
66 、字符格式化标记 、字符格式化标记
——ASP——
三、三、 HTMLHTML 正文标正文标记 记 在网页中加入丰富多彩的图片，可以增强页面的吸引力。目前，在Internet 中较为流行的图片格式是 GIF（动态压缩文件）和 JPG（有损压缩文件），由于两种格式的文件所占用空间少，现已广泛应用。那么，如何在 Web 页面上插入图像呢？可使用图像标记 IMG，它的语法结构为：
77 、图像标、图像标记 记
<img src=” 图像地址” [alt=” 文字说明” | align=” 对齐方式” | border=” 边框值” ]>
——ASP——
三、三、 HTMLHTML 正文标正文标记 记 使用超链接标记可以在某个页面上访问其他任何一个文件，使顺序存放的文件具有一定程度上随机访问的能力。超链接的组织体现了一个Web站点的页面（文件）存储的逻辑关系，在浏览器中显示出非常好的层次关系。一个超链接大致由两部分组成。一部分是被指向的目标，它可以是同一 HTML 文档中的另一部分，也可以是硬盘上的文件，甚至可以是其他任何一个站点的某个文件；另一部分是指向目标的链接主体，可以是文本，也可以是图片，甚至是图片的一部分。
88 、超链接标记 、超链接标记
<a href=" 链接目标的地址 " [name=" 创建锚的名称 " | target="打开窗口的方式 " ]> 链接主体 </a>
——ASP——
三、三、 HTMLHTML 正文标正文标记 记 在编写 Web 页面时，能应用表格无疑可增加管理的灵活性，且可使页面整齐美观。但表格元素过多，写起来较麻烦，所以人们也常使用网页编辑软件（如 FrontPage 、 Dreamweaver ）来完成。通常将表格分解成以下 5部分。
99 、表格标记 、表格标记
<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>
——ASP——
四、四、 HTMLHTML 特殊标特殊标记 记 表单标记与动态网站设计是分不开的，现在上网凡是要求用户输入信息的基本上都由表单实现。表单的最直接的作用就是它可以从客户端浏览器收集信息，并将所收集的信息指定一个处理的方法。此处理方法可以为 ASP的程序，也可为其他的如 JSP、 PHP 等程序。因此掌握好表单的使用是制作动态网站的基础，也是至关重要的一步。表单是实现与用户进行信息交流的主要方式，它可以细分成以下两块。
11 、表单标、表单标记 记
<form name=" 名字 " method=" 方式 " action=" 文件 "> 插入相应的表单域标记</form>
——ASP——
四、四、 HTMLHTML 特殊标特殊标记 记 表单标记可提供让浏览者输入文字信息，如姓名、密码、留言等。根据输入方式不同，又分为三类。（ 1） 单行文本域，用户输入的信息会原样显示。其语法格式为：<input type="text" value=" 设置的初始值 " name=" 文本域的名称 "> （ 2 ） 密码文本域，用户输入的信息会以“ *”形式显示。其语法格式为：<input type="password" value=" 设置的初始值 " name=" 文本域的名称 "> （ 3） 多行文本域，用户输入的信息会原样显示。与单行文本框的区别在于，多行文本框可以指定文本框的宽度和高度。其语法格式为： <textarea cols=" 文本框的宽度 " rows=" 文本框的高度 " name=" 文本域的名称 "></textarea>
11 、表单标、表单标记 记
——ASP——
四、四、 HTMLHTML 特殊标特殊标记 记 表单标记可提供让浏览者在固定的范围内作出选择，如性别、爱好等。根据输入方式不同，又分为以下两类。（ 1） 单选域，只允许选取一项。其语法格式为：<input type="radio" name="选择域的名称 ">（ 2） 复选域，可多项选取。其语法格式为：<input type="checkbox" name="选择域的名称 ">
11 、表单标、表单标记 记
表单标记可提供让浏览者将所有输入的内容采取的一个响应动作，如提交给服务器处理，还是将该输入的内容清除后再重填。（ 1 ） 提交按钮，把输入的内容提交给相关程序，让服务器处理。其语法格式为：<input type="submit" value="确定 " name="按钮域的名称 ">（ 2 ） 重置按钮，把刚输入的内容清除，再由用户重新输入。其语法格式为：<input type="reset" value="重置 " name="按钮域的名称 ">
——ASP——
四、四、 HTMLHTML 特殊标特殊标记 记 表单标记可提供让浏览者在给出的菜单中作一个选择，如选择籍贯、类别等。根据提供的方式不同，又分为以下两类。（ 1） 下拉菜单，提供一个下拉式菜单（例：）。其语法格式为： <select name="菜单的名称 "><option>菜单中的第 1 个值<option>菜单中的第 2 个值<option>菜单中的第 N个值 </select> （ 2 ） 滚动菜单，提供一个带有滚动条的菜单（例：）。其语法格式为： <select name="菜单的名称 " multiple size="确定显示选择项的个数 "><option>菜单中的第 1 个值<option>菜单中的第 2 个值<option>菜单中的第 N个值 </select>
11 、表单标、表单标记 记
——ASP——
示例 ：示例 ： <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>
四、四、 HTMLHTML 特殊标特殊标记 记
11 、表单标、表单标记 记
——ASP——
四、四、 HTMLHTML 特殊标特殊标记 记 框架将浏览器的窗口分成多个区域，每个区域可以单独显示一个 HTML 文件，各个区域也可相关联地显示某一个内容。比如可以将索引放在一个区域，文件内容显示在另一个区域。在分配时可以将窗口横向或纵向分成多个部分，还可以混合框架。框架由 <frameset> 指定，允许层次嵌套，各栏显示的页面用 <frame> 指定。
22 、框架标、框架标记 记
<frameset [rows | cols]= "……" ] …… <frame src="待链接的文件名 "> ……</frameset>
——ASP——
四、四、 HTMLHTML 特殊标特殊标记 记 （ 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> 间，以使其能够被大多数的浏览器解释。
33 、其他标、其他标记 记
