注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

傲不可长,欲不可纵,乐不可极,志不可满

天乐的博客

 
 
 

日志

 
 
关于我

相信自己,也要相信别人的爱心.爱心是永恒的.我只有一个朋友.TA 的名字叫真诚.

网易考拉推荐

【引用】HTML各种命令的代码:  

2011-07-14 06:21:35|  分类: 博客代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自都在不言中《HTML各种命令的代码:》

 

一、HTML各种命令的代码:

1、文本标签(命令)

<pre></pre>         创建预格式化文本

<h1></h1>          创建最大的标题

<h6></h6>          创建最小的标题

<b></b>           创建黑体字

<i></i>           创建斜体字

<tt></tt>          创建打字机风格的字体

<cite></cite>        创建一个引用,通常是斜体

<em></em>          加重一个单词(通常是斜体加黑体)

<strong></strong>      加重一个单词(通常是斜体加黑体)

<font size=?></font>     设置字体大小,从 1 到 7

<font color=?></font>    设置字体的颜色,使用名字或十六进制值

2、图形(命令)

<img src="name">       添加一个图像

<img src="name" align=?>   排列对齐一个图像:左中右或上中下

<img src="name" border=?>  设置围绕一个图像的边框的大小

<hr>             加入一条水平线

<hr size=?>         设置水平线的大小(高度)

<hr width=?>         设置水平线的宽度(百分比或绝对像素点)

<hr noshade>         创建一个没有阴影的水平线

3、链接(命令)

<a href="URL"></a>      创建一个超链接

<a href="mailtEMAIL"></a> 创建一个自动发送电子邮件的链接

<a ></a>     创建一个位于文档内部的靶位

<a href="#NAME"></a>     创建一个指向位于文档内部靶位的链接

4、格式排版(命令)

<p>             创建一个新的段落

<p align=?>         将段落按左、 中、 右对齐

<br>             插入一个回车换行符

<blockquote></blockquote>  从两边缩进文本

<dl></dl>          创建一个定义列表

<dt>             放在每个定义术语词之前

<dd>             放在每个定义之前

<ol></ol>          创建一个标有数字的列表

<li>             放在每个数字列表项之前,并加上一个数字

<ul></ul>          创建一个标有圆点的列表

<li>             放在每个圆点列表项之前,并加上一个圆点

<div align=?>        一个用来排版大块HTML 段落的标签,也用于格式化表

的标题

<b></b>           创建黑体字

<i></i>           创建斜体字

<tt></tt>          创建打字机风格的字体

<cite></cite>        创建一个引用,通常是斜体

<em></em>          加重一个单词(通常是斜体加黑体)

<strong></strong>      加重一个单词(通常是斜体加黑体)

<font size=?></font>     设置字体大小,从 1 到 7

<font color=?></font>    设置字体的颜色,使用名字或十六进制值

2、图形(命令)

<img src="name">       添加一个图像

<img src="name" align=?>   排列对齐一个图像:左中右或上中下

<img src="name" border=?>  设置围绕一个图像的边框的大小

<hr>             加入一条水平线

<hr size=?>         设置水平线的大小(高度)

<hr width=?>         设置水平线的宽度(百分比或绝对像素点)

<hr noshade>         创建一个没有阴影的水平线

3、链接(命令)

<a href="URL"></a>      创建一个超链接

<a href="mailtEMAIL"></a> 创建一个自动发送电子邮件的链接

<a ></a>     创建一个位于文档内部的靶位

<a href="#NAME"></a>     创建一个指向位于文档内部靶位的链接

4、格式排版(命令)

<p>             创建一个新的段落

<p align=?>         将段落按左、 中、 右对齐

<br>             插入一个回车换行符

<blockquote></blockquote>  从两边缩进文本

<dl></dl>          创建一个定义列表

<dt>             放在每个定义术语词之前

<dd>             放在每个定义之前

<ol></ol>          创建一个标有数字的列表

