HTML学习基础

[复制链接] 0
回复
2419
查看
打印 上一主题 下一主题

86

主题

525

帖子

525

积分

荣誉会员

Rank: 4

积分
525
QQ
跳转到指定楼层
1#
发表于 2007-12-18 16:28:26 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多郧西好友

您需要 登录 才可以下载或查看,没有帐号?注册

x
这是本人刚开始学做网页的时候一朋友教我写的HTML文字教程

现在拿出来希望能用的上

      七月的天书
写在前面的话:
  大家好,我是七月七日晴,今天在这里和大家讨论一下关于html语言的问题,也为以后编程的学习做个铺垫;对于新手来说,学编程最好的起步当然是QB之类基于Basic的语言,但是从另个角度讲,学习编程从最简单的html做铺垫也不失为一种选择。
  Ok,话不再多说,下面我们就开始Html之旅。
     第一章  Html语言
    §1-1 Html语言亲密接触
  相信上网的朋友都浏览过网页,有没有想过一张张美丽的网页背后是由什么组成的呢?那我们大家就一起来看一下。
  在地址栏输入http://wwwsohucom,打开网页之后,[查看]→[源文件],这个时候就弹出一个记事本,可以看到许多英文字母,现在看不懂得没关系,也不必着急,等您看完这部教程后,我会让您对html语言有个深入的了解。Ok,切入正题。
可以看到
<html>
<!-- head -->
<head>
<title>搜狐首页</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="Create-time" content="2004-09-13 09:34:14">
  这是一种语言,叫做Html语言(Hypertext Marked Language[超文本标记语言]),是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX,WINDOWS等)。
  所谓超文本,因为它可以加入图片、声音、动画、影视等内容,因为它可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。
  我们可以用各种文本编辑工具来编辑、修改它,这里我推荐使用记事本。
    §1-2 Html语言的基本结构
  上节中我们对将要学习的html语言有了一个初步了解,那么本节我们就了解一下html语言的本质。
但凡Html语言,结构都如下
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
    以上展示的就是一个html最基本也最简单的结构,
<html>,声名这个网页是用html语言做的
<head>,英文原意为头,也就是头所包含的各种程序脚本语言,变量声名,样式表声名等等,总之是做一些初始化的事情。
<title>,英文原意为标题,也就是网页的标题
<body>,英文原意为身体,也就是网页的主要部分
  仔细观察可以发现一个规律,每个<>总有一个</>,对,这叫做程序的嵌套,有个开始必须有结束。以上的解释相信大家对于html语言的结构有了一个最初的了解,下面让我们大家动手来做一个网页吧。
  在桌面上建立一个新文本文档,将下列内容复制粘贴到里面,当然最好是能自己输入
<html>
<head>
<title>七月的天书</title>
</head>
<body>
七月的天书
</body>
</html>
  [文件]→[另存为]→文件名为1html→[保存类型为{所有文件}]→[保存]
  这样桌面上就多出一个1html文件,双击打开他,是不是出现了一个标题为<七月的天书>,内容为<七月的天书>的网页?怎么样,你可以尝试着修改为别的内容,体会一下html语言。
  恭喜您!您已经向最后的成功卖出坚实有利的一步,古人说良好的开始是成功的一半,继续努力吧!
    §1-3 Html语言的 head 元素
  上节中我们对html语言有了初步的了解,并动手制作了一个简单的网页,本节中我们就深入的了解一下html中各个元素的作用,首先我们来看head
  还是以sohu为例
<head>
<title>搜狐首页</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type=text/css>
td,body,input,select {font-size: 12px;}
</style>
</head>
  head元素首先包含的是title元素,也就是网页的标题,两个<title></title>之间包含的字符为网页的标题,那么我们再来看下面的
