HTML语言的简单使用

时间：2024.4.27

HTML语言的简单使用

下面主要讲述的就是HTML代码的一些简单使用： <! - - ... - -> 批注

跑马灯效果

<marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marquee behavior=scroll>...</marquee>预设卷动 <marquee behavior=alternate>...</marquee>来回卷动 <marquee direction=down>...</marquee>向下卷动 <marquee direction=up>...</marquee>向上卷动 <marquee direction=right></marquee>向右卷动 <marquee direction='left'></marquee>向左卷动 <marquee loop=2>...</marquee>卷动次数 <marquee width=180>...</marquee>设定宽度 <marquee height=30>...</marquee>设定高度 <marquee bgcolor=FF0000>...</marquee>设定背景颜色 <marquee scrollamount=30>...</marquee>设定卷动距离 <marquee scrolldelay=300>...</marquee>设定卷动时间字体效果

<h1>...</h1>标题字(最大 ) <h6>...</h6>标题字(最小) <b>...</b>粗体字 <strong>...</strong>粗体字(强调) <i>...</i>斜体字 <em>...</em>斜体字(强调) <dfn>...</dfn>斜体字(表示定义) <u>...</u>底线 <ins>...</ins>底线(表示插入文字) <strike>...</strike>横线 <s>...</s>删除线 <del>...</del>删除线(表示删除) <kbd>...</kbd>键盘文字 <tt>...</tt> 打字体 <xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)

<plaintext>...</plaintext>固定宽度字体(不执行标记符号)

<listing>...</listing> 固定宽度小字体 <font color=00ff00>...</font>字体颜色 <font size=1>...</font>最小字体 <font style ='font-size:100 px'>...</font>无限增大 <FONT FACE> 任意指定所用的字形 <BASEFONT SIZE> 更改预设字形大小 <BIG> 显示大字体 <BLINK> 闪烁的文字 <BR> 换行

区断标记

<hr>水平线 <hr size='9'>水平线(设定大小) <hr width='80%'>水平线(设定宽度) <hr color='ff0000'>水平线(设定颜色) <br>(换行) <nobr>...</nobr>水域(不换行) <p>...</p>水域(段落) <center>...</center>置中

连结格式

<base href=地址>(预设好连结路径) <a href=地址></a>外部连结 <a href=地址 target='_blank'></a>外部连结(另开新窗口) <a href=地址 target='_top'></a>外部连结(全窗口连结) <a href=地址 target='页框名'></a>外部连结(在指定页框连结) <A HREF TARGET> 指定超级链接的分割窗口 <A HREF=#锚的名称> 指定锚名称的超级链接

<A HREF> 指定超级链接

<A NAME=锚的名称> 被连结点的名称

<ADDRESS>....</ADDRESS> 用来显示电子邮箱地址

贴图/音乐

<img src=图片地址>贴图

<img src=图片地址 width='180'>设定图片宽度

<img src=图片地址 height='30'>设定图片高度

<img src=图片地址 alt='提示文字'>设定图片提示文字

<img src=图片地址' border='1'>设定图片边框

<bgsound src=MID音乐文件地址>背景音乐设定

表格语法

<table align=left>...</table>表格位置,置左

<table align=center>...</table>表格位置,置中

<table background=图片路径>...</table>背景图片的URL=就是路径网址

<table border=边框大小>...</table>设定表格边框大小(使用数字) <table bgcolor=颜色码>...</table>设定表格的背景颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclordark=颜色码>...</table>设定表格暗边框的颜色 <table borderclorlight=颜色码>...</table>设定表格亮边框的颜色 <table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)

<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)

<table cols=参数>...</table>指定表格的栏数

<table frame=参数>...</table>设定表格外框线的显示方式

