WEB开发必看(一):html和css的使用
从今天开始我要出几期关于WEB开发技巧的文章，希望给大家有所帮助！这一篇主要介绍html和css的使用技巧，在后期的文章中将会有javascript,jsp等与web开发相关的文章发表。
HTML篇
介绍一些常用的代码，供大家参考：
一：颜色代码
如果你想使用某种颜色，取得它的颜色值即可。比如，您想改变某些文字的颜色，您可以使用下面的代码：<font color=#ffc060 size=2>改变#符号后的代码即可改变颜色</font>
二：文字加粗 倾斜的代码
◆文字加粗的代码是: <b>你好</b> ◆文字倾斜的代码是: <i>你好！</i> ◆底线字：<u></u>
三：文字链接代码
如果您想点击某处文字会连接到另外一个网页的效果，这是超链接，代码是这样：
<a href="网站地址";>共享空间</a>如果要点了这个文字以后重新打开一个窗口的话，代码是：<a href="网站地址";; target="_blank">共享空间</a>
四：在网站上放图片的代码
如果你看到一个好看的图片想放到网站上，代码是这样的：
<img src="/Article/UploadFiles/200605/20060507081900201.gif"; width="150" height="100">
后面的数字调节图片的尺寸大小。
五：图片链接代码
如果要点一下图片就能打开一个网站的链接代码是这样的：
<a href="http://www.163.com/";><img src="/Article/UploadFiles/200605/20060507081900201.gif"; width="150" height="100"></a>
如果要点一下图片就能打开一个网站的链接，并且重新打开一个窗口。代码是这样的：
<a href="http://www.163.com/";; target="_blank"><img src="/Article/UploadFiles/200605/20060507081900201.gif"; width="150" height="100"></a>上面的数字都能调节图片尺寸大小。
六：换行代码
如果你想换行，直接用Enter键是不行的，需要在您想换行的位置输入<br>
，这样就会分成两行显示 ，整个网站看起来也不会是一大片了，而是段落分明。
七：文字移动的代码是
<marquee>这里写文字</marquee>
八：移动图片的代码
<marquee><img src="/Article/UploadFiles/200605/20060507081900241.jpg";><img src="/Article/UploadFiles/200605/20060507081900700.jpg";><img src="/Article/UploadFiles/200605/20060507081900831.jpg";><marquee>
把里面的图片地址换成你的就行 想多放一个图片就按照格式在中间插入：
<img src="/Article/UploadFiles/200605/20060507081900700.jpg";>
里面的图片地址自己定。
九：背景音乐的代码
如果想在你的网站上放上一段好听的背景音乐，代码是： <bgsound src="http://xxxxx.com/xxx.mid";loop=10>
<bgsound src="http://www.midifan.com/midi/music.ASP?id=3073";loop=30> 里面的背景音乐地址你能自己替换。
前面的是音乐地址，一般都以mid或者mp3的形式结尾 后面的数字是播放次数。
http://www.midifan.com/midi/
这个网站都有好的背景音乐
十：在网站中插入一个flash动画的代码是
<embed width=200 height=200
src="http://flash.shangdu.com/view/2/fff.swf";> 里面的动画地址换成你的.动画地址都要以swf的形式结尾。这点需要注意。
十一：打开网站时候出现的欢迎词代码
<body onLoad= alert("你好，欢迎访问本网站！")>
十二：关闭网站的时候出现的话
<body onUnload="window.alert('谢谢您的光临,诚邀加盟.请记住本站域名：http://www.yz126.com/ 站长信箱：****@yahoo.com.cn 欢迎咨询')">
十三：打开网站的时候自己做一个弹出窗口的广告
<script language="javascript">
var TimerID=1;
window.open('http://163.com'/;,'','width=600,height=300,left=100,top=50');
</script>
里面的 http://163.com/ 这个是你预先做好的一个网页，后面的数字是调节大小和位置的，你自己多试验几次。
十四：鼠标感应字体变红色的代码如下：插在<body></body>之间
<STYLE type=text/css>TD {
FONT-SIZE: 12px
}
BODY {
FONT-SIZE: 12px
}
INPUT {
FONT-SIZE: 12px
}
A:link {
COLOR: #000000; TEXT-DECORATION: none
}
A:visited {
COLOR: #000000; TEXT-DECORATION: none
}
A:active {
COLOR: blue; TEXT-DECORATION: none
}
A:hover {
COLOR: red; TEXT-DECORATION: underline
} .so {
BORDER-RIGHT: 1px ridge; BORDER-TOP: #ffffff 1px ridge; FONT-SIZE: 12px; BORDER-LEFT: #ffffff 1px ridge; BORDER-BOTTOM: 1px ridge; BACKGROUND-COLOR: #cccccc
}
</STYLE>
十五：禁止他人复制你网页的代码：
<body bgcolor="#ffffff"oncontextmenu="return false"onselectstart="return false">
十六：把其它网页放入自已网页中的代码：
<IFRAME name=smjh align=center src="../../这里换成你要放入网站的网址" frameBorder=0 width=760 scrolling=no height=300></IFRAME>
多窗口和应用
| 一、 什么叫多窗口 | ||||||||||||||||||||||||||||||||
| 我们用一个例子说明多窗口概念， 本内容首页是一个多窗口网页，它有三个窗口， 上面一个窗口，下面两个窗口，左下方的窗口带有滚动条。 从屏幕上我们可以看到，这三个窗口内容有一定的联系。屏幕上方的窗口是办公电话的大分类，将办公电话分成六类，每一类用一个矩形图标表示，当鼠标点击上方窗口中的某一类时，左下方窗口的内容随之改变，左下方窗口列出该类电话的部门。当鼠标点击左下方某个部门后，右下方窗口出现该部门的电话号码。和单窗口的屏幕相比，多窗口的信息量增加了，而且易于操作，非常直观。 | ||||||||||||||||||||||||||||||||
| 二、 分割窗口 | ||||||||||||||||||||||||||||||||
| 在屏幕上分割多个窗口是如何实现的呢？下面介绍用HTML书写多窗口格式。在HTML中，使用<FRAMESET>做为分割窗口的标记。<FRAMESET>是一个双向标记，有开始和结束标记。 | ||||||||||||||||||||||||||||||||
| <FRAMESET>标记内使用了一个标记符号<FRAME>，用它来指定每一个窗口的内容。包含<FRAMESET>的HTML文档中不能包含<BODY>标记，如果在<FRAMESET>的定义中又使用了<BODY>标记，则浏览器只解释<BODY>包含的内容，而忽略<FRAMESET>。 | ||||||||||||||||||||||||||||||||
| 用<FRAMESET>……</FRAMESET>取代<BODY>……</BODY>标记后，可以在屏幕上安排多个窗口。 | ||||||||||||||||||||||||||||||||
| 1：横向分割窗口 | ||||||||||||||||||||||||||||||||
| <FRAMESET>的ROWS属性说明窗口的横向分割，ROWS的等号后面是一串数字，它们之间用逗号隔开，有几个数字就划分成几个窗口，窗口之间有明显的分隔线。ROWS后面的数字可以用像素值、 百分比或剩余值以及这三种方式的混合使用。 下面用百分比表求法说明窗口的横向分割。 | ||||||||||||||||||||||||||||||||
| ROWS等号后面使用百分比是最直观的，每一个百分比数字表示窗口占总窗口的百分比。例如，ROWS后面的百分数取值为20%、40%、40%，一般百数值在1%-100%之间，如果几个窗口的取值总和超过百分之百，则每个窗口按比例缩小。如果不足百分之百，则每个窗口按比例扩大。 | ||||||||||||||||||||||||||||||||
| 如例29其代码如下 | ||||||||||||||||||||||||||||||||
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>例29</title> </head> <frameset rows="20%,40%,40%"> <frame src="file1.htm"> |
||||||||||||||||||||||||||||||||
| 显示结果是将屏幕横向分成三个窗口，窗口的比例是2：4：4。注意暗绿色字本代码。 | ||||||||||||||||||||||||||||||||
| 2：纵向分横窗口 | ||||||||||||||||||||||||||||||||
| 纵向分割窗口是在<FRAMESET>标记中，用COLS属性实现的，COLS的使用方法与ROWS属性使用方法相同。例如仿照横向分割窗口的方法，按照百分比对屏幕做纵向分割。 | ||||||||||||||||||||||||||||||||
| 例30 纵向分割窗口，其代码如下: | ||||||||||||||||||||||||||||||||
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>例30</title> </head> <frameset cols="20%,40%,40%"> <frame src="file4.htm"><frame src="file5.htm"><frame src="file6.htm"></frameset><noframes></noframes> |
||||||||||||||||||||||||||||||||
| （注意暗绿色字体代码）代码中<fram>将在下面解释。 | ||||||||||||||||||||||||||||||||
| 3：纵向、横向同时分割窗口 | ||||||||||||||||||||||||||||||||
| 如果想在同一屏幕上同时做纵向和横向分隔，则需要使用<FRAMESET>嵌套。格式如下： | ||||||||||||||||||||||||||||||||
| <FRAMESET COLS=….> | ||||||||||||||||||||||||||||||||
| <FRAMESET ROWS=….> | ||||||||||||||||||||||||||||||||
| </FRAMESET> | ||||||||||||||||||||||||||||||||
| <FRAMESET ROWS=…> | ||||||||||||||||||||||||||||||||
| ………. | ||||||||||||||||||||||||||||||||
| </FRAMESET> | ||||||||||||||||||||||||||||||||
| …. | ||||||||||||||||||||||||||||||||
| </FRAMESET> | ||||||||||||||||||||||||||||||||
| 例如，用ROWS和COLS两个属性可以设置这样的窗口，将屏幕纵向分成左右两部分，左边分成上下两个窗口，右边分成上下三个窗口。 | ||||||||||||||||||||||||||||||||
| 例31 在屏幕横向纵向同时分割窗口。 | ||||||||||||||||||||||||||||||||
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>例31</title> </head> <frameset cols=50%,50%"> |
||||||||||||||||||||||||||||||||
| 要仔细理解暗绿色字体的意思。其中<fram>将在下面解释。 | ||||||||||||||||||||||||||||||||
| 这个例31将屏幕纵向平均分隔成两部分，每部分占50%；左半部分用<FRAME>语句上下分成两部分，每部分各占50%;右半部分用<FRAME>语句上下分成三部分，每部分各占33%。所以，这段语句执行的结果是屏幕上共有五个窗口，左边两上，右边三个。 | ||||||||||||||||||||||||||||||||
| 三、 窗口修饰 | ||||||||||||||||||||||||||||||||
| 用FRAMESET分割窗口之后，需要在窗口内加入内容以及对窗口加以修饰，这里介绍一个新的标记<frame>可以完成这两个功能，本节介绍如何用<FRAME>修饰窗口。 | ||||||||||||||||||||||||||||||||
| <FRAME>是个单向标记。使朦胧和时将它写在<frameset>的开始和结束标记之间，它用六个属性描述每个窗口风格，这六个属性是:SRC、NAME、MARGINWIDTH、MARGINHEIGHT、SCROLLING、NORESIZE。 | ||||||||||||||||||||||||||||||||
| 应用<FRAM>的格式是： | ||||||||||||||||||||||||||||||||
| <FRAMESET ROLS……> | ||||||||||||||||||||||||||||||||
| <FRAME….> | ||||||||||||||||||||||||||||||||
| １：下面介绍<FRAME>六个属性 | ||||||||||||||||||||||||||||||||
| ①：SRC属性 | ||||||||||||||||||||||||||||||||
| SRC属性用来链接一个HTML文件，格式如下： | ||||||||||||||||||||||||||||||||
| SRC="URL" | ||||||||||||||||||||||||||||||||
| 如果一个<FRAME>中没有SRC属性，则该窗口显示为空。 | ||||||||||||||||||||||||||||||||
| ②;NAME属性 | ||||||||||||||||||||||||||||||||
| NAME属性表示该窗口的名字，该属性是可选的。 | ||||||||||||||||||||||||||||||||
| ③：MARGINWIDTH属性 | ||||||||||||||||||||||||||||||||
| MARGINWIDTH属性是用来控制窗口内显示的内容与窗口左右边缘的距离，该属性是取一个像素值，默认为1，若设定值小于1，则各个窗口与窗口之间的内容距离太近，显示效果不好，该属性是可选的。格式如下： | ||||||||||||||||||||||||||||||||
| MARGINWIDTH=n | ||||||||||||||||||||||||||||||||
| ④：MARGINHEIGHT属性 | ||||||||||||||||||||||||||||||||
| MARGINHEIGHT属性用来控制窗口内显示内容与窗口上下边缘的距离，与MARGINWIDTH使用相同，该属性也是可选的。格式如下： | ||||||||||||||||||||||||||||||||
| MARGINHEIGHT=n | ||||||||||||||||||||||||||||||||
| ⑤：SCROLLING属性 | ||||||||||||||||||||||||||||||||
| SCROLLING属性，用于描述该窗口是否设有滚动条，它可以有YES/NO/AUTO三种取值。YES表示无论什么情况都有滚动条；NO表示无论什么情况都没有滚动条；AUTO表示根据具体情况决定有无滚动条。也就是说，前两种取值表示滚动条与窗口内容多少无关，而第三种取值表示当内容充满窗时，才有滚动条。该属性也是可选的，默认值是AUTO。格式如下： | ||||||||||||||||||||||||||||||||
| SCROLLING=YES或NO或AUTO | ||||||||||||||||||||||||||||||||
| ⑥：NORESIZE属性 | ||||||||||||||||||||||||||||||||
| NORESIZE属性是一个标记，没有取值。它说明用户是否可以自行用鼠标调整窗口大小，如果设定了NORESIZE属性，则窗口不能调整。如果缺省，则可以自行调整窗口大小。 | ||||||||||||||||||||||||||||||||
| 2：<NOFRAMES>标记的使用 | ||||||||||||||||||||||||||||||||
| <NOFRAMES>标记是一个双向标记，包含在<NOFRAMES>标记之间的内容，是给不能使用多窗口的用户浏览的，而能够使用多窗口的用户，看不到<NOFRAMES>标记之间的内容。 | ||||||||||||||||||||||||||||||||
| 例如，<NOFRAMES>的语句，给读者一个提示，如果读者使用版本低的浏览器，就会看到该语句标记的内容。格式如下： | ||||||||||||||||||||||||||||||||
| <NOFRAMES> | ||||||||||||||||||||||||||||||||
| 如果你看到这个信息，说明你的浏览器不能阅读FRAME窗口的内容，请更换浏览器版本。 | ||||||||||||||||||||||||||||||||
| </NOFRAMES> | ||||||||||||||||||||||||||||||||
| 四:将文件内容放入相应窗口 | ||||||||||||||||||||||||||||||||
| 多窗口建立起来以后，要在各个窗口内放入相应内容。如本章前面的例子所述，屏幕上的每一个窗口对应一个FRAME语句。有<FRAME>标志中的SRC属性链接相应的文件，该文件内容就显示在<FRAME>对应的窗口之中。各个窗口内容可以是互相独立的，也可以是互相关联的。如本页面所求，右边是列出目录，当鼠标单击一个目录时，右边窗口中出现该目录所对应的内容。 | ||||||||||||||||||||||||||||||||
| 例32 将屏幕纵向分成两个窗口，左窗口放一个文件内容，右窗口放另一个文件的内容，两个窗口的内容相互独立。其代码如下： | ||||||||||||||||||||||||||||||||
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>例32</title> </head> <FRAMESET COLS="50%,50%"> <frame src="UntitledFrame-1.htm"> <frame src="UntitledFrame-2.htm"> </FRAMESET><noframes></noframes> </html> |
||||||||||||||||||||||||||||||||
| 如果窗口之间的内容是关联的，鼠标在一个窗口操作，另外一个窗口的内容会随之改变，这就需要在窗口之间建立链接。怎样实现这种链接呢？这里我们介绍一个新的属性TARCET，用这个属性可以国在HTML的多个标记中，其中常用的几种方式是： | ||||||||||||||||||||||||||||||||
| 1：写在<A>标记中：除了写出被链接的文件之外，还要写出被链接文件将显示的窗口名。 | ||||||||||||||||||||||||||||||||
| 格式如下： | ||||||||||||||||||||||||||||||||
| <a href="url"tarcet+"被链接的文件名"> | ||||||||||||||||||||||||||||||||
| 2：写在<BASE>标记中 | ||||||||||||||||||||||||||||||||
| 如果在同一个HTML文件中有多个链接，这多个链接的内容又想在同一个窗口显示，可以在这个HTML文件中加入一个语句，用<BASE>标记写在<HEAD>标记中。 | ||||||||||||||||||||||||||||||||
| 格式如下： | ||||||||||||||||||||||||||||||||
| <base trget="文件名"> | ||||||||||||||||||||||||||||||||
| 五、本章小结 | ||||||||||||||||||||||||||||||||
| 本章重点讲解多窗口的制作，介绍了两个标记：<FRAMESET>....</FRAMESET>和<FRAME> 以及它们的属性，另外，扩展了一个属性TARGET的应用。 | ||||||||||||||||||||||||||||||||
| <FRAMESET>和<FRAME>这两个标记，用来划分窗口，并定义每个窗口的名称及大小。利用〈FRAMESET〉的属性，可以根据使用者的需要划分任意个窗口，而每个窗口内显示的内容，用<FRAME>标记引出。 | ||||||||||||||||||||||||||||||||
| TARCET这个属性可以用在许多标记中，本章介绍了它在<A>和<BASE>标记中的使用。 | ||||||||||||||||||||||||||||||||
| 本章需要熟悉的标记及属性。 | ||||||||||||||||||||||||||||||||
|
网页中使用CSS样式表的五种方法
一、使用STYLE属性
将STYLE属性直接加在个别的元件标签里，<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
例如：
<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>
这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。
二、使用STYLE标签
将样式规则写在<STYLE>...</STYLE>标签之中。
<STYLE TYPE="text/css">
<!--
样式规则表
-->
</STYLE>
例如：
<STYLE TYPE="text/css">
<!--
BODY {
color: BLUE;
background: #FFFFCC;
font-size: 9pt}
TD, P {
COLOR: GREEN;
font-size: 9pt}
-->
</STYLE>
通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。
三、使用 LINK标签
将样式规则写在.css的样式档案中，再以<LINK>标签引入。
假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">
即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的<head></head>部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。
四、使用@import引入
跟LINK用法很像，但必 放在<STYLE>...</STYLE> 中。
<STYLE TYPE="text/css">
<!--
@import url(引入的样式表的位址、路径与档名);
-->
</STYLE>
例如：
<STYLE TYPE="text/css">
<!--
@import url(http://yourweb/ example.css);
-->
</STYLE>
要注意的是，行末的分号是绝对不可少的！
五、使用<span></span>标记引入样式
例如：<span style="font:12px/20px 宋体 #000000;">网页教学网</span>