<meta http-equiv="content-type" content="text/html; charset=gb2312">
声名该网页使用的字符集为gb2312也就是简体中文,那么别的字符集还有
us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce,
iso-2022-jp, x-sjis, x-euc-jp,
euc-kr, iso-2022-kr,
gb2312, gb2312-80,
x-euc-tw, x-cns11643-1, x-cns11643-2, big5
使用不同国家语言的时候声名不同的字符集
<style type=text/css>
Style元素,是head中的子元素,用来定义网页中的层叠样式表的类型,也就是统一化标记网页样式
Css语言我们将在以后的章节中讨论。
  Sohu中的head应用的标记比较少,其他的还有
<Script>,脚本语言标记等等,另外的标记在使用时大家可以参考其他资料。
    §1-4-1 Html语言的 Body 元素——概述
  Body元素是一个网页最重要的部分,所以他包含的元素也最多以下我们一一讲解。
  还记得上节我们做的那个简单的网页吗,是不是显的很单调?下面我们稍做修改。
<html>
<head>
<title>七月的天书</title>
</head>
<body bgcolor=green text=blue>
七月的天书
</body>
</html>
  修改后保存为html文件重新打开,看到了什么?怎么样,觉得自己很厉害吧,body本元素中包含很多的子元素,例如
bgcolor --- 背景色彩
text --- 非可链接文字的色彩
link --- 可链接文字的色彩
alink --- 正被点击的可链接文字的色彩
vlink --- 已经点击(访问)过的可链接文字的色彩
background --- 网页的背景图片
  语法:
     <body bgcolor=颜色 text=颜色 link=颜色>
  上面提到了颜色,html的颜色表示方法有3种,1是直接的英文单词表示颜色,2是#16进制的数字表示颜色,3是rgb(0-255,0-255,0-255)表示颜色
1。英文单词
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White(与白色背景一样的颜色,颜色值为FFFFFF), Green, Purple, Silver, Yellow, Aqua
如果你熟悉英文单词的话,相信对以上单词应该不陌生,需要的时候拿过来用就是了,建议要记忆常用的颜色
2。16进制表示颜色
#ffffff 白色
#000000 黑色

3。rgb表示颜色
rgb(255,255,255) 白色
rgb(0,0,0)    黑色

  如果我们想让不同字有不同颜色怎么办呢?看以下的代码
<html>
<head>
<title>七月的天书</title>
</head>
<body bgcolor=green>
<font color=red>七月</font><font color=white>的</font><font color=blue>天书</font>
</font>
</body>
</html>
  打开之后看到什么?七月的颜色为红,的 的颜色为白,天书的颜色为蓝,很奇怪是不是?
  上面的例子中我们用到了font元素,下面我们就讨论一下font元素
  语法:
     <font color=颜色 size=a face=b >要修饰的问题</font>
  a的取值范围为1-7,数字越大字体越大
  b的取值为字体名称
  尝试以下代码
<font size=1>七月的天书</font>
<font size=2>七月的天书</font>
<font size=3>七月的天书</font>
<font size=4>七月的天书</font>
<font size=5>七月的天书</font>
<font size=6>七月的天书</font>
<font size=7>七月的天书</font>
  看到了什么?从小到大的字,是不是?
  长石以下代码
<font size=5 face=宋体>七月的天书</font><br>
<font size=5 face=黑体>七月的天书</font><br>
<font size=5 face=新宋体>七月的天书</font><br>
  体会到不同字体的区别了?
  本节中我们对font和body的子元素做了了解,大家以后做网页的时候可以应用更多的东西了。
课后作业:
  制作一个网页,要求:
背景为蓝色,标题为我的第一张网页,网页中的文字为
中国X黑客小组
中国为红色,X为绿色,黑客为黑色,小组为白色
    §1-4-2 Html语言的 Body 元素——超连接元素
  经过了以上的学习,相信大家已经可以做出能让自己满意的网页,仔细想想,是不是网页中还缺少点什么?图片?音乐?超级连结?对!网页中缺少的是多媒体元素,本节中我们讨论一下如何在网页中使用多媒体元素。