<table width=宽度>...</table>指定表格的宽度大小(使用数字) <table height=高度>...</table>指定表格的高度大小(使用数字) <td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字) <td rowspan=参数>...</td>指定储存格合并列的列数(使用数字) <CAPTION>...</CAPTION> 为表格加上标题 <TABLE BORDER=n> 调整表格的宽线高度 <TABLE CELLPADDING> 调整数据域位之边界 <TABLE CELLSPACING> 调整表格线的宽度 <TABLE HEIGHT> 调整表格的高度 <TABLE WIDTH> 调整表格的宽度 <TABLE>...</TABLE> 产生表格的卷标 <TD ALIGN> 调整表格字段之左右对齐 <TD BGCOLOR> 设定表格字段之背景颜色 <TD COLSPAN ROWSPAN> 表格字段的合并 <TD NOWRAP> 设定表格字段不换行 <TD VALIGN> 调整表格字段之上下对齐 <TD WIDTH> 调整表格字段宽度 <TD>...</TD> 定义表格的数据域位

分割窗口

<frameset cols=\"20%,*\">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整

<frameset rows=\"20%,*\">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整

<frameset cols=\"20%,*\">分割左右两个框架

<frameset cols=\"20%,*,20%\">分割左中右三个框架

<frameset rows=\"20%,*,20%\">分割上中下三个框架

<FRAME MARGINHEIGHT> 设定窗口的上下边界

<FRAME MARGINWIDTH> 设定窗口的左右边界

<FRAME NAME> 为分割窗口命名 <FRAME NORESIZE> 锁住分割窗口的大小 <FRAME SCROLLING> 设定分割窗口的滚动条 <FRAME SRC> 将HTML文件加入窗口 <FRAMESET COLS> 将窗口分割成左右的子窗口 <FRAMESET ROWS> 将窗口分割成上下的子窗口 <FRAMESET>...</FRAMESET> 划分分割窗口 <CAPTION ALIGN> 设定表格标题位置 <CENTER> 向中对齐 <CITE>...<CITE> 用于引经据典的文字 <CODE>...</CODE> 用于列出一段程序代码 <COMMENT>...</COMMENT> 加上批注 <DD> 设定定义列表的项目解说 <DFN>...</DFN> 显示\"定义\"文字 <DIR>...</DIR> 列表文字卷标 <DL>...</DL> 设定定义列表的卷标 <DT> 设定定义列表的项目 <EM> 强调之用相关资料所谓代码优化是指对程序代码进行等价（指不改变程序的运行结果）变换。程序代码可以是中间代码(如四元式代码)，也可以是目标代码。等价的含义是使得变换后的代码运行结果与变换前代码运行结果相同。优化的含义是最终生成的目标代码短(运行时间更短、占用空间更小)，时空效率优化。原则上，优化可以再编译的各个阶段进行，但最主要的一类是对中间代码进行优化，这类优化不依赖于具体的计算机。

编译过程中可进行的优化可按阶段划分：优化可在编译的不同阶段进行，分为中间代码一级和目标代码一级的优化。可按优化涉及的程序范围划分：对同一阶段，分为局部优化,循环优化和全局优化. 进行优化所需要

的基础是对代码进行数据流分析和控制流分析。如划分DAG，查找循环，分析变量的定值点和引用点等等。最常用的代码优化技术有删除多余运算，循环不变代码外提，强度削弱，变换循环控制条件，合并已知量与复写传播，以及删除无用赋值等等。

第二篇：第三章_使用HTML语言编写网页

第三章使用HTML编写网页?

3.1 简单HTML文件的编写

Html是Hyper Text Markup Language 的缩写，即“超文本标志语言”，由标记、字母和文字组成，用它编写的文件的扩展名是.html或.htm。可以使用记事本、写字板或FrontPage 等来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用<标志名></标志名>来表示标志的开始和结束(例如

<html></html>标志对)，因此在Html文档中这样的标志对都通常是成对使用的。

3.1.1标题与头部标记

<html>标志用于Html文档的最前边，用来标识Html文档的开始。而</html>标志恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，两个标志必须一块使用。<head></head>

<head>和</head>构成Html文档的头部分，在此标志对之间可以使用<title></title>、<script></script>等标志对，这些标志对都是描述Html文档相关信息的标志对。两个标志必须一块使用。

例3-1.htm

<HTML>

<head>

<title> Web页面的标题</title>Web页面的标题和头部标记练习</head>

</HTML>

3.1.2 主体标记

<body></body>是Html文档的主体部分，在此标志对之间可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。

例3-2.htm

<HTML>

<head>

<title> Web页面的标题</title></head>