<li>             放在每个数字列表项之前,并加上一个数字

<ul></ul>          创建一个标有圆点的列表

<li>             放在每个圆点列表项之前,并加上一个圆点

<div align=?>        一个用来排版大块HTML 段落的标签,也用于

                                                    格式化表

二、HTML基本语法

文件格式<html></html>(文件的开头与结尾)

主题<title></title>(放在文件的开头)

文头区段<head></head>(描述文件的信息)

内文区段<body></body>(放此文件的内容)

标题<h?></h>(?=1~6,改变标题字的大小)

标题对齐<h align=right,left,center></h>

字加大<big></big>

字变小<small></small>

粗体字<b></b>

斜体字<i></i>

底线字<u></u>

上标字<sup></sup>

下标字<sub></sub>

居中<center></center>

居左<left> </left>

居右<right> </right>

基本字体大小<basefont size>(取值范围从1到7,默认值为3)

改变字体大小<font size=?></font>(?=1~7)

字体颜色<font color=#rrggbb></font>(RGB色码)

指定字型<font face=?></font>(?=宋体,楷体等)

网址链结<a href="URL"></a>

设定锚点<a ></a>(?以容易记为原则)

链结到锚点<a href="#?"></a>(同一份文件)

<a href="URL#?"></A>(锚点不同文件)

显示图形<img src="URL"></a>

图形位置<img src="URL"

align=top,bottom,middle,left,right>(分别为上、下、中、左、右的位置)

图形取代文字<img src="URL"alt=?>(无法显示图形时用)

图形尺寸<img src="URL" width=? height=?>(?以像素为单位)

连结图形边线<img src="URL"border=?>(?以像素为单位)

图形四周留白<img src="URL"hspace=? vspace=?>(?以像素为单位)

段落<p></p>

断行<br></br>

横线<hr>

横线厚度<hr size=?>(?以像素为单位)

横线长度<hr width=?>(?以像素为单位)

横线长度<hr width=?%>(?与页宽相比较)

实横线<hr noshade>(无立体效果)

背景图案<body background=图形文件名>(图形文件格式为gif和jpg)

背景颜色<body bgcolor=#rrggbb>(RGB色码)

背景文字颜色<body text=#rrggbb>(RGB色码)

未链结点颜色<body link=#rrggbb>(RGB色码)

已链结点颜色<body vlink=#rrggbb>(RGB色码)

正在链结点颜色<body alink=#rrggbb(RGB色码)

 

 

 

 

HTML初级教程
html语言是一种标注语言,它是可以直接写出(不用软件)的,通过文字和标签的描述在论坛或网叶上显示的语言.所以学会了各种标签的用法,就是学会了html语言.
第一章:文字的插入
下面是一段贴文字的代码:
<font color=#ff4500 face=隶书 size=7>我们都是同学</font>

显示效果为:
我们都是同学

先看懂这个代码:
font
做文字标签的专用元素,
color, face, size
描述文字形态的三大属性(见以下详细说明)
/font
表示贴文字结束,俗称收尾.

写法说明:
元素前后加上小于号<和大于号>就组成了标签,
标签分开始和结束两种,元素前再加一条斜杠/就成了结束标签,
由开始标签 (如上面的<font ..............>) 内容(如上面的"我们都是同学") 结束标签(如上面的</font>) 就组成了代码的三大要素.
属性就是专门用来描述内容元素的,他必须写在开始标签里(如上面的:color=ff00ff face=黑体 size=7)
写代码时,注意属性之间要有一个空格,不能多也不能少.
代码字母的大小写效果是一样的.

文字的三大属性就是专门用来描述文字的颜色,字体,大小的,下面分别介绍他们:
color=
颜色属性,用来描述文字的颜色,他的值可用英文颜色名称或十六进制数表示.(见附表)
face=
字体属性,用来描述文字的字体,他的值很多,我们看到的宋体,楷书,隶书,华文新魏,华文彩云等等都是,关键是只有你电脑里装有的字体才会显示.(自己电脑里有那些字体到控制面板里找"字体"即可知道)如没有,浏览器默认为宋体.
size=
大小属性,用来描述文字的大小,他的值1到7,7最大.(再大就要用CSS的方法了)

