基本标签
标签是HTML的语言元素。几乎每一种标记，都有一个开始符和一个结束符。例如：<HEAD>标签标识信息的标题开始，它也有一个结束标签 </HEAD>。
<HTML></HTML>
该元素告诉浏览器该文件是一个HTML文档。每个HTML文档以标签<HTML>开头 。此标记应在文件的开始位置。它有一个结束标记</HTML>，必须在文件的最后。
<HEAD></HEAD>
HEAD包含有关文件的重要信息。
<TITLE></TITLE>
标题标签是一个重要的标记。它是用来显示在浏览器窗口顶部的标题。title开始和结束标签都在head标签之间。
下面的例子展示如何使用这个标签：
< head >
< title > John's Homepage </ title >
</ head >
< body >
</ body >
</ html >
<META>
另一个可以加入在head标签的是<META>标签。它是用来帮助搜索引擎索引的网页，有几种不同的中meta名字。
author meta:
description meta:
keyword meta：（注意关键字是以逗号隔开的）
CONTENT ="html,tutorial,beginner,web design" >
下面的例子显示了如何将这些标记编码：
代码
<BODY></BODY>
Body标识用来标识你网页的主要部分，在<BODY> </BODY>标识之间，你可以放置所有的image, link, text, paragraphs, 和form。我们将解释的每个在HTML文件的Body中使用的标签。
Character, Paragraph和Position
<H#></H#>
共有6个级别的标题，编号从1到6。这些标签用于字符的外形。最大的标题是<H1>和最小的一个是<H6> ：
......
< H6 > smallest text </ H6 >
<P></P>
段落标记（<P>开始标记和</P>结束标记）允许您放置一个段落。例如：
这个</P>结束标记可以省略。
Align
默认位置是左对齐的，你也能使用“ALIGN”来对齐。
< p ALIGN ="left" > Paragraph will be left justified </ p >
< p ALIGN ="right" > Paragraph will be right justified </ p >
<CENTER></CENTER>
这种标签让你的文字在网页的中心
此标记中断到下一行。下面是一个例子：
<HR>
此标记添加一条横线或分开您的网站。一个<HR>标签提出了以下分：
<HR>能被这样设置：
您可以使用 给你的文字添加空格。
<BLOCKQUOTE></BLOCKQUOTE>
您可以使用此标记进行格式化或删除文字，通过左、右两边的段落。
< H1 > Welcome To John's Homepage! </ H1 >
< p > Content </ p >
< p > Basic Information </ p >
</ BLOCKQUOTE >
<PRE></PRE>
预格式化该段文字来准确显示您在Web浏览器中输入。例如：
Item Price quantity
-----------------------------
A 34.99 23
B 25.95 13
-----------------------------
</ pre >
Comments
注释标记看起来像这样：
当你查看你的网页时，注释标记是不会显示的。
字符样式
样式包括物理和逻辑字符样式， Face, Size, 和Color。
以下是字符样式表。
| Type | Choice | function |
|---|---|---|
| Physical styles | <B> | Make text bold. |
| <I> | Make text italic. | |
| <U> | Make text underline. | |
| <Strike> | Make text strikethrough. | |
| <Sup> | Make text superscript. | |
| <Sub> | Make text subscript. | |
| Teletype | Make text teletype. | |
| Logical styles | <Strong> | Indicate the text is very important. |
| <Em> | Indicate the text is important. | |
| <Cite> | Indicate that the text is from a book or other document. | |
| <Address> | Indicate that the text is an address. | |
| <Dfn> | Indicate that the text is a definition. | |
| <Samp> | Indicate that the text is a sequence of literal characters. | |
| Keyboard | Indicate that the text is keyboard input. | |
| <Var> | Indicate that the text is a variable. | |
| <Code> | Indicate that the text is code. |
| Font | Choice | Function |
| Face | Default | Make text display in the default font (Times New Roman) of the Web browser. |
| Family | Type a list of fonts separated by commas (for example, Helvetica, Arial, Courier). The text will display in the first listed font found on the browser's system. | |
| (Font name) | Make the text display in the font specified. (If the font is not available on the browser's system, another font will be substituted.) | |
| Size | 1 through 7 (3 is the default) | Format text with 7 sizes where 7 is the largest size and 1 is the smallest. |
| Increase | Format text with the largest size (same as 7). | |
| Decrease | Format text with the smallest size (same as 1). | |
| Color | "#xxxxxx" or: White, Red, Blue and Others | Make the text a different color. |
下面的标签对文本之间显示效果。
代码
<BASEFONT>
您可以使用此标记来设置您的网页默认字体，颜色和大小或保存您的编码时间。例如：
Lists
有三种类型的HTML列表：
Ordered lists < OL ></ OL >
Definition lists < DL ></ DL >
Unordered Lists（无序列表）
这个列表以<UL>标签开始，以</UL>标签结束。在 <UL> 和</UL>之间,你能输入<LI>（列表项）标签来分离，不需要结束</LI>标记。例如：
< LI > Name
< LI > Phone
< LI > ID
</ UL >
有序列表
有序列表类似于无序列表，不过它使用<OL>而不是<UL> ：
< LI > College
< LI > Hight School
< LI > Elemantory School
</ OL >
定义列表
-
定义列表以<DL>开头和以</DL>结束 。这份列表包括交替定义术语和定义。术语的定义包含在<DT></DT>中，并应先定义的定义。该定义的定义是包含在<DD></DD> 。因此，整个定义列表如下所示：
< DL >
< DT > term </ DT >
< DD > definition </ DD >
...
< DT > term </ DT >
< DD > definition </ DD >
</ DL >
Links
- 链接可让您互联网或在本地机器上从一个页面导航到另一个页面。在您将链接添加到您的网页时，你需要的您要链接到其它网站网址或您的本地文件路径。这个链接标签还提供了连接的电子邮件地址的方式能力。链接到当前目录的另一个文件，使用<A HREF="name.html">anchor text </a> 。例如：
-
< A HREF ="bscInfo.html" > Basic Information </ A >
如果你想链接到在另一个目录下的一个文件，，您可以编写如下代码：
< A HREF ="path/name.html" > Text </ A >您可以从您的网页链接到互联网上其他网页：
< A HREF ="http://internetcollege.virtualave.net/" > Internet College </ A >如果你想链接到电子邮件地址，当您单击它，然后启动邮件程序，您可以编写这样一个链接：
-
< A HREF ="mailto:internet101@go.com" > Email us </ A >
如果文件有非常大，您可能需要在页面的不同部分创建的链接。 为了做到这一点，首先必须让指针在指向您要链接到文件的地方。
指针像这样<A NAME="xyz">。然后使用 <A HREF="#xyz">标记。例如，你想有一个链接，在你的网页上从章节D到章节 "My current project"。右在“My current project”，您需要输入<A NAME="M">。在D添加链接<A HREF="#M">。 ＃符号告诉你的浏览器在同一个文档中寻找在链接，而不是到其它文件寻找 。您可以使用任何数字或字母取代“M”：< BODY >
< A NAME ="M" ></ A > My current projects
......
< A HREF ="#M" ></ A > Click here to see my projects </ A >
</ BODY >用同样的方法，您可以链接到其他文件中的任何地方：
< A HREF ="people.html#F3" > Faculty Infomation </ A >您也可以链接的互联网上其他网页的一部分，如果你可以把指针<A NAME=""> 它在其中：
< A HREF ="http://server/path/file#F3" >Image
-
大多数Web浏览器可以显示图像的GIF或JPEG格式。为了包含图片，请输入：< IMG SRC ="ImageName" >
例如： <IMG SRC="monky.gif">，<IMG>标记是用来定义图像。此标记不会有结束标记。IMG部分告诉浏览器添加图像，SRC告诉您的浏览器在哪里可以找到图像。您应该包括两个<IMG>其他属性标记告诉浏览器中图像的大小。HEIGHT 和WIDTH 属性，让您的浏览器预留适当的空间（像素）给你的图像。例如：
< IMG SRC ="monky.gif" HEIGHT =80 WIDTH =100 >你可以通过使用ALIGN，把图像放置在页面的左或右面 ..例如：
< IMG SRC ="ImageName" ALIGN ="right" >默认情况下，图像的底部平行标注了文本。您可以将图像对齐到段落的top, bottom 或者middle中间，使用三种之一： TOP, MIDDLE, BOTTOM，例如：
< IMG SRC ="monky.gif" ALIGN ="top" >注意：您必须使用“align”，而不是“valign”设置 TOP, MIDDLE, BOTTOM。它跟table不一致。我们可以用“"vspace" 和"hspace"调整图片周围的空间：
< IMG SRC ="monky.gif" vspace ="50" hspace ="80" >alt属性是IMG的一个属性。您可以使用ALT属性来指定要显示的文本而不是图像。例如：
< IMG SRC ="monky.gif" ALT ="[monky]" >在这个例子中，如果有人不能看到图片，至少他们将能够读取图像的名称，知道这将是一个monky，因为这个地方改为显示“[monky]”。图像可作为纯文本一样使用超链接。下面是HTML代码：
< A HREF ="animal.html" >< IMG SRC ="monky.gif" ></ A >蓝色的边框围绕图像显示它是一个可点击的超链接。如果您不希望显示这一边界，您可以添加BORDER属性并设置为0：
< A HREF ="animal.html" >< IMG SRC ="monky.gif" BORDER =0 ></ A >你可以从另一个网页加载图像到您的页面中。要显示另外一个图像而不是页面，你需要找到的网址：
-
< IMG SRC ="http://www.abcd.com/image2.gif" >
您还可以图像用作背景。该标签包括一个背景图像中包含<BODY>声明作为属性：
< BODY BACKGROUND ="ImageName" >大型内嵌图像会减慢文件加载速度。为了避免它，您可能有外部图像来打开它。要包括对外部图像引入，请输入：
< A HREF ="ImageName" > link anchor </ A >您还可以使用较小的图像链接一个更大的图像。输入：
< A HREF ="LargerImageName" >< IMG SRC ="SmallImageName" ></ A >Color
-
您可能需要给一个特定的颜色给background, text, links, visited links, and active links。在HTML中，颜色被编码为6位十六进制RGB（红，绿，蓝）的数字。范围从00到FF。例如，000000是黑色的，FFFFFF 是白色， FF0000是鲜红色，0000FF明亮的蓝色，00FF00是柔和的绿色。您必须在实际的代码前加“＃”符号。你可以使用<BODY>标记的的属性来更改text, links, vlinks (访问过的links), and alinks (激活连接)的颜色。例如：
-
< BODY bgcolor ="#FFFFFF" text ="#000000"
link ="#0000FF" vlink ="#800000" alink ="#808000" >
您还可以使用颜色的名字而不是相应的RGB值来显示一些基本颜色。例如，"black", "red", "blue", 和"green" 能有效来取代RGB值。文字着色很像改变字体大小。这种标签是：< FONT color ="code" > text </ FONT >这个标签可以与字体的大小合在一起使用。例如：
< FONT color ="#00FF00" size ="+3" > text </ FONT >Table
-
Table的格式如下：
< TABLE >
< TR > < TD > Table Entry </ TD > ... < TD > Table Entry </ TD >
</ TR >
...
< TR > < TD > Table Entry </ TD > ... < TD > Table Entry </ TD >
</ TR >
</ TABLE >
整个表是以<TABLE>开始，以</TABLE>结束 。每一行封装在<TR></TR> 。行内的单元格，包含在<TD></TD>中间 。可以有许多的行和列，如果你想适合你的屏幕。浏览器将自动套用行，如有必要，单元格内容的垂直中间。如果你想一个单元格跨越多个列，使用<TD COLSPAN=X></TD> ，其中X显示的列数的跨度。同样， <TD ROWSPAN=X></TD>将导致单元格跨度x行。边框可以放在了所有单元格中，使用<TABLE BORDER=X></TABLE> ，其中X是边界像素数量。让我们看一个例子：
代码
-
Name
Phone
ID
John Lee
456-968
276580
Cherry Heitz
789-326
908743
-
在宽度和高度值可以是"XX%"或者XX
-
例如：WIDTH="80%" 或者WIDTH=450。 "XX%"允许表的大小随着窗口大小改变而改变。在边界值可以为零。在这种情况下，该表将没有边界。你可以实现下面的表格：
-
下面是代码：
< TABLE BORDER =10 CELLSPACING =10 CELLPADDING =2 >
< TR >< TD ></ TD >< TD ></ TD ></ TR >
< TR >< TD ></ TD >< TD ></ TD ></ TR >
</ TABLE >CELLSPACING 属性是指单元格之间的空间，应是像素。在cellpadding的属性是指在单元格像素间距（单元格壁和单元格内容之间的空间）。
Attribute Description ALIGN (LEFT, CENTER, RIGHT) Horizontal alignment of a cell. VALIGN (TOP, MIDDLE, BOTTOM) Vertical alignment of a cell. COLSPAN=n The number (n) of columns a cell spans. ROWSPAN=n The number (n) of rows a cell spans. NOWRAP Turn off word wrapping within a cell. Form
-
表单允许用户输入信息。例如，您可以使用表单来收集用户的姓名和电邮地址。表格开始标签<FORM>和结束标签</FORM> 。< FORM ACTION ="path/script.pl" METHOD ="" >
......
</ FORM >你应该为你的表单输入两个属性， Action 和Method:
< FORM ACTION ="http://www.abc.com/cgi-bin/login.pl" METHOD ="post" >你可以使用单行信息的"input" ：
< INPUT TYPE ="input" NAME =name SIZE =## >例如：
< INPUT TYPE ="input" NAME ="email" SIZE =26 > Your Email Address
< INPUT TYPE ="input" NAME ="name" SIZE =26 > Your Name
< INPUT TYPE ="input" NAME ="subject" SIZE =26 > Subject下面是结果：
-
"email" size="26"> Your Email Address "firstname" size="26"> Your Name "subject" size="26"> Subject
-
值是字符大小，所以 "SIZE=26" 是指输入框的宽度是26个字符
-
Text Area
-
Text Area 能够尽可能的大。Text Area 以<TEXTAREA NAME=name ROWS=## COLS=##>开始和</TEXTAREA>结束 。例如：< TEXTAREA Rows =2 Cols =25 NAME ="comments" ></ TEXTAREA >
其结果是： -
Radio Button
-
您可以使用单选按钮来表示问一个问题的答案。例如，如果你要问： "Which picture do you like?"，有选择："monky", "flower", "girl", "building", 您可以键入
代码
Check Box：
-
复选框让用户从列表中选择东西。形式是：
< INPUT TYPE ="checkbox" NAME ="name" VALUE ="text" >请注意，与复选框和单选按钮的区别是，可以在同一时间，任何数量的复选框能被选中，只有一个单选按钮被选中。例如，如果你要问：“Which picture do you like?" ，在同一时间，你允许选择任何数量的复选框，您将输入：
-
代码
Submit 和 Reset
-
其他类型按钮，包括提交按钮和重置按钮。 “submit”是用户按下按钮发送的形式。 “reset”清除整个表单，以便用户可以重新开始。例如：
< INPUT TYPE ="submit" NAME ="submit" VALUE ="Send" >
< INPUT TYPE ="reset" NAME ="reset" VALUE ="Clear" >结果是：
-
" submit" type= " submit" value= " Send">" reset" type= " reset" value= " Clear">
-
Password
-
这种类型允许用户输入文本，但不显示，他们显示星号，而不是文字：< INPUT TYPE ="password" NAME ="pass" SIZE ="20" >
Pull-Down Menu
-
通过使用下拉菜单，你可以要求只有一个答案来回答的问题。例如：
代码
结果是: -
How old are you?
"age" size="1"> 1-15 16-21 22-30 31-45 46-65 66-80 81-up
Scroll-Down Menu -
有两种类型的下拉菜单。一个是你只能选择其中一个项目：
代码
结果是:
-
How old are you?
"age" size="5"> "1-15">1-15 "16-21">16-21 "22-30">22-30 "31-45">31-45 "46-65">46-65 "66-80">66-80 "80-up">80-up -
另外菜单，按住Shift键，你可以选择一个或多个项目。例如：
代码
Frame
-
有了Frame，你可以把很多的HTML页面放在单一的窗口中，每一个frame可以显示一个页面。frames以<FRAMESET>标签开始和</FRAMSET>标签结束。<FRAMESET>标签可以有两个修饰符： ROWS 和COLS。例如：
代码
让我们每个元素的说明： -
rows="64,*" 是指在第一frame将占窗口的64的和第二frame将占据窗体的其余部分。星号表示占据空间剩余的部分。您可以使用的比例取代长度。例如：cols =“30％，60％”
-
<frame>确定每个独立的frame。
-
name="..." 定义frame的名称。
-
src="..." 告诉哪个页面将在框架中加载。
-
target="..." 允许在具体的框架或窗体中呈现您的连接。
-
scrolling="yes|no|auto" ，允许你控制frame滚动条。 "yes" 强迫框架始终有滚动条。 "no"强迫框架始终没有滚动条。 "auto"允许浏览器决定是否要是必要的滚动条。默认值为"auto"。noresize让您保正frame不受观众来调整大小。 </noframes>是用于创建无框替代。当页面被认为是由浏览器不支持框架，除非有何关系，即是一切</noframes>标签是ignored。
-
也有一些“magic”的标签。“_blank”将始终打开一个新窗口的链接，"_top" 将在整个页面的链接，而不是在一个框架。“_self” 使链接打开它的调用框架。这是非常有用的<BASE...>标签的用途。“_parent”打开在不久的框架的父框架集的链接链接调用。
-
< A HREF ="ah.html" TARGET ="_blank" > text </ A >
而且，TARGET 也可以添加到<FORM>标记，使脚本输出到了指定的框架或窗口。
