HTML入门教程文档格式.docx
《HTML入门教程文档格式.docx》由会员分享,可在线阅读,更多相关《HTML入门教程文档格式.docx(17页珍藏版)》请在冰豆网上搜索。
Hn>
/Hn>
标题,设定标题字体大小,n=1(大)~6(小)会自动跳下一行。
通常用在如章节、段落等标题上。
如:
H2>
标题<
/H2>
标题
H3ALIGN=CENTER>
/H3>
(标题置中)
B>
/B>
粗体字。
粗体字<
粗体字
I>
/I>
斜体字。
斜体字<
斜体字
U>
/U>
加底线。
加底线<
加底线
DEL>
/DEL>
横线(表示删除)。
横线<
TT>
/TT>
打字体(固定宽度文字)。
打字体<
打字体
SUP>
/SUP>
上标字。
字体<
上标字<
字体上标字
SUB>
/SUB>
下标字。
下标字<
字体下标字
!
...>
注解(不会显示在浏览器上),可以多行。
更新日期:
2000/1/1>
设定字体大小、颜色、字型
有关设定文字的方法共有以下几种:
1.设定HTML文件主体文字颜色。
标记。
如:
BODYTEXT=RED>
或
<
BODYTEXT=#FF0000>
2.设定基本字体大小、颜色、字型。
BASEFONT>
/BASEFONT>
3.设定字体大小、颜色、字型。
FONT>
/FONT>
设定基本字体,SIZE=1~7,1(最小)7(最大)。
BASEFONTSIZE=4>
基本字体大小为4<
基本字体大小为4
BASEFONTCOLOR=#FF0000>
设定颜色<
设定颜色
BASEFONTFACE=标楷体,细明体>
设定字型<
设定字型
BIG>
/BIG>
基本字体加大。
基本字体大小为4,<
加大为5<
基本字体大小为4,加大为5
SMALL>
/SMALL>
基本字体减小。
减小为3<
基本字体大小为4,减小为3
设定字体大小、颜色、字型,SIZE=1~7,1(最小)7(最大)。
FONTSIZE=4>
字体大小为4<
字体大小为4
基本字体大小为4
FONTSIZE=+1>
+1字体大小为5<
FONTSIZE=-2>
-2字体大小为2<
基本字体大小为4
+1字体大小为5
-2字体大小为2
FONTCOLOR=#FF0000>
FONTFACE=标楷体,细明体>
注意事项
1.设定字体的大小分:
绝对SIZE如:
和相对SIZE如:
(以BASEFONT设定的字体大小做加减)。
2.设定字体的颜色可以是颜色名称或#RRGGBB表红绿蓝强度(00暗~FF亮)。
#RRGGBB所代表的是红、绿、蓝三原色,每一色由两位十六进制的数值表示(即十进制0~255)。
十六进制:
0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。
3.设定字体的字型会按照顺序找出显示的字型,若找不到则以系统预设字型显示
第三课表格
表格是HTML的一项非常重要功能,利用其多种属性能够设计出多样化的表格。
使用表格可以使你的页面有很多意想不到的效果,使页面更加整齐美观。
常用表格标记
TABLE>
/TABLE>
表格指令。
相关属性:
·
ALIGN调整
BGCOLOR背景颜色
BORDER边框
HEIGHT高度
WIDTH宽度
CAPTION>
/CAPTION>
表格标题。
ALIGN调整
TR>
/TR>
表格列(<
可省略)。
TH>
/TH>
表格栏标题(表头)粗体字(<
COLSPAN栏宽
ROWSPAN栏高
TD>
/TD>
表格栏资料(储存格)(<
WIDTH宽度
举例
(基础型)
TABLEBORDER=1ALIGN=CENTER>
太平洋网络学院<
太平洋网络学院
太平洋网络学院
(加强型)增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。
TABLEBORDER=1ALIGN=CENTERBGCOLOR=#CCCCFF>
表格标题<
THCOLSPAN=2>
行标题1<
行标题2
THROWSPAN=2>
列标题1<
A<
A
B<
B
列标题2<
C<
C
D<
D
表格标题
行标题1
行标题2
列标题1
A
B
列标题2
C
D
看了以上的例子,应该了解表格的基本写法吧!
第四课标示
HTML提供许多种类的标示标记,作项目标示,而且可以作巢状式标示!
常用标示标记
LI>
标示项目。
OL>
第一项
第二项
/OL>
1.第一项
2.第二项
编号标示,可标示数字或英文、罗马字母。
OLTYPE=I>
I.第一项
II.第二项
UL>
/UL>
符号标示,可标示数字或英文、罗马字母。
∙第一项
∙第二项
DT>
定义项目。
DD>
定义资料。
DL>
/DL>
定义标示。
十进制:
0、1、2、3、4、5、6、7、8、9
0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F
0、1、2、3、4、5、6、7、8、9
0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F
巢状式标示
第一章
OLTYPE=i>
第一节
第一段
第二段
第二节
第二章
第三章
1.第一章
i.第一节
▪第一段
▪第二段
ii.第二节
2.第二章
3.第三章
其他标示标记
DIR>
/DIR>
目录式标示(自动加圆点)。
网络学院:
新手上路
软件教室
设计教室
开发教室
新手上路
软件教室
设计教室
开发教室
标示项目符号也可以用<
标记,以符号字元(○、◆、◎、★、■...等)标示。
如:
●<
特殊符号:
在HTML文件中,有些符号是代表特定的意义的。
所以当我们要使用这些特殊符号时,便要用替代指令。
符号
替代指令
"
&
#34或&
quot
#38或&
amp
#60或&
lt
>
#62或&
gt
不可分空格
nbsp
第五课区段标记
一个网站不仅要内容丰富外,也要有美观简洁的版面。
HTML所提供的区段标记功能,如果可以好好的利用也会有相当不错的效果。
常用区段标记
HR>
产生水平线。
HRALING=CERTENWIDTH=90%>
BR>
跳下一行。
太平洋网络学院,<
网上学电脑的好去处。
太平洋网络学院,
P>
/P>
段落,跳下一行并加一行空白。
(<
可省略)
太平洋网络学院,
CENTER>
/CENTER>
置中。
置中<
置中
NOBR>
/NOBR>
不跳下一行。
太平洋网络学院,<
太平洋网络学院,网上学电脑的好去处。
PRE>
/PRE>
以文件原始格式显示。
原始格式:
文件<
文件
第六课链接
链接可说是HTML中最重要的功能!
因为HTML拥有链接的功能,使你能接上INTERNET、WWW……享受多姿多彩的网络世界。
基本上链接分成:
外部链接——链接至网络的某个URL网址或文件,可参考考网络链接方式。
内部链接——链接HTML文件的某个区段。
网络链接方式
网络链接方式:
//主机名称/路径/文件名称
网址如:
http:
//
文件传输如:
ftp:
GROPHER传输如:
gropher:
远端登入如:
telnet:
文件下载如:
file:
//data/html/file.zip
NETNEWS传输如:
news:
E-Mail如:
mailto:
pcedu@
常用链接标记
BASE>
设定基本URL位置或路径,以後只要设定文件名称即会自动加上位置或路径。
HREF链接的URL位址或文件
TARGET指定链接到的URL位址或文件显示于那一个视窗(可和<
FRAME>
视窗标记配合使用或开新的视窗)
BASEHREF="
http:
//
AHREF="
kk.htm"
■<
/A>
//TARGET=frame1>
A>
链接指令。
NAME名称
外部链接
内部链接
CH1.HTM文件
AHREF=#A>
(欲链接至HTML文件A点)
ANAME=A>
(HTML文件A点)
CH2.HTM文件
AHREF=CH1.HTM#A>
(欲链接至CH1.HTM文件A点)
■"
表示链接点,可以是文字或图案。
(即游标移到时,会变成手指形状的地方)
LINK>
链接指令(用于HEAD区,设定CSS文件)。
META>
储存应用资讯,可设定时间载入网页(用于HEAD区)。
CHARSET设定
CONTENT回应表头资料内容,若是数字表示秒数
HTTP-EQUIV回应表头,若设定为REFRESH载入URL设定
URLHTML位置
设定中文自动跳行。
METAHTTP-EQUIV="
Content-Type"
CONTENT="
text/html;
charset=gb2312"
设定十秒回到首页。
(若不设定HTML文件位置则再载入原HTML文件)
REFRESH"
CONTENT=10URL=index.htm>
设定链接、未链接部份颜色
设定链接、未链接部份颜色,用<
ALINK按下链接部份未放开时颜色
LINK未看过的链接部份颜色
VLINK已看过的链接部份颜色
BODYLINK=#0000FFALINK=#FF0000VLINK=#00FF00>
第七课框架
框架架构的标记,主要是分割窗口和插入浮动窗口的功能。
如果能有效的运用将有助于浏览网页的效率!
常用窗口标记
FRAMESET>
/FRAMESET>
定义分割窗口。
COLS行,设定分割左右窗口宽度(用『,』分隔,可设百分比%;
『*』表示剩余部份)
FRAMEBORDER显示边框
ROWS列,设定分割上下窗口高度(用『,』分隔,可设百分比%;
『*』表示剩余部份)
定义窗口。
NAME名称
NORESIZE设定是否可以调整窗口大小
SRC文件或URL位址
SCROLLING设定是否可以卷动
NOFRAMES>
/NOFRAMES>
无支援分割窗口浏览器显示文字。
IFRAME>
/IFRAME>
插入浮动窗口。
本站窗口架构。
(先分割成上下窗口,再于窗口各分割成左右窗口。
)
FRAMESETROWS=74,*COLS=140,*FRAMEBORDER=NOBORDER=0>
FRAMESRC=rad.htmNAME=RADNORESIZESCROLLING=NO>
FRAMESRC=a-1.htmNAME=FRAME1NORESIZESCROLLING=NO>
FRAMESRC=b-1.htmNAME=FRAME2NORESIZESCROLLING=AUTO>
FRAMESRC=c-1.htmNAME=FRAME3NORESIZESCROLLING=AUTO>
浮动窗口
IFRAMEFRAMEBORDER=YESSCROLLING=YESSRC=c1-01.htm>
注意
窗口基本架构的文件,通常放在HTML文件的第一页,如:
index.htm。
此HTML文件的基本架构并不需要本文区(BODY),只需定义窗口架构,而其他HTML文件可用连结方式(AHREF=...连结标记TARGET属性)显示于指定的窗口中。
第八课设置图片
现在的网站没有用图片的,几乎很少了吧!
图片增加了网站版面的美观,不过也不要放了大量的图片,而拖慢网站传输的效率喔!
有关设定图片的方法共有以下几种:
1.设定HTML文件背景图片、背景颜色。
2.如:
BODYBACKGROUND=A.GIF>
3.<
BODYBGCOLOR=#000000>
4.设定图片。
IMG>
5.设定地图。
MAP>
/MAP>
常用图片标记
指令
ALT提示字
USEMAP地图名称
可插入图片(GIF、JPG格式)、AVI电影
IMGSRC="
../../../images/pcedu_lo.gif"
ALT="
太平洋网络学院"
ALIGN=TOPBORDER=1>
地图
AREA>
设定地图动作区域
COORDS设定动作区域座标(左上角座标:
X1,Y1;
右下角座标:
X2,Y2)
HREF动作区域连结点(可载入位址或文件)
NOHREF动作区域连结点不动作
SHAPE外型
举例
设定地图
IMGBORDER=0SRC=A.GIFUSEMAP=#A>
MAPNAME=A>
AREASHAPE=RECTCOORDS=0,0,200,100HREF=1.HTM>
AREASHAPE=RECTCOORDS=0,100,200,200NOHREF>
AREASHAPE=RECTCOORDS=0,200,200,300HREF=3.HTM>
第九课加入声音
HTML不仅能插入图片,也可以载入MIDI音乐、WAV音效喔!
常用音乐标记
BGSOUND>
背景音乐、音效。
LOOP循环,背景音乐播放次数
SRC文件或URL位址(可为WAV、MIDI格式)
BGSOUNDSRC=m-1.midLOOP=True>
内嵌音乐插件
EMBED>
/EMBED>
内嵌插件。
WIDTH宽度(可设百分比%)
SRC设定内嵌物件的URL位址
AUTOSTART自动播放
EMBEDSRC=m-1.midWIDTH=145HEIGHT=60AUTOSTART=TrueLOOP=True>
第十课滚动条
这是由IE提供的滚动条,可不要被众多的属性吓到了,越多的属性功能越强喔!
【文字卷动标记】
MARQUEE>
/MARQUEE>
文字卷动(滚动条)。
【相关属性】
BEHAVIOR=设定卷动方式
--ALTERNATE交替来回卷动
--SCROLL卷动(预设)
--SLIDE滑动
BGCOLOR=color背景颜色
DIRECTION=设定卷动方向
HEIGHT=n高度