几个常用的对文字修饰的标签:
1.<b>粗体字</b> 对指定的文字加粗.
效果:.粗体字
2.<i>斜体字</i> 对指定的文字变斜.
效果:斜体字
3.<u>下划线</u> 在指定的文字下面划线.
效果:下划线
说明:这些标签不支持任何属性,所以它自己也没属性.每对标签只起一个特定作用,使用时只要在指定的文字前后分别加进开始,结束标签,这段文字就会显示你的指定.

在文章中加一条水平线的方法,如绿线:
代码:<hr color=#00ff00 width=360>
效果::



width=
横向宽度,他可以绝对值,如360,也可以相对值,如80%.
color=
线条颜色.

文字的简单编排:
标准的论坛,必须用代码来控制文章的空行空格,
常用的有:
<br>
换行标签 (换行后不空行) 换行没有结束标签.
<p>...</p>
分段标签 (换行后再多空一行,段落结束后也再多空一行)
&nbsp
空格标签,多个空格用符号;隔开.
而用标签<pre>和</pre>包起来的文字可保持书写的效果.

有时可简单用标题代码<H1>你好</H1>来描述字体大小.值1~6,1最大.
以下是H1的显示:

你好

第二章:图片的插入
下面是一段贴图片的代码:
<img src=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg width=500>

显示效果为:

HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">

先看懂这个代码:
img
贴图片的专用元素,
src=
指定地址(url)的专用属性,在这个标签里他的内容只能写图片地址.
width=
宽度属性,用于设定图片的宽度.

还有几个常用的属性:
border=
边框厚度,给图像加个框,这个框的颜色默认值是黑色.
height=
图片高度,除特殊需要一般不写为好,只写宽度,高度会按比例显示.(当然,有时需定高度,那就不写宽度,也一样比例正常) 宽和高都不写,则显示图片的原始尺寸.
align=
位置属性,指定图片安放的位置,他的值有:
top 靠上
absbottom 靠下,
left 靠左
right 靠右
center 居中
注:
1.这个位置属性可以不写,浏览器默认为靠左.
2.有的版本不识别align=center,那就将&*****ter>和</center>放在图片代码两边,图片就居中了.

加框:
代码:
<img src=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg width=360 border=6>

显示效果为:
HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" border=6>


居中:
代码:
&*****ter><img src=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg width=360></center>

显示效果为:

HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">




取得图片地址的方法:
对准图片点右键,出现对话框(如下图),左键点属性,再双击地址涂蓝,最后复制.

HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">

HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">

现在很多取得的地址不能正常显示(发图者设置障碍)
只能下载后,再上传到你贴图的论坛或不设反盗链的论坛,取得新的图片地址,

下载图片的方法:对准图片点右键,出现菜单(上上图),左键点"图片另存为",出现对话框(下图).保存格式一般为jpg或gif.填上名称再点保存即可.

HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">

自己文档里的图片必须上传后取得地址才可用代码贴出.
上传方法:在上传框里点浏览,左键对准要上传的图片双击,把帖子发出即可,图片会以附件的形式出现.就有新的地址了.

给几个可上传的地址:
http://picsplace.to/index.php (可上传FLASH等,会直接给出地址)
http://adu.bbs.topzj.com/ (老试贴区,开放2048 kb)





第三章:移动的运用


下面是一段贴文字移动的代码:
<marquee direction=up behavior=scroll width=400 height=90 scrolldelay=80 scrollamount=1>
<font color=#00ff00 size=7 face=华文新魏>同学们好 </font> </marquee>

显示效果为:

同学们好

