web开发0基础 - HTML篇

基本标签

标签是HTML的语言元素。几乎每一种标记，都有一个开始符和一个结束符。例如：<HEAD>标签标识信息的标题开始，它也有一个结束标签 </HEAD>。

<HTML></HTML>

该元素告诉浏览器该文件是一个HTML文档。每个HTML文档以标签<HTML>开头。此标记应在文件的开始位置。它有一个结束标记</HTML>，必须在文件的最后。

<HEAD></HEAD>

HEAD包含有关文件的重要信息。

<TITLE></TITLE>

标题标签是一个重要的标记。它是用来显示在浏览器窗口顶部的标题。title开始和结束标签都在head标签之间。

下面的例子展示如何使用这个标签：

     <html>
     <head>
     <title>John's Homepage</title>
     </head>
     <body>
     </body>
     </html>

<META>

另一个可以加入在head标签的是<META>标签。它是用来帮助搜索引擎索引的网页，有几种不同的中meta名字。

author meta:

description meta:

keyword meta：（注意关键字是以逗号隔开的）

下面的例子显示了如何将这些标记编码：

代码

<head>
<title>HTML For Beginners</title>
<meta name="Author"
      content="Nongjian Zhou">
<meta name="Description"
      content="A very easy tutorial for HTML beginners">
<meta name="Keywords"
      content="html,tutorial,beginner,web design">
</head>

<BODY></BODY>

Body标识用来标识你网页的主要部分，在<BODY> </BODY>标识之间，你可以放置所有的image, link, text, paragraphs, 和form。我们将解释的每个在HTML文件的Body中使用的标签。

Character, Paragraph和Position

<H#></H#>

共有6个级别的标题，编号从1到6。这些标签用于字符的外形。最大的标题是<H1>和最小的一个是<H6> ：

     <H1>Biggest text</H1>
     ......
     <H6>smallest text</H6>

<P></P>

段落标记（<P>开始标记和</P>结束标记）允许您放置一个段落。例如：

<p>Basic Information</p>

这个</P>结束标记可以省略。

Align

默认位置是左对齐的，你也能使用“ALIGN”来对齐。

     <p ALIGN="center"> Paragraph will be centered</p>
     <p ALIGN="left"> Paragraph will be left justified</p>
     <p ALIGN="right">Paragraph will be right justified</p>

<CENTER></CENTER>

这种标签让你的文字在网页的中心

<center><p> Paragraph will be centered</p></center>

此标记中断到下一行。下面是一个例子：

<p>Welcome To<br> My Homepage!</p>

<HR>

此标记添加一条横线或分开您的网站。一个<HR>标签提出了以下分：

<HR>能被这样设置：

您可以使用&nbsp给你的文字添加空格。

您可以使用此标记进行格式化或删除文字，通过左、右两边的段落。

     <BLOCKQUOTE>
     <H1>Welcome To John's Homepage!</H1>
     <p>Content</p>
     <p>Basic Information</p>
     </BLOCKQUOTE>

<PRE></PRE>

预格式化该段文字来准确显示您在Web浏览器中输入。例如：

     <pre>
     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.

下面的标签对文本之间显示效果。

代码

     <U>underlined text</U>
     <B>bold text</B>
     <I>Italicized text</I>
     <BIG>Big text</BIG>
     <SMALL>small text</SMALL>
     <TT>Monospaced typewriter text</TT>
     <BLINK>blink</BLINK>
      (Note: This only works on Netscape)
     <SUB>This makes a subscript.</SUB>
     <SUP>This makes a superscript.</SUP>
     <STRIKE>strikeout</STRKE>
     <FONT FACE="Arial">This is a test</FONT>
     <FONT COLOR="#00FF00">Text is in the color of Green</FONT>
     <FONT SIZE="+2">This is a test</FONT>

<BASEFONT>

您可以使用此标记来设置您的网页默认字体，颜色和大小或保存您的编码时间。例如：

Lists

有三种类型的HTML列表：

     Unordered lists <UL></UL>
     Ordered lists <OL></OL>
     Definition lists <DL></DL>

Unordered Lists（无序列表）

这个列表以<UL>标签开始，以</UL>标签结束。在 <UL> 和</UL>之间,你能输入<LI>（列表项）标签来分离，不需要结束</LI>标记。例如：

     <UL>
     <LI> Name
     <LI> Phone
     <LI> ID
     </UL>

有序列表

有序列表类似于无序列表，不过它使用<OL>而不是<UL> ：

     <OL>
     <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是边界像素数量。让我们看一个例子：

