首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >网络安全攻击与防护--HTML学习

网络安全攻击与防护--HTML学习

作者头像
程序员小藕
发布2022-05-09 15:14:40
2.5K0
发布2022-05-09 15:14:40
举报
文章被收录于专栏:程序员小藕程序员小藕

第一节、 HTML基本语法(文末有对该文视频讲解)

  HTML的官方介绍什么的我就不说了,打字也挺累的,只简单介绍一下吧,其他的懂不懂都没关系。   HTML全称为Hypertext Markup Language,中文解释为超文本标记语言。   在HTML语言中,所有的标记都必须用尖括号(即大于号“<”和小于号“>”)括起来,一般情况下,每个标记单独占一行,

例1:(1.html)

 1 <html>
 2 <head>
 3 <title>百度红客吧</title>
 4 </head>
 5 <body>
 6 这是一个简单的<br>
 7 用HTML语言写的网页。
 8 <!--这里用br标记将一行的话强制分成了两行。-->
 9 </body>
10 </html>

  我们来看上面的代码,可以发现,所有的标记都是被包含在尖括号之间的,大部分的标记是成对出现的,

  比如<html>和</html>,<head>和</head>,我想朋友们应该可以看出来,这些标记有的只是单纯的英文字母,有的在这些相应的英文字母前加了一个斜杠“/”,我们称这些没有带有斜杠的标记为开始标记,带斜杠的标记为结束标记。

  开始标记和结束标记的唯一差别就是带不带斜杠。

  我们继续看上面的代码,发现其中的<br>标记只有一个,那么这个<br>标记,就是一个不是成对出现的标记,在后面的课程中,我们会介绍这个标记的用途的,如果你把上面的代码复制到了一个TXT文本里并把后缀名改为了.html,那么我想,你可能会明白这个<br>标记是什么意思了。 另外,需要说明的一点是,在HTML中,标记字母是不区分大小写的,即<html>和<HTML>是没有分别的,浏览器都认识。 还有一点,就是几乎所有的标记都有其对应的属性,如果将每个标记都比喻成一个美女的话,那么这些属性就是美女身上的衣服,起的都是点缀作用,但在实际应用中必不可少,就像美女的衣服同样必不可少一样。 这些标记的属性,都是放在对应标记的尖括号内的,比如: <body bgcolor=”teal”> 这行代码为我们的网页指定了一个背景颜色,至于这个颜色到底是什么颜色,请看红客吧的上传页面,那里我写的就是这个颜色。 记好,标记的属性一定要放在尖括号中才有用,就像美女的衣服一定要穿到身上才有用一样。 其实,我强烈反对浮躁的人去跟代码打交道,因为他们在写代码的时候通常会很急躁,急躁的脾性在编程界是走不通的。 但是,作为红客吧的吧主,肩负着振兴红客吧的使命,我会尽量把我的文章写的更简单一点,更容易理解一点,对于正在看这篇文章的朋友,嫖客谢谢你的支持。

第二节、HTML的基本结构

  我们再来看一下在第一节里写的那几行代码(1-1.html),不难发现,我在代码的开头,用了一个<html>标记,在代码的结尾,用了一个</html>标记,我把这对标记成为超文本文档标记,写这对标记的意思就是告诉浏览器,“你现在解析的是一个网页”。 这个标记,不是必须的,也就是说,可以省略掉,你在写网页的时候可以不写这对代码,一般情况下,浏览器照样可以正常解析,但是,为了保持你的代码的完整性,也为了让我们养成良好的编程习惯,最好是不要省略掉这对标记的。

  其中,<html>标记是一个网页代码的开始标记,即一般地,每个HTML网页都是以<html>开始的,在网页的最后,以</html>结束。 我们在学习HTML时,我提醒一下朋友们,当你写完一个网页的全部代码后,执行时却发现代码出错,但是又一直找不到错误,那么,你可以查看一下你是否把人家成对的标记给搞离婚了…

  继续看代码,第二行和第四行代码,分别是<head>标记的开始标记和结束标记,这对标记被我们成为首部标记,在我们的这些课程中,对首部标记的使用不是很充分,在我们学了VBScript或Javascript以后,或者做SEO优化时可能会用到的多一些。 下面看第三行代码,我把<title>标记的开始代码和结束代码放到了一行,主要是这行代码很短,可以放到一行里来,而对浏览器的解析没有影响。

  这个<title>标记,被我们称为标题标记,即每个网页的标题,就是在IE的标题栏显示的文字。   下面看第五行和第九行,分别是<body>标记的开始标记和结束标记,我们称这对标记为正文标记,即在这对标记之间的内容,将显示到网页正文中。   继续往下看,看到了第六行,这里前面是在网页中显示的文字,后边跟了一个<br>标记,而下一行,仍旧是文字,这里<br>的意思就是强制断行的意思,就是不论你是不是一句话,只要这个标记出现,必定断行。   看第八行,是一个<!--…-->标记,在HTML中,这个标记代表的是注释的意思,就是这个标记里边的东西是为了让别人更容易理解你的代码而写的,这些内容不会被浏览器显示到页面中。   OK,在电脑前坐了近2个小时,终于写了2节,呵呵,不着急,慢慢来。把第一节的代码分析完了,下面我们来看一下上边的代码的执行效果,为了方便起见,我把代码在我的虚拟机里执行的,看图:

  OK,本节课结束,从下节课开始,我开始给朋友们介绍常用的各种标记。

第三节、设置文本格式

  从这节课开始,我会给朋友们介绍一些常用的标记,并对它们的用法做一些举例,所以牵扯到了不少代码,请朋友们切莫浮躁,切莫心急,学编程,急不得。   OK,开始。   我们知道,在很多时候,我们从网页上获取信息都是从文字里获得的,那么我们现在就来学习一下如何来控制我们的网页上的文字,让它更好的为我们服务。   本节课比起前2节课可能会有些长,希望朋友们不要心急,慢慢来。 在HTML中,我们可以对网页中的文本设置以下格式:

1. 分段与换行
2. 设置段落对齐方式
3. 设置字体
4. 设置字号
5. 设置文本颜色
6. 设置字符样式

下面我一条一条的来说,不着急,呵呵,反正我今天把这一节课写完就算完成任务了,呵呵,你看的时候看完这一节就先停下来吧,别着急着看下一节课,先把这节课消化消化。 1. 分段和换行 分段标记为<p>和</p>,换行标记为<br> 看好了,分段标记是一对,换行标记是单身! 位于分段标记<p>和</p>之间的内容,被浏览器认为是一个段落,从而加以区别显示,而<br>标记则强行规定了当前行的中断,我们知道,在WORD里打字的时候,如果这一行写不下了,它会自动换行,其实在网页里也是这个道理,浏览器会自动换行,只是有些时候我们为了段落或主题的的清晰要求,需要把一段文本分成2行,而如果让浏览器自己做这件事的话,它不明白你的意思,所以并没有给你分行,这样就不对了,是吧?显然,没有达到我们想要的效果,那么我们就可以在你需要换行的地方放一个<br>标记,那么<br>标记前的内容和<br>标记后的内容就会被浏览器解析为不同的2行。 哎呀,说理论总是很抽象的,下面我们来看代码,对着代码说容易理解一些。 例2:(2.html)

 1 <html>
 2 <head>
 3 <title> ----使用分段标记和换行标记</title>
 4 </head>
 5 <body>
 6 <p>百度红客吧</p>
 7 <p>欢迎你!</p>
 8 我是不是嫖客,<br>红客吧期待你的加入!
 9 </body>
10 </html>

OK,我们来看一下代码的执行效果:

朋友们可以把代码复制下来,自己执行一遍看看,不难发现分段标记和换行标记的区别:   分段标记分开的段落之间空隔很大,而用换行标记分开的两句话之间的空隙不大。   另外,我要告诉朋友们的是,我们在写代码时一行一行的写只是为了以后修改方便,也为了使别人能看懂我们的代码,但是我们也可以不一行一行分开写的,可以全部打乱,但只要各标记不变,那么执行效果就不会变,比如,下面两种代码的执行效果是一样的:   可以看到,下面的这张图里的代码显得很乱,但是,它是不影响执行效果的,但是我们在写代码的时候尽量养成整齐的好习惯吧。 OK,第三节课结束,嫖客谢谢你的支持!

第四节、设置文本格式

1.设置段落对齐方式   上面我们已经学习了段落标记<p>和</p>,那么这里说的就是给这个美女披件衣服了,对,我们使用的就是<p>和</p>的众多属性中的一个属性:ALIGN属性。   我们知道,在WORD中,文字排版有左对齐、右对齐、居中、两边对齐4种对齐方式,那么在网页中也是这样的,他们对应的英文依次为:Left、Right、Center、Justify   这几个英文即为<p>标记对的ALIGN属性的取值。   另外,需要说明的一点是,这个ALIGN属性是很多标记都有的一个属性,比如水平线标记<hr>、图像标记<img>都有这个属性,用处很大,对网页的排版起到了很大的作用,它的用法大致是一样的.

  但是需要强调的是,我们知道,在WORD里,默认的对齐方式是两边对齐的,那么在网页里,对于不同的标记,ALIGN属性的默认值是不同的,比如:   对于分段标记对<p>和</p>来说,ALIGN属性的默认值为Left,对于水平线标记<hr>来说,ALIGN属性的默认值为Center,但是,这一点也不用太担心,因为我们只要养成使用一个标记后立即给它加上相应的属性的好习惯就可以了,也就是等于强制声明吧,这样,不论它原本的默认属性是怎样的,浏览器都会按照我们的设定来显示。 好,下面我们来看一段代码:

例3:(3.html)

 1 <html>
 2 <head>
 3 <title> ----设置段落对齐方式</title>
 4 </head>
 5 <body>
 6 <!--下面开始设置段落的对齐方式-->
 7 <p align="left">这一行为左对齐,align属性的值为left。</p>
 8 <p align="center">这一行为居中对齐,align属性的值为center。</p>
 9 <p align="right">这一行为右对齐,align属性的值为right。</p>
10 <p align="justify">这一行为两边对齐,align属性的值为justify。</p>
11 </body>
12 </html>

  我们来看一下执行效果:

  OK,设置段落对齐方式就先说到这里,下节课再说一点就没有了。

第五节、设置文本格式

  这节课继续说段落对齐方式,这节课的主要任务是让朋友们认识两个在设置段落对齐方式时很实用的标记----节标记对<div></div>和居中对齐标记对<center></center>。 这节课很简单,我们来看一段代码就OK了。

例4:(4-1.html)

 1 <html>
 2 <head>
 3 <title> ----认识div标记和center标记</title>
 4 </head>
 5 <body>
 6 <center>
 7 春夜喜雨
 8 </center>
 9 <!--下面开始设置小节的对齐方式-->
10 <div align="center">
11 <p>好雨知时节,当春乃发生。</p>
12 <p>随风潜入夜,润物细无声。</p>
13 </div>
14 <!--不知道你看出来了没,其实center标记对和先用div标记再指定div的对齐方式,这两种方法的执行效果是一样的。-->
15 </body>
16 </html>

我们来看一下执行效果:

OK,本节课的任务完成了,再扩展一下吧,就是<div align="center">和直接用<center>的效果是一样的,比如我们也可以把上面的代码改一下,全部用<center>标记,

实验一下,改后的代码如下:(4-2.html)

 1 <html>
 2 <head>
 3 <title> ----认识div标记和center标记</title>
 4 </head>
 5 <body>
 6 <center>
 7 春夜喜雨
 8 <p>好雨知时节,当春乃发生。</p>
 9 <p>随风潜入夜,润物细无声。</p>