尝试以下代码:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
<a href=http://wwwsohucom>搜狐</a>
</body>
</html>
  保存打开后,看到了什么?一个超级连接,对吧?单击跳转到sohu主页,怎么样,好玩不?
  语法:
     <a href=a title=b target=c>提示信息</a>
   a的取值范围,所有合法的Url,一般为http://,很奇怪吧,为什么大多都是http?意思是:声明这个连接是用http[超文本传输协议]的,类似的协议还有如下:
  file      本地系统文件
  http      WWW服务器
  ftp       ftp服务器
  telnet     基于TELNET的协议
  mailto     电子邮件
  news      Usenet新闻组
  gopher     GOPHER服务器
  wais      WAIS服务器
  URL链接的形式是:  协议名://主机域名/路径/文件名
  b的取值范围,所有合法的字符串,这里不多做解释
  c的取值范围:
   blank   新开窗体显示
   self    本身窗体显示(默认)
   parent   父窗体中显示
   top    显示在整个浏览器窗口
   自定义的名称  用来使用在框架(Frame)中,框架也是Html中的 一个很重要的部分,将在以后的课程中详述
  再看以下代码:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
<a href=http://mp3baiducom/m?f=ms&tn=baidump3lyric&ct=150994944&lf=2&rn=10&word=%C6%DF%D4%C2%C6%DF%C8%D5%C7%E7&lm=-1 title=七月七日晴的歌词 target=blank>七月七日晴</a>
</body>
</html>
  修改保存打开后看到了什么?将鼠标停留在文字上3秒不动即显示“七月七日晴的歌词”这几个字,单击将在新窗体中打开这个连接。仔细思考一下,如果要让这几个字为绿色怎么做呢?我想聪明的你一定想到了,对!
  再看以下代码:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
<a href=http://mp3baiducom/m?f=ms&tn=baidump3lyric&ct=150994944&lf=2&rn=10&word=%C6%DF%D4%C2%C6%DF%C8%D5%C7%E7&lm=-1 title=七月七日晴的歌词 target=blank><font color=green>七月七日晴</font></a>
</body>
</html>
  超级连接是有了,还没有图片是不是?那下面我们就来看一下如何将自己心爱的图片加到网页当中。
  不过在讲述图片之前,先插叙一点,关于路径,学过dos的人肯定都知道路径。在网站制作中,路径可分为两类,一类是相对路径,一类是绝对路径。那么什么叫绝对路径呢?例如,你有个网站,网址为http://wwwjnsjjxnet,在主页中有需要有个到主页的连接,你如果写做http://wwwjnsjjxnet/indexasp就叫做绝对路径,一般我们不推荐这样做,以为一旦使用绝对路径的话,一旦网页需要移植就会出很大的麻烦,目前来说我们提倡相对路径。那么什么又叫做相对路径呢?比如说在http://wwwjnsjjxnet下,有个子目录(文件夹)叫做tupian,如果你想在http://wwwjnsjjxnet/indexasp下调用tupian下的indexbjgif
你可以把路径写做:
绝对路径:
相对路径:tupian/indexbjgif
  Ok,经过上面的叙述,我想大家已经对绝对/相对路径有了一个最初的了解,暂时还不明白没关系在以后的实际应用中相信您会有一个透彻的了解。
  这里我们再提倡一点,文件明明的见名知意原则如果你有个图片文件是首页文件的图片背景文件,那么你可以命名为indexbjgif,Html文件命名的时候有个不成文的约定,就是网页名+下划线+作用名字,比如有个图片文件是网站的顶端图片,我们可以命名为indextopgif。
  再有就是分类放置网站中的各种资源,现在不明白没什么,在以后的应用中你会体会到以上几点好处,尤其是维护大型网站,如果东西放的很乱的话,以后维护起来你会很头疼的。以上几点是我在实际应用中总结的几点经验,写出来希望能给新手一些帮助。
  Ok,切入正题,看以下代码:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