代码

   <CENTER><TABLE BORDER=1 WIDTH="62%" HEIGHT=90>
   <TR>
      <TD WIDTH=82><CENTER> Name</CENTER></TD>
      <TD WIDTH=111><CENTER>Phone</CENTER></TD>
      <TD WIDTH=91><CENTER>ID</CENTER></TD>
   </TR>
   <TR>
      <TD WIDTH=82><CENTER>John Lee</CENTER></TD>
      <TD WIDTH=111><CENTER>456-968</CENTER></TD>
      <TD WIDTH=91><CENTER>276580</CENTER></TD>
   </TR>
   <TR>
      <TD WIDTH=82><CENTER>Cherry Heitz</CENTER></TD>
      <TD WIDTH=111><CENTER>789-326</CENTER></TD>
      <TD WIDTH=91> <CENTER>908743</CENTER></TD>
   </TR>
   </TABLE></CENTER>
Name

Phone

ID

John Lee

456-968

276580

Cherry Heitz

789-326

908743
在宽度和高度值可以是"XX%"或者XX
例如：WIDTH="80%" 或者WIDTH=450。 "XX%"允许表的大小随着窗口大小改变而改变。在边界值可以为零。在这种情况下，该表将没有边界。你可以实现下面的表格：

下面是代码：

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>

其结果是：
"</span><span class="code-string">25"</span> name=<span class="code-string">"</span><span class="code-string">comments"</span> rows=<span class="code-string">"</span><span class="code-string">2"</span>>
Radio Button
您可以使用单选按钮来表示问一个问题的答案。例如，如果你要问： "Which picture do you like?"，有选择："monky", "flower", "girl", "building", 您可以键入

代码

     <INPUT TYPE="radio" checked NAME="picture" VALUE="monky">Monky<P>
     <INPUT TYPE="radio" NAME="picture" VALUE="flower">Flower<P>
     <INPUT TYPE="radio" NAME="picture" VALUE="girl">Girl<P>
     <INPUT TYPE="radio" NAME="picture" VALUE="building">Building<P>

Check Box：
复选框让用户从列表中选择东西。形式是：

<INPUT TYPE="checkbox" NAME="name" VALUE="text">

请注意，与复选框和单选按钮的区别是，可以在同一时间，任何数量的复选框能被选中，只有一个单选按钮被选中。例如，如果你要问：“Which picture do you like?" ，在同一时间，你允许选择任何数量的复选框，您将输入：
代码

     <INPUT TYPE="checkbox" NAME="picture" VALUE="monky">Monky<P>
     <INPUT TYPE="checkbox" NAME="picture" VALUE="flower">Flower<P>
     <INPUT TYPE="checkbox" NAME="picture" VALUE="girl">Girl<P>
     <INPUT TYPE="checkbox" NAME="picture" VALUE="building">Building<P>

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?
     <SELECT NAME="age">
     <OPTION>1-15
     <OPTION SELECTED >16-21
     <OPTION>22-30
     <OPTION>31-45
     <OPTION>46-65
     <OPTION>66-80
     <OPTION>81-up
     </SELECT>

结果是:
How old are you?

Scroll-Down Menu
有两种类型的下拉菜单。一个是你只能选择其中一个项目：
代码

     How old are you?
     <SELECT NAME="age" SIZE=5>
     <OPTION VALUE="1-15">1-15
     <OPTION VALUE="16-21">16-21
     <OPTION VALUE="22-30">22-30
     <OPTION VALUE="31-45">31-45
     <OPTION VALUE="46-65">46-65
     <OPTION VALUE="66-80">66-80
     <OPTION VALUE="81-up">81-up
     </SELECT>

结果是:
How old are you?
另外菜单，按住Shift键，你可以选择一个或多个项目。例如：
代码

     What is your favorite thing?
     (Hold <i>shift</i> to select more that one)
     <SELECT NAME="reading" MULTIPLE size="3">reading
     <OPTION VALUE="sports">sports
     <OPTION VALUE="travelling">travelling
     <OPTION VALUE="music">music
     <OPTION VALUE="cooking">cooking
     <OPTION VALUE="shopping">shopping
     <OPTION VALUE="talking">talking
     </SELECT><P>

Frame
有了Frame，你可以把很多的HTML页面放在单一的窗口中，每一个frame可以显示一个页面。frames以<FRAMESET>标签开始和</FRAMSET>标签结束。<FRAMESET>标签可以有两个修饰符： ROWS 和COLS。例如：
代码

<html>
<head><title></title></head>
<frameset rows="64,*">
<frame name="banner" scrolling="no" noresize
         target="contents" src="top.htm">
<frameset cols="150,*">
<frame name="contents" target="main"
         src="menu.htm">
<frame name="main" src="home.htm">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't
support them.</p>
</body>
</noframes>
</frameset>
</html>

让我们每个元素的说明：
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>标记，使脚本输出到了指定的框架或窗口。
参考原文：http://www.codeproject.com/KB/HTML/htmlbeginner.aspx