10 </center>
11 </body>
12 </html>

我们再来看一下执行效果:

  看到了吧?   效果是一样的。   另外,我再稍稍的提一下<div>标记,这个标记没有<body>大,但比<p>大,也就是它必须被包含在<body>内,但它可以包含<p>,就是处在这么一个不上不下的位置吧,反正我自己感觉是用着挺方便的。   也许不少朋友都说,现在都用DreamWeaver做网页了,谁还这么老土的用代码实现呢? ,这个问题问得好,但是,如果你要做IT、安全的话,我还是非常建议你学学的,毕竟你如果不学HTML的话,那以后想学脚本如VBS、JS、ASP、PHP等语言基本不太可能。   但是,我也不建议你花太多的时间和精力在HTML上,因为它只是基础,你只需要达到基本掌握的水平就可以了,时间上,1个月,足够让你把HTML学的差不多了。   另外,再说一句很多前辈都说过的话,学编程,就要坚持天天跟代码打交道,每天你都写点东西出来,它是一个循环渐进的过程,没有哪个人能一下子就成了高手。 OK,第五节课完美结束,嫖客谢谢你的支持!

第六节、设置文本格式

  我们这节课的任务也不多,再来认识两个标记----标题标记<hn>和水平线标记<hr>   首先说下标题标记,<hn>,这个尖括号里的n的值可以是1-6之间的任何数字,包括1和6,分别定义了网页上的特定格式和大小的文本,<h1>定义的文本最大,<h6>定义的文本最小,我们称<h1>定义的文本为一级标题,

  以此类推。   另外的水平线标记就没有什么好说的了,就是在网页中插入一条水平线。 OK,我们还是来看段代码吧,看完你就明白了。

例5:(5.html)

 1 <html>
 2 <head>
 3 <title> ----认识hn标记</title>
 4 </head>
 5 <body>
 6 <div align="center">
 7 <p><h1>这是一级标题</h1></p>
 8 <p><h2>这是二级标题</h2></p>
 9 <p><h3>这是三级标题</h3></p>
10 <p><h4>这是四级标题</h4></p>
11 <p><h5>这是五级标题</h5></p>
12 <p><h6>这是六级标题</h6></p>
13 <p>这是普通文字</p>
14 </div>
15 </body>
16 </html>

我们来看一下执行效果:

OK,标题标记就说到这里,下面再说一下水平线标记<hr>。 先介绍一下<hr>标记的相关属性:

1. align属性
2. color属性
3. noshade属性
4. size属性
5. width属性

  关于align属性,我就不多说了,不懂的朋友请看第四节课。   下面是color属性,这个应该也很好理解吧?颜色嘛,这个属性指定我们的水平线的颜色。   再下面是size属性,这个属性是指定水平线的宽度,以像素为单位。   最后是width属性,这个属性指定水平线的长度,单位可以是像素或百分比。 这里的百分比是说这条水平线占总页面的多少来算的,是一个相对值,不是绝对值。   OK,介绍完了,我们再来看一段代码吧: 例6:(6.html)

1 <html>
2 <head>
3 <title> ----认识hr标记</title>
4 </head>
5 <body>

以下是默认的水平线: <!--在未指定水平线的长度的情况下,默认为100%。--> <hr>

 1 以下是宽度为6,长度为300的水平线:
 2 <hr size="6" width="300">
 3 以下是宽度为1,长度为80%的实线水平线:
 4 <hr size="1" width="80%" noshade>
 5 以下是长度为90%的浅蓝色水平线:
 6 <hr width="90%" color="teal">
 7 以下是长度为90%的对齐方式为左对齐的浅蓝色水平线:
 8 <hr align="left" width="90%" color="teal">
 9 <!--可以看出,在我们没有指定水平线的对齐方式时,默认为居中对齐。-->
10 </body>
11 </html>

下面我们来看一下代码执行效果:

OK,本节课任务基本完成,下面呢,我再来说一点吧,老担心我讲的不够详细,担心新人看不懂, ,就是我们在使用标记的各种属性时,无须计较这些属性的先后顺序,只要出现就可以了。 比如下面这两句代码的效果是一样的:

1 <hr align="left" width="90%" color="teal">
2 
3 <hr color="teal" width="90%" align="left">

OK,第六节课完美结束, ,嫖客谢谢你的支持!不懂的随时到吧里问!随时待命向你解释!

第七节、设置字体、字号和颜色

今天的任务不多,只说一个标记,即字体标记----<font></font> 上节课我们说了标题标记<hn>,不过相对来说,还是<font>标记对用的多一些,<font>标记有几个属性:

1. face属性
2. size属性
3. color属性

  其中face属性用来指定<font></font>标记对内的文字的字体,size属性用来指定<font></font>标记对内的文字的大小,color属性用来指定文字颜色。   需要注意的是,我们在使用face属性时,可以为这个属性赋一个或多个值,即可以为网页指定多种字体,这时,浏览器会按你赋值的顺序来读取,并尽量用你为<font>标记指定的字体来显示,如果赋的第一个值,即第一种字体本地没有安装,那么浏览器再看指定的第二种字体是否安装,如果有,则以这种字体显示,如果没有,就看第三个,以此类推,如果这里指定的字体全部没有,则按照浏览器的默认字体来显示。   在使用<font>标记的size属性时,其值的大小为1-7,包括1和7,默认值为3,值越大,显示的文字就越大,注意啊,这里跟<hn>标记的大小排序不同,对<hn>标记来说,值为1时最大,而对于<font>标记的size属性来说,值越大字体越大。 另外,对于<font>标记的size属性,不仅可以使用绝对值,即直接给它指定一个具体的数字,还可以使用相对值,使用相对值不使用纯数字,在数字前面加的还有加号“+”和减号“-”,表示这一行的size值为上一行size值的增加或者减少。比如:

<font size="4">百度红客吧</font>
<font size="+2">欢迎你!</font>

  这里的第一句代码使用的绝对值,第二句代码就是用的相对值。   这上面的东西虽然说的不少,但是都是很简单的,现在看不懂也没关系,待会看看代码你就明白了。   还有一个color属性没说,这个属性指定了<font></font>标记对内的文字的颜色,颜色值可以用颜色名称表示,也可以用十六进制RGB格式表示。OK,下面,也是每节课的最后一个环节,看代码。 例7:(7.html)

<html>
<head>
<title> ----认识font标记</title>
</head>
<body>
<p><font>默认文字:百度红客吧</font></p>
<p><font face="黑体">face属性为“黑体”的文字:百度红客吧
<p><font size="6">size属性为6的文字:百度红客吧</font></p>
<p><font color="teal">color为浅蓝色的文字:百度红客吧</font></p>
<p><font face="黑体,楷体_gb2312,仿宋_gb2312" size="4" color="teal">face属性为黑体,楷体_gb2312,仿宋_gb2312 
,size属性为4,color属性为浅蓝色的文字:百度红客吧
</body>
</html>

我们来看一下代码的执行效果:

  可以明显的看出来差别的。   OK,本节课结束,不懂的先自己思考思考,实在不懂就到吧里问吧。   这样有助于你的学习。   好了,嫖客谢谢你的关注,谢谢!

第八节、设置字符样式与插入特殊字符

  这节课更简单,只介绍几个超简单的标记和一点网页制作中的技巧。   今天要介绍的标记全部为设置字符格式的标记,看表:(杯具的发现,不支持表格,没办法,凑合着看吧) 标记 描述 标记 描述

<b>…</b> 粗体 <strike>…</strike> 删除线
<big>…</big> 大字体 <sup>…</sup> 上标
<i>…</i> 斜体 <sub>…</sub> 下标
<s>…</s> 删除线 <tt>…</tt> 固定宽度字体
<small>…</small> 小字体 <u>…</u> 下划线

别看这张表里的标记挺多的,但是,都挺容易的,如果你玩过WORD的话,这些标记都是很好理解的。 不多说了,看代码: 例8:(8.html)

 1 <html>
 2 <head>
 3 <title> ----设置字符格式</title>
 4 </head>
 5 <body>
 6 <p><font>默认文字:百度红客吧</font></p>
 7 <p><b>粗体字:百度红客吧</b></p>
 8 <p><big>大字体:百度红客吧</big></p>
 9 <p><i>斜体字:百度红客吧</i></p>
10 <p><s>删除线:百度红客吧</s></p>
11 <p><small>小字体:百度红客吧</small></p>
12 <p><strike>删除线:百度红客吧</strike></p>
13 <p>上标示例:a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
14 <p>下标示例:H<sub>2</sub>so<sub>4</sub></p>
15 <p><tt>固定宽度字体:百度红客吧</tt></p>
16 <p><u>下划线:百度红客吧</u></p>
17 </body>
18 </html>

我们来看一下代码的执行效果:

怎么样?   不难吧? ,OK,设置字符格式就说到这里,下面说一点网页制作中的技巧。 设计网页的时候(不论是用DW做还是手工写),都难免会需要插入一些空格,这在WORD里很简单,没什么难的,但在HTML里不一样,即使我们在代码里按了很多个空格,但浏览器解析的时候仍然显示的只有一个空格,这是因为浏览器自动把那些多余的空格过滤掉了,这时我们就用到了一些特殊的方法:   使用字符实体名称或数字表示方式。   比如我们想在网页中插入1个空格,我们可以输入&nbsp;来实现,插入2个空格就可以输入&nbsp; &nbsp;来实现,这个&nbsp;就是空格的实体名称。   还有一个是数字表示方式,即空格我们也可以表示为&#160;,这个表示方式也可以达到连续空格的效果。 关于很多字符的实体名称和它们的数字表示方式,我这里提供一个常用符号的对应列表:

1 字符 说明 实体名 数字表示
2 无断行空格 &nbsp; &#160;
3 ? 注册符号 &reg; &#174;
4 ? 版权符号 &copy; &#169;
5 & And符号 &amp; &#38;
6 ¥ 元符号 &yen; &#165;

  其他的资料我这暂时还没有,如果朋友们需要的话可以去网上搜索一下,应该有的。   OK,今天的课程完美结束,嫖客再次感谢你的关注。

第九节、使用列表格式

  今天我们一起来创建几个列表,就是类似于WORD之类的这样的列表在网页上的实现:

上面的这个就是我们说的列表,我们可以看到,在每个列表项的前边都有一个数字,代表这些列表项的顺序,像这样的有数字或字母为列表项排序的列表我们称之为有序列表,反之,像下图这种没有明显的顺序标记的我们称之为无序列表:

  那么,我们在这节课里就说一下这两种列表在网页中的实现方法。   首先,介绍一下创建有序列表和无序列表的标记:------<ol>…</ol>和<ul>…</ul>   先说创建有序列表,说完有序列表无序列表说不说都可以了。   我们使用有序列表标记<ol>…</ol>和列表项标记<li>来创建有序列表, 比如:

1 <ol>
2 <li>列表项1
3 <li>列表项2
4 <li>列表项3
5 <li>列表项4
6 <li>列表项5
7 <li>列表项n
8 </ol>

这样就创建了一个在列表项前显示默认的排序符号的列表,而HTML中默认是以数字排列的。 稍后我们依然用实例来说明情况。