<body>

这是使用HTML语言编写的Web页面文件</body>

</HTML>

3.1.3设定Web页面背景与文本颜色<body>标志中还可以有以下属性：

设置背景颜色。<body bgcolor=―red‖>红色背景

设置文本颜色。<body text=―#0000ff‖>蓝色文本

设置链接颜色。<body link=―blue‖>链接为蓝色

设置已使用的链接的颜色。<body vlink="#ff0000">

设置正在被击中的链接的颜色。<body alink="yellow">

说明:以上各个属性可以结合使用，如<body bgcolor="red" text="#0000ff">。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色，如#ff0000对应的是红色。此外，还可以使用Html语言所给定的常量名来表示颜色：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal，如<body text="Blue">表示<body></body>标志对中的文本使用蓝色显示在浏览器的框内。

例3-3.htm

<HTML>

<head>

<title> Web页面的标题</title>这是头部里的文字

</head>

这是主体里的文字并加入文字和背景颜色编写的Web页面文件

</body>

</HTML>

3.1.4说明信息标记<meta>

如：<meta http-equvi=―content –Type‖

content=―text/html;charset=#‖>

其中，属性http-equvi描述特征名，content描述特征值，常用的#等于x-mac=roman、gb2312、gb_2312_80、big5等。<meta>也用来描述文档自身信息，如作者、过期时间等<meta http-equvi=―作者”content=―张驰”>

3.1.5 注释标记

注释标记”<!‖ 与”>‖或“<!—‖与”-->―

第三章使用HTML语言编写网页

之间的内容不会被浏览器显示出来。

3.2 使用不同的文本格式

3.2.1标题字体标记

Html语言提供了一系列对文本中的标题进行操作的标志对：<h1></h1>……<h6></h6>，即一共有六对标题的标志对。<h1></h1>是最大的标题，而<h6></h6>则是最小的标题，也即是标志中h 后面的数字越大标题文本就越小。

例3-4.htm

<HTML>

</body>

</HTML>

例3-5.htm

<HTML>

<body>不同的标题字体

</HTML>

注：<h>具有位置align属性

3.2.2字体大小标记<font></font>

<font></font>是一对很有用的标志对，它可以对输出文本的字体、大小、颜色进行随意地改变，这些改变主要是通过对它的属性face、size 和color 的控制来实现的。Face属性用来设置文字的字体类型；size属性用来改变文字的大小；而color属性则用来改变文本的颜色，颜色的取值是我们在上一节讲过的十六进制RGB颜色码或Html语言给定的颜色常量名。

例3-6.htm

<HTML>

<body>

</HTML>

3.2.3 段落标记<p></p>与换行标记<br>

<p></p>标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外，<p>标志还可以使用align属性，它用来说明对齐方式，语法是：<p align=―‖></p>。align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。如<p align=―Center‖></p>表示标志对中的文本使用居中的对齐方式。

<br>是一个很简单的标志，它没有结束标志，因为它用来创建一个回车换行。

例3-7.htm

<HTML>

<body>

在HTML格式里我们不需要在意文章每行的宽度，不必担心文字是不是太长了而被截掉；（未加段落标记）

<P>（加段落标记）它会根据窗口的宽度做自动转折（加换行标记）<br>到下一行的工作。

在HTML格式里我们不需要在意文章每行的宽度，不必担心文字

</P>

</body>

</HTML>

3.2.4 水平线标记<hr>

<hr>标志是在Html文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平线的厚度，而width是设定水平线的宽度，默认单位是像素。想必大家对color属性已经很熟悉了，在此就不再多讲。noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线(不加入此属性水平线将有阴影)。

例3-8.htm

<HTML>

<body>

<br>

插入水平线<hr ><br >

插入水平线<hr size=2 align=left width=75%>插入水平线<hr size=6 align=center width=50%>插入水平线<hr size=8 align=right width=50% noshade>

</body>

</HTML>

3.2.5字符格式化标记

强调用<i> <em> ，黑体字用<b>或<strong>下划线用<u>

打字机风格的文本用<tt>

标记HTML指令用<code>

标记定义的语句用<dfn>

标记键盘字符用<kbd>

