HTMLCss大全Word文档格式.docx
《HTMLCss大全Word文档格式.docx》由会员分享，可在线阅读，更多相关《HTMLCss大全Word文档格式.docx（22页珍藏版）》请在冰豆网上搜索。
把他们给包起来。
咱们来大体看看网页的结构：
<
<
标题
<
页面内容
<
在进入主体内容标识讲解之前我想给大家介绍下<
标识中的常用属性，如：
1、<
bodyleftMargin=0topMargin=0marginwidth="
0"
marginheight="
>
leftMargin、topMargin表示：
设置页面离外框的左边距和上边距的距离为像素值，默认为1。
marginwidth、marginheight表示：
设置页面文字同页面边缘的间距为像素值，默认为1。
注marginwidth、marginheight还可以用于表格、框架等中。
2、背景颜色
bodybgcolor="
red"
我们发现多了个bgcolor其实就是backgroundcolor（背景颜色）的意思，bgcolor="
设置网页的背景颜色为红色，现在颜色一般都是#ff0000样式的。
3、背景图片
bodybackgroud＝"
back-ground.gif"
中“backgroud”就是设置背景图片的啦，back-ground.gif是背景图片的名字，为什么有的朋友也是如此写的，而网页却没有背景图片呢？
其实back-ground.gif是该图片相对于这个页面的位置，比如你做的这个页面放在c:
\我的网站\，而背景图片的位置放在c:
\我的网站\images\，那么就得这样写了：
images\back-ground.gif"
，注意两者的区别！
4、背景音乐
背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部<
里，为什么在这里讲呢？
就是因为它也是显示网页的时候我们首先接受到的信息。
看看它的代码吧：
bgsoundsrc="
background_sound.mid"
loop="
-1"
bgsound不用说了吧背景声音，background_sound.mid是音乐的文件名，当然也得写它的相对路径哦（关于相对路径，可能有的网友，一下子不能搞明白，我们将会在其他板块介绍的）！
loop，循环，那么loop="
是什么意思呢？
loop是bgsound的一个属性，当然src也是了，后边跟得就是属性值了，那么loop="
就是无限循环的意思，只要是页面打开，音乐不会停止的，loop="
1"
说明循环一次，等于0就是不循环了，呵呵，简单不！
三、字体及其属性、文字排版标识的使用
1、标题字体<
h#>
文字<
/h#>
#=1，2，3，4，5，6
比如：
h1>
今天天气真好！
/h1>
注意：
这些一般的用在标题上，所以起名叫标题字体；
...<
这些标记显示黑体字；
这些标记自动插入一个空行，不必用<
p>
标记再加空行，因此在一行中无法使用不同大小的字体。
2、字体的大小，用于一般文字。
fontsize=#>
文字<
#=1,2,3,4,5,6,7or+#,-#
basefontsize=#>
#=1,2,3,4,5,6,7
例子：
fontsize=7>
3、文字排版、逻辑字体（LogicalStyle）标记
换行：
，不换行：
nobr>
，分段：
/p>
，原始文字样式（原样显示）<
pre>
/pre>
，下划线：
u>
文字<
/u>
，删除线：
strike>
/strike>
，闪烁：
blink>
/blink>
，增强：
strong>
/strong>
，强调：
em>
/em>
，粗体：
b>
/b>
，斜体：
i>
/i>
大型字体：
big>
，小型字体：
small>
，文字上标：
sup>
，文字下标：
SUB>
还有老多，一般的这些了解一下就可以。
4、字体颜色
指定颜色<
fontcolor=#>
#="
#rrggbb"
16进制数码，或者是下列预定义色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua
对于16进制编码的颜色，我们可以这样理解rrggbb六个字符：
前两个表示红色，中间的两个表示绿色，后两个表示蓝色；
那么，红色（red）ff0000，同样绿色（green）00ff00，蓝色0000ff；
其它的颜色就是这几个字符（0-9，a-f）的组合。
fontcolor=red>
红色文字
fontcolor=#ff0000>
大家看看<
fontcolor=#rrggbb>
是什么颜色的文字
注：
在现行新版本浏览器已经慢慢不使用<
font>
这样的标识了，已基本被CSS样式表取代。
CSS样式表已作为一门课程，所以有兴趣的同学请自行参考电子书《层叠样式表》CSS教程。
四、链接
1、链接基本概念：
一般而言，所谓链接就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当光标移到那些字上时，会变成手指形状，按下去，则会连到别的文章或网站，就像这样（以上这段是给超级新手看的...）。
2、『相对路径』、『绝对路径』
要了解链接，首先必须先了解一下『相对路径』和『绝对路径』，
『相对路径』：
相对当前目录的路径，『绝对路径』：
从根目录下的全路径（一般不推荐使用）。
现在假设一个情形：
我们在自己的计算机里设计网页，所有网页相关的档案我们通通放在c:
\www里面，现在假设c:
\www里面目前有index.htm、text1.htm、p1.gif、p2.gif这四个档案。
ok！
现在我们想在index.htm里面设一个链接，能够按一下就连到text1.htm，那我们该怎么做呢？
基本上，有两中方式可以做到，在index.htm里面加上下面任一叙述：
ahref="
/c|/www/text1.htm"
这就是『绝对路径』
text1.htm"
这就是『相对路径』
瞧出什么端倪了没有？
嗯嗯....没错，『绝对路径』要给计算机一个非常详尽的位置，让计算机寻着这路径去找到档案。
而『相对路径』就简单多啦！
如果没有特别指定，他就会直接在index.htm的所在目录（当前目录）下找，也就是在c:
\www底下去找text1.htm。
如果说，今天我们将c:
\www里所有的档案都上传到网络上的网页服务器（总不能做好了只给自己看吧！
），且该服务器是别人的计算机，而非你自己架设的主机，那么问题就来了！
你猜，哪一种链接会出问题？
呵呵...答案是『绝对路径』，您猜对了吗？
为什么说『绝对路径』会出问题呢？
因为，当您将档案上传到网络上时，您的整个网页目录架构一定会变，到时候，计算机可能找不到。
所以说，没事的话，尽量用『相对路径』来作链接吧！
好写又不容易出错。
另外一个情形是：
为了整理方便，有些网友喜欢将图档通通放到同一个目录下，如：
c:
\www\gif\底下放进了p1.gif、p2.gif两个图，而index.htm、text1.htm依旧在c:
\www底下。
现在我们想在index.htm下设个链接到p1.gif这图档（链接不限于只能连html文件，图文件、文字文件均可），那我们又该如何来使用『相对路径』呢？
他们又不在『同一个目录』下...？
/c|/www/gif/p1.gif"
这是『绝对路径』的写法
gif/p1.gif"
这是『相对路径』的写法
如何？
不难吧！
（只是字有点多，看到脑子发胀）
总结一下：
很乱吗？
嗯...看看这表，或许会清楚些。
相对路径表示方式
代表链接位置
text1.htm在目前的目录中（就例子而言，就是在c:
\www中）
docs/text1.htm"
text1.htm在名为docs的次目录中（就本例而言，就是在c:
\www\docs中）
../text1.htm"
text1.htm在目前目录的上一层目录中（就本例而言，就是在c:
\底下了）
说到链接，最基本来看有『内部链接』及『外部链接』，所谓『内部链接』就是自己网站间网页的链接，『外部链接』就是链接到外面去
3、【网页内部的链接】
1.使用方法：
（1）.先在欲链接处作记号：
aname="
here1"
这里是你想链接的点<
（2）.设定链接：
#here1"
链接<
2.标志解说：
有时候，当某页的内容很多时，我们可以利用网页的内部链接，来使使用者快速的找到资料。
其原理不过是：
在欲链接处做个记号（网页的任何地方都可以喔！
），然后，链接时就寻这记号，就可以快速找到资料。
很简单吧！
3.使用范例：
范例
第一步骤
第二步骤
www链接标志基本概念
m1"
欲链接的位置<
#m1"
www链接标志基本概念<
网页内部的链接
m2"
#m2"
网页内部的链接<
网页外部的链接
m3"
#m3"
网页外部的链接<
4、【网页外部的链接】
1.标志解说：
链接到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。
由于网络上的服务五花八门，所以不同的服务有不同的链接方法，工友将之整理在下表。
2.使用范例：
网站链接
好站
"
好站<
电子邮件链接
写信给朋友
mailto:
fuxing@"
写信给朋友<
ftp链接
下载档案
ftp:
//"
下载档案<
news链接
seednetnews服务
news:
seednetnews服务<
gopher链接
seednetgopher服务
gopher:
//gopher服务<
bbs链接
telnet:
//bbs服务<
【链接标志的参数】
在链接后面加入target=_参数
链接的参数并不多，常见的大概就属target这参数了，target的意思是『目标』，也就是网页链接的指向目标，这参数在框窗（frame）里尤为重要！
otarget=框窗名称：
这在『框架标志』中也有提到，而且也只有在框架（框窗orframe）中才用得到。
正常而言，框窗有各自的名称，因此，我们可以利用此标志，来指定链接的内容显示到哪一个框窗中。
otarget=_blank：
将链接的画面内容，开在新的浏览窗口中。
otarget=_parent：
将链接的画面内容，当成文件的上一个画面。
otarget=_self：
将链接的画面内容，显示在目前的窗口中。
otarget=_top：
这个参数可以解决新链接的画面内容，被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。
五、图像的使用，也就是images
在html语法中用img来表示，其基本的语法是：
imgsrc=#>
#=图象的URL，关于url就是指的是图像在网上的地址。
imgalt=#>
#=在浏览器尚未完全读入图象时，在图象位置显示的文字；
也是图像显示以后，当鼠标放在图片上时所显示的文字。
例子：
imgsrc="
>
图象在页面中的对齐/布局：
语法：
imgalign=#>
#=left,center,right，使用图像的align属性，其实这一属性布置在这里用到，以后我们在学习表格的时候也会遇到align，它的值left,center,right就是他的中文意思，left居左，center居中，right居右。
align=left>
网人交流论坛欢迎您的光临！
图象和文字的对齐：
#=top,middle,bottom，这里的align和上边的实现的效果不一样，大家从它的值可以看出，它所显示出来的是文字在图片的靠上边、中间、底端。
大家可以对比这看看各自的效果，很容易记住哦！
图像的边框：
imgborder=#>
#=value数字，指的是这个图像的边的宽度！
示例：
border=1>
六、表格
表格，一般的用于对网页的内容进行排版，用过word的朋友应该非常明白的。
通常表格还用于网页内容的定位。
表格的基本语法：
table>
...<
/table>
-定义表格
tr>
/tr>
-定义表行
th>
/th>
-定义表头
td>
/td>
-定义表元
表格的边框：
border是表格的边框属性，=“1”即边框的宽为一象素，为0表示无边框
跨多行、多列的表元（TableSpan）
跨多列的表元<
tdcolspan=#>
跨多行的表元<
tdrowspan=#>
tableborderwidth=#height=#>
表格尺寸设置：
#为象素值或者百分比。
如width=325,height=80%
tablebordercellspacing=#>
表元间隙设置：
为0是为没有间隙。
tablebordercellpadding=#>
表元内部空白设置：
表格内文字的对齐/布局
tablealign=#>
tralign=#>
#=left,center,right
tdalign=#>
tablevalign=#>
trvalign=#>
#=top,middle,bottom,baseline
tdvalign=#>
七、框架（Frame）*
框架（Frame）也就是所谓的分割窗口、分割画面、框窗效果
【开始分割】
1.别急、别急，分割窗口可是一门学问，要分割也是要一步一步来的。
看看刚刚那例子，想象画面是一个蛋糕，你要怎么割，才能割成那样呢？
原始码
呈现结果
HTML>
HEAD>
TITLE>
框窗实作<
/TITLE>
/HEAD>
/HTML>
2.各位会发现，奇怪，在上面的语法中，怎么都没见到<
BODY>
/BODY>
熟悉的身影？
呵呵...没错，它已经被待会儿要加进去的<
FRAMESET>
/FRAMESET>
卷标给取代了！
也就是说，如果我们要分割画面，就要先用<
卷标告诉计算机说：
『喂！
我要开始分割了！
』此时，<
是派不上用场的，所以躲到一旁凉快去了！
3.现在开始动手割割看啰！
我们先将画面分成左右两边（左边就是框窗1了，右边就暂定为2等一下还要分割呢！
），如下图：
FRAMESETCOLS="
120,*"
FRAMESRC="
a.htm"
NAME="
b.htm"
2"
4.在<
中，我们要告诉计算机到底是要左右分（COLS）？
还是上下分（ROWS）。
一开始我们是左右分，所以我们写成<
。
COLS="
就是说，左边那一栏强制定为120点，右边则随窗口大小而变。
除了直接写点数外，我们亦可用百分比来表示，例如COLS="
20%,80%"
也是可以的。
5.然后，再将右边的框窗再割成上下两个画面（也就是框窗2和3了）。
如下图：
FRAMESETROWS="
100,*"
<
c.htm"
3"
6.看见了没？
原本的<
（在第3点的语法中）被另一组<
所取代了！
所以要注意喔！
第二组<
是被第一组<
所包围起来的喔！
（乱七八糟了对不对？
）
7.呵呵...不知不觉就大功告成了，其实只要将最后完成的那些语法存成index.htm，然后再准备三个档a.htm、b.htm、c.htm那么就完工啰！
当然，这是一个最简单的分割法，我们会再将一些进阶的卷标在底下一一说明。
【其它卷标参数说明】
frameborder=0framespacing=5>
1.COLS="
就是垂直切割画面啦！
你可以一次切成左右两个画面，当然也可以切成三个，很简单只要写成COLS="
30,*,50"
（数字随便您自己调整啦！
），依此类推，四个以上当然就是四组数字啦！
2.ROWS="
就是横向切割画面，也就是将画面上下分开，切法同上。
3.frameborder=0
设定框架的边框，其值只有0和1，0就是不要边框，1就是要显示边框。
边框是无法调整粗细的。
4.framespacing=5
表示框架与框架间的保留空白的距离，以免看起来太挤。
frameborder=0scrolling="
no"
noresizemarginhight=2marginwidth=2>
1.SRC="
设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。
（如果该网页在不同目录，记得路径要写清楚）
2.NAME="
设定这个框架的名称，这样才能指定框架来作连结，所以一定要设定喔！
当然名称随你高兴取名。
4.scrolling="
设定是否要显示滚动条，YES是要显示滚动条，NO是无论如何都不要显示，AUTO是视情况显示。
5.noresize
设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。
6.marginhight=2
表示框架高度部份边缘所保留的空间。
7.marginwidth=2
表示框架宽度部份边缘所保留的空间。
【相关用法】
◆<
noframe>
请换有支持Frame功能的浏览器<
/noframe>
2.卷标解说：
有些浏览器较为老旧，无法显示Frame的功能，因此，就要使用此卷标，让这些网友知道，该换换浏览器了。
或者，你也可以在这卷标中，摆上没有Frame语法的网页卷标，那么，没有支持Frame功能的浏览器，便会自动显示没有Frame语法的网页。
◆Iframe标记的使用
提起Iframe，可能你早已将之扔到“被遗忘的角落”了，不过，说起其兄弟Frame就不会陌生了。
Frame标记即帧标记，我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。
升级会员 