先看懂这个代码:
marquee
这是移动的专用元素.
他的属性如下:
direction=
移动方向,值有:
   up 向上移动,
   down 向下移动,
   left 向左移动,
   right 向右移动,
      注: 这个移动方向属性可以不写,浏览器默认为向左.
behavior=
移动方式,值有: scroll 不停的走; slide 只走一次
behavior=alternate
左右来回走,与direction不能同用.
width=
移动宽度.
height=
移动高度.
scrolldelay=
延时,延时一般设在80,延时数值大了,显示效果会跳跃式.
scrollamount=
移动速度,值从1开始越大越快.

(移动放到背景图上,因不能看到全部,常碰到定尺寸问题.
实际上你把移动看成一张图片,先定宽和高,再定放到背景图上的位置就容易些.)


来回移动:behavior=alternate

请大家试试,试了才能印象深刻


代码:
&*****ter><marquee behavior=alternate width=390 height=15 scrolldelay=5 scrollamount=2><font color=#ff0000 size=5 face=华文新魏>请大家试试,试了才能印象深刻</font></marquee></center>

移动还可以加入背景颜色或背景图,背景显示的范围就是移动设定的宽和高. bgcolor:背景颜色属性. background:背景图属性.


加背景颜色:bgcolor=#aaeeaa

请大家试试,试了才能印象深刻


代码:
&*****ter><marquee behavior=alternate width=390 height=15 scrolldelay=5 scrollamount=2 bgcolor=#aaeeaa><font color=#ff0000 size=5 face=华文新魏>请大家试试,试了才能印象深刻</font></marquee></center>


加背景图:style="background-image:url(
http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/k1_RkKDtr7WLT6S.gif)"

http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/11/02/k1_YGP283FJ7QCK.gif)" scrollAmount=2 scrollDelay=5 behavior=alternate width=390 height=15>请大家试试,试了才能印象深刻


代码:
&*****ter><marquee behavior=alternate width=390 height=15 scrolldelay=5 scrollamount=2 style="background-image:url(
http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/11/02/k1_YGP283FJ7QCK.gif)"><font color=#FFFFFF size=5 face=华文新魏>请大家试试,试了才能印象深刻</font></marquee></center>
注:用这个加背景图代码发帖时,一定要在 禁用 URL 识别 前打勾.


图片的移动:只要将上面的文字换成图片就可以了.其实只要将移动的起始和结束标签放在任何的两头,都可以动起来.

HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">

代码为:

<MARQUEE scrollAmount=2 scrollDelay=10><IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f13_tM7ngHBGVkP2.gif"> <IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f12_xeMYmkiKjb3V.gif"> <IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f5_4kVXhYaZuG28.gif"> <IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f7_91m41RF2o1aD.gif"> <IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f6_mnWqy8CgK05g.gif"> <IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f8_m4CmRBw4R4nr.gif"> <IMG src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/07/03/08/f1_A9qCflSzOV3l.gif">

</MARQUEE>





第四章:音乐的插入


下面是一段贴音乐的代码:
<bgsound src="http://music.falook.com/falook/bandari-2001-heaven_blue/09.nights_of_barcelong.wma" loop="1">
loop="1">
效果就是我们听到的音乐(9NIGHTS OF BARCELONG 夜间巴塞罗那)
bgsound
内部媒体的专用元素,用他做的标签可以用来插入wav wma mid mp3等格式的音乐.
src=
指定地址(url)的专用属性,在这个标签里他的内容只能写音乐地址.
loop=
播放次数的属性,值用自然数,无数次用"-1"或"infinite"来表示.

用bgsound做的标签不产生任何视觉效果.只播放音乐.
这个代码随便放哪里效果是一样的,建议单独放在表格外方便些.


也可用显示播放器的方法播放音乐:



代码:
<EMBED SRC="音乐地址" loop=true width=390 height=43>

EMBED
多媒体的专用元素,
true:也起播放无数次的作用.
width=390 height=43
播放器的宽和高.
用播放器可调节音量,暂停等.
也可将播放器的宽和高都设为0而隐去播放器.