标记某个命令的例子用<samp>

标记程序变量用<var>

注：这些标记要成对出现。

例3-9.htm

<HTML>

<body>

<b>黑体</b><strong>(黑体)</strong><br><tt>打字机字体</tt><var>程序变量

xyz</var><br>

<code>HTML指令</code><samp>例1</samp><kbd>使用键盘字符时a%#@!()&*</kbd></body>

</HTML>

3.2.6原样显示标记<pre>

<pre></pre>标志对用来对文本进行预处理操作,按文本的原样显示，即不将多余的空白字符去掉。例3-10.htm

<HTML>

<head><title> Web页面制作</title></head>

<body>

<pre>

看看

是怎样使文本保持原有模样的！

#!/bin/csh cd$SCR×* cfsgetmysrc.f:mycfsdir/mysrc.ffc-02-omya.outmysrc.f mya.out

</pre>

</body></HTML>

3.3 超链接标记<a></a>

3.3.1链接到本机另一WEB页面把文件名和路径赋给href属性就行了。<a href=―filename.html‖>链接到的地方</a>

3.3.2 链接到另外一台机器上的WEB页面把目的地的URL地址赋给href就行了。

3.3.3 链接到同一文章的另一个段落

<a name=""></a>标志对要结合<a href=""></a>标志对使用才有效果。<a name=""></a>标志对用来在Html文档中创建一个标签(即做一个记号)，属性name是不可缺少的，它的值也即是标签名，例如：

<a name="标签名">此处创建了一个标签</a>

创建标签是为了在Html文档中创建一些链接，以便能够找到同一文档中的有标签的地方。要找到标签所在地，就必须使用<a href=""></a>标志对。例如要找到“标签名”这个标签，就要编写如下代码：

<a href="#标签名">点击此处将使浏览器跳到“标签名”处</a>

注意：href属性赋的值若是标签的名字，必须在标签名前边加一个“#‖号。

例3-15.htm

<HTML>

<head>

<title> Web页面制作</title>

</head>

<body>

<A name="第一章">第一章</A>为"锚"标记。<p>可以在一篇文章内随心所欲地链接。<br>链接的目标地，<br>

锚"的链接与平常相同。</p>

<A href="#第一章">从这里可链接到第一章</A></body>

</HTML>

3.3.4链接到不同web文件的锚位置

例3-16.htm

<HTML>

<head>

<title> Web页面制作</title>

</head>

<body>

<A href="3-15.htm#第一章">在这里点一下</A>就会跳到3-15.htm文章的"第一章"这个位置。</body>

第三章使用HTML语言编写网页

</HTML>

3.4 在网页上加入图像、音频和视频

3.4.1图像标记

<img>标志并不是真正地把图像给加入到Html文档中，而是将标志对的src属性赋值，这个值是图形文件的文件名，当然包括路径，这个路径可以是相对路径，也可以是网址。实际上就是通过路径将图形文件嵌入到你的文档中。所谓相对路径是指你所要链接或嵌入到当前Html文档的文件与当前文件的相对位置所形成的路径。

Html文件与图形文件(文件名假设是logo.gif)在同一个目录下，则可以将代码写成

<img src=―logo.gif‖>；

假如图形文件放在当前的Html文档所在目录的一个子目录(子目录名假设是images)下，则代码应为

<img src=―images/logo.gif‖>；

假如图形文件放在当前的Html文档所在目录的上层目录(目录名假设是home)下，则相对路径就必须是准网址了，即用“../‖表示网站，然后在后边紧跟文件在网站中的路径，假设home是网站下的一个目录，则代码应为

<img src=―../home/logo.gif‖>，

若home是网站下的目录king下边的一个子目录，则代码应该变为

强调一下，src属性在<img>标志中是必须赋值的，是标志中不可缺少的一部分。除此之外，<img>标志还有alt、align、border、width和height属性。align是图像的对齐方式，在前边已经讲了很多了，这里就不再提了。border属性是图像的边框，可以取大于或者等于0的整数，默认单位是像素。width和Height属性是图像的宽和高，默认单位也是象素。alt属性是当鼠标移动到图像上时显示的文本。

3.4.2加入音频和视频