1 <ol>标记有两个常用属性:start和type
2 Start属性用于定义数字序列的起始值,type用于定义设置序列符号样式,其取值范围如下:
3 ● 1:表示以阿拉伯数字1、2、3…为列表符号
4 ● A:表示以大写字母A、B、C…为列表符号
5 ● a:表示以小写字母a、b、c…为列表符号
6 ● I:表示以大写罗马字母I、II、III、IV…作为列表符号
7 ● I:表示以小写字母i、ii、iii、iv…作为列表符号

  在<ol>标记对内的<li>标记具有两个常用属性:type和value 这里的Type属性和上面的type属性是一个概念,只不过针对的标记不同罢了。 而这里的value属性,指定一个新的数字序列起始值,这样我们可以把整个列表分开,从而获得一个不连续的列表。

下面开始看代码: 例9:(9-1.html)

 1 <html>
 2 <head>
 3 <title> ----创建列表</title>
 4 </head>
 5 <body>
 6 <ol>
 7 <li>列表项一:百度红客吧
 8 <li>列表项二:百度红客吧
 9 <li>列表项三:百度红客吧
10 </ol>
11 </body>
12 </html>

我们来看看代码的执行效果:

上边这个效果就是使用的默认的顺序符号创建的列表。 我们把上面那段代码修改一下,换一种符号看看: 例10:(9-2.html)

 1 <html>
 2 <head>
 3 <title> ----创建列表</title>
 4 </head>
 5 <body>
 6 <ol type="A">
 7 <li>列表项一:百度红客吧
 8 <li>列表项二:百度红客吧
 9 <li>列表项三:百度红客吧
10 </ol>
11 </body>
12 </html>

这里我用<ol>标记的type属性指定了顺序符号为大写英文字母,我们来看看效果:

下面我们再来改一下,我们试试<ol>属性的start属性: 例11:(9-3.html)

 1 <html>
 2 <head>
 3 <title> ----创建列表</title>
 4 </head>
 5 <body>
 6 <ol start="6">
 7 <li>列表项一:百度红客吧
 8 <li>列表项二:百度红客吧
 9 <li>列表项三:百度红客吧
10 </ol>
11 </body>
12 </html>

这里可以看到,我在指定<ol>的属性的时候,没有为它指定type属性,因为它默认的type属性是数字,所以我这里不指定也是可以的。 注意,只有在列表符号是数字的情况下start属性才有效。 比如:这行代码中的start属性是无效的: <ol type="a" start="6"> OK,说完这个,我们来看代码的执行效果:

下面我们再来说一下<li>标记的两个属性,直接看代码吧: 例12:(9-4.html)

 1 <html>
 2 <head>
 3 <title> ----创建列表</title>
 4 </head>
 5 <body>
 6 <ol>
 7 <li>列表项一:百度红客吧
 8 <li>列表项二:百度红客吧
 9 <li>列表项三:百度红客吧
10 <li value="5">列表项五:百度红客吧
11 <li>列表项六:百度红客吧
12 <li>列表项七:百度红客吧
13 <li value="11">列表项十一:百度红客吧
14 <li>列表项十二:百度红客吧
15 <li>列表项十三:百度红客吧
16 </ol>
17 </body>
18 </html>

  我在列表的第四行使从第四行的顺序符号从“5”开始,这样下面的列表和上面的列表就断开了,从而获得了不连续的列表。 看看执行效果:

  好了,创建有序列表我们就说到这里吧,这几天一直在打字,电脑桌子不舒服,太高,打得胳膊痛…

  下面再说一下创建无序列表,这个跟创建有序列表的区别不大,只是无序列表标记为<ul>…</ul>

1 <ul>标记也有type属性,它的type属性用于指定列表符号,不过这里的符号跟有序列表的符号不同,type属性可以取下列值:
2 disc :使用实心圆作为列表符号
3 circle :使用空心圆作为列表符号
4 square :使用方块作为列表符号
5 需要注意的是,在IE中,type属性的值是区分大小写的。

下面还是看代码:

例13:(9-5.html)

 1 <html>
 2 <head>
 3 <title> ----创建列表</title>
 4 </head>
 5 <body>
 6 下面是无属性无序列表:
 7 <ul>
 8 <li>列表项:百度红客吧
 9 <li>列表项:百度红客吧
10 <li>列表项:百度红客吧
11 </ul>
12 下面是type值为circle的无序列表:
13 <ul type="circle">
14 <li>列表项:百度红客吧
15 <li>列表项:百度红客吧
16 <li>列表项:百度红客吧
17 </ul>
18 下面是type值为square的无序列表:
19 <ul type="square">
20 <li>列表项:百度红客吧
21 <li>列表项:百度红客吧
22 <li>列表项:百度红客吧
23 </ul>
24 </body>
25 </html>

看看执行效果:

第十节、使用图像

  在HEML中,我们用IMG标记在网页内插入图像,并通过该标记的属性对图片内容进行控制,最常用的两个属性为src属性和alt属性,分别用于设置图像的位置和替换文本,这个图像的位置实际上就是图像的地址,比如:www.haomoons.com/haomoons.jpg,这就是一个图片的地址,这个地址可以是绝对地址,也可以是相对地址。   而alt属性,作用很大,多使用它可以增加搜索引擎的收录,因为搜索引擎是不能抓取图像的内容的,而这个alt属性指定的替换文字就是对该图片的说明,而搜索引擎是认识这个替换文字的。   其实,这个alt属性最初设计出来,是针对那些不能显示图片的情况而设计的,就是一旦遇到种种原因图像显示不出来,那么这个替换文字可以起到一定的提示作用。   这个img标记还有两个属性,分别为width和height属性,这两个属性用于控制网页中图片显示的宽度和高度,单位为像素或百分值。 还有一些其他的不太常用的属性,我们也来学习一下吧:

1. hspace和vspace属性 这两个属性用于图文混排的情况下使用,hspace用于指定图像的左右边距,vspace用于指定图像的上下边距,这个边距即是文字和图像之间相隔的距离,单位为像素。

2. border属性 这个属性用于设置图像的边框,其取值只能为正整数,单位为像素。

3. align属性 这个属性用于在图文混排的情况下设置图像与文本的对齐方式,分两种情况:

1 ● 在垂直方向
2 这时,align的取值可以为
3 ▲ top:图像与文本顶部对齐
4 ▲ middle:图像与文本中央对齐
5 ▲ bottom:图像与文本底部对齐
6 ● 在水平方向
7 ▲ left:图像居左,文本居右
8 ▲ right:图像居右,文本居左

另外,使用换行标记br的clear属性,可以将换行后的文本移到图像的下边。 下面我们来写一个实例,看代码: 例14:(10.html)

 1 <html>
 2 <head>
 3 <title> ----使用图像</title>
 4 </head>
 5 <body>
 6 <center>
 7 <p>
 8 <img src="ad-1.jpg" alt="百度红客吧宣传图" align="left" border="1" height="200" width="200">
 9 <font face="宋体" color="teal">这里是百度贴吧红客吧,我们一直在努力做的更好,我们欢迎你的到来!<br>这里是百度贴吧红客吧,我们
10 一直在努力做的更好,我们欢迎你的到来!<br>这里是百度贴吧红客吧,我们一直在努力做的更好,我们欢迎你的到来!<br>这里是百度贴吧
11 红客吧,我们一直在努力做的更好,我们欢迎你的到来!<br>这里是百度贴吧红客吧,我们一直在努力做的更好,我们欢迎你的到来!<br>这里是百度贴吧红客吧,我们一直在努力做的更好,我们欢迎你的到来!<br>这里是百度贴吧红客吧,我们一直在努力做的更好,我们欢迎你的到来!<br>这里是百度贴吧红客吧,我们一直在努力做的更好,我们欢迎你的到来!<br>这里是百度贴吧红客吧,我们一直在努力做的更好,我们欢迎你的到来!<br>这里是百度贴吧红客吧,我们一直在努力做的更好,我们欢迎你的到来!<br>这里是百度贴吧红客吧,我们一直在努力做的更好,我们欢迎你的到来!<br>这里是百度贴吧红客吧,我们一直在努力做的更好,我们欢迎你的到来!
12 </font>
13 </p>
14 <p>
15 <img src="ad-2.gif" alt="2010年,依然不是嫖客..." align="right" border="1">
16 <font face="楷体_gb2312" color="red">
17 我是不是嫖客,这里由我来给大家讲解一下HTML语言,嫖客多谢朋友们的支持!<br>我是不是嫖客,这里由我来给大家讲解一下HTML语言,嫖客多谢朋友们的支持!<br>我是不是嫖客,这里由我来给大家讲解一下HTML语言,嫖客多谢朋友们的支持!<br>我是不是嫖客,这里由我来给大家解一下HTML语言,嫖客多谢朋友们的支持!<br>我是不是嫖客,这里由我来给大家讲解一下HTML语言,嫖客多谢朋友们的支持!
18 </font>
19 </p>
20 </center>
21 </body>
22 </html>

我们来看一下执行效果:

  由于图像太大,所以有些模糊,不过还是能看出效果的。   OK,第十节课完美结束,朋友们看完课程以后多实践,自己琢磨着多写点代码出来,写写你就会了,不然记得不牢靠的。 朋友们,再见。

第十一节、使用多媒体文件

这几天有些不舒服,所以废话就不多说了,上节课我们使用img标记在网页中插入了图片,其实用这个标记还可以在网页中插入多媒体文件(就是视频)。

在用img属性播放视频文件时,需要用到以下属性:

1. controls:使用这个选项后,如果有多媒体文件,则在网页中显示一套视频控件,即视频控制按钮。
2. dynsrc:用它来指定视频文件的地址。
3. start:指定何时开始播放文件,它的取值可以是fileopen(页面打开即播放),还可以是mouseover(鼠标置于上方播放)
4. loop:指定视频文件的播放次数,若想让其循环播放,则应将该属性值指定为infinite。
5. loopdelay:指定两次播放之间的间隔时间,以毫秒为单位

  另外需要说明的一点是,在这里也可以使用src属性,就是说dynsrc和src可以同时使用,这样做的意思是若计算机没有多媒体功能,则显示该图像,若有多媒体功能,不显示图像。   从上边可以看出,虽然src和dynsrc可以同时使用,但它们之间存在一个优先级的问题,明显的,dynsrc的优先级高于src。 下面我们还是来看代码吧: 例15:(11.html)

 1 <html>
 2 <head>
 3 <title> ----使用多媒体文件</title>
 4 </head>
 5 <body>
 6 <font face="楷体_gb2312" color="teal">
 7 <center>
 8 使用多媒体文件示例
 9 </center>
10 </font>
11 <hr size="2" width="80%" color="teal" noshade>
12 <!--插入了一条宽度为2,长度为整个页面80%的,颜色为浅蓝色的无阴影的水平线-->
13 <p align="center">
14 <img dynsrc="clock.avi" controls loop="infinite" loopdelay="1000" start="mouseover">
15 <!--这里我想让视频在页面中间播放,但img标记本身没有这个属性,所以用段落标记将其位置居中。-->
16 </p>
17 </body>
18 </html>

  我这里指定的是当鼠标放上去的时候播放,我们来看一下执行效果:   播放前:

  我把鼠标放上去:

  OK,鼠标放上去即开始播放。   今天就说到这了,朋友们明天见

第十二节、使用字幕和背景音乐

今天我们来说一下在HTML中插入滚动字幕和在网页中使用背景音乐。 我们使用marquee标记来显示滚动文本,该标记具有下列属性:

1. align属性:指定字幕与周围文本的对齐方式,其取值可以是top(上对齐)、middle(中间对齐)、buttom(底部对齐)
2. behavior属性:指定文本动画的类型,其取值可以是scroll、side、alternate
3. bgcolor属性:指定文本动画的背景颜色
4. direction属性:指定文本动画的移动方向,其取值可以是down、up、left、right,默认值为left,即由右向左移动。
5. height属性:指定文本动画的高度,单位为像素或百分比
6. hspace属性:指定字幕外部边缘与浏览器窗口之间的左右距离,以像素为单位,其值为整数。
7. vspace属性:指定字幕外边缘与浏览器上下边缘的距离,单位为像素
8. loop属性:指定字幕滚动的次数,这个属性的取值与上节课我们讲视频时那个loop属性相同。
9. scrollamount属性:指定字幕每次移动的距离,以像素为单位,其值为整数
10. scrolldealy属性:指定前后两次播放的间隔时间,值为整数,单位为像素

OK,这些就是字幕标记marquee的全部属性了,下面我们先别着急着看代码,我们再来说一下如何在网页中使用背景音乐,就是在网页打开的时候即播放音乐。 用的标记为bgsound标记,需要注意的是,该标记只能放在我们的代码的head部分,bgsound属性具有下列属性:

1. balance属性:指定如何将声音分成左声道和右声道,取值为-10000~+10000,默认值为0
2. loop属性:指定声音播放的次数,若值为0,则播放一次,若为-1,则循环播放,知道页面被卸载。
3. src属性:指定声音文件的位置
4. volume属性:指定声音高低,其取值为-10000~0,默认值为0

好了,我们把marquee标记的标记和bgsound标记的标记全部说完了,下面我们来写一段代码,既播放字幕又配合着背景音乐。 例16:(12.html)

 1 <html>
 2 <head>
 3 <title> ----使用字幕和背景音乐</title>
 4 <bgsound src="honker.mid" loop="-1">
 5 </head>
 6 <body>
 7 <div align="center">
 8 <P>
 9 <marquee loop="infinite" behavior="scroll" bgcolor="black" direction="left" 
10 scrollamount="2">
11 <font face="黑体" color="red">
12 <big>
13 这里是百度红客吧,欢迎你的到来!
14 </big>
15 </font>
16 </marquee>
17 </p>
18 <p>
19 <marquee loop="infinite" behavior="slide" bgcolor="black" direction="right" 
20 scrollamount="2">
21 <font face="黑体" color="red">
22 <big>
23 我们在努力做的更好!
24 </big>
25 </font>
26 </marquee>
27 </p>
28 </div>
29 </body>
30 </html>

  我们来看一下执行效果:

  而在网页加载完的时候,我们指定的背景音乐已经开始播放了。   好了,前面基础的终于说的差不多了,今天就说到这里吧,明天开始说表格的应用,朋友们,明天见。

第十三节、创建基本表格

  从今天开始,我们将一起接触到在HTML中很重要的一部分—表格的应用,因为几乎每个网页的布局都离不开表格的支持,所以,关于表格的内容异常重要,朋友们一定要多加练习才是。   一个表格由表头、行、单元格组成,这些元素分别用不同的标记来定义,表格通过table定义,表头(即表格的标题)由caption来定义,行由tr来定义,单元格由td定义。

今天我们就来创建一个基本的表格,看代码: 例17:(13-1.html)

 1 <html>
 2 <head>
 3 <title> ----创建一个基本表格</title>
 4 </head>
 5 <body>
 6 <center>
 7 <table>
 8 <caption>表头:百度红客吧</caption>
 9 <tr>
10 <td>第一列标题</td>
11 <td>第二列标题</td>
12 <td>第三列标题</td>
13 </tr>
14 <tr>
15 <td>百度红客吧</td>
16 <td>百度红客吧</td>
17 <td>百度红客吧</td>
18 </tr>
19 <tr>
20 <td>不是嫖客</td>
21 <td>不是嫖客</td>
22 <td>不是嫖客</td>
23 </tr>
24 <!--依次循环,一直到表格结束...-->
25 </table>
26 </center>
27 </body>
28 </html>

我们来看一下执行效果:

  可以看到,页面中并没有一般表格都有的边框,但可以看出来,页面显示的内容是按照表格的布局来显示的,下面我来给table标记加上一个属性,即border属性,这个属性指定表格的边框粗细。   即将上面的第7行代码修改为:   <table border="1">   修改后我们再来看一下执行效果: 例18:(13-2.html)

  OK,这里已经可以非常明显的看出,这是一个表格了,大家看代码的时候对着我讲的那些标记一个一个对照,慢慢的你就会了,不要着急。   好了,今天这节课就结束了,我是不是嫖客,朋友们明天再见。

第十四节、设置表格的属性

  昨天我们初步接触了表格,今天我们就来学习一下表格标记table的各个属性,从而使我们获得对表格的更多控制,下面是table标记的属性:

1. align属性:指定表格的对齐方式,取值可以为left(左对齐)、center(中间对齐)、right(右对齐)
2. background属性:指定用作表格背景的图像位置。
3. bgcolor属性:指定表格的背景颜色
4. border属性:这个属性我们在昨天已经接触过了,我们用它来指定表格的边框粗细
5. width属性:指定表格的宽度,单位为像素或百分比
6. bordercolor属性:指定表格边框的颜色,如果没有指定边框的粗细,则不应该使用该属性
7. bordercolordark属性:指定3D边框的阴影大小,如果没有指定边框的粗细,则不应该使用该属性
8. bordercolorlight属性:指定3D边框的高亮显示颜色,如果没有指定边框的粗细,则不应该使用该属性
9. cellpadding属性:指定单元格内数据与单元格边框之间的距离,单位为像素
10. cellspacing属性:指定单元格之间的间距,单位为像素

总共10个属性,其实很多都是不常用的,从第6个往后的属性都不怎么常用(至少对我来说, ) 下面我们来写一段代码: 例19:(14.html)

 1 <html>
 2 <head>
 3 <title> ----设置表格的属性</title>
 4 </head>
 5 <body>
 6 <table align="center" width="80%" border="1" bgcolor="white" 
 7 bodercolordark="gray" bordercolorlight="green">
 8 <!--我这里将表格的对齐方式设为中间对齐,表格宽度为页面宽度的80%,这个778是
 9 制作网页时的一般规范宽度,将表格的边框粗细设为1像素,并使用了3D边框,边框阴影颜色为灰色,高亮颜色为绿色,我这里没有用背景颜色,而是用了一个背景图像-->
10 <tr>
11 <th>第一列标题</th>
12 <th>第二列标题</th>
13 <th>第三列标题</th>
14 <!--这里的th标记跟td标记差不多,th标记为标题专用的标记,就是一般的单元格用td,标题单元格用th。-->
15 </tr>
16 <tr>
17 <td>百度红客吧</td>
18 <td>不是嫖客</td>
19 <td>欢迎你的到来!</td>
20 </tr>
21 <tr>
22 <td>红客吧原创教程</td>
23 <td>你的关注</td>
24 <td>是我最大的动力</td>
25 </tr>
26 <tr>
27 <td>2010年,我相信</td>
28 <td>你我的红客吧</td>
29 <td>一定会发展</td>
30 </tr>
31 </table>
32 </body>
33 </html>

  下面我们来看一下执行效果:

  OK,朋友们一定要对照着课程把代码仔细的看看,然后一个字母一个字母的自己敲出来,不担心学不会。   今天这节课结束,咱们明天见。

第十五节、设置表格中行的属性

  上一节我们说的是设置表格的属性,那么今天我们就来学习一下设置表格中行的属性,我们知道行的标记为tr,那么下面就是这个标记的属性:

1. align属性:指定行中单元格的水平对齐方式,取值与我们前面讲的相同。
2. valign属性:指定行中单元格的垂直对齐方式,取值为top(顶端对齐)、middle(中间对齐)、bottom(底部对齐)、baseline(基线对齐)
3. background属性:指定行的背景图像
4. bgcolor属性:指定行的背景颜色
5. bordercolordark属性:指定行的3D边框阴影颜色
6. bordercolorlight属性:指定行的3D边框的高亮颜色

下面我们来创建一个表格,使不同行具有不同的背景颜色: 例20:(15.html)

 1 <html>
 2 <head>
 3 <title> ----设置表格中行的属性</title>
 4 </head>
 5 <body>
 6 <table align="center" border="1" width="80%">
 7 <caption>设置行的属性示例</caption>
 8 <!--下面的三行不仅背景颜色不同,而且对齐方式也不同-->
 9 <tr align="left" bgcolor="red">
10 <th>第一列标题</th>
11 <th>第二列标题</th>
12 <th>第三列标题</th>
13 </tr>
14 <tr align="center" bgcolor="yellow">
15 <td>百度红客吧</td>
16 <td>百度红客吧</td>
17 <td>百度红客吧</td>
18 </tr>
19 <tr align="right" bgcolor="teal">
20 <td>不是嫖客</td>
21 <td>不是嫖客</td>
22 <td>不是嫖客</td>
23 </tr>
24 </table>
25 </body>
26 </html>

我们来看一下代码的执行效果:

  OK,达到了我们想要的效果,本节课结束。   嫖客谢谢你的支持!

第十六节、设置单元格的属性

  上节课我们说的是设置行的属性,那么这节课我们就来说一下在表格中最小的组成单位—-单元格的属性设置。 单元格td的属性有以下几种:

1. align属性:指定单元格内文本的对齐方式
2. background属性:指定单元格的背景图像
3. bordercolor属性:指定单元格的边框颜色,这个属性必须在table标记的border已设置并且其值非零时可用,这个想想就明白了,如果人家设置的表格都没有边框那这个属性当然没用了。
4. bordercolordark属性:指定单元格的3D边框阴影颜色
5. bordercolorlight属性:指定单元格的3D边框的高亮颜色
6. colspan属性:指定合并单元格时一个单元格跨越的表格的列数
7. rowspan属性:指定合并单元格时一个单元格跨越的行数
8. nowrap属性:若指定该属性,则避免浏览器将单元格中的文字换行
9. valign属性:指定单元格中文本的垂直方向对齐方式,其取值可以为top、middle、buttom、baseline,默认值为middle

下面我们来为16个单元格设置16种不同的背景颜色: 例21:(16.html)

 1 <html>
 2 <head>
 3 <title> ----设置单元格的属性</title>
 4 </head>
 5 <body>
 6 <table align="center" border="1" width="80%">
 7 <caption>设置单元格的属性示例</caption>
 8 <tr>
 9 <th bgcolor="aqua">第一列标题</th>
10 <th bgcolor="black"><font 
11 color="white">第二列标题</font></th><!--这一句背景是黑色,所以用font标记将单元格内的文本颜色
12 设置为白色,下面仍有这种情况-->
13 <th bgcolor="blue"><font color="white">第三列标题</font></th>
14 <th bgcolor="fuchsia">第四列标题</th>
15 </tr>
16 <tr>
17 <td bgcolor="gray">百度红客吧</td>
18 <td bgcolor="green">百度红客吧</td>
19 <td bgcolor="lime">百度红客吧</td>
20 <td bgcolor="maroon"><font color="white">百度红客吧</font></td>
21 </tr>
22 <tr>
23 <td bgcolor="navy"><font color="white">不是嫖客</font></td>
24 <td bgcolor="olive">不是嫖客</td>
25 <td bgcolor="purplr"><font color="white">不是嫖客</font></td>
26 <td bgcolor="red">不是嫖客</td>
27 </tr>
28 <tr>
29 <td bgcolor="silver">期待关注</td>
30 <td bgcolor="teal">期待关注</td>
31 <td bgcolor="white">期待关注</td>
32 <td bgcolor="yellow">期待关注</td>
33 </tr>
34 </table>
35 </body>
36 </html>

  我们来看一下代码的执行效果:

  OK,本节课就说这么多了,至此为止,关于表格的内容就介绍这么多了,下一节课开始我们开始讲框架。朋友们再见。

