HTML语法复习_tabletd如何跨栏-CSDN博客

HTML写作攻略手册

摘引自-- 叉神工作室

第一章

何谓HTML

HTML 是 Hyper Text Markup Language 的缩写,它的意思是超文本标记
语言, 它透过一些特别的标签来展现各种不同的风格, 具备
有下列几项特色 :

使用改写标签
随视窗大小改变的文件
忽略多余的空白与行
超链结的功能
可呼叫程式

HTML 3.0 的发展是一种开放式的结果 , 任何有兴趣的人都可
加入这一发展的组织 , 各家浏览器出版公司都各自发表非
协定内的语法 , 使得制作出的文件显得更加丰富与华丽 .

回目　

第二章

一份简单基本的 Home Page

<HTML>
<HEAD>
<TITLE>这是一个标题</TITLE>
</HEAD>
<BODY>
这是一个简单的范例
</BODY>
</HTML>

这一个范例的样子

<HTML>与</HTML> 这是用来定义一份文件内的 HTML 段落 , 此标签可以省略 .
<HEAD>与</HEAD> 这是用来描述 HTML 页的内容 , 此标签也可以省略 .
<TITLE>与</TITLE> 这是显示文件的标题 , 会被放在浏览器的最上方 .
<BODY>与</BODY> 这是定义 HTML 的界限 , 此标签可以省略 .

回目　

第三章

背景的变化

语法:
<BODY TEXT=#008000 LINK=#008000 VLINK=#008000 ALINK=#008000 BGCOLOR=#008000>
或
<BODY BACKGROUND="HTMLBAK.JPG">

TEXT 本文的颜色
LINK 可以链结的文字颜色
VLINK 已链结过的文字颜色
ALINK 被按下的文字颜色
BGCOLOR 背景颜色
BACKGROUND 背景图形

以上各 # 後为 0-9 的八个数字,代表各种颜色 , 若无指定则以浏览器之内定值为准 .

回目　

第四章

字体的变化

语法:<H1>等级一的字</H1>
结果:

等级一的字

语法:<H2>等级二的字</H2>
结果:

等级二的字

语法:<H3>等级三的字</H3>
结果:

等级三的字

语法:<H4>等级四的字</H4>
结果:

等级四的字

语法:<H5>等级五的字</H5>
结果:

等级五的字

语法:<H6>等级六的字</H6>
结果:

等级六的字

语法:<I>斜体字</I>
结果:
斜体字

语法:<B>粗体字</B>
结果:
粗体字

语法:<TT>TELETYPE打字机字体</TT>
结果:
TELETYPE打字机字体

语法:<BLINK>闪烁字体</BLINK>
结果:
闪烁字体

回目　

第五章

一些分隔的标签

<BR>强迫跳到下一行

<P>产生一行空白

范例:
BR可强迫换行<BR>却不多跳一行,P则会换行<P>而且多跳一行

结果:
BR可强迫换行
却不多跳一行,P则会换行

而且多跳一行

<HR>水平分隔线(就是像上面的那一条线)

<HR WIDTH=40%>水平线占萤幕的40Tf!%
结果如下:

<HR SIZE=10>水平线变粗
结果如下:

<HR NOSHADE>不透明水平线
结果如下:

回目　

第六章

如何依照自定义排列方式显示

范例:

<PRE>
因HTML会忽略多余的空白与行,所以如果想依照PE2所输入的格式显示.
              就必须加入PRE的标签.
                                  HTML就会依照输入的格式排列.
不再忽略多余的空白与行.
</PRE>

回目　

第七章

各种条列的排列

数字化排列

语法:<OL>
     <LI>第一章
     <LI>第二章
     <LI>第三章
     </OL>

结果:

第一章
第二章
第三章

语法:<OL TYPE=I>
     <LI>第一章
     <LI>第二章
     <LI>第三章
     </OL>

结果:

第一章
第二章
第三章

语法:<OL TYPE=A>
     <LI>第一章
     <LI>第二章
     <LI>第三章
     </OL>

结果:

第一章
第二章
第三章

以上TYPE的变化也可用i或a

非数字化排列

语法:<UL>
     <LI>第一章
     <LI>第二章
     <LI>第三章
     </UL>

结果:

第一章
第二章
第三章

限定的排列

语法:<DL>
     <DT>第一章
     <DD>第一小节
     <DT>第二章
     <DD>第一小节
     </DL>

结果:

第一章

第一小节

第二章

第一小节

回目　

第八章

文件中的注解