只要把href指定的URL写上相应的音频文件名就可以了。

例如：

＜a href=―yy.mid‖>在这里欣赏音乐</a>视频的加入和音频类似：

<a href=―test.mpeg‖>在这里欣赏视频</a>

例3-17.htm

<HTML>

<head>

<title> Web页面制作</title>

</head>

<body>

<img src=3.gif align=left alt=人物>插入一个图像<P><P><P>

加框并变小的图像<img src=2.gif border=2 height=165wdith=200 alt=鲜花>

<br><P><P><a href="1.gif">单击这里可以看到一个图像</a><P>

<P><P><P><A href="yy.mid">单击这里可以欣赏音乐</A></body>

第三章使用HTML语言编写网页

</HTML>

3.5 地址标记＜address>例3-19

<HTML>

</head>

<body>

</h6>

</h6><h6>

</h6><address>

地址：北方交通大学信息管理系<br>

电话：62256622－3643<br>

Email信箱：<A href=" mailto：ZHC@263.NET">ZHC@263.NET</A> </address></body></HTML>

3.6 其他标记

1、文字滚动<marquee></marquee>

2、闪烁的字标记＜blink></blink>

3、分区标记＜div></div>

4、块引用标记＜blockquote>＜/blockquote>

5、特殊字符的写法

＞＜＆分别以&lt、&gt、&amp输入＆ntilde对应±，&egrave对应《

例3-20

<html>

<body>

<marquee direction=left>从右向左滚动</marquee><HR>

<marquee direction=right>从左向右滚动</marquee><HR>

<marquee behavior=scroll>一圈一圈绕着滚动</marquee> <HR><marquee behavior=slide>只滚动一次就停了</marquee> <HR><marquee behavior=alternate>来回走滚动</marquee> <HR>

<marquee align=# width=400>滚动范围的宽度</marquee><HR></font><marquee bgcolor=aaaaee>滚动范围的背景颜色</marquee>

<marquee HEIGHt=40 width=50% bgcolor=aaeeaa>滚动范围的宽/高度</marquee>

<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>空白的模样</marquee>

</body></html>

3.7 框架与多窗口标记

1 <frameset></frameset>

<frameset></frameset>标志对放在帧的主文档的<body></body>标志对的外边，也可以嵌在其他帧文档中，并且可以嵌套使用。此标志对用来定义主文档中有几个帧并且各个帧是如何排列的。

它具有rows和cols属性，使用<frameset>标志时这两个属性至少必须选择一个，否则浏览器只显示第一个定义的帧，剩下的一概不管，<frameset></frameset>标志对也就没有起到任何作用了。rows用来规定主文档中各个帧的行定位，而cols用来规定主文档中各个帧的列定位。这两个属性的取值可以是百分数、绝对像素值或星号(―*‖)，其中星号代表那些未被说明的空间，如果同一个属性中出现多个星号则将剩下的未被说明的空间平均分配。同时，所有的帧按照cols和rows的值从左到右，然后从上到下排列。

示例如下：

<frameset rows="*,*,*">总共有三个按行排列的帧,每个帧占整个浏览器窗口的1/3

<frameset cols=―40%,*,*‖>总共有三个按列排列的帧,第一个帧占整个浏览器窗口的40%,剩下的空间平均分配给另外两个帧

<frameset rows="40%,*" cols="50%,*,200">总共有六个帧,先是在第一行中从左到右排列三个帧,然后在第二行中从左到右再排列三个帧,即两行三列,所占空间依据rows和cols属性的值,其中200的单位是像素

2.<frame>

<frame>标志放在<frameset></frameset>之间，用来定义某一个具体的帧。<frame>标志具有src和name属性，这两个属性都是必须赋值的。

src是此帧的源Html文件名(包括网络路径,即相对路径或网址)，浏览器将会在此帧中显示src指定的Html文件；

name是此帧的名字，这个名字是用来供超文本链接标志<a href=―‖ target=―‖>中的target属性用来指定链接的Html文件将显示在哪一个帧中。例如定义了一个帧，名字是main，在帧中显示的Html文件名是jc.htm，则代码是