第十七课、设置框架集的属性

  今天我们来介绍一下HTML中应用同样很广泛的一样知识:框架。 我来简单的介绍一下什么是框架:   使用框架可以将浏览器窗口分为多个窗格,在每个窗格中都可以显示一个网页,从而实现在一个网页中显示多个不同页面的效果。 我们需要理解的是,框架与框架之间是各自独立的,在每个框架中可以显示任意网页,这些框架就等于是一个单独的新的页面,只不过框架是把这些不同的页面给它们组合到一起放到一个页面里了,这样我们在表面上看来,效果跟一个网页一样,表面看不出分别。   框架网页通过一个或多个frameset和frame标记来定义,需要注意的是,在使用了框架的网页里,我们使用framrset标记取代原body的位置,就是在head标记结束后,直接跟上frameset标记,而不再使用body标记。 另外,还有一点需要我们了解,就是有的低版本浏览器不支持框架,这时,我们可以使用noframes标记来指定当浏览器不支持框架时要显示的内容。   还有就是,frameset标记是定义框架集的标记,frame标记定义框架,frame总是被包含在frameset标记中的,就像表格中的行和单元格总被包含在表格中一样。 其中,frameset标记具有下列属性:

1. cols属性:创建纵向分隔框架时使用该属性指定各个框架的列宽,其取值有三种形式:像素、百分比(%)、相对尺寸(*)。比如说,如果我们想将浏览器窗口分为三列,第一列占浏览器窗口宽度的30%,第二列宽度为200像素,第三列为浏览器的剩余宽度,则我们可以将frameset属性的cols属性的值设为“30%,200,*”,如果将cols属性的值设为“*,*,*”,则将浏览器窗口分为等宽的三个窗格,如果将其值设为“*,2*,3*”,则表示中间的窗格的宽度为左边窗格宽度的2倍,右边窗格的宽度为左边窗格宽度的3倍。
2. rows属性:创建横向分隔框架时使用该属性指定各个框架的行高,取值方式与cols相同,但,需要注意的是,cols属性和rows属性不可同时使用,若要创建同时包含横向分隔框架和纵向分隔框架,则应使用嵌套框架。
3. frameborder属性:指定框架周围是否显示三维边框,其取值为1(显示)、0(不显示),该属性的默认值为1
4. framespacing属性:指定框架之间的间隔,单位为像素,如果我们不指定该属性,则框架之间没有间隔。

下面我们来写一段代码,看看代码很多问题稍微琢磨一下就明白了:

例22:(17.html)

 1 <html>
 2 <head>
 3 <title> ----设置框架集的属性</title>
 4 </head>
 5 <frameset rows="60,*,60"> <!--这个框架集是总框架集,表示将整个页面分为横向的三个窗格-->
 6 <frame> <!--代表横向窗格中的第一个框架,即最上面的窗格,一个frame标记代表一个框架-->
 7 <frameset cols="100,*"> <!--代表一个框架集,表示将第二个已划分的窗格继续分为纵向的两个窗格-->
 8 <frame> <!--代表一个框架,这个框架是已划分的纵向框架中的第一个框架,即左边的框架-->
 9 <frame> <!--代表一个框架,这个框架是已划分的纵向框架中的第二个框架,即右边的框架-->
10 </frameset> <!--嵌套的框架集结束-->
11 <frame> <!--代表一个框架,即总框架集中的最后一个框架-->
12 <!--以上是我们的框架的所有内容,下面是当浏览器不支持框架时要显示的提示信息。-->
13 <noframes>
14 <body>
15 <center>
16 <font size="6" color="teal">
17 抱歉,您的浏览器不支持框架!
18 </font>
19 </center>
20 </body>
21 </noframes>
22 </html>

  这里我没有指定frameset标记的frameborder属性的值,即该属性为默认值1,即显示三维边框。 我们来看一下执行效果:

  那么,我们接下来把frameborder属性的值设为0,即不让浏览器显示三维边框,我们将上边代码的第五行代码改为: <frameset rows="60,*,60" frameborder="0">   改完后我们再来看一下执行效果:

  可以看到,这是一个跟空白页面一模一样的页面,所以说效果是相同的,只是这个页面确实包含了4个框架。 OK,今天就说到这吧,明天详细讲框架属性的设置。 嫖客谢谢你的支持。

第18节、使用框架

  上节课我们说了设置框架集的属性及创建嵌套框架的方法,今天我们来介绍一下设置框架的属性,再举个实例出来看看在框架中显示网页的效果。 通过上节课的学习,我们应该已经知道,表示框架的标记为frame,那么我们再来说一下这个标记的几个属性及这些属性的作用:

1. frameborder属性:指定是否显示三维边框,这个属性上节课讲过。
2. marginheight属性:指定框架的高度,单位为像素
3. marginwidth属性:指定框架的宽度,单位为像素
4. name属性:指定框架的名称
5. nosize属性:若指定了该属性,则不能调整框架的大小
6. scrolling属性:指定框架是否可以滚动,其取值可以为yes(允许滚动)、no(禁止滚动)、auto(在需要时滚动)。
7. src:指定要在框架里显示的页面的地址

下面我们来创建一个框架页,并在每个框架里分别显示不同的网页,然后来看看效果: 例23:(18-main.html)

 1 <html>
 2 <!--这个页面是框架页面,是主要页面。-->
 3 <head>
 4 <title> ----使用框架</title>
 5 </head>
 6 <frameset rows="100,*">
 7 <frame name="frame-top" src="23-top.html">
 8 <frameset cols="100,*">
 9 <frame name="frame-left" src="23-left.html">
10 <frame name="frame-right" src="23-right.html">
11 </frameset>
12 <noframe>
13 <body>
14 <font color="teal">
15 抱歉,该网页使用了框架,但您的浏览器不支持框架!
16 </font>
17 </body>
18 </noframe>
19 </frameset>
20 </html>
21 下面是18-top.html的代码:
22 <html>
23 <!--这个页面是头部网页。-->
24 <head>
25 <title>头部网页</title>
26 </head>
27 <body>
28 <center>
29 <h2>这个是头部网页。</h2>
30 </center>
31 </body>
32 </html>

下面是18-left.html的代码:

 1 <html>
 2 <!--这个页面是左侧网页。-->
 3 <head>
 4 <title>左侧网页</title>
 5 </head>
 6 <body>
 7 <h2>这个是左侧网页。</h2>
 8 </body>
 9 </html>
10 下面是18-right.html的代码:
11 <html>
12 <!--这个页面是右侧网页。-->
13 <head>
14 <title>右侧网页</title>
15 </head>
16 <body>
17 <h2>这个是右侧网页,我们在制作网页时常将这个框架作为正文页面。</h2>
18 </body>
19 </html>

好了,代码我们已经全部写完了,下面我们来看一下执行效果吧:

好了,效果出来了,这就是框架,这就是在一个浏览器窗口里显示多个不同页面的方法,我们再来改一下代码,

把18-main.html的第6行,改为: <frameset rows="100,*" frameborder="0"> 这样就取消了三维边框的显示,再来执行一下看看:

  这样在表面看起来,就真的跟一个普通页面差不多了吧?   OK,今天就说这么多吧,朋友们多看看代码,一定要把代码弄懂了才好。   今天这节课结束,咱们的关于框架的课程就没有了,下节课开始讲不同种类超链接的创建。

第十九节、了解超链接和路径的概念

  朋友应该知道什么是超链接吧?就是当你把鼠标放上去的时候鼠标会变成手型,点击即可实现跳转,用书面解释,超链接就是由源端点到目标端点的一种跳转,源端点可以是一段文本、一副图像、等对象,目标端点可以是任意类型的网络资源,如一个网页、一副图像、一首歌曲、一段视频、一个程序等,按照目标端点的不同,也就是按照链接指向的文件的不同,

  可以将超链接分成以下几种形式:

1. 文件链接:这种链接是我们最常用的链接,这个指向的文件如果是一个网页,那么即实现的是从一个网页向另一个网页跳转,如果指向的文件是一个rar压缩包或其他文件,则实现的是这些资源的下载。这里需要提一下的是,当浏览器遇到它不能解析的文件时,它会提示你是否下载该文件,比如当你的浏览器遇到一个链接指向一个.exe文件,它是肯定无法解析的,那么它就会弹出一个对话框,提示你让你下载,这就是我们平时使用的“目标另存为”,但是,如果浏览器遇到了音频文件或视频文件的话,它可能会自己调用系统自带的播放器去播放这个文件,这样就实现了在线听音乐。

2. 锚点链接:这种链接的目标端点是网页中的一个确定的位置,这个位置可以是位于当前页内的,也可以是位于其他页面内的,这种链接在遇到长文档时有用,能让人迅速获得自己所需要的信息,而不必花费很多时间将整篇文档全部读完。

3. E-mail链接:通过这种链接可以启动电子邮件客户端程序(如Outlook或Foxmail等),从而实现直接为该链接指定的人写信的效果。这里看不懂没关系,稍后我们写段代码你就明白了。

  下面我们再来介绍一点知识,就是路径的问题,可能有些朋友说,不理解什么是相对路径,不理解所谓的绝对路径是什么,那么我们在这里就来介绍一下。 1. 绝对路径:也称为绝对URL,这种路径的特点是给出目标文件的完整URL地址,包含传输协议在内,如:http://www.baidu.com/hongkeba.html,这个例子中,前面的http://是传输协议,www.baidu.com/hongkeba.html是文件的路径。如果我们需要链接的文件位于外部服务器上的时候,是必须,是必须要使用绝对路径的。 2. 相对路径:也称为相对URL,是指以当前文档所在的位置为起点到目标文档所经过的路径,比如<frame src="xiangdui.html">,这句代码指定的xiangdui.html这个文件就是位于当前目录下的,也就是说,如果以我当前这个框架页来看,我指定的这个文件与我在同一个目录下,那么这就是以我这个框架页的角度来看的,再比如: <frame src="lujing/xiangdui.html"> 这句代码指定要显示的文件的位置是当前目录下的lujing子目录下的xiangdui.html文件。 再比如: <frame src="../lujing/xiangdui.html"> 这句代码指定的文件在当前文件所在目录的上一级目录下的lujing目录下。其中,两个点“..”表示上一级目录。 3. 根相对路径:这种路径是指从站点根目录到被链接文件的路径,使用这种路径是指定站点内文档链接的最好方式。 好了,这节课我们就先介绍这些吧,下节课我们开始介绍创建链接的方法。 嫖客多谢朋友们的支持。

第20节、创建文件链接

  不知不觉,已经写到20节了,到这里,我们的HTML课程也就快结束了,后面还有一个表单没讲,讲完就没有了,呵呵,虽然我的技术不怎么样,但是能为新人朋友们做点事情就做点事情吧,还希望朋友们多多支持红客吧,多多支持嫖客,谢谢。 下面开始说正事,今天我们来说如何创建文件链接。   在HTML里,我们使用a标记来创建超链接,基本语法为:

<a href="字符串" target="字符串" title="字符串">文本</a>

下面我们再来学习一下a标记的各个属性:

1. href属性:这个属性是必选项,用于指定目标端点的地址。
2. target属性:该属性是可选项,用于指定一个窗口或框架来显示我们链接指向的页面,我们在实例中使用框架时,一般地都会给框架指定一个名字,如:frame-top之类的名字,那么这里的target属性就是让链接指向的网页显示在指定的框架或页面时用的。如果没有指定该属性,则链接指向的文档将会取代当前页面从而占据浏览器窗口,另外,target属性的取值可以是框架或窗口的属性,也可以是下列4个保留字中的一个:
☆ _blank:表示将链接的目标文件加载到未命名的新浏览器窗口中
☆ _parent:指定将链接的目标文件加载到包含链接的父框架或窗口中,如果包含链接的框架不是嵌套的,则加载到整个浏览器窗口中。
☆ ?_self:指定链接指向的目标文件加载到同一框架或窗口中
☆ _top:指定将目标文件加载到整个浏览器窗口中并删除所有框架
3. title属性:指定鼠标指向链接时所显示的提示文字

下面我们来写一个实例: 例24:(20.html)

 1 <html>
 2 <head>
 3 <title> ----创建文件链接</title>
 4 </head>
 5 <body>
 6 <!--这里第一个链接是html文档链接-->
 7 <p>
 8 <font color="teal" size="5">创建文件链接示例</font><br>
 9 <hr color="red">
10 </p>
11 <!--第二个链接的目标是一个图像-->
12 <p>
13 <a href="16.html" title="打开第16课">设置单元格的属性</a>
14 </p>
15 <!--第三个链接是以一个图像代替了文字-->
16 <p>
17 <a href="ad-2.gif" title="2010年,依然不是嫖客">不是嫖客的签名档</a>
18 </p>
19 <p>
20 <a href="http://freetank.xvip6.xdff.cn" title="百度红客吧上传页面">
21 <img src="banner-1.jpg"></a>
22 </p>
23 </body>
24 </html>

OK,我们来看一下执行效果:

成功了。 今天的课程就结束了,我们明天来介绍创建锚点链接的方法,朋友们明天见。

第21节、创建锚点链接

  上节课我们说了创建文件链接的方法,那么今天我们就来说一下三种链接种类中的第二种:锚(mao)点链接 这种链接,可以实现网页内一个具体位置的跳转,就是我们提前在一个需要跳转的地方放上一个标记,然后在以后的文档中直接将链接的目标文件设置为这个标记即可。   而提前放的这个标记用到了a标记的name属性,即通过a标记的name属性为这个标记指定一个名称,以便以后引用,但需要注意的是,在<a>和</a>之间不要输入任何内容,例如,我们在网页test.html中创建一个名为top的锚标记:

<p><a name="top"></a></p>

创建了锚点标记以后,我们再来引用一下:

<p><a href="#top">返回顶部</a></p>

OK,基本语法我们说完了,就这么简单,下面我们来写一个实例: 例25(20.html): 这个网页的代码有点长…

 1 <html>
 2 <head>
 3 <title> ----创建锚点链接</title>
 4 </head>
 5 <body>
 6 <div align="right"><a href="#top"></a><a href="#middle">翻到中部</a>&nbsp;&nbsp;<a href="#end">翻到底部</a></div><br>
 7 华为是个创造神话的企业,从注册资金2万元的飞速膨胀、3G、高科技、高速成长、全民持股和民营企业……目前华为一但在国内是电信第一大供商货商,而且海外市场越来越火红,目前已正在蚕食网络商老大CISCO的本土--美国。
 8 <p>第一次知道“华为”是1999年,我从学校出来一年,当时对华为没有太多的了解,只知道华为是目前国内IT业中工资最高和大多数IT人梦寐以求的企业。当然,对于我这个中专生,她是远远遥不可及的……</p>
 9 
10 <p>99年中,我进入了广州一家小公司,默默的干着,我想我没有太多的先天优势,我唯一的就是钻劲、上进心、能吃苦。</p>
11 
12 <p>3年后,我很幸运进入广州最大的IT公司---广州新太科技,成为了一名技术工程师,外派到上海常驻,负责金融类的呼叫中心建设。到上海不到2个月,居然收到了华为公司人事部让我去深圳面试的邀请。当时这个消息对于我来说不能说不突然,简直是太突然了,当然,我当时谢绝了,因为进入新太不到3个月,再说对面试华为,毫无把握。后来才知道他们是在人才网站上面查到了我的简历。原来,华为的人事部门,经常在业务相类似的公司挖墙角。</p>
13 
14 <p>我在新太一直默默地干着……慢慢,从技术工程师做成独挡一面的工程项目经理。连续三年公司优秀员工。</p>
15 
16 <p>再3年半后,由于公司的一些问题,我不得不离开新太。说来惭愧,从学校毕业快7年,本人还是正宗一名“中专生”。在高校扩招,“本科生到处都是、硕士生满街走,只有博士还能抖一抖”的今天,走在路上,我什么都不怕丢,就是怕丢了这个中专毕业证。被人看到了,丢人!更何况我现在人在经济领跑全国的大上海!真可谓人才济济,我只不过是大海里的一滴水。</p>
17 
18 <p>但是,我有斗志,我有自信!我相信自己的能力。我又一次投了华为公司“技术支持”岗位的的简历,虽然华为的招聘广告霍然写着“大学本科以上学历,英语4级”。当然,我现在已经对华为公司有了很深的理解。</p>
19 
20 <p>2周后,果然,深圳人事部再次通知了我,让我参加上海华为3月26、27号的专场招聘会。当人事部的小姐打电话给我的时候,我说明了我的学历只有中专,但愿推荐让我去招聘会试一试,她说我们也非常重视能力。说实话,在这段时间里,我曾被中兴通讯(国内另一家著名通讯企业)因学历问题拒绝过。华为这位人事小姐的的电话,真的让我领略到华为的魄力。</p>
21 
22  
23 
24  
25 
26 <p>经过几天的等待,27号的早上,我换上平时难得穿一次的西装,系上领带,向华为上海分公司进发。</p>
27 
28 <p>华为上海公司坐落于上海浦东最高档同时也是“中华XXXX楼”陆家嘴金融区金贸大厦14层。金贸大厦,无数次坐车经过这里,但从来没有进去过,今天走进去,真的感觉有些不同。大堂很华丽,铭牌在用中、英、日文写明了本座一些入驻公司的名称,旁边是安全检查系统,像我们这种临时出入者,必须办借用一张磁卡,凭磁卡过闸机(类似地铁)才能进入电梯区。电梯区,我看到的差不多都有五、六十部,总体感觉比广州的中信广场要强。在电梯里面我已经隐隐约约能感觉有不少“竞争者”了,因为里面有好多人都是到14层。一出电梯,就看到华为大大的标志“HUIWEI 华为技术”,前台有3名负责招聘的工作人员,走进大堂,里面密密麻麻的全是人。我看到了立在旁边的招聘广告牌,上面写清楚了招聘职位和招聘程序。华为招聘的岗位分四大类:研发、全球技术支持、营销、行政。其中研发和技术支持是招聘岗位最多的。</p>
29 
30 <p>我首先在前台填报到表,工作人员问我是否有预约过,我答是深圳人事部门通知我过来的,他们问我姓甚名谁,我答不出来(接电话的时候没有仔细问)。接过报道表格,是一个较简单一人一行信息的表格,我先看了看别人的信息:<br>“XX 学历:本科 毕业学校:南开最近就职单位:上海西门子……”<br>“XX 学历:硕士 毕业学校:上海交大最近就职单位:ALCATEL”<br>“XX 学历:硕士 毕业学校:巴黎大学 最近就职单位:(应届)”<br>
31 <div align="right">
32 <a href="#top">返回顶部</a>&nbsp;&nbsp;<a href="#end">翻到底部</a>
33 <a name="middle"></a>
34 </div></p>
35 
36 <p>一个个全部是精英啊,我当时都有傻了眼的感觉,我这学历,怎么拿出写手哦?不管三七二十一,我写了毕业学校:武汉大学,其它的填写真实情况。填完报到表,从工作人员手中拿到一份面试人员覆历登记表:首页是让你慎重选则工作地点:A可派至外球各艰苦地区 B可派至海外地区 C可派到全国各地 D只限于在某些城市工作。其实我早了解到:华为目前在非州地区业务迅猛,其中A选项就是指非洲了。由于个人原因,我选择了B、C两项。第二页分别是是个人基本情况如:姓名、出生、政治面貌、兴趣爱好、家庭成员等,稍特别两点的是:一说明你是否有亲友在华为工作,是何职位二,您是否在申请其它国国籍。第三页是填写个人工作经历,从事工作内容,及获得荣誉等。第四页就是期望待遇、和确认签名。在期望待遇一栏上,我写的是8000月薪。因为我目前的目标是年薪十万的工作。我慎重的填完表演格,交给工作人员,同时提交了打印版的个人简历。工作人员看到我的简历后,“您是中专学历?”全场有一些其它的应聘者都惊奇地看着我,“是的,我是”。工作人员答到“我们不招中专生的”,我说:“是深圳人事部那边让我过来参加你们的招聘会的”,“您的简历上有写是中专吗?”“是的”我说。她看一看我的简历,我简历一开始是写的本科,可是在简历最后有明确的说明。“您能提供是深圳那边谁让您过来面试的呢?”“对不起,我实在是记不清了,当时没有注意记。”显然,这位工作人员十分纳闷:中专都可以应聘华为,这不成了菜园子门了吗?她问了我一些简单的问题,然后叫我稍等。她拿着我的简历走开了,后来,她让我先到1407会议室先等着。</p>
37 
38 2010-3-26 12:39 回复 
39 中国结 
40 不是嫖客 
41 259位粉丝 
42 5楼
43 
44 <p>我来到1407会议室,里面大约已经有超过60应聘者在等待考官的面试,男女1:4的比例,这里面有人在拿着专业英语背单词,有的人在看《华为人》的内部报纸,有的人在看华为的宣传资料,还有一些在窃窃私语。我旁边坐着一位大约二十七、八的MM,当她打开自己的手提包时,我偶然瞟了一眼:里面放着英语六级证书和上海贝尔的工作牌。呵呵,感觉全屋子里面都是精英,就是我一个人显得这么渺小。大约20分钟后,终于有主考官拿着履历表和简历,叫我的名字面试了。我的心砰砰直跳,跟着主考官在后,隐约看到我的表格上面有一份黄色的小纸条上面写道“中专学历,现在就职于广州新太”。我们来到一个更大的会议室坐下,里面全部是考官、应聘者。一进门的位置,就是国际营销部门的“语言测试”,那里有两个人在用英语流利的对话。我随主考官坐下,旁边还有一位考官司,其中一位问了问我的基本情况,然后问了我现在从事的工作等等,我一一做答。当谈到学历问题时,我答道:“我的确是中专学历,当年吴士宏也没有上过大学,是从IBM的勤杂工做到Microsoft的中国总经理,她的成功对于我来说是一种鼓励!”,考官微笑的点头。“那做一下测试题吧”,我说“我很喜欢做题,即使做不出来,也会知道自己有哪些欠缺”,考官说道:“是的,在我们这里面试的人,有一些从简历上看是很历害,一考试,什么也不会!”,我答道“考试是一个好方法,不过大家同样是装修工,但如果用水电工的题目去考木工,可能不太合适!”“呵呵,在我们华为不会,我这里有好多套题目,你可以根据自己的特长选择,OS和数据库是必考”。OS是NT、UNIX、Solaris,数据库是:SQL Server、SyBase、Oracle、DB2。你是项目经理,我这里也有题目,不过可能比较难,我们这里是基于PMP的。我心里默想了一下:这几种数据库我都用过,不过Oracle和SQL Server熟悉一些。最终我选择了SQL Server、NT和网络三份试题,当然还有一份英译汉的翻译。我大约花了40分钟做完全部试题。SQL Server自己做对了85%,NT由于多年没有碰过,感觉做对了70%左右,英译汉不是基于计算机和通讯的,而是翻译一段新闻,大约400个单词,有两句话没有看懂,网络有点难,只对60%左右。在我做题目的过程中,我看到刚刚在会议室做在我旁边的MM正在进行“语言测试”呢!好流利!牛啊!</p>
45 
46 <p>我做好试题,把答案交给主考官,两位考官看过后,原来一直没有发言的另一位考官司开始说话了:“你样新太好多人都很熟悉,XXX你应该认识吧,就是我招进来的”,我答道:“认识,我们是同事”,他又说“年前我还和你们开发中心的头XXX在一起喝咖啡,当时他……”我说“公司的确发生了一些不该发生的事情,否则我不会离开新太”,我们又一起聊了很多,原来这位考官真的对我们公司情况很熟悉,认识好多人,他记忆力非常好。最后,“我们坦诚的谈一下:你的能力非常强,作为中专生,做到这一步非常不容易!但是华为必定有自己的一套规钜,否则公司2万多人,都可以把自己的亲戚推荐过来,如果招你进深圳华为,一是学历可能很难通过,二是我们现在招聘的技术支持全部是要派往国外的,你英语可能一定的障碍。”,我说:“我很遗憾,但我可以理解”他接着说道:“你是人才,我们也不想错过,这样,我先推荐你到我们的合资公司,山东华为,做的事情和深圳华为是一样的,也可以学很多东西,我们推荐过去的人,他们一般都会要的,如果进去了,你在那里边先锻炼锻炼,另外再想办法提高自己的学历,几年后你还可以来找我!”……</p>
47 
48 <p>总体来说,面试过程并不像传说中那么复杂,也许是深圳总部的招聘会更复杂和严格一些吧。</p>
49 
50 我走出金茂大厦,我在想,我今天面试是成功了,还是失败了。<br>
51 <div align="right">
52 <a name="end"></a><a href="#middle">返回中部</a>&nbsp;&nbsp;<a href="#top">返回顶部</a>
53 </div>
54 
55 <p>我想不管怎么样,我今天在这里和这么多所谓精英,这么多名牌硕士、本科共同较量,我已经是赢了。</p>
56 </body>
57 </html>

