打印

HTML语言入门

丫丫笑蜗牛

社区总管

Rank: 23

蜗牛小村落小村长

UID: 21
帖子: 3580
精华: 26
注册时间: 2006-5-8

优秀版主灌水天才热心助人快乐天使

楼主大中小发表于 2007-6-1 17:05 只看该作者

HTML语言入门

　HTML文件基本架构　　 <HTML> 文件开始
<HEAD> 标头区开始
<TITLE>...</TITLE> 标题区
</HEAD> 标头区结束
<BODY> 本文区开始
本文区内容
</BODY> 本文区结束
</HTML> 文件结束

<HTML> 网页文件格式。
<HEAD> 标头区 : 记录文件基本资料，如作者、编写时间。
<TITLE> 标题区 : 文件标题须使用在标头区内，可以在浏览器最上面看到标题。
<BODY> 本文区 : 文件资料，即在浏览器上看到的网站内容。
　　注意事项
　　通常一份HTML网页文件包含二个部份 : <HEAD>...</HEAD> 标头区、 <BODY>...</BODY> 本文区。而 <HTML> 和 </HTML> 代表网页文件格式。
　　习惯上一个网站的首页名称通常订为 index.htm 或 index.html 这样只要浏览网站，浏览器便会自动的找出 index.htm 文件。

TOP

丫丫笑蜗牛

社区总管

Rank: 23

蜗牛小村落小村长

UID: 21
帖子: 3580
精华: 26
注册时间: 2006-5-8

优秀版主灌水天才热心助人快乐天使

沙发大中小发表于 2007-6-1 17:06 只看该作者

我们在这里将要谈的是有关文字的标记，包括字体大小、颜色、字型...等变化，适当的应用可以增加页面的美观！

　　常用字体标记

<Hn>...</Hn> 标题，设定标题字体大小， n = 1 ( 大 ) ~ 6 ( 小 ) 会自动跳下一行。通常用在如章节、段落等标题上。如 : <H2> 标题 </H2> 标题如 : <H3 ALIGN = CENTER> 标题 </H3> ( 标题置中 ) 标题

<B>...</B> 粗体字。如 : <B> 粗体字 </B> 粗体字

<I>...</I> 斜体字。如 : <I> 斜体字 </I>
斜体字

<U>...</U> 加底线。如 : <U> 加底线 </U>
加底线

<DEL>...</DEL> 横线 ( 表示删除 )。如 : <DEL> 横线 </DEL>
横线

<TT>...</TT> 打字体 ( 固定宽度文字 )。如 : <TT> 打字体 </TT>
打字体

<SUP>...</SUP> 上标字。如 : 字体 <SUP> 上标字 </SUP>
字体上标字

<SUB>...</SUB> 下标字。如 : 字体 <SUB> 下标字 </SUB>
字体下标字

<!...> 注解 ( 不会显示在浏览器上 )，可以多行。
如 : <! 更新日期 : 2000/1/1>

　　设定字体大小、颜色、字型

　　有关设定文字的方法共有以下几种 :

　　1.设定HTML文件主体文字颜色。<BODY>...</BODY>标记。
　　如 : <BODY TEXT=RED>...</BODY> 或
　　　　　<BODY TEXT=#FF0000>...</BODY> 　　2.设定基本字体大小、颜色、字型。<BASEFONT>...</BASEFONT>标记。

　　3.设定字体大小、颜色、字型。<FONT>...</FONT>标记。

<BASEFONT>...</BASEFONT> 设定基本字体，SIZE = 1 ~ 7，1 ( 最小 ) 7 ( 最大 )。如 : <BASEFONT SIZE=4> 基本字体大小为 4 </BASEFONT>
基本字体大小为 4 如 : <BASEFONT COLOR =#FF0000> 设定颜色 </BASEFONT>
设定颜色如 : <BASEFONT FACE = 标楷体 , 细明体 > 设定字型 </BASEFONT>
设定字型