<frame src=―jc.htm‖ name=―main‖>，如果有一个链接，在点击了这个链接后，文件new.htm将要显示在名为main的帧中，则代码为<a href="new.htm" target="main">需要链接的文本</a>。这样一来，就可以在一个帧中建立网站的目录，加入一系列链接，当点击链接以后在另一个帧中显示被链接的Html文件。

此外，<frame>标志还有scrolling、marginwidth 、marginheight和noresize 属性。

scrolling用来指定是否显示滚动轴，取值可以是

“yes‖(显示)、“no‖(不显示)或“auto‖(若需要则会自动显示,不需要则自动不显示)。

marginwidth 、marginheight分别用来控制当前帧左右边界处的空白与上下边界空白。其取值单位为像素。

noresize属性直接加入标志中即可使用，不需赋值，它用来禁止用户调整一个帧的大小。

3 <noframes>标记对

该标记对用来为不支持框架的浏览器提供替代内容。

例3-21.htm

<HTML>

</frameset>

第三章使用HTML语言编写网页

</HTML>

3.8 表单标记＜form></form>表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。一般是将表单设计在一个Html文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的ASP 或CGI 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html标志来设计表单。

<form></form>标志对用来创建一个表单，也即定义表单的开始和结束位置，在标志对之间的一切都属于表单的内容。<form>标志具有action、method和target等主要属性。

action的值是处理程序的程序名(包括网络路径:网址或相对路径)，如：

<form action="http://xld./counter.cgi">当用户提交表单时，服务器将执行网址

http://xld./上的名为counter.cgi的CGI程序。

method属性用来定义处理程序从表单中获得信息的方式，可取值为GET 和POST 的其中一个。

GET方式是处理程序从当前Html文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB以下。

POST方式与GET方式相反，它是当前的Html文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。

target属性用来指定表单反馈所显示的目标窗口或目标帧。

3.8.1 单行文本框

<input type=―‖>标志用来定义一个用户输入区，用户可在其中输入信息。此标志必须放在<form></form>标志对之间。

<input type=―‖>标志提供了text、password、radio、checkbox、submit、reset、file、hidden等八种类型的输入区域，具体是哪一种类型由type属性来决定。

type属性取值输入区域类型

输入区域示例

<input type="TEXT" size="" maxlength="">单行的文本输入区域,size与maxlength属性用来定义此种输入区域显示的尺寸大小与输入的最大字符数

例3-22.htm

<html>

<body>

<form>

这是一个文本框<input type="text" name=x1 size=15>

</form>

</body>

</html>

3.8.2显示初始值的多个文本框

文本区域name和value属性。

例3-23.htm

<html>

<body>

<form>

电话号码：<input type="text" Name=x1 value="010 62256622 3463"><br>

姓名：<input type="text" Name=x2 value="lp"><P>出生日期：<input type="text" Name=x3 value="1978.08.18"></P>

</form>

</body>

</html>

3.8.3 口令文本框

将＜input>的type改为password

例3-24.htm

<html>

<body>

<form>

口令：<input type="password" Name=x1 size=8 maxlengh=8>

</form>

</body>

</html>

3.8.4 多行文本窗口

<textarea></textarea>用来创建一个可以输入多行文本的文本窗口，此标志对用于<form></form>标志对之间。<textarea>具有name、cols和rows属性。cols和rows属性分别用来设置文本框的列数和行数，这里列与行是以字符数为单位的。

例3-25.htm：Html代码浏览器显示的结果。<html>

<body>

<form>

一个多行多列的文本框<P>

</form>

</body>

</html>

3.8.5提交及重置按钮

<input type="SUBMIT">将表单内容提交给服务器的按钮<input type="RESET">将表单内容全部清除,重新填写的按钮

3.8.6 单选框

在＜form>标签后加上<input type=―RADIO‖>表示单选按钮类型,checked属性用来设置该单选框缺省时是否被选中。

3.8.7 多选框

在＜form>标签后加上<input type=―CHECKBOX‖ checked>表示一个复选框,checked属性用来设置该复选框缺省时是否被选中。

3.8.8下拉菜单和滚动菜单

<select></select>标志对用来创建一个下拉列表框或可以复选的列表框。此标志对用于<form></form>标志对之间。