他们的区别:
用bgsound一定要下载完了才能听到歌声,下载慢了开始会听不到声音.
用EMBED时边下载边放,下载慢了第一遍声音会断断续续.


有时需要深色的播放器:


代码:
<EMBED SRC="音乐地址" loop=true style="FILTER: xray" width=390 height=43>


警告:已有音乐的叶面就请不要再贴音乐了.




第五章:FLASH的插入


下面是一段贴FLASH的代码:

<embed src="http://www.long21.net/card/main/0404/0404160f.swf" width=360 height=280></embed>

显示效果为:


embed
插入多媒体的专用元素,常用来贴FLASH和音乐.
width=
height=
视频图像的宽和高.


FLASH的功能有两种:
一种直接贴出,显示动画片,有的还带有音乐.
另一种要去掉背景来装饰图片,如下雨,闪电等,称作透明FLASH.

下面是一个透明FLASH.


代码:
<embed src="http://imgfree.21cn.com/free/flash/88.swf" width=360 height=280></embed>

透明处理后效果:


代码:
<embed src="http://imgfree.21cn.com/free/flash/88.swf" width=360 height=280 wmode="transparent"></embed>

wmode="transparent"
透明属性.

加到图片上的效果:



代码为:
<table cellSpacing=5 cellPadding=5 border=13 bordercolor=#84B98D background="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/b0070090039_               Uu3asI5AtP3e.jpg" width=490 height=450><tr><td align=center><embed src="http://imgfree.21cn.com/free/flash/92.swf" width=490 height=360 wmode="transparent"></embed></td></tr></table>

很明显,红色代码就是透明FLASH.
透明FLASH加到图片上,关键是要将图片作背景图.
要用做表格的方法才能将图片设为背景图(下一节讲表格制作)

一张背景图上可以重叠几个透明FLASH,
只要将位置代码align=right放到标签里:
<embed align=right src="http://imgfree.21cn.com/free/flash/88.swf" width=360 height=280 wmode="transparent"></embed>

下面放了四个透明FLASH:



代码:

<table cellSpacing=5 cellPadding=5 border=13 bordercolor=#84B98D background="http://adu.bbs.topzj.com/attachments//10/96/1096/forumid_27181/b0070090039_                         w1E680uFCJha.jpg"                width=490 height=450><tr><td align=center>

<embed align=right src="http://imgfree.21cn.com/free/flash/88.swf" width=490 height=290 wmode="transparent"></embed>

<embed align=right src="http://imgfree.21cn.com/free/flash/62.swf" width=160 height=130 wmode="transparent"></embed>

<embed align=right src="http://imgfree.21cn.com/free/flash/89.swf" width=360 height=280 wmode="transparent"></embed>

<embed align=right src="http://imgfree.21cn.com/free/flash/16.swf" width=490 height=290 wmode="transparent"></embed>

</td></tr></table>


透明 FLASH放到背景图上,因不能看到全部,常碰到定尺寸问题.
实际上你把FLASH看成一张图片,先定宽和高,再定放到背景图上的位置就容易些
.



第六章:框(表格)的制作


表格的主要功能是做各种列表,我在这章里只谈与做音画帖有关的内容.
主要讲边框做法,背景图处理方法和内容的排列要点.

一.表格的基本语法.

先看一个最简单的表格:



文字和图片


代码为:
<table width="450" height="350" border="18" cellspacing="10" cellpadding="10" align=                  "center" valign="middle" bgcolor="#55632F" bordercolor=#6b8e23><tr><td>文字和                                图片</td></tr></table>

代码里的:
<table.........><tr><td>文字和图片</td></tr></table>
就组成表格的基本语法:开始标签,内容,结束标签.

这三个标记<table><tr><td>是定义表格的最重要的标记,可以说只学这三个己足够了.

