html入门教程4
1、HTML 链接HTML 样式HTML 图像HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。实例创建超级链接本例演示如何在 HTML 文档中创建链接。将图像作为链接本例演示如何使用图像作为链接。（可以在本页底端找到更多实例）HTML 超链接（链接）超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。我们通过使用 <a> 标签在 HTML 中创建链接。有两种使用 <a> 标签的方式：通过使用 href 属性 - 创建指向另一个文档的链接通过使用 name 属性 - 创建文档内的书签延伸阅读：什么是超文本？HTML 链接语法链接的 HTML 代码很简单。它类似这样：<a href="url">Link text</a>href 属性规定链接的目标。开始标签和结束标签之间的文字被作为超级链接来显示。实例<a href="http://www.w3school.com.cn/">Visit W3School</a>上面这行代码显示为：Visit W3School点击这个超链接会把用户带到 W3School 的首页。提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。HTML 链接 - target 属性使用 Target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>亲自试一试HTML 链接 - name 属性name 属性规定锚（anchor）的名称。您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。命名锚的语法：<a name="label">锚（显示在页面上的文本）</a>提示：锚的名称可以是任何你喜欢的名字。提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。实例首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：<a name="tips">基本的注意事项 - 有用的提示</a>然后，我们在同一个文档中创建指向该锚的链接：<a href="#tips">有用的提示</a>您也可以在其他页面中创建指向该锚的链接：<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。具体效果：有用的提示基本的注意事项 - 有用的提示：注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。更多实例在新的浏览器窗口打开链接本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。链接到同一个页面的不同位置本例演示如何使用链接跳转至文档的另一个部分跳出框架本例演示如何跳出框架，假如你的页面被固定在框架之内。创建电子邮件链接本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）创建电子邮件链接 2本例演示更加复杂的邮件链接。HTML 链接标签标签描述<a>定义锚。
2、HTML 图像HTML 链接HTML 表格通过使用 HTML，可以在文档中显示图像。实例插入图像本例演示如何在网页中显示图像。从不同的位置插入图片本例演示如何将其他文件夹或服务器的图片显示到网页中。（可以在本页底端找到更多实例。）图像标签（<img>）和源属性（Src）在 HTML 中，图像由 <img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。定义图像的语法是：<img src="url" />URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。替换文本属性（Alt）alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。<img src="boat.gif" alt="Big Boat">在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。基本的注意事项 - 有用的提示：假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。更多实例背景图片本例演示如何向 HTML 页面添加背景图片。排列图片本例演示如何在文字中排列图像。浮动图像本例演示如何使图片浮动至段落的左边或右边。调整图像尺寸本例演示如何将图片调整到不同的尺寸。为图片显示替换文本本例演示如何为图片显示替换文本。在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。制作图像链接本例演示如何将图像作为一个链接使用。创建图像映射本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。把图像转换为图像映射本例显示如何把一幅普通的图像设置为图像映射。图像标签标签描述<img>定义图像。<map>定义图像地图。<area>定义图像地图中的可点击区域。
3、HTML 表格HTML 图像HTML 列表你可以使用 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 1row 1, cell 2row 2, cell 1row 2, cell 2表格和边框属性如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：<table border="1"><tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>表格的表头表格的表头使用 <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>在浏览器显示如下：HeadingAnother Headingrow 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2表格中的空单元格在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr><td></td><td>row 2, cell 2</td> </tr> </table>浏览器可能会这样显示：注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr><td> </td><td>row 2, cell 2</td> </tr> </table>在浏览器中显示如下：row 1, cell 1row 1, cell 2row 2, cell 2更多实例没有边框的表格本例演示一个没有边框的表格。表格中的表头(Heading)本例演示如何显示表格表头。空单元格本例展示如何使用 " " 处理没有内容的单元格。带有标题的表格本例演示一个带标题 (caption) 的表格跨行或跨列的表格单元格本例演示如何定义跨行或跨列的表格单元格。表格内的标签本例演示如何显示在不同的元素内显示元素。单元格边距(Cell padding)本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。单元格间距(Cell spacing)本例演示如何使用 Cell spacing 增加单元格之间的距离。向表格添加背景颜色或背景图像本例演示如何向表格添加背景。向表格单元添加背景颜色或者背景图像本例演示如何向一个或者更多表格单元添加背景。在表格单元中排列内容本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。框架(frame)属性本例演示如何使用 "frame" 属性来控制围绕表格的边框。表格标签表格描述<table>定义表格<caption>定义表格标题。<th>定义表格的表头。<tr>定义表格的行。<td>定义表格单元。<thead>定义表格的页眉。<tbody>定义表格的主体。<tfoot>定义表格的页脚。<col>定义用于表格列的属性。<colgroup>定义表格列的组。