<select>具有multiple、name和size属性。multiple属性不用赋值，直接加入标志中即可使用，加入了此属性后列表框就成了可多选的了；

name是此列表框的名字，它与上边讲的name属性作用是一样的；

size属性用来设置列表的高度，缺省时值为1，若没有设置(加入)multiple属性，显示的将是一个弹出式的列表框。

<option>标志用来指定列表框中的一个选项，它放在<select></select>标志对之间。此标志具有selected和value属性，selected用来指定默认的选项，value属性用来给<option>指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用<select>区域的名字的value属性来获得该区域选中的数据项的。

例3-28.htm

<html>

<form action=―tongji.asp" method="post"><p>请选择最喜欢的男歌星:

<option value="ldh">刘德华

<option value="zhxy" selected>张学友<option value="gfch">郭富城

<option value="lm">黎明

</select></form>

<form action=" tongji.asp " method="post"><p >请选择最喜欢的女歌星:

<select align=top name="gx2" multiple size="4"><option value="zhmy">张曼玉

<option value="wf" selected>王菲

<option value="tzh">田震

<option value="ny">那英

</select>

</form></html>

3.9 使用地图标记<map>使用地图可以让用户在点击地图时，链接到相关的web页面。

<map>标记定义一个地图文件，必须带有name属性，其值是一个地图文件的惟一名称。

<area>标记定义图像的一部分区域为热区，可有任意个<area>标记项。属性shape表示热区形状，属性coords表示区域坐标。Shape=―default‖表示所有非热区区域。

例3-26.htm

<html>

</map></body>

第三章使用HTML语言编写网页

</html>

3.10 表格标记

3.10.1 <table></table>

<table></table>标志对用来创建一个表格。它有以下属性：<table bgcolor=―‖>设置表格的背景色。

<table border=―‖>设置边框的宽度，若不设置此属性，则边框宽度默认为0。

<table bordercolor=―‖>设置边框的颜色。

<table bordercolorlight=―‖>设置边框明亮部分的颜色(当border的值大于等于1时才有用)。

<table bordercolordark=―‖>设置边框昏暗部分的颜色(当border的值大于等于1时才有用)。

<table cellspacing=―‖>设置表格格子之间空间的大小。<table cellpadding=―‖>设置表格格子边框与其内部内容之间空间的大小。

<table width=―‖>设置表格的宽度，单位用绝对像素值或总宽度的百分比。

说明:以上各个属性可以结合使用。有关宽度、大小的单位用绝对像素值。

3.10.2 <tr></tr><td></td>

<tr></tr>标志对用来创建表格中的每一行。此标志对只能放在<table></table>标志对之间使用，而在此标志对之间单独加入文本将是无用的，因为在<tr></tr>之间只能紧跟<td></td>标志对才是有效的语法，<td></td>标志对用来创建表格中一行中的每一个格子，此标志对也只有放在<tr></tr>标志对之间才是有效的，您想要输入的文本也只有放在<td></td>标志对中才有效(即才能够显示出来)。<table></table>、<tr></tr>和<td></td>标志对的关系如下所示：

最外层,创建一个表格--><table>

创建一行-->

<tr>

创建一个格子(这里总共创建了三个格子)--><td>要输出的文本只能放在此处</td><td>要输出的文本只能放在此处</td><td>要输出的文本只能放在此处</td></tr>

最外层--></table>

此外，<tr>还有align和valign属性。

align是水平对齐方式，取值为left(左对齐)、center(居中)、right(右对齐)；

valign是垂直对齐方式，取值为top(靠顶端对齐)、middle(居中间对齐)或bottom(靠底部对齐)。

<td>具有width、colspan、rowspan和nowrap属性。width是格子的宽度，单位用绝对像素值或总宽度的百分比；

colspan设置一个表格格子跨占的列数(缺省值为1)；rowspan设置一个表格格子跨占的行数(缺省值为1)；nowrap禁止表格格子内的内容自动断行。

3.10.3 <th></th>

<th></th>标志对用来设置表格头，通常是黑体居中文字。

看一看下边的例子就明白以上标志对的用法了。

例3-27 表格标志的综合示例

<html>

<head>