如一个 HTML 的文件非常大 , 最好加上注解 , <!- 与 -> , 在此标签中的文字 , 将不会被浏览器显示出来 .

回目　

第九章

如何使用超链结

在 HTML 文件中的一大特色就是随时可以按一个键就可以连往世界任何一个角落这样的功能其实只要一行指令就可以做到了 .

语法:<A HREF="http://www.longlan.com.tw/lshow/chieh/chieh.htm">回到目　</A>

结果:回到目　

http:後面是接著一个网路的位址

其他还有下列各种链结:
gopher:连接gopher资料库系统
ftp:连接ftp撷取档案系统
news:连接news新闻讨论群
mailto:连接E-mail寄信
telnet:连接远程载入系统

以上链结位址如果在同一机器上即可省略成 :
<A HREF="/lshow/chieh/chieh.htm">回到许恩杰的烘培鸡</A>

以上链结位址如果在同一机器上而且在同一目录更可省略成 :
<A HREF="chieh.htm">回到许恩杰的烘培鸡</A>

这就是所谓的相对路径

链结到文件中的某一部份

语法:<A HREF="#TOP">回到本篇文章的最前面</A>
     <A NAME="TOP"></A>

结果:回到本篇文章的最前面

以上语法HREF与NAME需相互对应,按下链结点即可前往NAME所在的地方

回目　

第十章

如何加上图形

加上图形也是一件很简单的事情.

语法:<IMG SRC="k_k.jpg" ALT=KEMOON></IMG>

结果: KEMOON

ALT:如使用无法显示图形的浏览器即会出现ALT後所写的文字

图片放置的位置与大小控制

语法:<IMG SRC="k_k.jpg" ALIGN=LEFT></IMG>图片靠左

结果:
图片靠左
　
　
　
　
　
语法:<IMG SRC="k_k.jpg" ALIGN=RIGHT></IMG>图片靠右

结果:
图片靠右
　
　
　
　
　
语法:<IMG SRC="k_k.jpg" ALIGN=TOP></IMG>图片向上对齐

结果:图片向上对齐

语法:<IMG SRC="k_k.jpg" ALIGN=BOTTOM></IMG>图片向下对齐

结果:图片向下对齐

语法:<IMG SRC="k_k.jpg" ALIGN=MIDDLE></IMG>图片向中对齐

结果:图片向中对齐

语法:<IMG SRC="k_k.jpg" HEIGHT=50 WIDTH=40></IMG>指定图片高度为50宽度40

结果:指定图片高度为50宽度40

文字绕图的写法

语法:<IMG SRC="k_k.jpg" ALIGN=LEFT></IMG>
在HOMEPAGE的制作上<BR>
本人也有一些不清楚的地方<BR>
如INPUT FORM 和CGI的配合使用<BR>
在下一次我们将注重讨论<BR>
同时希望个位高手指点<BR>
请大家支持吧<BR>

结果:
在HOMEPAGE的制作上
本人也有一些不清楚的地方
如INPUT FORM 和CGI的配合使用
在下一次我们将注重讨论
同时希望个位高手指点
请大家支持吧

回目　

第十一章

表格的制作

语法:
<TABLE COLSPEC="L20" BORDER>
<CAPTION ALIGN=top></CAPTION>
<TR><TH>这是一个最简单的表格</TH></TR>
</TABLE>

结果:

这是一个最简单的表格

语法:
<TABLE COLSPEC="L20 L20 L20" BORDER>
<CAPTION ALIGN=top></CAPTION>
<TR><TH>第一格</TH><TH>第二格</TH><TH>第三格</TH></TR>
<TR><TH>下一格</TH><TD>下二格</TD><TD>下三格</TD></TR>
</TABLE>

结果:

第一格	第二格	第三格
下一格	下二格	下三格

语法:
<TABLE COLSPEC="C20 L20 L20" BORDER>
<CAPTION ALIGN=top></CAPTION>
<TR><TH COLSPAN=3>跨栏的表格</TH></TR>
<TR><TH>第一项</TH><TD>第二项</TD><TD>第三项</TD></TR>
</TABLE>

结果:

跨栏的表格
第一项	第二项	第三项

语法:
<TABLE COLSPEC="L20 L20" BORDER>
<CAPTION ALIGN=top></CAPTION>
<TR><TH ROWSPAN=2>跨列的表格</TH><TH>右边第一列</TH></TR> <TR><TD>右边第二列</TD></TR>
</TABLE>

结果:

跨列的表格	右边第一列
跨列的表格	右边第二列

