【教程】HTML教程大全
2013-10-19 06:56:27 -0400
欢迎来到伊卡洛斯学院
HTML语言入门之一:基础
当我们畅游Internet时,我们透过浏览器所看到的网站,是由HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言,透过标记式的指令 (Tag),将影像、声音、图片、文字等连结显示出来
HTML标记是由 < 和 > 所括住的指令,主要分为 : 单标记指令、双标记指令 ( 由 < 起始标记 >,< / 结束标记 >所构成 ) 。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑,完成后 ( 以 .htm 或 .html 为文件后缀保存 ) 将HTML网页文件由浏览器打开显示,若测试没有问题则可以放到服务器 (Server) 上,对外发布信息。
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 文件。
HTML语言入门之二:字体
我们在这里将要谈的是有关文字的标记,包括字体大小、颜色、字型...等变化,适当的应用可以增加页面的美观！
常用字体标记
<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
+1字体大小为 5
-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. 设定字体的字型会按照顺序找出显示的字型,若找不到则以系统预设字型显示。
HTML语言入门之三:表格
表格是HTML的一项非常重要功能,利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果,使页面更加整齐美观。
常用表格标记
<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>
流年设计 流年设计
流年设计 流年设计
如 : ( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。
<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>
表格标题 行标题 1 行标题 2
列标题 1 A A A A
B B B B
列标题 2 C C C C
D D D D
看了以上的例子,应该了解表格的基本写法吧！
HTML语言入门之四:标示
HTML提供许多种类的标示标记,作项目标示,而且可以作巢状式标示！
常用标示标记
<LI> 标示项目。
如 :
<OL>
<LI>第一项
<LI>第二项
</OL>
第一项
第二项
<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文件中,有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时,便要用替代指令。
符号 替代指令
" " 或 "
& & 或 &
< < 或 <
> > 或 >
不可分空格  
HTML语言入门之五:区段标记
一个网站不仅要内容丰富外,也要有美观简洁的版面。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>
原始格式: 文件
HTML语言入门:滚动条
这是由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>
HTML语言入门页面标记
HTML 文件结构(Document Structures)
<html>...</html>
<head>...</head>
<body>...</body>
<HTML>
<HEAD>
<title>, <base>, <link>, <isindex>, <meta>
</HEAD>
<BODY>
HTML 文件的正文写在这里... ...
</BODY>
</HTML>
语言字符集(Charsets)的信息
<meta http-equiv="Content-Type" content="text/html;charset=#">
#=
us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce,
iso-2022-jp, x-sjis, x-euc-jp,
euc-kr, iso-2022-kr,
gb2312, gb_2312-80,
x-euc-tw, x-cns11643-1, x-cns11643-2, big5
可在 HTML 文件中设置 MIME 字符集信息。
您在浏览主页时,最好自己在浏览器的选项菜单内选择相应的语言(language encoding)。
但是如果 HTML 文件里写明了设置,浏览器就会自动设置语言选项。
尤其是主页里用到了字符实体(entities),则该主页就应该写明字符集信息。
否则,您在浏览该主页时,若未正确设置语言选项,显示将可能混乱。
背景色彩和文字色彩
<body bgcolor=# text=# link=# alink=# vlink=#>
bgcolor --- 背景色彩
text --- 非可链接文字的色彩
link --- 可链接文字的色彩
alink --- 正被点击的可链接文字的色彩
vlink --- 已经点击(访问)过的可链接文字的色彩
#=rrggbb
色彩是用 16 进制的 红－绿－蓝(red-green-blue, RGB) 值来表示。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
背景图象 <body background="image-URL">
Non Scrolling Background <body bgproperties=FIXED>
页面空白(Margin)
页面左边的空白 <body leftmargin=#>
页面上方的空白(天头) <body topmargin=#> #=margin amount
链接(Link)
基本语法 <a href="URL"> ... </a>
这是一个
<a href="samp/link.html">链接的例子</a>。
点一下带下划线的文字!
这是一个链接的例子。 点一下带下划线的文字!
跳转到页面的另外一个地方
<a href="#name"> ... </a>
<a name="name"> ... </a>
<a href="#jump-test">跳转到下一个"链接点"</a><P>
<a name="jump-test">下一个链接点</a>
跳转到下一个"链接点"
下一个链接点
跳转到另一个页面的某个地方
<a href="URL#name"> ... </a>
<a name="name"> ... </a>
跳转到另一个页面的<a href="samp/link.html#jump-test">某个地方</a>。
跳转到另一个页面的某个地方。
开一个新的(浏览器)窗口 (Target Window)
<a href="URL" target="Window_Name"> ... </a>
<a href="samp/window.html" target="window_name">
开一个新窗口!
</a>
开一个新窗口!
标尺线
<hr>
<hr>
-----------------
<hr size=#>
<hr size=10>
------------------
<hr width=#>
<hr width=50>
<hr width=50%>
----------------
----------------
<hr align=#> #=left, right
<hr width=50% align=left>
<hr width=50% align=right>
---------------
<hr noshade>
<hr noshade>
-----------
<hr color=#>
#=rrggbb 16 进制 RGB 数码,或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
<hr color="red">
哈哈简单介绍就到这里.下边就是实际操作了。
第1课：开始学习
在这第一课中,我们简要介绍制作网站所需的工具。
需要哪些工具？
十之八九,你已经拥有所需的全部工具了。
“浏览器(browser)”你有了,它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。
游览器有很多可供选择,最普及的浏览器当属微软(Microsoft)公司的Internet Explorer(俗称“IE”),其他的一些浏览器包括Opera、Mozilla Firefox(俗称“火狐狸”或“火狐”)等。这些浏览器的基本功能都是浏览网页,因此具体使用哪个浏览器是无所谓的。
也许你听说过、甚至用过一些网页制作工具,比如Microsoft FrontPage、Macromedia Dreamweaver、Microsoft Word等。现在可以忘掉这些程序了！它们对你学习网页制作没有什么帮助。
相反,你需要的是一个简易的文本编辑器。如果你正在使用Windows(微软视窗)操作系统的话,你可以使用它自带的记事本(Notepad)程序。你可以依次点击“开始菜单→程序→附件”找到该程序。
如果你用的是其他操作系统,那么也有类似的简易文本编辑器可以使用,比如Linux上的Pico或Mac(苹果机)上的Simple Text。
记事本是一个非常简单的文本编辑程序,用它编写程序非常好,因为它不会干涉你所输入的任何内容,给予你完全的控制权。而许多网页制作工具的问题在于,它们提供了许多标准功能供你选择。这样的缺点是,你只能按照这些标准功能来制作网页。所以,这类工具常常不能创建正合你意的网页。或者,更令人讨厌的是,它们会修改你手工编写的代码。而使用记事本(Notepad)或其他简易文本编辑器的话,全部代码均由你自己编写。
浏览器和记事本程序(或类似的简易文本编辑器)便是你所需的全部工具,有了它们,你就可以完成本教程,并制作自己的网站了。
我需要连上因特网么？
你无需连上因特网(Internet),浏览本教程和制作网站都可以离线完成。
如果你想要离线阅读本教程,你可以将它打印出来,或者在阅读教程期间断开与因特网的连接。你可以先在自己的计算机上制作网站,待网站制作完毕再上传到因特网上。
第2课：HTML是什么？
HTML是什么？
HTML是浏览器的“母语”。
长话短说,HTML是由一名叫Tim Berners-Lee的科学家发明的。他发明HTML的目的,是为了方便不同大学的科学家们可以更容易地获取彼此的研究文档。HTML取得了的巨大成功,大大超出了Tim Berners-Lee的原本预计。通过发明HTML,他为我们今天所认识的万维网奠定了基础。
HTML是一门语言,它令我们可以在因特网上展示信息(例如科学研究信息)。你所看到的网页,是浏览器对HTML进行解释的结果。要查看一个网页的HTML代码,只需在浏览器菜单栏上点击“查看”,然后选择“源文件”即可。
对于生手来说,HTML代码看似很复杂,不过本教程将帮助你弄清楚它们的含义。
HTML能用来做什么？
如果你要制作网站的话,学习HTML是不可避免的。即使你用Dreamweaver等工具来制作网站,了解基本的HTML知识也会令你在网站制作过程中倍感轻松,并有利于制作出更好的网站。好在HTML容易被学会和使用。通过下面两课的学习,你将学会如何制作自己的第一个网站。
HTML是用来制作网站的。就这么简单！
好,明白了,那HTML这四个字母代表什么呢？
HTML是“HyperText Mark-up Language(超文本标记语言)”的缩写——其实目前你不必了解这些,不过,为了迁就学习次序,我们就详细解释一下吧。
超(Hyper)是相对于线性(linear)来说的。在很久以前,那时计算机程序还是线形运行的：当计算机程序执行完一个动作以后,转向下一行,这行结束后,继续下移,依次类推。但HTML则不同,你可以在任何时候跳转到任何地方。比方说,你在浏览HTML.net之前,不必先去浏览MSN.com。
文本(Text)意味着它是自解释的(self-explanatory)。
标记(Markup)指的是你怎么处理文本。对文本作标记的方式,跟你在文本编辑程序里将文本加粗、或者将一行话设为标题或列表项目类似。
语言(Language)。HTML就是一种语言,它使用了许多英文单词。
在本教程中,你将会学习到XHTML(可扩展超文本标记语言)。简单地说,它是一种新的、更加结构良好的HTML。
现在,你知道了HTML(和XHTML)代表什么意思,下面我们将开始有关网站制作的学习。
第3课：元素与标签
现在你要学习的是HTML的重要成分——元素(element)。
元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。
“标签”是什么？
标签(tag)指示元素的起始与结束。
所有标签都具有相同的格式：以小于号“<”开头,以大于号“>”结尾。
一般说来,有两种标签——首标签(start tag)(如<html>)和尾标签(end tag)(如</html>)。它们唯一的区别在于,尾标签多一条斜杠“/。你通过把内容放在首标签和尾标签之间来对内容进行标记。
HTML主要就是各种各样的元素,所以,学习HTML,就是学习使用各种元素。
可以举些例子么？
没问题。比如,b元素的作用是,告诉浏览器介于标签<b>和</b>之间的文本应以粗体显示。(这里的“b”是“粗体(bold)”的意思。)
例1：
<b>这句话应显示为粗体。</b>
该例在浏览器中将显示如下：
这句话应显示为粗体。
h1、h2、h3、h4、h5及h6元素的作用是显示标题(这里的h是“标题(heading)”的意思)。其中h1是一级标题,字体最大；h2是二级标题,字体比一级标题略小；而h6是六级标题,它是最后一级标题,字体也最小。
例2：
<h1>这是标题</h1>
<h2>这是子标题</h2>
该例在浏览器中将显示如下：
这是标题
这是子标题
首标签和尾标签总是必须的吗？
常言道,凡事均有例外。在HTML中,也有例外的情况,即有些元素没有尾标签。这些没有尾标签的元素被称作空元素(empty element),它们与具体文本内容无关,比如像下面这个换行标签：<br />。
标签中的字母应该大写还是小写？
大多数浏览器不介意标签是大写还是小写,或者混合大小写。所以<HTML>、<html>或<HtMl>在浏览器上的显示效果都一样。但是,正确的写法是采用小写字母来书写标签。所以,要养成用小写字母书写标签的习惯。
把标签放在哪里？
你应该在HTML文档里书写标签。一个网站可能包含多个HTML文档。上网的过程,其实就是打开不同HTML文档的过程。
这一课就到这里。如果花10分钟时间继续学习下一课的话,你将能够制作自己的第一个网站。
第4课：制作自己的第一个网站
有了从前面几课的基础,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。
如何做呢？
通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。既然你现在已经在用浏览器阅读本教程了,那么请再打开一个窗口——这样你就可以一边阅读本教程,一边欣赏你的新网页了。
另外,请打开记事本程序(Notepad)：依次选择“开始菜单→程序→附件→记事本”即可。
现在一切就绪了！
然后呢？
我们先从简单的做起吧。先试着做一个显示如下内容的网页：“哇！这是我的第一个网站。”继续学习,就你就知道这是多么容易了。
HTML简单易学。浏览器读HTML就跟你读书一样,也是从上往下,从左到右进行的。所以,HTML文档的开始和结束便对应于网页的头和尾。
你首先要做的是告诉浏览器,你们将采用HTML语言来“对话”。这是通过<html>标签来实现的(这是容易理解的)。所以,在做所有其他事之前,先在记事本的第一行敲入“<html>”。
也许你记得前面课程中我们说过,这里的<html>是首标签,在HTML文档结尾处必须有相应的尾标签与之对应。好的,为了防止最后忘记写这个尾标签,我们现在就输入“</html>”,然后在<html>和</html>之间留些空行,用于书写其余代码。
下面,我们需要为HTML文档写一个“头部(head)”,它提供关于当前文档的信息；然后写一个“主体(body)”,它提供文档的内容。HTML最重要的就是简单——在这里,我们只需把头部(<head>和</head>)放到主体(<body>和</body>)的前面就行了。
如下所示：
</html>
<head>
</head>
<body>
</body>
</html>
注意我们是如何用换行(用Enter键)与缩进(用Tab键)令代码具有层次感的。理论上,你如何书写HTML文档,这无关紧要。但为了便于阅读代码,和保持良好的概貌,我们强烈建议你采用换行与缩进来层次化HTML代码,就像上面的例子一样。
上面这个文档便构成了你的第一个网站——它只包含一个网页,而且内容很单调,可能与你的想象相去甚远,但在一定程度上它仍是一个网站。你可以将它用作其他HTML文档的基本模版。
不错不错,但我如何添加更多内容？
前面我们学到过,HTML文档有两个部分：头部(head)和主体(body)。你在头部(head)提供关于网页的信息,你在主体(body)部分提供网页的具体内容。
比如,如果你要指定HTML文档的网页标题(title)(它将显示在浏览器窗口顶部
当我们畅游Internet时,我们透过浏览器所看到的网站,是由HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言,透过标记式的指令 (Tag),将影像、声音、图片、文字等连结显示出来
HTML标记是由 < 和 > 所括住的指令,主要分为 : 单标记指令、双标记指令 ( 由 < 起始标记 >,< / 结束标记 >所构成 ) 。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑,完成后 ( 以 .htm 或 .html 为文件后缀保存 ) 将HTML网页文件由浏览器打开显示,若测试没有问题则可以放到服务器 (Server) 上,对外发布信息。
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 文件。
HTML语言入门之二:字体
我们在这里将要谈的是有关文字的标记,包括字体大小、颜色、字型...等变化,适当的应用可以增加页面的美观！
常用字体标记
<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
+1字体大小为 5
-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. 设定字体的字型会按照顺序找出显示的字型,若找不到则以系统预设字型显示。
HTML语言入门之三:表格
表格是HTML的一项非常重要功能,利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果,使页面更加整齐美观。
常用表格标记
<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>
流年设计 流年设计
流年设计 流年设计
如 : ( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。
<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>
表格标题 行标题 1 行标题 2
列标题 1 A A A A
B B B B
列标题 2 C C C C
D D D D
看了以上的例子,应该了解表格的基本写法吧！
HTML语言入门之四:标示
HTML提供许多种类的标示标记,作项目标示,而且可以作巢状式标示！
常用标示标记
<LI> 标示项目。
如 :
<OL>
<LI>第一项
<LI>第二项
</OL>
第一项
第二项
<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文件中,有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时,便要用替代指令。
符号 替代指令
" " 或 "
& & 或 &
< < 或 <
> > 或 >
不可分空格  
HTML语言入门之五:区段标记
一个网站不仅要内容丰富外,也要有美观简洁的版面。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>
原始格式: 文件
HTML语言入门:滚动条
这是由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>
HTML语言入门页面标记
HTML 文件结构(Document Structures)
<html>...</html>
<head>...</head>
<body>...</body>
<HTML>
<HEAD>
<title>, <base>, <link>, <isindex>, <meta>
</HEAD>
<BODY>
HTML 文件的正文写在这里... ...
</BODY>
</HTML>
语言字符集(Charsets)的信息
<meta http-equiv="Content-Type" content="text/html;charset=#">
#=
us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce,
iso-2022-jp, x-sjis, x-euc-jp,
euc-kr, iso-2022-kr,
gb2312, gb_2312-80,
x-euc-tw, x-cns11643-1, x-cns11643-2, big5
可在 HTML 文件中设置 MIME 字符集信息。
您在浏览主页时,最好自己在浏览器的选项菜单内选择相应的语言(language encoding)。
但是如果 HTML 文件里写明了设置,浏览器就会自动设置语言选项。
尤其是主页里用到了字符实体(entities),则该主页就应该写明字符集信息。
否则,您在浏览该主页时,若未正确设置语言选项,显示将可能混乱。
背景色彩和文字色彩
<body bgcolor=# text=# link=# alink=# vlink=#>
bgcolor --- 背景色彩
text --- 非可链接文字的色彩
link --- 可链接文字的色彩
alink --- 正被点击的可链接文字的色彩
vlink --- 已经点击(访问)过的可链接文字的色彩
#=rrggbb
色彩是用 16 进制的 红－绿－蓝(red-green-blue, RGB) 值来表示。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
背景图象 <body background="image-URL">
Non Scrolling Background <body bgproperties=FIXED>
页面空白(Margin)
页面左边的空白 <body leftmargin=#>
页面上方的空白(天头) <body topmargin=#> #=margin amount
链接(Link)
基本语法 <a href="URL"> ... </a>
这是一个
<a href="samp/link.html">链接的例子</a>。
点一下带下划线的文字!
这是一个链接的例子。 点一下带下划线的文字!
跳转到页面的另外一个地方
<a href="#name"> ... </a>
<a name="name"> ... </a>
<a href="#jump-test">跳转到下一个"链接点"</a><P>
<a name="jump-test">下一个链接点</a>
跳转到下一个"链接点"
下一个链接点
跳转到另一个页面的某个地方
<a href="URL#name"> ... </a>
<a name="name"> ... </a>
跳转到另一个页面的<a href="samp/link.html#jump-test">某个地方</a>。
跳转到另一个页面的某个地方。
开一个新的(浏览器)窗口 (Target Window)
<a href="URL" target="Window_Name"> ... </a>
<a href="samp/window.html" target="window_name">
开一个新窗口!
</a>
开一个新窗口!
标尺线
<hr>
<hr>
-----------------
<hr size=#>
<hr size=10>
------------------
<hr width=#>
<hr width=50>
<hr width=50%>
----------------
----------------
<hr align=#> #=left, right
<hr width=50% align=left>
<hr width=50% align=right>
---------------
<hr noshade>
<hr noshade>
-----------
<hr color=#>
#=rrggbb 16 进制 RGB 数码,或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
<hr color="red">
哈哈简单介绍就到这里.下边就是实际操作了。
第1课：开始学习
在这第一课中,我们简要介绍制作网站所需的工具。
需要哪些工具？
十之八九,你已经拥有所需的全部工具了。
“浏览器(browser)”你有了,它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。
游览器有很多可供选择,最普及的浏览器当属微软(Microsoft)公司的Internet Explorer(俗称“IE”),其他的一些浏览器包括Opera、Mozilla Firefox(俗称“火狐狸”或“火狐”)等。这些浏览器的基本功能都是浏览网页,因此具体使用哪个浏览器是无所谓的。
也许你听说过、甚至用过一些网页制作工具,比如Microsoft FrontPage、Macromedia Dreamweaver、Microsoft Word等。现在可以忘掉这些程序了！它们对你学习网页制作没有什么帮助。
相反,你需要的是一个简易的文本编辑器。如果你正在使用Windows(微软视窗)操作系统的话,你可以使用它自带的记事本(Notepad)程序。你可以依次点击“开始菜单→程序→附件”找到该程序。
如果你用的是其他操作系统,那么也有类似的简易文本编辑器可以使用,比如Linux上的Pico或Mac(苹果机)上的Simple Text。
记事本是一个非常简单的文本编辑程序,用它编写程序非常好,因为它不会干涉你所输入的任何内容,给予你完全的控制权。而许多网页制作工具的问题在于,它们提供了许多标准功能供你选择。这样的缺点是,你只能按照这些标准功能来制作网页。所以,这类工具常常不能创建正合你意的网页。或者,更令人讨厌的是,它们会修改你手工编写的代码。而使用记事本(Notepad)或其他简易文本编辑器的话,全部代码均由你自己编写。
浏览器和记事本程序(或类似的简易文本编辑器)便是你所需的全部工具,有了它们,你就可以完成本教程,并制作自己的网站了。
我需要连上因特网么？
你无需连上因特网(Internet),浏览本教程和制作网站都可以离线完成。
如果你想要离线阅读本教程,你可以将它打印出来,或者在阅读教程期间断开与因特网的连接。你可以先在自己的计算机上制作网站,待网站制作完毕再上传到因特网上。
第2课：HTML是什么？
HTML是什么？
HTML是浏览器的“母语”。
长话短说,HTML是由一名叫Tim Berners-Lee的科学家发明的。他发明HTML的目的,是为了方便不同大学的科学家们可以更容易地获取彼此的研究文档。HTML取得了的巨大成功,大大超出了Tim Berners-Lee的原本预计。通过发明HTML,他为我们今天所认识的万维网奠定了基础。
HTML是一门语言,它令我们可以在因特网上展示信息(例如科学研究信息)。你所看到的网页,是浏览器对HTML进行解释的结果。要查看一个网页的HTML代码,只需在浏览器菜单栏上点击“查看”,然后选择“源文件”即可。
对于生手来说,HTML代码看似很复杂,不过本教程将帮助你弄清楚它们的含义。
HTML能用来做什么？
如果你要制作网站的话,学习HTML是不可避免的。即使你用Dreamweaver等工具来制作网站,了解基本的HTML知识也会令你在网站制作过程中倍感轻松,并有利于制作出更好的网站。好在HTML容易被学会和使用。通过下面两课的学习,你将学会如何制作自己的第一个网站。
HTML是用来制作网站的。就这么简单！
好,明白了,那HTML这四个字母代表什么呢？
HTML是“HyperText Mark-up Language(超文本标记语言)”的缩写——其实目前你不必了解这些,不过,为了迁就学习次序,我们就详细解释一下吧。
超(Hyper)是相对于线性(linear)来说的。在很久以前,那时计算机程序还是线形运行的：当计算机程序执行完一个动作以后,转向下一行,这行结束后,继续下移,依次类推。但HTML则不同,你可以在任何时候跳转到任何地方。比方说,你在浏览HTML.net之前,不必先去浏览MSN.com。
文本(Text)意味着它是自解释的(self-explanatory)。
标记(Markup)指的是你怎么处理文本。对文本作标记的方式,跟你在文本编辑程序里将文本加粗、或者将一行话设为标题或列表项目类似。
语言(Language)。HTML就是一种语言,它使用了许多英文单词。
在本教程中,你将会学习到XHTML(可扩展超文本标记语言)。简单地说,它是一种新的、更加结构良好的HTML。
现在,你知道了HTML(和XHTML)代表什么意思,下面我们将开始有关网站制作的学习。
第3课：元素与标签
现在你要学习的是HTML的重要成分——元素(element)。
元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。
“标签”是什么？
标签(tag)指示元素的起始与结束。
所有标签都具有相同的格式：以小于号“<”开头,以大于号“>”结尾。
一般说来,有两种标签——首标签(start tag)(如<html>)和尾标签(end tag)(如</html>)。它们唯一的区别在于,尾标签多一条斜杠“/。你通过把内容放在首标签和尾标签之间来对内容进行标记。
HTML主要就是各种各样的元素,所以,学习HTML,就是学习使用各种元素。
可以举些例子么？
没问题。比如,b元素的作用是,告诉浏览器介于标签<b>和</b>之间的文本应以粗体显示。(这里的“b”是“粗体(bold)”的意思。)
例1：
<b>这句话应显示为粗体。</b>
该例在浏览器中将显示如下：
这句话应显示为粗体。
h1、h2、h3、h4、h5及h6元素的作用是显示标题(这里的h是“标题(heading)”的意思)。其中h1是一级标题,字体最大；h2是二级标题,字体比一级标题略小；而h6是六级标题,它是最后一级标题,字体也最小。
例2：
<h1>这是标题</h1>
<h2>这是子标题</h2>
该例在浏览器中将显示如下：
这是标题
这是子标题
首标签和尾标签总是必须的吗？
常言道,凡事均有例外。在HTML中,也有例外的情况,即有些元素没有尾标签。这些没有尾标签的元素被称作空元素(empty element),它们与具体文本内容无关,比如像下面这个换行标签：<br />。
标签中的字母应该大写还是小写？
大多数浏览器不介意标签是大写还是小写,或者混合大小写。所以<HTML>、<html>或<HtMl>在浏览器上的显示效果都一样。但是,正确的写法是采用小写字母来书写标签。所以,要养成用小写字母书写标签的习惯。
把标签放在哪里？
你应该在HTML文档里书写标签。一个网站可能包含多个HTML文档。上网的过程,其实就是打开不同HTML文档的过程。
这一课就到这里。如果花10分钟时间继续学习下一课的话,你将能够制作自己的第一个网站。
第4课：制作自己的第一个网站
有了从前面几课的基础,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。
如何做呢？
通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。既然你现在已经在用浏览器阅读本教程了,那么请再打开一个窗口——这样你就可以一边阅读本教程,一边欣赏你的新网页了。
另外,请打开记事本程序(Notepad)：依次选择“开始菜单→程序→附件→记事本”即可。
现在一切就绪了！
然后呢？
我们先从简单的做起吧。先试着做一个显示如下内容的网页：“哇！这是我的第一个网站。”继续学习,就你就知道这是多么容易了。
HTML简单易学。浏览器读HTML就跟你读书一样,也是从上往下,从左到右进行的。所以,HTML文档的开始和结束便对应于网页的头和尾。
你首先要做的是告诉浏览器,你们将采用HTML语言来“对话”。这是通过<html>标签来实现的(这是容易理解的)。所以,在做所有其他事之前,先在记事本的第一行敲入“<html>”。
也许你记得前面课程中我们说过,这里的<html>是首标签,在HTML文档结尾处必须有相应的尾标签与之对应。好的,为了防止最后忘记写这个尾标签,我们现在就输入“</html>”,然后在<html>和</html>之间留些空行,用于书写其余代码。
下面,我们需要为HTML文档写一个“头部(head)”,它提供关于当前文档的信息；然后写一个“主体(body)”,它提供文档的内容。HTML最重要的就是简单——在这里,我们只需把头部(<head>和</head>)放到主体(<body>和</body>)的前面就行了。
如下所示：
</html>
<head>
</head>
<body>
</body>
</html>
注意我们是如何用换行(用Enter键)与缩进(用Tab键)令代码具有层次感的。理论上,你如何书写HTML文档,这无关紧要。但为了便于阅读代码,和保持良好的概貌,我们强烈建议你采用换行与缩进来层次化HTML代码,就像上面的例子一样。
上面这个文档便构成了你的第一个网站——它只包含一个网页,而且内容很单调,可能与你的想象相去甚远,但在一定程度上它仍是一个网站。你可以将它用作其他HTML文档的基本模版。
不错不错,但我如何添加更多内容？
前面我们学到过,HTML文档有两个部分：头部(head)和主体(body)。你在头部(head)提供关于网页的信息,你在主体(body)部分提供网页的具体内容。
比如,如果你要指定HTML文档的网页标题(title)(它将显示在浏览器窗口顶部
Back to home
Subscribe | Register | Login | N