<title>表格标志的综合示例</title>

</head>

<body>

<table border="1" width="80%" bgcolor="#E8E8E8" cellpadding="2" bordercolor="#0000FF"

bordercolorlight="#7D7DFF" bordercolordark="#0000A0"><tr>

</table>

</body></html>

3.11项目符号与编号

3.11.1 列表

列表用来创建军一些具有层次关系的项目。<dl></dl>用来创建一个普通的列表;<dt></dt>用来创建列表中的上层项目;<dd></dd>用来创建列表中最下层项目;

<dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。

例3-29.htm创建一个普通列表<html><head><title>一个普通列表</title></head><body text="blue"><dl><dt>中国城市</dt><dd>北京</dd><dd>上海</dd><dd>广州</dd><dt>美国城市</dt><dd>华盛顿</dd><dd>芝加哥</dd><dd>纽约</dd></dl></body></html>

2.11.2 有标志列表<ol></ol><ul></ul><li></li>

<ol></ol>标志对用来创建一个标有数字的列表；<ul></ul>标志对用来创建一个标有圆点的列表；

<li></li>标志对只能在<ol></ol>或<ul></ul>标志对之间使用，此标志对用来创建一个列表项，若<li></li>放在<ol></ol>之间则每个列表项加上一个数字，若在<ul></ul>之间则每个列表项加上一个圆点。

<ul>也可利用type参数取值“●”、“○”、“■”等指明项目符号。

<ol>也可利用type参数值“1‖、“a‖、“A‖、“I‖等指明顺序编号的编号方式

例3-30.htm标有数字或圆点的列表<html><head><title></title></head>

更多相关推荐：

简单实用的英文谚语: 1爱屋及乌Lovemelovemydog2百闻不如一见眼见为实Seeingisbelieving3比上不足比下有余worseoffthansomebetteroffthanmanytofallshortofth...
简单英语名言警句: 简单英语名言警句Wherethereisawillthereisaway有志者事竟成Wellbegunishalfdone好的开端是成功的一半Eastwesthomeisbest金窝银窝不如自己的草窝There...
简单50条英语名言警句(中英文对照): 简单50条英语名言警句中英文对照1Allthingsintheirbeingaregoodforsomething天生我才必有用2Difficultcircumstancesserveasatextbookof...
简单英语名言警句: 英语名言警句1Wherethereisawillthereisaway有志者事竟成2Wellbegunishalfdone好的开端是成功的一半3Eastwesthomeisbest金窝银窝不如自己的草窝4The...
简单英语名言警句: 简单英语名言警句20xx3112108提问者寂寞的記憶浏览次数20xx27次最少五句20xx3152104满意回答Wherethereisawillthereisaway有志者事竟成Wellbegunishal...
较简单且实用的英文谚语: Fearalwaysspringsfromignorance恐惧源于无知Foolsgrowwithoutwatering朽木不可雕Fool39shasteisnospeed欲速则不达Goodforgoodisn...
简单的英语谚语: 来源励志中国希望这篇简单的英语谚语的文章能让您有所收获喜欢就马上行动分享吧Hesitsnosurethatsitstoohigh高处不胜寒Hethatrespectsnotisnotrespected欲受人敬要...

简单的英文谚语: Afriendinneedisafriendindeed患难见真情Failureisthemotherofsuccess失败是成功之母It39snevertoolatetolearn活到老学到老Knowwled...
简单的英文谚语: 简单的英文谚语Failureisthemotherofsuccess失败是成功之母It39snevertoolatetolearn活到老学到老Knowwledgeispower知识就是力量Everydoghas...

关于英语学习的名言: 激励学习英语的吧名言1WhatislanguageforSomepeopleseemtothinkit39sforpracticinggrammarrulesandlearninglistsofwordsthe...

【名言警句-法律篇】_英语名言警句: 名言警句法律篇英语名言警句EverylawhasnoatomofstregthasfarasnopublicopinionsupportsitWendellphillipsAmericanleaderagain...
英语名言警句40句: IcanmakeitIcandoitIcansucceedDontbeshyjusttryTrytryneversaydieNothingisimpossibletoawillingheart心之所愿无事不成T...

热门关注