<a href=http://mp3baiducom/m?f=ms&tn=baidump3lyric&ct=150994944&lf=2&rn=10&word=%C6%DF%D4%C2%C6%DF%C8%D5%C7%E7&lm=-1 title=七月七日晴的歌词 target=blank>七月七日晴<img src=http://klsjnh51net/tupian/indexbjgif></img></a>
</body>
</html>
  修改保存打开后看到了什么?怎么样,在自己的网页中出现了美丽的图片了吧?
  语法:
     <img src=a width=b height=c border=d alt=c></img>
     a的取值范围  所有合法的url,为图片的地址
     b的取值范围  所有合法的数字,为图片的宽度
     c的取值范围  所有合法的数字,为图片的长度
     d的取值范围  0,1;表示图片有没有边框,一般设置为0,因为大多数时候图片有边框很难看
     e的取值范围  所有合法的字符串,表示如果图片无法加载的时候显示的文字或鼠标悬停在图片上显示的字符
  再看如下代码:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
<a href=http://mp3baiducom/m?f=ms&tn=baidump3lyric&ct=150994944&lf=2&rn=10&word=%C6%DF%D4%C2%C6%DF%C8%D5%C7%E7&lm=-1 title=七月七日晴的歌词 target=blank><img src=http://klsjnh51net/tupian/indexbjgif width=100 height=100 alt=我的主页 border=0></img></a>
</body>
</html>
  修改保存打开后,看一下,是不是舒服了许多?有的朋友这个时候也许会问,为什么图片变成超级连接了?没错,这里涉及一个html代码的嵌套问题,也等你以后慢慢的了解吧。
  另附,上面有朋友问到如何换行,也许是我写做中疏忽了这一点,换行为<br>,不好意思。
  课后作业:
1。自由发挥主题
背景为大海的图片,标题为让理想飞翔,网页中文字有我的爱好,我的家园,。。。后面复有图片,点击图片着则在新网页打开相关资料
2。命题作文
网页背景图片为
网页内容为七月七日晴的歌词
歌词标题为红色,6号字,其他为4号字
标题字体为黑体,其他为新宋体
歌词大部分为蓝色
所有的七月七日晴为绿色
要求换行
设计一个图片超级连接
图片为
超连接对象为http://mp3baiducom/m?f=ms&rn ... %D5%C7%E7&lm=-1


    §1-4-3 Html语言的 Body 元素——多媒体元素
  
  前几期的教程发出后,收到了来自各方面的意见和建议,在这里,七月谢谢大家的支持。在这里我要更正前面课程中的一个错误观点,html不是程序,也不是编程。
[/COLOR]
看如下代码:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
<embed src=http://wwwjnsjjxnet/zhizhuo/aiyingswf width=600 height=500>
</body>
</html>
  保存修改打开后开到了什么?对,动人的Flash爱情故事。这一例中我们涉及了embed元素,下面我们就来学习一下。
  语法:
     <embed src=a width=b height=c loop=d autostart=e>
     a的取值范围  所有合法的url,为资源文件的地址
     b的取值范围  所有合法的数字,为资源文件的显示宽度
     c的取值范围  所有合法的数字,为资源文件的显示长度
     d的取值范围  所有大于0的数,和-1,表示为播放次数,如果为-1的话就是循环播放,不停止,为正数的话就表示播放多少次
     e的取值范围  0/-1,0为不启用,-1为启用,为是否自动播放
  以上我列举了一些这个元素的常用属性,另外还有一些不常用的属性以下也列举给大家,只做了解
  starttimeE="分:秒" ,设定开始播放的时间,Flash无效
  volumeE=0-100 设置音量大小,如果不设系统默认为当前音量
  hidden=-1/0 是否显示控制面板,显示为-1不显示为0
  control=console/smallconsole 设定控制面板的样式
  再看如下代码:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
