HTML 快速入门
最近帮朋友研究作一个网站，虽然对很多人来说这是很简单的事情，但是对我来说却比较复杂！废话不多讲了，看看我找的HTML快速入门，说不定也会对你有帮助！
一、 HTML 的基本概念
HTML （ Hypertext Markup Language ）即超文本标记语言，它是一种用于编写超文本文档的标记语言—— 一种设计网页的计算机语言。 HTML 可以控制任何文本的颜色、大小、形状，图像的大小和位置，网页间不同元素的链接或者网址的链接。
自从 1990 年首次应用于网页编辑后， HTML 迅速崛起成为网页编辑的主流语言。几乎所有的网页都是由 HTML 或以其他程序语言嵌套在 HTML 中编写的。 HTML 并不是一种程序语言，而是一种结构语言，它具有平台无关性。无论用户使用何种操作系统（ Windows 、 Dos 、 Unix 等等），只要有相应的浏览器程序，就可以运行 HTML 文档。
HTML 标记的写法 :
" 任何标记皆由 "<" 、 ">" 所包围，如 <P>
" 标记字母大小写皆可。
" 标记名与 "<" 、 ">" 之间不能留有空格。
" 某些标记需要加上参数，某些则不必。如 <font size="6" color="#FFFFFF"> 人文风 </font>
" 参数只可加到起始标记中。
" 在起始标记之标记名前加上符号 "/" 便是其终结标记，如 </font>
二、 HTML 常用标记
" HTML 文件结构标记
以下这些标记是构成页面的基本要素：
<Html>
<Head>
<Title> ... </Title>
</Head>
<Body> ...</Body>
</Html>
<Html> 是标志超文本的 HTML 页面的开始，对应的 </html> 为结束标志 ;
<head> 文件头，中间的文本为整个文件的序言，不包含太长文字内容，，而这些内容除 <Title> 标记之间的内容外，均不显示在屏幕上
<Title> 给网页命名，浏览器通常会将文件标题显示在浏览器窗口的左上角标题栏上
<body> 是 HTML 语言的主体，一般用来指明 HTML 文档里主要文字，如：标题、段落、列表等。也可定义主页背景颜色。
下面是一个最基本的 html 页面：
<HTML>
<HEAD>
<Title>a simple example page </title>
</HEAD>
<BODY>
页面正文写在这里 ... ...
</BODY>
</HTML>
用编辑软件编辑上代码，保存为以 .html 或 .htm 为后缀的文件，就可在浏览器中观看页面。
2. <Hn> 子标题标记
用于表示页面中的各种子标题 , 标题标记有 6 种，分别为 H1, H2, … H6 ，标题号越小，字体越大。
<hn> 可以有对齐属性， align ＝ # ， # 可为如下值
Left 标题居左
Center 标题居中
Right 标题居右
例：
<HTML>
<Head>
<Title>How to make Web</title>
</Head>
<Body Bgcolor="#FFFFFF">
<h1> 标题元素显示效果 </h1>
<h2 Align=Left> 标题元素显示效果 </h2>
<h3 Align=Right> 标题元素显示效果 </h3>
<h4 Align=Center> 标题元素显示效果 </h4>
<h5> 标题元素显示效果 </h5>
<h6> 标题元素显示效果 </h6>
</Body>
</HTML>
如图 :
2. <P> 分段标记
P 是段落 Pragraph 的缩写，这是一个单标记，不需要结束标记，用来定义浏览器中文档中的一个段落。
单独一个 <P> 会添加一个空行 , 该标记常作为 行断点 ( 或 回车 ) 显示。 P 标记能带附加属性。
Web 浏览器不仅会忽略段落中的换行，而且会将文字之间的多个空白字符，如空格、制表符等都当作一个空格来显示，浏览器中文字的分段完全依赖于分段元素 <P>
比如下面两段代码有不相同的输出。
<BODY>
<h2> This is one example </h2>
paragraphy 1
paragraph 2
<h2>This is Two example</h2>
paragraph one <p>
paragraph Two <p>
</BODY>
如图：
如果需要在文字间插入多个空格，可以使用“＆ nbsp ”'，“＆ nbsp ”表示一个空格。
例如以下代码的效果
<BODY>
风萧萧兮易水寒 <P>
<FONT SIZE=6 COLOR="#FF0000"> 壮士一去兮   ;   不复还 ! <FONT><P>
</BODY>
3 <DIV> 标记
这个标记可将文件分为几节，当文件显示时格式不受影响。尤其是在使用风格表格时， <DIv> 标记是一个强有力的工具。然而，现在 <DIV> 标记主要用来排放文字的位置，结合 Align 属性，可将文字放置到窗口的左边、右边和中间。
浏览器显示时遇到 <DIV> ，标记就将文字断行，后面的内容从新的一行开始显示。
下面的 HTMl 文件是 <DIV> 标记的应用示例，将三部分文字在屏幕的不同位置。效果如图。
<DIV Align= Left > 测试靠左 </DIV>
<DIV Align=Center> 测试居中 </DIV>
<DIV Align=Right > 测试靠右 </DIV>
4. <BR> 分行标记
<BR> 标记可以强制句子在一行结束。 <BR> 标记告诉浏览器在此处将文本截断，从下一行的开始处接着显示其余文本。如：
人文风网站有如下一些栏目： <br>
影视天堂 <br>
音乐之城 <br>
在线直播 <br>
文学天地 <br>
成电女生 <br>
邮件系统 <br>
注意： <P> 也可以使文本分行，但会多一个空行
如：
人文风网站有如下一些栏目： <br>
影视天堂 <br>
音乐之城 <br>
在线直播 <br>
文学天地 <br>
成电女生 <p>
邮件系统 <br>
4. 列表 List
用于列举，常用列表有 3 种格式 ：
" 即无序列表 (unorderedList)
" 有序列表 (ordered list)
" 定义列表 (definition list) 。
A. 无序列表 (Ul)
无序列表就是列出内容而不需要特别的序号
无序列表用 (Ul) 开始，每一个列表条目用 <Li> 引导，列表条目不需要结尾标记 </Li> ，整个列表以 </Ul> 结束。输出时每一列表条目缩进，并以特殊符号标示。
例 ：
<Ul>
<Li>Today
<Li>Tomorrow
</Ul>
输出如图：
B. 有序列表 <Ol>
有序列表与无序列表相比，只是在输出时列表条目用数字标示 ;
例 :
<Ol>
<Li>Today
<Li>Tomorrow
</Ol>
输出如图：
C. 定义列表 <Dl>
定义列表用于对列表条目进行简短说明的场合，用 <Dl> 开始，列表条目用 <Dt> 引导，它的说明用 <Dd> 引导。
例：
<HTML>
<HEAD>
<TITLE> China GongFu </TITLE>
</HEAD>
<BODY>
<dl>
<dt> 南拳
<dd> 不拘形式，暗中出手，突然袭击，以短打为主。
<dt> 北腿
<dd> 金戈铁马，气势磅礴，静如处子 , 动如脱兔
<dt> 峨嵋派
<dd> 贴身近战，出手毒辣，招招至残
</dl>
</BODY>
</HTML>
D. 改变条目标记
a. 改变无序列表条目标记
无序列表输出时，默认的条目标记为黑色圆点，用 type 属性修改条目标
记。 type 可以是
" Disc 实心圆点 ( 默认属性 )
" Circle 圆圈
" Square 小方块
例：
<ul>
<li type=disc> ONE
<li type=circle> TWO
<li type=square> THREE
</ul>
输出如图：
b. 改变有序列表条目标记
有序列表条目标记的缺省值是阿拉伯数字，可用 type 属性修改。方法为 <Li type=#>, # 的属性见下表
|
属性 |
含义 |
|
A |
大写英文字母 |
|
a |
小写英文字母 |
|
I |
大写罗马数字 |
|
i |
小写罗马数字 |
|
1( 数字 1) |
阿拉伯数字 ( 缺省值 ) |
例：
<ol>
<li type=A>ONE-ONE
<li> ONE-TWO
</ol>
<ol>
<li type=a>ONE-ONE
<li> ONE － TWO
</ol>
<ol>
<li type=I>ONE-ONE
<li> ONE=TWO
</ol>
<ol>
<li type=i>ONE-ONE
<li> ONE-TWO
</ol>
<ol>
<li type=1>ONE-ONE
<li> ONE-TWO
</ol>
c. 改变有序列表条目的起始值
有序列表的条目值缺省从 1 开始，用 start 属性可修改。
方法为：
<ol start=#> # 是条目起始值
< ol start=5>
<li type=A>ONE-ONE
<li> ONE-TWO
< ol start=10>
<li> TWO-ONE
<li type=i>TWO-ONE
< /ol >
< /ol >
如右图：
d. 列表的嵌套
各种列表可以相互嵌套，每一个列表条目都可以是一个单独的列表。每嵌套一层，列表条目的输出就会有更大的缩进。请参照上面的例子。
5. 预排版文本 <pre>
PRE 是 Preformatted text ， ( 预排格式文本 ) 的缩写．
我们提到，通常情况下，浏览器将 HTML 文档中文字之间的空白字符，如空格、制表符、换行等、不论有多少个，都视为一个空格来显示。然而有时候我们需要浏览器原封不动地显示预先编排好格式的一段文本，如计算机的源程序、 ASCII 字符图形等，这时就可以使用 PRE 标记。用来包含—段预先排好格式的文本， Web 测览器将把起始标记 <PRE> 与结束标记 </PRE> 之间的文本按照原书写的格式原封不动地再现出来。
例：
<pre>
please use your card.
VISA Master
<b>Here is an order form.</b>
<ul>
<li>Fax
<li>Air Mail
</ul>
</pre>
不加 <pre> 情况请自己实验.
6. 居中
很多元素都有对齐方式属性，如 < hn> 、 <p> 等。也可直接用居中标记
<Center> … < ／ Center>
如：
<HTML>
<HEAD>
<TITLE> Test </TITLE>
</HEAD>
<BODY>
<h3 align=center>
Wonderful!!!
</h3>
<center>
<h3> Wonderful!!! </h3>
</center>
</BODY>
</HTML>
如图：
