HTML简明教程（二）

一、HTML 图像

二、HTML 表格

三、HTML 列表

四、HTML div和 span

五、HTML 布局

六、HTML 表单和输入

七、HTML 框架

八、HTML内联框架iframe

九、HTML 背景

十、HTML 颜色

一、HTML 图像

在 HTML 中，图像由 <img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

<body background="/i/eg_background.jpg">

<img src="url" />

<img src="/i/eg_mouse.jpg" width="128" height="128" />

<p>图像<img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>

<img src ="/i/eg_cute.gif" align ="left">

<img src ="/i/eg_cute.gif" align ="right">

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者相关事物信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

更多请查看HTML 标签

二、HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

在浏览器显示如下：

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<table border="1">

表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

在浏览器显示如下：

Heading Another Heading

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>row 2, cell 2</td>

</tr>

</table>

注意其中的 占位符

表格标签

表格	描述
`<table>`	定义表格
`<caption>`	定义表格标题。
`<th>`	定义表格的表头。
`<tr>`	定义表格的行。
`<td>`	定义表格单元。
`<thead>`	定义表格的页眉。
`<tbody>`	定义表格的主体。
`<tfoot>`	定义表格的页脚。
`<col>`	定义用于表格列的属性。
`<colgroup>`	定义表格列的组。

更多实例

三、HTML 列表

HTML 支持有序、无序和自定义列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于<ul>标签。每个列表项始于 <li>。

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

浏览器显示如下：

Coffee

Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于<li>标签。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

浏览器显示如下：

Coffee
Milk

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以<dl>标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

浏览器显示如下：

Coffee

Black hot drink

Milk

White cold drink

更多实例

不同类型的无序列表

<h4>Disc 项目符号列表：</h4>

<ul type="disc">

 <li>苹果</li>

 <li>香蕉</li>

</ul>  

<h4>Circle 项目符号列表：</h4>

<ul type="circle">

 <li>苹果</li>

 <li>香蕉</li>

</ul>  

<h4>Square 项目符号列表：</h4>

<ul type="square">

 <li>苹果</li>

 <li>香蕉</li>

</ul>

不同类型的有序列表

<h4>数字列表：</h4>

<ol>

 <li>苹果</li>

 <li>香蕉</li>

</ol>  

<h4>字母列表：</h4>

<ol type="A">

 <li>苹果</li>

 <li>香蕉</li>

</ol>  

<h4>小写字母列表：</h4>

<ol type="a">

 <li>苹果</li>

 <li>香蕉</li>

</ol>  

<h4>罗马字母列表：</h4>

<ol type="I">

 <li>苹果</li>

 <li>香蕉</li>

</ol>  

<h4>小写罗马字母列表：</h4>

<ol type="i">

 <li>苹果</li>

 <li>香蕉</li>

</ol>

嵌套列表

<h4>一个嵌套列表：</h4>

<ul>

  <li>咖啡</li>

  <li>茶

    <ul>

    <li>红茶</li>

    <li>绿茶</li>

    </ul>

  </li>

  <li>牛奶</li>

</ul>

嵌套列表 2

<h4>一个嵌套列表：</h4>

<ul>

  <li>咖啡</li>

  <li>茶

    <ul>

    <li>红茶</li>

    <li>绿茶

      <ul>

      <li>中国茶</li>

      <li>非洲茶</li>

      </ul>

    </li>

    </ul>

  </li>

  <li>牛奶</li>

</ul>

自定义列表

<h2>一个自定义列表：</h2>

<dl>

   <dt>计算机</dt>

   <dd>用来计算的仪器 ... ...</dd>

   <dt>显示器</dt>

   <dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

四、HTML div和 span

可以通过 <div> 和 <span> 将 HTML 元素组合起来。

HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。

“块级元素”译为 block level element，“内联元素”译为 inline element。块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

HTML <div> 元素

<div style="color:#00FF00">

  <h3>This is a header</h3>

  <p>This is a paragraph.</p>

</div>

HTML<div>元素是块级元素，它是可用于组合其他 HTML元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

HTML <span> 元素

<p><span>some text.</span>some other text.</p>

HTML <span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

五、HTML 布局

使用 <div> 元素布局

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

div#container{width:500px}

div#header {background-color:#99bbbb;}

div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}

div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}

div#footer {background-color:#99bbbb;clear:both;text-align:center;}

h1 {margin-bottom:0;}

h2 {margin-bottom:0;font-size:18px;}

ul {margin:0;}

li {list-style:none;}

</style>

</head>

<body>

<div id="container">

<div id="header">

<h1>Main Title of Web Page</h1>

</div>

<div id="menu">