先看懂这个代码:
table
这是一个做表格的元素,要描述内容的属性都写在由它组成的开始标签里,
tr
描述列的元素.
td
描述格的元素.
列就是从上到下的行,格就是每行里的格(大概意思)这些知道就行了,不在学习范围内.

它的属性常用的有:
width=
表格宽度,接受绝对值(如180)及相对值(如 80%,相对可显示的宽度)
height=
表格高度,接受绝对值(如 180)
border=
表格框的厚度.
cellspacing=
表格格线离边框距离
cellpadding=
文字图片离格线的距离.
align=
表格的摆放位置(水平),可选值为: left, right,center(左,右,中心)
valign=
表格内字画等的摆放贴位置(垂直)可选值为: top, middle, bottom。(顶,中间,底部 )
background=
表格的背景图,与 bgcolor 不要同用。
bgcolor=
表格背景颜色,与background 不要同用.
bordercolor=
表格边框颜色.
bordercolorlight=
表格边框向光部分的颜色.
bordercolordark=
表格边框背光部分的颜色,(使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效)

二.边框的制作.

1.颜色框:

简单地只要写上表格边框颜色属性 bordercolor 和边框的厚度属性 border,再写上表格的宽 width 和高 height              就会显示一个你所指定的颜色框.据此写一个代码:

<table bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0><tr><td>文字和                        图片</td></tr></table>

显示效果为:

文字和图片


这里多写了一个格线属性cellspacing=0,格线就是那根细线(打表格用的)不写格线属性浏览器就默认为1.                      我们不需要格线时,请一定写上cellspacing=0,这个默认有时会捣乱的.
下面是不写的效果:
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor=''hand''; this.alt=''Click here to open new window\nCTRL Mouse wheel to zoom in/out'';}" onclick="if(!this.resized) {return true;} else {window.open(''http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/FFF_eYkCLOHnLrmk.jpg'');}" alt="" src="http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/FFF_eYkCLOHnLrmk.jpg" onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" border=0>

下面讲几个有关框的常识问题.

居中:将位置属性align=center放到开始标签里,这个框就居中了:

<table align=center bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0><tr><td>文字和图片</td></tr></table>

显示效果为:



文字和图片


定好尺寸的框仍会被撑大:框定好宽和高以后,如果放在里面的内容大于它,则按大的显示.例如还是上面那个尺寸的框,            放进一张大的图片:

<table align=center bordercolor=#00FF00 border=8 width=360 height=250 cellspacing=0><tr><td>
<img src=http://adu.bbs.topzj.com/attachments//10/96/1096/CX024_L_YmgblJL6TXgY.jpg width=460>
</td></tr></table>

显示效果为:

HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">



这个原理要注意两点:
a.有时按需要定好框的尺寸,不容许再变的,那就要注意放进去的内容不能大于框的尺寸,以免撑大.
b.因为放进去的内容会撑大框,有时干脆不写表格的尺寸,让内容自动撑大反而会服贴.(所以,上面代码里不写width=360 height=250效果是一样的)

2.素材框:

利用素材图片做框的原理是:把素材图片做成各种背景图,再把背景图一张张覆盖上去,每后一张都比前一张小一点,这些边上露出来的小一点就组成了一个框的效果.
边框要做多少层就要做多少个背景图,要做成多少个背景图也就是要做多少个表格.每后一个表格都要放到前一个表格里.
要使每后一张都比前一张小一点的方法:只要在前一张代码里设定格线厚度cellspacing=就行了,设定多大就露多大,
在 白羽 的套装素材里(
http://bbs.e-yu.cn/viewthread.php?tid=7538&extra=page%3D1&page=2)选了几款:
.
用第一张做背景图:
<table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif"><tr><td>图与文字</td></tr></table>

图与文字


说明:
代码中设了格线cellspacing="10",这在下一张背景图放进去后才能看到,
表格宽用了相对值90%,相对可显叶面的90%.

下面把第二张做背景图,将格线设为5,width="100%".
<table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif"><tr><td>图与文字</td></tr></table>


将它放到前一张里:

<table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif"><tr><td>图与文字</td></tr></table></td></tr></table>

图与文字


同理再将第三张放进去(格线为2):

图与文字


再将第四张放进去(格线为6):




放一张图片进去看看效果:

HTML各种命令的代码: - 淡静如水 - 淡静如水


代码:

<table align="center" border="0" cellpadding="0" cellspacing="10" background="http://bbs.e-yu.cn/attachments/month_0510/dreamgirlstrip22_ZsMc1O0qQTRb.gif"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="http://bbs.e-yu.cn/attachments/ext_gif/WQaU_grladystrip5.gif"><tr><td> <table align="center" border="0" cellpadding="0" cellspacing="2" width="100%" background="http://bbs.e-yu.cn/attachments/ext_gif/iPn1_timestrip1.gif"><tr><td> <table align="center" border="0" cellpadding="0" cellspacing="6" width="100%" background="http://bbs.e-yu.cn/attachments/ext_gif/VmAM_grladymaincolor.gif"><tr><td> <img src=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/CX024_L_WbZ4s3APTwqK.jpg width=460> </td></tr></table> </td></tr></table> </td></tr></table></td></tr></table>

注:对应的颜色就是表格对应的开始标签和收尾标签.


三.背景图的特点及处理方法.

这里讲的背景图是指最后一层显示的,在它上面可以放文字,图片,FLASH等等.

用表格做的背景图,它的显示特点是:
当表格尺寸大于背景图原始尺寸时,会复制背景图.
当表格尺寸小于背景图原始尺寸时,只显示背景图左上一部分.
为了看清楚效果,选一张人物图片做背景图:

注:找图片原始尺寸的方法:鼠标右键点图片,出现菜单,左键点[属性]就看到了.

将它做背景图以后的效果: 




代码:
<table border="0" cellpadding="0" cellspacing="0" width="390" height="230"
background=http://aa.up.topzj.com/data/aa/76/94/5/a//d25/bbs025/76/94/76945/forumid_       11459/m2m3_25XyxpWsOApf.
jpg"><tr><td></td></tr></table>

 

 

 

代码:
<table border="0" cellpadding="0" cellspacing="0" width="90" height="90" background="http://aa.up.topzj.com/data/aa/76/94/5/a//d25/bbs025/76/94/76945/forumid_ 11459/m2m3_25XyxpWsOApf.

jpg"><tr><td></td></tr></table>


处理背景图的方法:

有时我们看到很漂亮的图片,想完整显示做背景,怎么处理呢?

根据背景图的特点,唯一的办法就是将将表格的尺寸设置得和图片的原始尺寸一致.
而且放进去内容的大小必须小于他,以免撑大.

如果图片的原始尺寸不满意,也只能改变它的原始尺寸.方法如下:

HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">

这张图的原始尺寸是 972X614 ,要把它改小.

先下载到自己电脑的图片收藏夹里,
找到画图软件(每个电脑都有)把这个图片打开,点上面的[图像(I)],点[拉伸/扭曲],出现如下对话框,将水平和垂直按同样比例扩大或缩小,点确定就可以了.


HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">

结果满意后,再点[文件],点[另存为],写上文件名点[保存]就完成了.注意图片格式为:jpg或gif.

下面是按55%缩小后的大小(535X338):

HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">

用它做背景图,放一张图和几个字上去:(表格也设为:width=535 height=338)

      HTML各种命令的代码: - 淡静如水 - 淡静如水0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">



   祝:        小芒果  生日快乐        



代码

<TABLE align=center background=http://bbs.up.topzj.com/data/bbs/10/96/1096/a/06/10/31/08JHVAB_6ESuWfX9LKzt.jpg width=535 height=338 border=9 bordercolor=#00FF00 cellspacing=6><TR><TD>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src=http://i19.photobucket.com/albums/b182/ellenool/loveu.gif width=160>
<BR><BR><BR><BR>
<P align="center">
<FONT style="FONT-SIZE: 40pt" color=#B22222><b>
<pre>
   祝:
 小芒果  生日快乐
</pre>
</b></FONT></P></TD></TR></TABLE>

四.图和文字放进框里的方法及注意点:

<table ......><tr><td>内容</td></tr></table>
将图和文字的代码从上到下按顺序代替上面的"内容"放到表格里.
 
<table ......><tr><td>内容</td></tr></table>
将图和文字的代码从上到下按顺序代替上面的"内容"放到表格里.
代码安放的一些注意点:

1.竖向处理:,首先,表格属性里不写高 height ,这样可让内容自动撑高.
凡是要空行的地方可用换行标签<br>来设定,不够可以多加几个<br>,到满意为止,
也可用分段标签<P>......</P>,不够再加<br>,

2.横向处理:首先,在最后一层表格里写上文字图片离格线的距离属性: cellpadding= .不让内容靠边.
再强调一遍,放进去的所有内容的宽度不要大于框的内宽,为了美观还要它们小一点.
图片宽度好设定,文字一般也用<br>分行的方法来限定它的宽度

3.内容居中:将位置属性align=center放到最后一层表格的<td>标签里,框里的内容就会都居中了:
<table ......><tr><td align=center>内容</td></tr></table>


五.做表格最容易犯的错误

<table ......><tr><td>内容</td></tr></table>

音画帖往往做框用很多表格,里面又大框套小框的用很多表格,由于疏忽经常会出现少写或多写收尾</td></tr></table>,使得整个帖变形.
所以,做了几个表格,就必须有几组收尾标签,多一个少一个都不行.



第七章:怎样找源代码
 
看到好帖,怎样取它的源代码.

鼠标对准页面空地,点右键,出现菜单.
鼠标左键点"查看源文件",这一页的原代码就全部出显在你的记事本上.

或鼠标左键点浏览器上方的"查看"→"源文件",网叶原代码也会出现.
如何复制:


1.把你需要的代码涂蓝,对准你要的代码开始处或结尾处,按住鼠标左键拖到你需要的地方就涂蓝了.

.左键点左上角"编辑"再点"剪切",把记事本上代码全部删除,再右键出现菜单左键点"粘贴",那些涂蓝的就留在记事本上,可以存档了.
或者右键点涂蓝处,出现菜单,左键点"复制",再右键点你要放的地方,出现菜单,左键点"粘贴"就把涂蓝的代码放好了.
新手千万不要怕麻烦,这个复制的基本功是必需的.
整页的原代码要找到你需要的,刚开始还有一定难度,办法就是要记住它的位置再到代码里找.

比如(e-域)在18楼,那就在代码里出现"18楼"字样下面去找,熟悉了很快就可找,其实在找源代码的过程中,会增长很多新知识的.

但是如果你只是找一首歌的地址就容易些(因为在唱的一定只有一首)方法如下:
1.用上方法找出全部原代码(在你的记事本上)
2.依次点(记事本)左上"编辑---查找" 在弹出的“查找内容”对话框中输入音乐文件的后缀名,如.mp3,再按“查找下一个”按钮,不妨多按1、2次 。如果提示没有,则考虑依次输入后缀名.rm或者.wma,一般情况下歌的地址就会出现(涂蓝那块)注意后缀名前有一小点.
当然这种方法还可找其它的地址,如找flash则输入.swf
如找图片.gif或.jpg等等....

必须强调一点,很多网站设置了防盗手段,一般方法取不了原代码 

 
介绍几个网上HTML教程:
http://longka.flasher123.com/zy/index.html

http://www.gzsums.edu.cn/webclass/html/html_design.html

http://www.cniis.cn/edu/Article_Show.asp?ArticleID=214

 

 

  评论这张
 
阅读(162)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017