语法:
<TABLE COLSPEC="L20" BORDER=10>
<CAPTION ALIGN=top></CAPTION>
<TR><TH>这是指定表格线条的粗细</TH></TR>
</TABLE>

结果:

这是指定表格线条的粗细

语法:
<TABLE COLSPEC="L20" BORDER CELLPADDING=20"
<CAPTION ALIGN=top></CAPTION>
<TR><TH>指定字与表格的距离</TH></TR>
</TABLE>

结果:

指定字与表格的距离

语法:
<TABLE COLSPEC="C20" BORDER>
<CAPTION ALIGN=top></CAPTION>
<TR><TH ALIGN=CENTER>以下文字靠左靠右对中</TH></TR>
<TR><TH ALIGN=LEFT>靠左</TH></TR>
<TR><TH ALIGN=RIGHT>靠右</TH></TR>
<TR><TH>对中</TH></TR>
</TABLE>

结果:

以下文字靠左靠右对中
靠左
靠右
对中

回目　

第十二章

分割画面的制作

语法:

<frameset rows="80%,20%">
    <frameset cols="20%,80%">
         <frame src=html-13b.htm>
         <frame src=html-13c.htm name="lwwwbody">
     </frameset>
     <frame src=html-13d.htm scrolling=no>
</frameset>
<noframes>
没有NetScape的人就只能看到这里了
</noframes>

说明:
frameset-->设定分割画面的大小比例,此标签须有相对的结束标签
rows-->设定分割为上下画面
cols-->设定分割为左右画面
分割画面大小可用下列数值表示:
80%,20%或300,*或40%,20%,*以此类推可分割成各种不同大小的视窗
frame-->设定各个分割视窗分别使用的html
name-->指定此视窗的名称
scrolling=no或yes或auto-->指定此视窗是否要有卷轴bar
noresize-->强迫此视窗不可拖曳改变大小
noframes-->给浏览器不支援分割画面的使用者看的部份,须有结束标签

以下是一些特殊技巧:
在个别视窗中的html如要使用特殊的功能就必须加一些参数
否则所有的动作将在自己本身的视窗中进行
语法:
<A HREF="LWWW.HTM" target="_top">
<A HREF="lwwwbody.htm#01" target="lwwwbody">

target-->如设定=_top,代表按下此链结整个画面都会变为所指定的链结
         如设定=自定的名称,需与name的参数互相配合,
         代表按下此链结与指定name相同名称的视窗才会改变画面.

回目　

第十三章

透明图片,及交错图片的制作

未做成透明图片前已做成透明图片後

透明图片的制作

想要制作以上透明图片效果,首先须有一套合适的图形编辑软体,例如:
LView或Paint Shop Pro都有此功能,在此以Paint Shop Pro为例:

1.开启所需要的图档,将背景色,也就是想变成透明的地方,改成前景所没有
　的颜色.
2.将图片存成GIF格式,关闭再重新开启一次,如图片原就是GIF格式即可省
　略此步骤.
3.选择工具bar上的滴管,将滴管移到要变成透明的地方,此时最下方的状态
　列会出现I:5,5为此颜色的值,依颜色不同此值会不同,记下此值.
4.选择Save As,在存档视窗中的左下角有File Sub-format的选项,选择
　Version 89a-Noninterlaced.
5.按下右方Options会列出四个选项,选择最後一项Set the Transparency Value
　to在後面的空格填上刚才记下的I值,再按下OK,再存档即可完成透明图片
　的制作.

注意事项:
1.尽量不要用会失真的图形格式如JPG来转成GIF,才不会造成转为透明图片
　後有杂点产生.
2.变成透明的颜色必须为前景所没有的,以免造成不想透明的地方也变成透
　明.
3.虽然变成透明图片,原来图片的边缘还是存在的,如要限定图片的位置,就必
　须将透明的边缘考虑进去.
4.如图片边缘有阴影效果,则最好将要透明的颜色设为与HomePage的底色相
　同以免造成阴影部份不自然的现象.

交错图片的制作

所谓交错显示的图片就是在显示时,先出现整张图片大概的样子,再以类
似马赛克的方式渐渐显示出完整的图片.

1.制作步骤与透明图片相似,只是存档时在File Sub-format的选项,要选择
　Version 89a-Interlaced.
2.以此格式存档的图片就会以交错的方式显示.
3.以此方式显示图片速度并不会比以普通方式显示还快,但可让使用者先
　了解图形大概的样子.
4.其实Version 89a-Noninterlaced的格式也会以交错的方式现示图形,但如
　果不想变成透明图片,还是要存成Version 89a-Interlaced的格式.