<h2>Menu</h2>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

</div>

<div id="content">Content goes here</div>

<div id="footer">Copyright W3School.com.cn</div>

</div>

</body>

</html>

HTML 布局 - 有用的提示

提示：使用 CSS 最大的好处是，如果把CSS代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问CSS 教程。

提示：由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（可以使用这些预先构建好的网站布局，并优化它们）。

六、HTML 表单和输入

HTML 表单用于搜集不同类型的用户输入。

表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单使用表单标签（<form>）定义。

<form>

...

  input 元素

...

</form>

输入

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>

First name:

<input type="text" name="firstname" />

<br />

Last name:

<input type="text" name="lastname" />

</form>

注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

密码框

<form>

用户：

<input type="text" name="user">

<br />

密码：

<input type="password" name="password">

</form>

单选按钮（Radio Buttons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。

<form>

<input type="radio" name="sex" value="male" /> Male

<br />

<input type="radio" name="sex" value="female" /> Female

</form>

复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

<form>

<input type="checkbox" name="bike" />

I have a bike

<br />

<input type="checkbox" name="car" />

I have a car

</form>

表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.asp" method="get">

Username:

<input type="text" name="user" />

<input type="submit" value="Submit" />

</form>

下拉列表

<form>

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

带有预选值的下拉列表

<form>

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat" selected="selected">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

**按钮**

<form>

<input type="button" value="Hello world!">

</form>

**在数据周围绘制一个带标题的框**

<form>

  <fieldset>

    <legend>健康信息</legend>

    身高：<input type="text" />

    体重：<input type="text" />

  </fieldset>

</form>

从表单发送电子邮件

<html>

<body>

<form action="MAILTO:someone@sina.com.cn" method="post" enctype="text/plain">

<h3>这个表单会把电子邮件发送到 W3School。</h3>

姓名：<br />

<input type="text" name="name" value="yourname" size="20">

<br />

电邮：<br />

<input type="text" name="mail" value="yourmail" size="20">

<br />

内容：<br />

<input type="text" name="comment" value="yourcomment" size="40">

<br /><br />

<input type="submit" value="发送">

<input type="reset" value="重置">

</form>

</body>

</html>

重置

将输入框内的所有内容清空，重新输入。

<input type="reset"  value="重置" />

七、HTML 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档
很难打印整张页面

框架结构标签（）

框架结构标签（）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积

frameset 标签也被某些文章和书籍译为框架集。

框架标签（Frame）

Frame 标签定义了放置在每个框架中的 HTML 文档。

在下面的例子中，设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的75%。HTML文档"frame_a.htm" 被置于第一个列中，而HTML文档"frame_b.htm"被置于第二个列中：

`

`

详细内容点击链接！

八、HTML内联框架iframe

iframe 用于在网页内显示网页。

添加 iframe 的语法

<iframe src="URL"></iframe>

URL 指向隔离页面的位置。

Iframe - 设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - 删除边框

frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 "0" 就可以移除边框：

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用 iframe 作为链接的目标

iframe 可用作链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="http://www.sina.com.cn" target="iframe_a">sina.com.cn</a></p>

九、HTML 背景

背景（Backgrounds）

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

背景颜色（Bgcolor）

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

<body bgcolor="#000000">

<body bgcolor="rgb(0,0,0)">

<body bgcolor="black">

以上的代码均将背景颜色设置为黑色。

背景（Background）

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

<body background="clouds.gif">

<body background="http://www.w3school.com.cn/clouds.gif">

URL可以是相对地址，也可以使绝对地址。

基本的注意事项 - 有用的提示：

<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在后来的HTML标准（HTML4和XHTML）中已被废弃。应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

十、HTML 颜色

颜色由红色、绿色、蓝色混合而成。

颜色值

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

这个表格给出了由三种颜色混合而成的具体效果：

Color HEX	Color RGB

#000000	    rgb(0,0,0)

#FF0000	    rgb(255,0,0)

#00FF00	    rgb(0,255,0)

#0000FF	    rgb(0,0,255)

#FFFF00	    rgb(255,255,0)

#00FFFF	    rgb(0,255,255)

#FF00FF	    rgb(255,0,255)

#C0C0C0	    rgb(192,192,192)

#FFFFFF	    rgb(255,255,255)

颜色名

大多数的浏览器都支持颜色名集合。

Color HEX	Color Name

#F0F8FF	    AliceBlue

#FAEBD7	    AntiqueWhite

#7FFFD4	    Aquamarine

#000000	    Black

#0000FF	    Blue

#8A2BE2	    BlueViolet

#A52A2A	    Brown

Web安全色

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

216 跨平台色

216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。