我们来看一下代码的执行效果:

就是这样的,点击翻到中部,网页就会跳转到我们设定的对应锚点处,如:

可以看到,地址栏里的地址变了… 还有一点就是,我们创建的这个锚点,也可以在其他的页面中对其引用,引用方式为:

<a href="test.html#top">跳转到test.html页面的顶部</a>

这个我就不举例了,这节课就这些了,我们下节课再见。

第22节、创建邮件链接

  这里的href属性跟前面的两种链接的href属性不同,这里的href属性由三部分组成,第一部分是电子邮件协议名称mailto,第二部分是电子邮件地址,第三部分是可选属性,为邮件属性,形式为“subject="主题"”其中第一部分与第二部分之间用冒号“:”分开,第二部分与第三部分之间用问号“?”分开。 这节课内容不多,可以说是非常简单,下面我们来写一个实例网页,看看效果: 例26(21.html):

 1 <html>
 2 <head>
 3 <title> ----创建邮件链接</title>
 4 </head>
 5 <body>
 6 <center>
 7 <h1>创建邮件链接示例</h1>
 8 <hr color="teal">
 9 </center>
10 <P align="center">
11 <a href="mailto:673116767@qq.com?subject=在HTML学习的过程中我有点问题需要问你">点击这里给我
12 写信</a>
13 </p>
14 </body>
15 </html>

代码很简单,我就不解释了,看一下执行效果吧,这是网页初打开时的状态:

下面这个是我点击这个链接后出现的画面:

这样就达到了创建邮件链接的目的,好了,我们今天的任务结束,下节课开始讲表单,朋友们再见。 第23节、使用表单

今天继续,开始说表单的实现,先说一下什么是表单,来看个图吧:

我这个图是截的free258的注册页面的图,这就是一个表单,我们在表单里输入相关的信息,然后点击最下面的“注册”按钮,这样我们所填写的信息就通过post或get方式传送给了网站的数据库,这样网站的管理人员就有了我们的注册资料。 那么,表单就是一种用来收集站点访问者信息的一种手段,当我们填完表单后,我们点击“注册”或“提交”按钮,这样我们所填的信息就被送出了,这时候,网站管理人员事先设定好的处理我们提交的信息的程序就会启动,以各种不同的方式处理这些数据。 那么,在HTML中,表单标记为form,基本语法格式如下:

<form name="字符串" method="get|post" action="字符串">
... ...
</form>

我们来介绍一下form标记的属性:

1. name属性:我们使用这个属性指定表单的名字,以便在后面使用脚本的时候调用该表单,不然没有名字的话,脚本不认识它。
2. method属性:指定传送数据的方式,该属性可以有两个值,get和post,其中get的意思是直接将表单数据附加到请求该页的URL后,从而传送到服务器上,post的意思是在HTTP请求中嵌入表单数据,再传送。
需要注意的是,使用get方式时应保证表单的数据不超过8192个字节,若超过了8192个字节,那么表单中的数据将被截断,从而造成数据处理失败,另外,如果表单中传送的是用户名和密码等重要信息的话,不要使用get方法,而应该使用更安全的post方法,所以,当我们指定表单数据的传送方式时,最好用post方法。
3. action属性:指定将要接收表单数据的服务器端程序或该程序的URL地址。
4. onsubmit属性:指定提交表单时要调用的事件处理程序
5. onreset属性:指定重置表单时要调用的事件处理程序
6. target属性:指定一个目标窗口,其取值如下:
☆ _blank:在未命名的窗口中打开目标文档
☆ _parent:在显示当前文档的窗口的父窗口中打开目标文档
☆ _self:在提交表单所使用的窗口中打开目标文档
☆ _top:在当前窗口中打开目标文档,并确保目标文档占用整个窗口

在一个网页中可以包含多个表单,在每个表单里都可以包含各种控件、文本框、复选框、下拉选单、按钮等内容,但,需要记住的是,表单是不能嵌套的。 OK,下面我们先来说如何使用输入型表单控件: 在HTML中,我们使用input标记来创建各种输入型表单控件,通过将input标记的type属性设置为不同的值,可以创建不同类型的输入型表单控件,包括单行文本框、密码框、复选框、单选按钮、文件域、按钮等。 下面我们来说一下使用单行文本框的方法。 将input的type属性设为text,即在网页中插入了一个单行文本输入框。 基本语法为:

<input type="text" name="txt-1" value="字符串" size="整数" maxlength="整数">

其中,name属性指定该单行文本框的名字,指定名字是为了我们以后使用脚本处理表单中的数据的时候用,value属性指定单行文本框的初始值,即在用户未输入任何内容时文本框里显示的内容,size属性指定单行文本框的宽度,maclength属性指定单行文本框内可输入的最大字符数。 OK,这东西不难的,那么下面我们就再来说一个,使用密码输入框。 朋友们应该有过体会,就是我们在注册账户或登录账户的时候,我们输进去的密码显示的是星号(*)或者实心圆点(●),我们现在就来讨论一下这些技术的实现方法: 使用密码输入框的方法跟使用单行文本框的方法差不多,只是input的type值由text变成了password,即基本语法为:

<input type="password" name="pass-1" value="字符串" size="整数" maxlength="整数">

这里name属性与单行文本框的名字的作用一样,value和size、maxlength都一样。 好,密码输入框我们也说过了,不要着急,上面两个输入框使用的方法大致上是一样的,那么,我们就再来说一个不同的,不过这个不同也只是一点点的不同罢了,那就是----使用按钮。 我们在注册或者登录的时候经常会用到各种各样的按钮,比如确定、重写、提交、注册等等按钮,这些按钮的实现方法就是将input的type属性设置为不同值来实现的。 在HTML里,我们可以使用input的type值设为submit(提交按钮),reset(重置按钮)和button(自定义按钮)。 创建按钮的基本语法为:

<input type="submit|reset|button" name="字符串" value="字符串" onclick="过程"

其中type可取的值有: 1. submit:创建一个提交按钮,当用户将表单中的需要填的东西填完了之后,点击此按钮提交填写好的数据,当我们点击了提交按钮之后,表单中的(包括提交按钮的名字和值)以ASCII文本格式传送给由表单中指定的表单处理程序来处理。 一般情况下,每个表单都是有提交按钮的。 2. reset:创建一个重置按钮,在输入表单时如果我们输入错误的地方有很多或者填完以后发现没有表达自己的意思的话,我们可以使用重置按钮,这个按钮的作用就是清空表单中已被填写或选择的项目,将表单还原到初始状态。 3. button:创建一个自定义按钮,这样的按钮被创建以后,我们必须为其指定一个专门的按钮处理程序,也就是必须为其指定一个处理脚本。 4. name:指定按钮的名称,注意,这个是按钮的名字,不是在按钮上显示的文字。 5. value:指定在按钮上显示的文字,比如设为“提交”。 另外,值得一提的是,除了上述属性之外,按钮控件还支持onclick事件,onclick事件就是鼠标单击事件,就是当我们单击了这个按钮的时候按钮可以作出相应的反应。 OK,下面我们来写一段代码,使用我们上边学习的内容来创建一个简单的表单。

例27(22.html):

 1 <html>
 2 <head>
 3 <title> ----创建一个基本表单</title>
 4 </head>
 5 <body>
 6 <form>
 7 <table align="center" width="368">
 8 <tr bgcolor="teal">
 9 <th colspan="2" align="center">
10 <font color="white">
11 登录表单
12 </font>
13 </th>
14 </tr>
15 <tr>
16 <td align="right" width="113" height="50">
17 用户名:
18 </td>
19 <td width="241" height="50">
20 <input type="text" name="t-1" size="20" maxlength="12">
21 </td>
22 </tr>
23 <tr>
24 <td align="right" width="113" height="50">
25 密码:
26 </td>
27 <td width="241" height="50">
28 <input type="password" name="pwd-1" size="20"
29 </td>
30 </tr>
31 <tr align="center">
32 <td width="110" align="right" height="50">
33 <input type="submit" name="sub-1" value="确定">
34 </td>
35 <td width="241" height="50">
36 <input type="reset" name="reset-1" value="重写">
37 </td>
38 </tr>
39 </table>
40 </form>
41 </body>
42 </html>

  我们来看一下执行效果吧:   这是网页刚打开的时候:

  这是我填写了一些内容之后:

  可以看到,在密码的输入栏里显示的是星号,这样安全系数就进一步增强了。   点击重写按钮则清空所有已填写的内容,恢复表单的初始状态,当然,在这里我点击确定也是没有用的,因为我没有对<form>标记指定处理它提交的内容的程序,我们会在接下来的课程中一步一步讲到。   好了,今天就说这么多吧,我们明天见! 第24节、在表单中使用图形化按钮、单选按钮和复选按钮

  上节课我们说的是,在表单中使用单行文本框以及密码框、提交按钮、重置按钮等,今天我们来学习一下使用图形化按钮和单选按钮和复选按钮。   先说使用图形化按钮,意思就是使用一张图片作为一个按钮来使用,这样看起来更美观,它的基本语法是这样的:

<input type="image" src="图像的位置" name="字符串" value="字符串">

其中,type的值为image,这意思就是说,我现在使用的是一个图形按钮,而后面的src属性则指定了我们使用的图像按钮的位置,再后面,是name属性和value属性,我们在写代码的时候,这两个属性随便用一个就好,不必两个都用,因为它们在这里的作用是一样的-----都是指定的图像的替换文字,也就是当图像显示不出来时的替换文字。 使用图形化的按钮就说完了,下面是使用单选按钮,首先,我们来了解一下什么是单选按钮,所谓单选按钮,顾名思义,就是在一组选项中,我们一次只能选择一个,实现方法是将type的属性设置为radio,基本语法是这样的:

<input type="radio" name="字符串" value="字符串" checked>

其中,name属性指定单选按钮的名称,若干个名称相同的单选按钮构成一个单选选项组,我们一次在这个组中只能选择一个选项。 Value属性指定提交时的值,就是每个单选选项对应的编号。 还有一个checked属性,这个属性是可选属性,它是用来指定单选框的默认选择的,就是如果使用了这个属性,则这个选框在初始状态时是被默认选中的。 单选也说完了,还有一个复选,这个也不难,使用复选框 下面我们来写一段代码, 例28(23.html):

 1 <html>
 2 <head>
 3 <title> ----创建基本表单</title>
 4 </head>
 5 <body>
 6 <form>
 7 <table align="center" width="368">
 8 <tr bgcolor="teal">
 9 <th colspan="2">
10 <font color="white">用户资料</font>
11 </th>
12 </tr>
13 <tr>
14 <td width="106" align="right" height="50">姓名:
15 </td>
16 <td width="248" height="50">
17 <input type="text" name="txt-name" size="20">
18 </td>
19 </tr>
20 <tr>
21 <td width="106" align="right" height="50">性别:
22 </td>
23 <td width="248" height="50">
24 <input type="radio" name="radio-usersex" value="男" checked>男&nbsp;&nbsp;&nbsp;<input 
25 type="radio" name="radio-1" value="女">女</td>
26 </tr>
27 <tr>
28 <td width="106" align="right" height="36">兴趣:
29 </td>
30 <td width="248" height="36">
31 <input type="checkbox" name="chk-interest1" value="听音乐">听音乐
32 &nbsp;<input type="checkbox" name="chk-interest2" value="看小说">看小说
33 &nbsp;<input type="checkbox" name="chk-interest-3" value="上网">上网
34 </td>
35 </tr>
36 <tr>
37 <td align="right" width="106" height="36">
38 <input type="submit" name="btn-submit" value="提交">
39 </td>
40 <td width="248" height="36" align="center">
41 <input type="reset" name="btn-reset" value="全部重写">
42 </td>
43 </tr>
44 </table>
45 </form>
46 </body>
47 </html>

  OK,我们来看一下代码的执行效果:

  好了,这个表单里用到了单元格的合并,单行文本框,单选框,复选框,提交按钮和重置按钮,可以看到在单选框里,“男”是默认被选中的,这就是我们使用了checked属性的效果。   今天就说到这里吧,关键还是要多多练习,那样才会有效果。   下节课再见,我是不是嫖客,再见。

第25节、在表单中插入文件域

  上节课我们说了使用单选按钮和复选按钮还有图形化的按钮,我们举的例子有单选按钮和复选按钮,但没有举图形化的按钮的例子,那么这节课我们就来演示一下,在演示之前呢,我们还需要学习一点知识,那就是学学在表单中插入文件域。   首先,说明一下什么是文件域,我们来看个图吧:

  这里是红吧上传页面的一部分,这里就是一个文件域,可以看出,一个文件域由一个文本框和一个“浏览”按钮组成,我们可以直接在文本框中输入文件的路径,也可以点击浏览,然后选择需要上传的文件。   我们将input标记的type属性设为file,即可在网页中插入文件域。   语法格式为:

<input type="file" name="字符串" size="字符串" value="字符串">

其中,name属性指定文件域的名字标识,value属性指定初始文件名,size属性指定文件名输入框的宽度。 下面我们来写一段实例,对着实例看看你就明白怎么用了。 例29(24.html):

 1 <html>
 2 <head>
 3 <title> ----使用文件域</title>
 4 </head>
 5 <body>
 6 <form name="form-1">
 7 <table name="tab-1" align="center" width="388">
 8 <tr>
 9 <th colspan="2" bgcolor="teal">
10 <font color="white">文件域</font>
11 </th>
12 </tr>
13 <tr height="52">
14 <td align="right">请选择文件:</td>
15 <td align="left">
16 <input type="file" name="file-1" value="tank.txt" size="20"></td>
17 </tr>
18 <tr height="60">
19 <td align="right">
20 <input type="submit" name="btn-sub" value="开始上传">
21 </td>
22 <td align="center">
23 <input type="reset" name="btn-reset" value="重新选择">
24 </td>
25 </tr>
26 </table>
27 </form>
28 </body>
29 </html>

来看一下代码的执行效果吧: 虚拟机坏了,只好在本地打开了,呵呵:

OK,这节课就说这么多吧。

第26节、使用其他类型的表单控件

这节课,应该是HTML课程的最后一节课了,呵呵,苦难的日子终于要结束了,把这事做完我就得给吧里再规划一下了。 废话不多说了,今天的内容可能有些多,但都不难,我们一个一个的来看。 一、 在表单中使用滚动文本框 我们在前面讲过使用单行文本框,即将input的type属性值设为text,这里的多行文本框的实现方法可不一样了,我们直接在<form>和</form>标记对之间使用textarea标记来创建多行文本框(即滚动文本框),其基本语法为:

<textarea name=”字符串” rows=”整数” cols=”整数” [readonly]>…</textarea>

其中的name属性指定滚动文本框控件的名称,rows属性指定该控件的高度(以行为单位),cols属性指定该控件的宽度(以字符为单位),readonly属性是可选的,这个单词朋友们应该可以看懂吧,是只读的意思,即指定该属性后该控件内的内容不可被浏览者修改。 而<textarea>和</textarea>之间的内容将作为这个滚动文本框的初始值。

二、 在表单中使用下拉菜单控件

我想朋友们应该知道什么是下拉菜单吧,我们可以从列表或选单中选择一项或多项。 我们在<form>和</form>标记之间使用select标记来创建下拉菜单,并使用option标记将每个选项列出来,其基本语法为:

<select name=”字符串” size=”整数” [multiple]>
<option [selected] value=”字符串”>选项1</option>
<option [selected] value=”字符串”>选项2</option>
……
</select>

同样的,name属性指定该控件的名称,size属性指定在列表中一次可以看到的选项数目,multiple属性是一个布尔属性,它指定该控件是否允许选择多项,即加上该属性时,允许多选,不加则不允许多选,selected属性指定该项的初始状态为选中状态。

三、 给控件分组

我们前面介绍的都是使用单个控件的例子,但如果我们需要在一个页面里使用多个表单控件的话,给他们分组是一个不错的选择。 在HTML里,使用fieldset标记对表单控件进行分组,该标记必须以legend标记开头,以指定控件组的标题,在legend之后是该组内的控件,也可以使用嵌套的fieldset。 其基本语法格式为:

<fieldset>
<legend>控件组标题</legend>
该组内的控件
</fieldset>

  好了,我们上面把今天的内容大致说了一下,下面又到写代码的环节了,最后一节课,我们尽量多用前面学习的知识吧,下面来一起创建一个表单: 例30(25.html):

 1 <html>
 2 <head>
 3 <title>使用其他表单控件</title>
 4 </head>
 5 <body>
 6 <form>
 7 <fieldset>
 8 <legend>
 9 <b>个人资料</b>
10 </legend>
11 <table bgcolor="teal" width="300" align="center">
12 <tr>
13 <td>姓名:</td>
14 <td>
15 <input type="text" name="txt_name" size="20">
16 </td>
17 </tr>
18 <tr>
19 <td>性别:</td>
20 <td>
21 <input type="radio" name="rad_sex" value="男" checked>男
22 </td>
23 <td>
24 <input type="radio" name="rad_sex" value="女">女
25 </td>
26 </tr>
27 <tr>
28 <td>
29 出生日期:
30 </td>
31 <td>
32 <input type="text" name="txt_birthdate" size="20">
33 </td>
34 </tr>
35 <tr>
36 <td>
37 个人特长:
38 
39  
40 
41 
42 </td>
43 <td>
44 <textarea name="text_techang" rows="3" cols="20">
45 </textarea>
46 </td>
47 </tr>
48 </table>
49 </fieldset>
50 <br>
51 <fieldset>
52 <legend><b>专业与课程</b></legend>
53 <table name="tab_2" align="center" width="300" bgcolor="teal">
54 <tr>
55 <td>
56 所学专业:
57 </td>
58 <td>
59 <select name="sel_zhuanye" size="1">
60 <option selected>计算机应用</option>
61 <option>计算机网络技术</option>
62 <option>计算机软件技术</option>
63 </select>
64 </td>
65 </tr>
66 <tr>
67 <td valign="top">
68 所学课程:
69 </td>
70 <td>
71 <select name="sel_kecheng" size="3" multiple>
72 <option selected>计算机应用基础</option>
73 <option>办公软件</option>
74 <option>数据库应用基础</option>
75 <option>ASP动态网页设计</option>
76 </select>
77 </td>
78 </tr>
79 <tr>
80 <td>
81 <input type="submit" name="btn_submit" value="提交">
82 </td>
83 <td>
84 <input type="reset" name="btn_reset" value="重置">
85 </td>
86 </tr>
87 </table>
88 </fieldset>
89 </form>
90 </body>
91 </html>

  OK,我们来看代码的执行效果:

  这就是控件分组的效果,还是不错的。   那么到这里为止,我们的表单就已经基本结束了,最后再介绍一点,即我们创建了表单以后设计到的表单的提交和处理问题,当用户填写完表单后,点击提交按钮即可将表单数据提交给服务器上指定的表单处理程序。   提交信息表单处理程序的方法由form标记的method属性来确定,

  提交表单的方法有两种:

get方法和post方法,

1 get方法将表单的名称/值对进行程序编码,并将该信息赋予给一个叫QUERY_STRING的服务器变量;
2 
3 post方法则直接将名称/值对传送至表单处理程序作为该程序的输入

  表单处理程序的URL地址由form标记的action属性来决定,当然,如果要处理我们自己创建的表单数据的话,我们需要在服务器端为其编写脚本(asp、php等)作为该表单的处理程序,说到这里可能有的朋友已经想到注入了,呵呵,这个貌似跟注入还是有那么一点点关系的,呵呵   好了,我们表单的学习正式结束,到这里,我们的HTML课程也就结束了,历时26节课,我写了有一个多月,每天坚持着写一篇,虽然很简单,但也算是为吧里做了点贡献吧,呵呵   其实编程这东西还是需要很大毅力的,我看书的时候,第一遍看不懂,我觉得很正常,那我会继续看第二遍,还不懂,继续第三遍,呵呵,最终我学会了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-08-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云数据库 SQL Server
腾讯云数据库 SQL Server (TencentDB for SQL Server)是业界最常用的商用数据库之一,对基于 Windows 架构的应用程序具有完美的支持。TencentDB for SQL Server 拥有微软正版授权,可持续为用户提供最新的功能,避免未授权使用软件的风险。具有即开即用、稳定可靠、安全运行、弹性扩缩等特点。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档