【木易】网页制作教程---HTML基础教程（下部）

yangtutu · 发表于 2010-8-9 21:27

【木易】网页制作教程---HTML基础教程--HTML 链接
锚标签和 Href 属性
HTML 使用 <a> （锚）标签来创建连接另一个文档的链接。
锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等等。
创建锚的语法：
[pre]<a href="url">Text to be displayed</a>[/pre]<a> 用来创建锚。href 属性用于定位需要链接的文档，锚的开始标签和结束标签之间的文字被作为超级链接来显示。
这个锚定义了指向 w3school 的链接：
[pre]<a href="http://www.w3school.com.cn/">Visit W3School!</a>[/pre]上面的这行在浏览器中显示为这样：Visit W3School!
Target 属性
使用 Target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
[pre]<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>[/pre]锚标签和 Name 属性
Name 属性用于创建被命名的锚（named anchors）。当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。
以下是命名锚的语法：
[pre]<a name="label">Text to be displayed</a>[/pre]name 属性用于创建命名锚。锚的名称可以是任何你喜欢的名字。
下面这行定义了命名锚：
[pre]<a name="tips">Useful Tips Section</a>[/pre]你会注意到，命名锚会以特殊的方式来显示。
将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个节，就像这样：
[pre]<a href="http://www.w3school.com.cn/html/html_links.asp#tips">Jump to the Useful Tips Section</a>[/pre]从文件 html_links.asp 内部链接到 Useful Tips 节的超级链接是这样的：
跳转到有用的提示部分
基本的注意事项 - 有用的提示：
总是将正斜杠添加到子文件夹。假如你这样书写链接的话：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"
命名锚经常被用在长的文档中创建目录。可以为每个章节赋予一个命名锚，然后连接到这些锚的链接被置于文档的上部。
假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

yangtutu · 发表于 2010-8-9 21:29

表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
[pre]<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>[/pre]在浏览器显示如下：

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格
[pre]<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>[/pre]表格的表头
表格的表头使用 <th> 标签进行定义。
[pre]<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>[/pre]在浏览器显示如下：

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格标签

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

yangtutu · 发表于 2010-8-9 21:31

无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
[pre]<ul><li>Coffee</li><li>Milk</li></ul>[/pre]浏览器显示如下：

[li]Coffee [/li][li]Milk [/li]列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
[pre]<ol><li>Coffee</li><li>Milk</li></ol>[/pre]浏览器显示如下：

[li]Coffee [/li][li]Milk [/li]列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
[pre]<dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>[/pre]浏览器显示如下：
Coffee Black hot drink Milk White cold drink 定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

列表标签

标签	描述
<ol>	定义有序列表。
<ul>	定义无序列表。
<li>	定义列表项。
<dl>	定义定义列表。
<dt>	定义定义项目。
<dd>	定义定义的描述。
<dir>	已废弃。使用 <ul> 代替它。
<menu>	已废弃。使用 <ul> 代替它。

yangtutu · 发表于 2010-8-9 21:33

表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。
[pre]<form>...  input 元素...</form>[/pre]输入
多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
[pre]<form>First name: <input type="text" name="firstname" /><br />Last name: <input type="text" name="lastname" /></form>[/pre]浏览器显示如下：
First name:
Last name:  注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。
单选按钮（Radio Buttons）
当用户从若干给定的的选择中选取其一时，就会用到单选框。
[pre]<form><input type="radio" name="sex" value="male" /> Male<br /><input type="radio" name="sex" value="female" /> Female</form>[/pre]浏览器显示如下：
Male
Female 注意，只能从中选取其一。
复选框（Checkboxes）
当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。
[pre]<form><input type="checkbox" name="bike" />I have a bike<br /><input type="checkbox" name="car" />I have a car</form>[/pre]浏览器显示如下：
I have a bike
I have a car 表单的动作属性（Action）和确认按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
[pre]<form name="input" action="html_form_action.asp" method="get">Username: <input type="text" name="user" /><input type="submit" value="Submit" /></form>[/pre]浏览器显示如下：
Username: 假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。

表单标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义一个控制的标签
<fieldset>	定义域
<legend>	定义域的标题
<select>	定义一个选择列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个按钮
<isindex>	已废弃。有<input>代替。

yangtutu · 发表于 2010-8-9 21:34

图像标签（<img>）和源属性（Src）
在 HTML 中，图像由 <img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
定义图像的语法是：
[pre]<img src="url" />[/pre]URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 images 目录中，那么其 URL 为

。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
[pre]<img src="boat.gif" alt="Big Boat">[/pre]在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
基本的注意事项 - 有用的提示：
假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
图像标签

标签	描述
<img>	定义图像。
<map>	定义图像地图。
<area>	定义图像地图中的可点击区域。

yangtutu · 发表于 2010-8-9 21:35

背景（Backgrounds）
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
背景颜色（Bgcolor）
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
[pre]<body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body bgcolor="black">[/pre]以上的代码均将背景颜色设置为黑色。
背景（Background）
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
[pre]<body background="clouds.gif"><body background="http://www.w3school.com.cn/clouds.gif">[/pre]URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。
提示：如果你打算使用背景图片，你需要紧记一下几点：

[li]背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。 [/li][li]背景图像是否与页面中的其他图象搭配良好。 [/li][li]背景图像是否与页面中的文字颜色搭配良好。 [/li][li]图像在页面中平铺后，看上去还可以吗？ [/li][li]对文字的注意力被背景图像喧宾夺主了吗？ [/li]基本的注意事项 - 有用的提示：
<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。
应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。