<embed src=http://klsjnh51net/mid/aoturm width=50 height=50 autostart=-1 loop=-1>
</body>
</html>
  修改保存打开后听到音乐了吗?一手GiGi的凹凸,也是我蛮喜欢的一手歌,学了这么久,送个小礼物给大家,呵呵(臭鸡蛋,烂柿子@#$!%^&)哇,逃跑~~
  以上我们对embed元素有了一个初步的了解,这是一个很有用的元素,可以插入Flash、rm、asf、mp3等等多媒体元素,当然以前,大都使用的是<bgsound>元素,这个元素已经过时了。
  经过了以上的所有课程我想大家已经能可以制作出让自己满意的网页了,那么这节的课后作业就是做一个简单的个人介绍,当然要美观的,做好后在发到七月的e-mail,下面跟帖告诉我。



  不好意思让大家等了这么久的时间才出第六节,以后工作了,时间少了,不过我还是会努力将本书写下去的,谢谢大家的支持。


        七月的天书外传——天之痕
  大家好,我是七月七日晴,今天我们讨论一下联众世界的多开技术。
  玩过联众够级的人大多都遇到过刷分的人,很头疼也很可恨吧(别恨,我就是刷分的,而且特别不厚道。。。),下面我们就来看一下如何在机器上多开联众。
  首先,删除你机器安装的所有联众程序,当然,未安装的省略此步。
  下载好破解版的联众,http://wwwjnsjjxnet/zhizhuo/goujirar
   七月保证该程序的安全性。
   解压,安装,后,打开Lzdk,解压后,把那几个破解文件覆盖到当前联众的安装目录下,默认为X:\Program Files\Globallink\Game\share\GLWorldexe,下,找到此路径,然后全部覆盖。
  恭喜你,你已经向成功迈出了第一步。
  进入联众,下载够级。然后随便进入一个游戏室,退出来。
  开始,运行,regedit打开注册表编辑器,依次找到
  HKEYLOCALMACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion
  下的MapId,然后修改为8个0,F5刷新关闭
  恭喜,现在您的联众就可以多开了,享受一下刷分的乐趣吧!~
    §1-4-4 Html语言的 Body 元素——表格元素
  前几节中,我们学习了Html语言“初级”部分的知识,从本节开,我们就要
学习Html语言“高级”的知识了。
  相信大家对表格并不陌生,在现实生活中也有很多地方要用到表格,那么我就不用再引入了。

们的Html语言能不能实现表格呢?答案是肯定的!
  看如下代码:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
<table border=1>
<tr>
<td>姓名</td><td>性别</td><td>工资</td>
</tr>
<tr>
<td>张三</td><td>男</td><td>500</td>
</tr>
<tr>
<td>王寒</td><td>女</td><td>900</td>
</tr>
<tr>
<td>李四</td><td>男</td><td>600</td>
</tr>
</table>
</body>
</html>
  修改保存打开后是不是看到一张很简单的表格?好象不是很美观,那么下面

我们再来美化一下,看如下代码:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
<table border=1>
<tr bgcolor=red>
<td>姓名</td><td>性别</td><td>工资</td>
</tr>
<tr bgcolor=blue>
<td bgcolor=white><font color=black size=5>张三</font></td><td>男

</td><td>500</td>
</tr>
<tr bgcolor=blue>
<td>王寒</td><td>女</td><td>900</td>
</tr>
<tr bgcolor=blue>
<td bgcolor=green>李四</td><td>男</td><td>600</td>
</tr>
</table>
</body>
</html>
  以上代码中我们应用了以上所学的所有知识,也算对以上知识的一次回顾吧。
  语法:
     <Table widht=a height=b border=c>
    a的取值范围为所有合法正数,为表格宽度
    b的取值范围为所有合法正数,为表格高度
    c的取值范围为所有合法正数,为表格边框宽度
   当然,a的取值最好不大于屏幕的宽度(800/1024)
      b的取值最好不大于屏幕的长度度(600/768)
      c的取值最好不大于5,因为很宽的表格很难看
  不过,Table 只是一个表格的大结构,真正起作用的,还是<tr>和<td>元素。
   语法:
     <tr> 建立一行
     <td> 建立一个单元格
  那么下面我们来动手做一个简单的表格。看如下代码:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
<table border=1>
<tr>
<td>只有一行一列的表格</td>
</tr>
</table>
</body>
</html>
  当然,仅有简单的表格肯定不能满足我们的需求,再看如下代码:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
<table border=1 width=64 height=164>
<tr>
<td valign=top>七月</td><td valign=middle>七</td><td valign=bottom>日晴</td>
</tr>
</table>
</body>
</html>
  是不是很有趣?看valign很眼熟吧,好象在以前什么地方见过呢?对,在<>

元素中我们见过他,他是作为<>的子元素出现的,在这里他同样以<td>的子元素

出现,用来规定单元格元素的相对位置,上中下,具体语法我们就不详细解释了

,大家可以尝试修改以上代码自己作了解,也学会如何自学。
  在计算机方面,我一直提倡大家自学,授之以鱼可以饱一顿,授之以渔可以

饱一生,这篇教程是从为菜鸟起步做一个铺垫,也是教会大家如何学会自学。起

到一个抛砖引玉的作用。
  表格还有一种类似Word内的功能,就是合并单元格,下面我们继续看代码,

我们把两个元素综合应用一下:
<html>
<head>
<title>七月的天书</title>
</head>
</html>
<table border=1 width=264 height=264>
<tr ><td colspan=3 align=center>歌曲推荐</td></tr>
<td valign=top>爱乐团</td><td align=center valign=middle>FIR</td>

<td valign=bottom>孙燕姿</td></tr>
<tr><td align=left>天涯</td><td align=center>我们的爱</td><td

align=right>天黑黑</td></tr>
</table>
  colspan还有一个姐妹元素,就是rowspan,大家可以自己分析。代码如下:
<html>
<head>
<title>七月的天书</title>
</head>
</html>
<table border=1 width=264 height=264>
<tr ><td rowspan=3 align=center>歌曲推荐</td></tr>
<td valign=top>爱乐团</td><td align=center valign=middle>FIR</td>

<td valign=bottom>孙燕姿</td></tr>
<tr><td align=left>天涯</td><td align=center>我们的爱</td><td

align=right>天黑黑</td></tr>
</table>
  目前的网页设计实际应用中,实际中表格的用途并不大,更重要的是用表格

来排版,因为表格排版出来比较美观,具体应用这里不详述了,等大家看完七月

的天书后,可以自行学习。
课后作业:
    用以前所有学过的html元素联合来做一个中国国旗。
    §1-4-5 Html语言的 Body 元素——列表元素和滚动元素
  在现实应用中,还有很多要列表的大小项目,html语言同样也可以实现同样功能,看如下代码:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
我曾用过的网名
<ul>
<li type=disc>执著
<li type=disc>年少的我叛逆如风
<li type=disc>七月七日晴
</ul>
</body>
</html>
  上面是无序列表,单独的黑色圆点是不是很无聊?当然也是可以换的。
   语法:
     <li type=a>
       a的取值日范:
             disc  实心圆点
             circle 空心圆点
             square 实心方框
   上面说到无序列表,自然相对应的还有有序列表,看如下代码:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
我曾用过的网名
<ol type=1>
<li >执著
<li >年少的我叛逆如风
<li >七月七日晴
</ol>
</body>
</html>
  当然,前面的顺序也不是唯一的,看下面的语法:
   语法:
     <ol type=a start=b>
        a 的取值范围:
              a 小写英文字母
              A 大写英文字母
              1 阿拉伯数字
              I 古罗马数字
        b 的取值范围:
              与a联合使用的顺序

  更多的用法大家可以在实际应用中自己体会。
  Html的转义符,那么什么叫转意符呢?<标志在html语言中我们已经用到了,那么我们如果想让他在网页中出现,怎么办理呢?这时就需要引入一个新字符组合来代替他,就是转意符。
用 "&"  来 表 示 & 符号
用 "<"  来 表 示 < 符号
用 ">"  来 表 示 > 符号
用 ""  来 表 示 " 符号
  相信大家都在很多网站上见过会滚动的文字,很好玩是不是?那么今天我们也自己动手做滚动文字。
  看如下代码:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
<marquee bgcolor=black width=164 height=164><font color=white>七月七日晴
忽然下起了大雪
不敢睁开眼希望是我的幻觉<br>
我站在地球边眼睁睁看着雪
覆盖你来的那条街</font>
</marquee>
</body>
</html>
  是不是很有意思?只这样滚动也显的太单调了,有没有更多的滚动方式呢?看如下代码:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
<marquee bgcolor=black width=164 height=164 direction=up><font color=white>七月七日晴
忽然下起了大雪
不敢睁开眼希望是我的幻觉<br>
我站在地球边眼睁睁看着雪
覆盖你来的那条街</font>
</marquee>
</body>
</html>
  上滚了吧,那么接下来我们来看语法吧。
   语法:
     <Marquee bgcolor=a widht=b height=c direction=d behavior=e loop=f scrollamount=o scrolldelay=p>
       a——Bgcolor  不用说了吧,背景颜色,前边介绍过,这里不多赘述
       b——width   滚动的宽度,详见Table节
       c——height   滚动的高度,同上
       d——direction 滚动的方向,d的取值范围:
                           up  上
                           down 下
                           left 左(默认)
                           right 右
       e——behavior  滚动的方式,e的取值范围:
                           Scroll   一般滚动(默认)
                           SLIDE   幻灯片样式
                           ALTERNATE 左右相撞
       f——loop    滚动的次数,这个元素在embed元素中也出现过,是不是?表示滚滚动的次数,取值范围为所有合法的正数,-1表示无限次滚动(默认)
       o——scrollamount 每格文字之前的滚动速度间隔,单位是像素,与behavior元素联合使用
       p——scrolldelay 滚动延时,单位是毫秒
课后作业:
   做一个走走停停的滚动有序列表,列表样式为古罗马数字,从3开始。
    §1-5 Html语言——框架元素(中结篇)
  本节是七月的天书,Html教程的中结篇,下一章就写编程篇了,具体大家想学什么语言呢,还请大家告诉我,我也好有所准备,相信经过前面所有章节html知识的初级学习,大家也都可以做出令自己满意的网页,同样也可以试着自己做一个网站,当然其中可能还会遇到很多问题,七月也愿意和大家一起分析解决实际应用中的各种问题,与大家一起学习,共同进步。
  html是一种简单的标记语言,是半排版,半所见既所得(What do you see is What do you get)的中间性语言,同样也包含少量的编程技巧在里面,师傅领进门,忽悠在个人(众人:烂柿子@#$%^臭鸡蛋@^#小石头*&^%$@。七月:痛啊,不就说错一句话嘛,555555,别打了,我错了。)修行在个人。我只能是带领你进入Html的殿堂,更多深入、实际应用的问题还要靠大家自己努力去进步、去学习。
  Ok,千里之行,始于足下,让我们共同努力,学习一下Html中的框架元素。
  那么什么叫做框架呢,简单的说就是将一个网页分为多个区域,不同区域显示不同的东西,这样可以让同一个网页中能展示的信息量更大,看如下代码:
<frameset cols="50%,*">
   <frame src="http://wwwsohucom">
   <frame src="http://wwwbaiducom">
</frameset>
  注意:Frameset元素不可包含在<html>语句中,独立一个网页。将以上代码复制到记事本中,然后保存为1html,打开后看到sohu主页显示在左边,baidu显示在右边,是不是?解释一下上面的代码
   frameset 用来定义一个框架元素,rows=2,分为2份,50%,第一份分一半,然后把剩下的分给另一半。
   因为分了2份,所以自然要有对应的frame来定义具体的Url地址。
   语法:     
     <frameset rows=a cols=b >
       a  的取值范围,所有合法的正数,最好不大于6,因为分很多框的话很容易死机,如 rows="10%,50%,*",表示为将窗体横向分为3份,第一份占10%,第二份占50%,最后剩下的分为第三份,上面有几个rosw值下面就必须有对应个的frame来对应。
       b  同上,表示把窗体纵向分。
   下面我给大家来变个魔术,呵呵。建立5个文件,第一个为indexhtml,内容如下
<frameset cols="50%,*" rows="50%,*">
   <frame src="1html" name="11">
   <frame src="2html" name="22">
   <frame src="3html" name="33">
   <frame src="4html" name="44">
</frameset>
   建立另外建立4个文件,名字为1html,2html,3html,4html,内容同为:
<html>
<head>
<title>七月的天书</title>
</head>
<body>
<a href=http://wwwbaiducom target="11">在第1分区中显示Baidu</a><br>
<a href=http://wwwbaiducom target="22">在第2分区中显示Baidu</a><br>
<a href=http://wwwbaiducom target="33">在第3分区中显示Baidu</a><br>
<a href=http://wwwbaiducom target="44">在第4分区中显示Baidu</a><br>
</body>
</html>
  切记把这几个文件放在同目录下。
  还记得前面学连接元素时候的target吗?这个时候用到了吧,什么?不知道什么意思,那你可以仔细去翻看以前的章节。很奇妙吧,为什么呢?下面我们就来解释一下原理。
  在第一个主文件(indexhtml)中,我们声明了4个框架元素,横分2,纵分2,然后又为每个框架起了名字,分别为11,22,33,44,在网页的连接中,我们就调用了这个元素,那么在被连接的时候操作系统就只要要到那里去显示了,就是这么简单。
课后作业:
    做一个4框架网页,点1时在2显示,点2时在3显示,点3时候在4显示,点4的时候在1显示,如此循环。
                       七月七日晴
                            于050724
                                早 6:38
      七月的天书——写在后面的话
  经过一个星期的不断努力,七月天书第一节终于写完了,在创作中我感谢我的兄弟苦咖啡(QQ:20444469)、我的徒弟思君冥灵(QQ:402243640)不断给我提出各种好的意见和建议,让我不断改进,才有了今天放在大家面前的七月天书,截止到今天,Html语言章节已经结束,当然这不会是七月天书的终结篇,以后还会有一些后续的篇章,如果有什么新技术的话,七月当然也会在第一时间以七月天书外传的形式通告大家。
  感谢一直以来各位对七月的关注。在天书写作过程中,我把自己当作一个html语言的初学者,以最大众化的语言和潜出深入的思想来叙述html语言的方方面面,在写做的过程中也遇到过许多困难,但都一一克服了。
  因为她是我01年学的,至今已事隔四年多,写这个东西的最大目的是为了能让很多想学计算机的朋友能尽快的入门,我接触过很多入门级的朋友,他们最大的苦恼是没人教,也不知道学什么,所以整天在网上游荡,其实最可怕的不是不知道学什么,而是不知道什么学,一种错误的学习方法会害人一辈子。所以七月用空闲时间写了这点东西,能让更多的新手知道学什么,怎么学。也起到一个抛砖引玉的作用,当然也希望黑X论坛有更多的高手和老鸟愿意写出自己在计算机学习和应用中的各种心得奉献给大家,为新手们做一块垫脚石。
  对于计算机学习,我一直强调的是自学,不能说这是唯一成功途径吧,但至少这是一条多数人和能让你向更高境界进军的办法。我在玩黑X游戏时,接触过很多某些知名大学计算机系的朋友,连第3关都没过去。如果一个高手什么都靠别人教会的话,至少我不认同这是一个高手,如果大家有不同意见可以在后面跟帖,呵呵。
  经过了这次的写作,我也重新温习了一下Html,孔子说过“温故而知新”,事实的确是如此,不知不觉中我又感受到很多第一次学html语言没有注意到的东西,这次又重新加深了一遍,受益非潜。
  以上是我在计算机学习道路中一些自己的看法和做法,拿出来和大家分享。
                        七月七日晴

发表回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则

郧西论坛微信公众号
快速回复 返回顶部 返回列表