<BIG>...</BIG> 基本字体加大。如 : <BASEFONT SIZE=4> 基本字体大小为 4，</BASEFONT>
<BIG> 加大为 5 </BIG>
基本字体大小为 4，加大为 5

<SMALL>...</SMALL> 基本字体减小。如 : <BASEFONT SIZE=4> 基本字体大小为 4，</BASEFONT>
<SMALL> 减小为 3 </SMALL>
基本字体大小为 4，减小为 3

<FONT>...</FONT> 设定字体大小、颜色、字型，SIZE = 1 ~ 7，1 ( 最小 ) 7 ( 最大 )。如 : <FONT SIZE=4> 字体大小为 4 </FONT>
字体大小为 4 如 : <BASEFONT SIZE=4> 基本字体大小为 4
<FONT SIZE=+1> +1字体大小为 5 </FONT>
<FONT SIZE=-2> -2字体大小为 2 </FONT>...</BASEFONT>
　　基本字体大小为 4
[size=+1]　 +1字体大小为 5
[size=-2]　　　-2字体大小为 2
如 : <FONT COLOR =#FF0000> 设定颜色 </FONT>
设定颜色如 : <FONT FACE = 标楷体 , 细明体 > 设定字型 </FONT>
设定字型

　　注意事项

　　1. 设定字体的大小分 : 绝对SIZE 如 : <FONT SIZE=4>
和相对SIZE 如 : <FONT SIZE=+1> ( 以 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. 设定字体的字型会按照顺序找出显示的字型，若找不到则以系统预设字型显示。

TOP

丫丫笑蜗牛

社区总管

Rank: 23

蜗牛小村落小村长

UID: 21
帖子: 3580
精华: 26
注册时间: 2006-5-8

优秀版主灌水天才热心助人快乐天使

板凳大中小发表于 2007-6-1 17:07 只看该作者

常用表格标记
<TABLE>...</TABLE> 表格指令。相关属性 :
·ALIGN 调整
·BGCOLOR 背景颜色
·BORDER 边框
·HEIGHT 高度
·WIDTH 宽度
<CAPTION>...</CAPTION> 表格标题。相关属性 :
·ALIGN 调整
<TR>...</TR> 表格列 ( </TR>可省略 ) 。相关属性 :
·ALIGN 调整
<TH>...</TH> 表格栏标题 ( 表头 ) 粗体字 ( </TH>可省略 ) 。相关属性 :
·ALIGN 调整
·COLSPAN 栏宽
·ROWSPAN 栏高
<TD>...</TD> 表格栏资料 ( 储存格 ) ( </TD>可省略 ) 。相关属性 :
·ALIGN 调整
·BGCOLOR 背景颜色
·HEIGHT 高度
·WIDTH 宽度
·COLSPAN 栏宽
·ROWSPAN 栏高

　　举例

如 : ( 基础型 )
<TABLE BORDER=1 ALIGN=CENTER>
<TR><TD>流年设计<TD>流年设计
<TR><TD>流年设计<TD>流年设计
</TABLE>

流年设计 [td]流年设计

如 : ( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。 <TABLE BORDER=1 ALIGN=CENTER BGCOLOR=#CCCCFF>
<CAPTION>表格标题</CAPTION>
<TR><TD><TH COLSPAN=2>行标题 1 <TH COLSPAN=2>行标题 2
<TR><TH ROWSPAN=2>列标题 1 <TD>A <TD>A <TD>A <TD>A
<TR><TD>B <TD>B <TD>B <TD>B
<TR><TH ROWSPAN=2>列标题 2 <TD>C <TD>C <TD>C <TD>C
<TR><TD>D <TD>D <TD>D <TD>D
</TABLE>

　　看了以上的例子，应该了解表格的基本写法吧！

[ 本帖最后由丫丫笑蜗牛于 2007-6-1 17:09 编辑 ]

TOP

丫丫笑蜗牛

社区总管

Rank: 23

蜗牛小村落小村长

UID: 21
帖子: 3580
精华: 26
注册时间: 2006-5-8

优秀版主灌水天才热心助人快乐天使

4楼大中小发表于 2007-6-1 17:09 只看该作者

HTML提供许多种类的标示标记，作项目标示，而且可以作巢状式标示！

　　常用标示标记

第一项
第二项

<OL>...</OL> 编号标示，可标示数字或英文、罗马字母。
如 :
<OL TYPE=I>
<LI>第一项
<LI>第二项
</OL>

第一项
第二项

<UL>...</UL> 符号标示，可标示数字或英文、罗马字母。
如 :
<UL>
<LI>第一项
<LI>第二项
</UL>

第一项
第二项

<DT> 定义项目。

<DD> 定义资料。

<DL>...</DL> 定义标示。
如 :
<DL>
<DT>十进制 :<DD>0、1、2、3、4、5、6、7、8、9
<DT>十六进制 :<DD>0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F
</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

　　巢状式标示

如 :

<OL><LI>第一章 <OL TYPE=i> <LI>第一节 <UL> <LI>第一段 <LI>第二段 </UL> <LI>第二节 </OL><LI>第二章<LI>第三章</OL>

第一章
- 第一节
  - 第一段
  - 第二段
- 第二节
第二章
第三章

　　其他标示标记

<DIR>...</DIR> 目录式标示 ( 自动加圆点 )。
如 :
网络学院 :
<DIR>
<LI>新手上路
<LI>软件教室
<LI>设计教室
<LI>开发教室
</DIR> 网络学院 :
新手上路软件教室设计教室开发教室

　　注意事项

　　标示项目符号也可以用<FONT>...</FONT> 标记，以符号字元 ( ○、◆、◎、★、■...等 ) 标示。

　　如 :<FONT COLOR =#FF0000> ● </FONT>

　　特殊符号 :

　　在HTML文件中，有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时，便要用替代指令。

符号 [td=1,1,161]替代指令

" [td=1,1,161]&#34 或 &quot

& [td=1,1,161]&#38 或 &amp

< [td=1,1,161]&#60 或 &lt

> [td=1,1,161]&#62 或 &gt

不可分空格 [td=1,1,161]&nbsp

TOP

丫丫笑蜗牛

社区总管

Rank: 23

蜗牛小村落小村长

UID: 21
帖子: 3580
精华: 26
注册时间: 2006-5-8

优秀版主灌水天才热心助人快乐天使

5楼大中小发表于 2007-6-1 17:10 只看该作者

一个网站不仅要内容丰富外，也要有美观简洁的版面。HTML所提供的区段标记功能，如果可以好好的利用也会有相当不错的效果。

　　常用区段标记

<HR> 产生水平线。如 : <HR ALING=CERTEN WIDTH=90%>

<BR> 跳下一行。如 : 流年设计，<BR>流年论坛。
流年设计，
流年论坛。
<P>...</P> 段落，跳下一行并加一行空白。 ( </P> 可省略 ) 如 : 流年设计，<P>流年论坛。
流年设计，流年论坛。
<CENTER>...</CENTER> 置中。如 : <CENTER>置中</CENTER>
置中 <NOBR>...</NOBR> 不跳下一行。如 : <NOBR>流年设计，</NOBR>流年论坛。
流年设计，流年论坛。
<PRE>...</PRE> 以文件原始格式显示。
如 : <PRE>原始格式: 文件</PRE>
原始格式: 文件

TOP

丫丫笑蜗牛

社区总管

Rank: 23

蜗牛小村落小村长

UID: 21
帖子: 3580
精华: 26
注册时间: 2006-5-8

优秀版主灌水天才热心助人快乐天使

6楼大中小发表于 2007-6-1 17:11 只看该作者

链接可说是HTML中最重要的功能！因为HTML拥有链接的功能，使你能接上INTERNET、WWW ……享受多姿多彩的网络世界。

基本上链接分成 :

外部链接——链接至网络的某个URL网址或文件，可参考考网络链接方式。
内部链接——链接HTML文件的某个区段。

网络链接方式

网络链接方式 : //主机名称 / 路径 / 文件名称

网址如 : http : //www.los4.net/
文件传输如 : ftp : //ftp.los4.net/
GROPHER 传输如 : gropher : //www.los4.net/
远端登入如 : telnet : //www.los4.net
文件下载如 : file : //data/html/file.zip
NET NEWS 传输如 : news : www.los4.net

E-Mail 如 : mailto : pcedu@pconline.com.cn

常用链接标记

<BASE> 设定基本URL位置或路径，以後只要设定文件名称即会自动加上位置或路径。相关属性 :
·HREF 链接的URL位址或文件
·TARGET 指定链接到的URL位址或文件显示于那一个视窗 ( 可和 <FRAME> 视窗标记配合使用或开新的视窗 ) 如 :
<BASE HREF="http : //www.los4.net/">
<A HREF="kk.htm">■</A> <BASE HREF="http : //www.los4.net/" TARGET=frame1>
<A>...</A> 链接指令。相关属性 :
·HREF 链接的URL位址或文件
·NAME 名称
·TARGET 指定链接到的URL位址或文件显示于那一个视窗 ( 可和 <FRAME> 视窗标记配合使用或开新的视窗 ) 如 :
外部链接
<A HREF="http : //www.los4.net/">■</A> <A HREF="http : //www.los4.net/" TARGET=frame1>■</A> 内部链接
·CH1.HTM 文件
<A HREF=#A>■</A> ( 欲链接至HTML文件 A 点 ) <A NAME=A>■</A> ( HTML文件 A 点 ) ·CH2.HTM文件
<A HREF=CH1.HTM#A>■</A> (欲链接至CH1.HTM 文件 A 点 ) " ■ " 表示链接点，可以是文字或图案。( 即游标移到时，会变成手指形状的地方 )
<LINK> 链接指令 ( 用于HEAD区，设定CSS文件 )。 <META> 储存应用资讯，可设定时间载入网页 ( 用于HEAD区 )。相关属性 :
·CHARSET 设定
·CONTENT 回应表头资料内容 , 若是数字表示秒数
·HTTP-EQUIV 回应表头 , 若设定为REFRESH载入URL设定
·URL HTML位置
如 :
·设定中文自动跳行。
<META HTTP-EQUIV="Content-Type" C> ·设定十秒回到首页。 ( 若不设定HTML文件位置则再载入原HTML文件 )
<META HTTP-EQUIV="REFRESH" CONTENT=10 URL=index.htm>
设定链接、未链接部份颜色

设定链接、未链接部份颜色，用<BODY>...</BODY>标记。

相关属性 : ·ALINK按下链接部份未放开时颜色
·LINK未看过的链接部份颜色
·VLINK已看过的链接部份颜色

如 : <BODY LINK=#0000FF ALINK=#FF0000 VLINK=#00FF00>

TOP

丫丫笑蜗牛

社区总管

Rank: 23

蜗牛小村落小村长

UID: 21
帖子: 3580
精华: 26
注册时间: 2006-5-8

优秀版主灌水天才热心助人快乐天使

7楼大中小发表于 2007-6-1 17:11 只看该作者

框架架构的标记，主要是分割窗口和插入浮动窗口的功能。如果能有效的运用将有助于浏览网页的效率！　　常用窗口标记
<FRAMESET>...</FRAMESET> 定义分割窗口。
相关属性 :
·BORDER 边框
·COLS 行 , 设定分割左右窗口宽度 ( 用『,』分隔，可设百分比 % ;『*』表示剩余部份 )
·FRAMEBORDER 显示边框
·ROWS 列 , 设定分割上下窗口高度 ( 用『,』分隔，可设百分比 % ;『*』表示剩余部份 )

<FRAME> 定义窗口。
相关属性 :
·FRAMEBORDER 显示边框
·NAME 名称
·NORESIZE 设定是否可以调整窗口大小
·SRC 文件或URL位址
·SCROLLING 设定是否可以卷动

<NOFRAMES>...</NOFRAMES> 无支援分割窗口浏览器显示文字。

<IFRAME>...</IFRAME> 插入浮动窗口。
相关属性 :
·BORDER 边框
·FRAMEBORDER 显示边框
·NORESIZE 设定是否可以调整窗口大小
·SRC 文件或URL位址
·SCROLLING 设定是否可以卷动

　　举例
如 : 本站窗口架构。
( 先分割成上下窗口，再于窗口各分割成左右窗口。 )
<FRAMESET ROWS=74,* COLS=140,* FRAMEBORDER=NO BORDER=0>
<FRAME SRC=rad.htm NAME=RAD NORESIZE SCROLLING=NO>
<FRAME SRC=a-1.htm NAME=FRAME1 NORESIZE SCROLLING=NO>
<FRAME SRC=b-1.htm NAME=FRAME2 NORESIZE SCROLLING=AUTO>
<FRAME SRC=c-1.htm NAME=FRAME3 NORESIZE SCROLLING=AUTO>
</FRAMESET>

如 : 浮动窗口
<CENTER>
<IFRAME FRAMEBORDER=YES SCROLLING=YES SRC=c1-01.htm>
</IFRAME>
</CENTER>
　　注意
　　窗口基本架构的文件，通常放在HTML文件的第一页，如 : index.htm 。此HTML文件的基本架构并不需要本文区 ( BODY )，只需定义窗口架构，而其他HTML文件可用连结方式 ( A HREF=...连结标记 TARGET属性 ) 显示于指定的窗口中。

TOP

丫丫笑蜗牛

社区总管

Rank: 23

蜗牛小村落小村长

UID: 21
帖子: 3580
精华: 26
注册时间: 2006-5-8

优秀版主灌水天才热心助人快乐天使

8楼大中小发表于 2007-6-1 17:12 只看该作者

现在的网站没有用图片的，几乎很少了吧！图片增加了网站版面的美观，不过也不要放了大量的图片，而拖慢网站传输的效率喔！　　有关设定图片的方法共有以下几种 :

设定HTML文件背景图片、背景颜色。<BODY>...</BODY>标记。
如 : <BODY BACKGROUND=A.GIF>...</BODY> 或
<BODY BGCOLOR=#000000>...</BODY>
设定图片。<IMG>标记。
设定地图。<MAP>...</MAP>标记。

　　常用图片标记

<IMG> 指令相关属性 :
·ALIGN 调整
·ALT 提示字
·BORDER 边框
·HEIGHT 高度
·SRC 文件或URL位址
·USEMAP 地图名称
·WIDTH 宽度如 : 可插入图片 ( GIF、JPG格式 )、AVI电影
<CENTER>
<IMG SRC="../../../images/pcedu_lo.gif" ALT="太平洋网络学院" ALIGN=TOP BORDER=1>
</CENTER>

<MAP>...</MAP> 地图相关属性 :
·NAME 名称
<AREA> 设定地图动作区域相关属性 :
·COORDS 设定动作区域座标 ( 左上角座标 : X1,Y1 ; 右下角座标 : X2,Y2 )
·HREF 动作区域连结点 ( 可载入位址或文件 )
·NOHREF 动作区域连结点不动作
·SHAPE 外型
　　举例

设定地图
<IMG BORDER=0 SRC=A.GIF USEMAP=#A>
<MAP NAME=A>
<AREA SHAPE=RECT COORDS=0,0,200,100 HREF=1.HTM>
<AREA SHAPE=RECT COORDS=0,100,200,200 NOHREF>
<AREA SHAPE=RECT COORDS=0,200,200,300 HREF=3.HTM>
</MAP>

TOP

丫丫笑蜗牛

社区总管

Rank: 23

蜗牛小村落小村长

UID: 21
帖子: 3580
精华: 26
注册时间: 2006-5-8

优秀版主灌水天才热心助人快乐天使

9楼大中小发表于 2007-6-1 17:13 只看该作者

HTML不仅能插入图片，也可以载入MIDI音乐、WAV 音效喔！

常用音乐标记
<BGSOUND> 背景音乐、音效。
相关属性 :
·LOOP 循环 , 背景音乐播放次数
·SRC 文件或URL位址 (可为WAV、MIDI格式 )
如 :
<BGSOUND SRC=m-1.mid LOOP=True>
内嵌音乐插件
<EMBED>...</EMBED> 内嵌插件。
相关属性 :
·HEIGHT 高度
·WIDTH 宽度 ( 可设百分比% )
·SRC 设定内嵌物件的 URL 位址
·LOOP 循环 , 背景音乐播放次数
·AUTOSTART 自动播放
如 :
<EMBED SRC=m-1.mid WIDTH=145 HEIGHT=60 AUTOSTART=True LOOP=True></EMBED>

TOP

丫丫笑蜗牛

社区总管

Rank: 23

蜗牛小村落小村长

UID: 21
帖子: 3580
精华: 26
注册时间: 2006-5-8

优秀版主灌水天才热心助人快乐天使

10楼 大中小发表于 2007-6-1 17:13 只看该作者

这是由IE提供的滚动条，可不要被众多的属性吓到了，越多的属性功能越强喔！

【文字卷动标记】

<MARQUEE>...</MARQUEE> 文字卷动 ( 滚动条 )。

【相关属性】

·BEHAVIOR = 设定卷动方式
-- ALTERNATE 交替来回卷动
-- SCROLL 卷动 ( 预设 )
-- SLIDE 滑动

·BGCOLOR = color 背景颜色
·DIRECTION = 设定卷动方向
·HEIGHT = n 高度
·LOOP = n 循环 , 卷动次数 ( 预设循环 )
·SCROLLAMOUNT = n 设定卷动距离
·SCROLLDELAY = milliseconds 设定卷动时间
·TRUESPEED = milliseconds 设定卷动速度
·WIDTH = n 宽度 ( 可设百分比% )

【举例】

如 : <MARQUEE BGCOLOR=RED BEHAVIOR=ALTERNATE DIRECTION=LEFT SCROLLAMOUT=10 SCROLLDELAY=100> <FONT COLOR=WHITE>流年设计</FONT></MARQUEE>

如 : <MARQUEE BGCOLOR=GREEN HEIGHT=50 BEHAVIOR=SCROLL DIRECTION=UP SCROLLAMOUT=10 SCROLLDELAY=300> <FONT COLOR=WHITE><CENTER>流年设计</CENTER></FONT></MARQUEE>

TOP

丫丫笑蜗牛

社区总管

Rank: 23

蜗牛小村落小村长

UID: 21
帖子: 3580
精华: 26
注册时间: 2006-5-8

优秀版主灌水天才热心助人快乐天使

11楼 大中小发表于 2007-6-1 17:14 只看该作者

【举例】如 : 流年设计如 : 流年设计

TOP

傻哥

他们都说我是花心大萝卜。。。

管理员

Rank: 24

萝卜帮帮主

UID: 4
帖子: 24182
精华: 34
性别: 男
注册时间: 2006-4-24

管理员的自我安慰。。。

12楼 大中小发表于 2007-6-1 18:39 只看该作者

看来我是学不会的了。。。希望在你们身上！努力吧筒子们！胜利是属于你们滴。。。

风敲竹韵梅听雪，雨打兰香菊看霜

TOP

香茗超级搜索----全能搜！	香茗社区图片文档上传---永久免费！	邮箱图标在线制作、自动保存	搞笑证件制作保存
十六进制颜色代码	准备发广告的朋友请先看这里	香茗社区精美音画贴收藏	喝彩二零零八，祝福北京奥运！
众志成城，抗震救灾！	广告位招租联系QQ451249232	精彩推荐：民乐大师纯独奏	广告位招租联系QQ451249232