1.HTML 链接
<html> <body> <p> <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p> </body> </html>
本例演示如何在 HTML 文档中创建链接。
<html> <body> <p> 您也可以使用图像来作链接: <a href="/example/html/lastpage.html"> <img border="0" src="/i/eg_buttonnext.gif" /> </a> </p> </body> </html>
本例演示如何使用图像作为链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
我们通过使用 标签在 HTML 中创建链接。
有两种使用 标签的方式:
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
延伸阅读:什么是超文本?
链接的 HTML 代码很简单。它类似这样:
<a href="url">Link text</a>
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
<a href="www.php.cn/">Visit php</a>
上面这行代码显示为:Visit php
点击这个超链接会把用户带到 php的首页。
提示:"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
使用 Target 属性,你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档:
<a href="http://www.php.cn/" target="_blank">Visit W3School!</a>
亲自试一试
name 属性规定锚(anchor)的名称。
name 属性用于创建 HTML 内部的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。
当使用命名锚(named anchors)时,我们可以创建直接跳至页面中某个节的链接,这样使用者就无需不停的滚动页面来寻找他们需要的信息。
<a name="label">Text to be displayed</a>
提示:锚的名称可以是任何你喜欢的名字。
HTML 文档内部的已命名的锚:
<a name="tips">Useful Tips Section</a>
然后,我们创建指向相同文档中“有用的提示”部分的链接:
<a href="#tips">Visit the Useful Tips Section</a>
或者,创建从另一个页面指向该文档中“有用的提示”部分的链接:
<a href="www.w3school.com.cn/html_links.htm#tips"> Visit the Useful Tips Section </a>
在上面的代码中,我们将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。
具体效果:有用的提示
注释:请始终将正斜杠添加到子文件夹。假如这样书写链接:href="www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="www.w3school.com.cn/html/"。
提示:命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科,您会发现其中几乎每个词条都采用这样的导航方式。
提示:假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。
2.HTML 表格
<html> <body> <p>每个表格由 table 标签开始。</p> <p>每个表格行由 tr 标签开始。</p> <p>每个表格数据由 td 标签开始。</p> <h4>一列:</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>一行三列:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>两行三列:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
这个例子演示如何在 HTML 文档中创建表格。
<html> <body> <h4>带有普通的边框:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>带有粗的边框:</h4> <table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>带有很粗的边框:</h4> <table border="15"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
本例演示各种类型的表格边框。
表格由 在浏览器显示如下: 如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。 使用边框属性来显示一个带有边框的表格 表格的表头使用 在浏览器显示如下: 在大多数浏览器中,没有内容的表格单元显示得不太好。 在浏览器显示如下: 注意:这个空的单元格的边框没有被显示出来。(不过 Mozilla Firefox 可以将整个边框显示出来。)为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。 在浏览器中显示如下: , 和 很少被用到,这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的 XHTML 中会有所改观。如果你使用 IE5.0 或者更新的版本,可以查看在我们的《XML教程》中的具体例子。 3.HTML 列表 本例演示无序列表。 有序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表始于 浏览器显示如下: Coffee Milk 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。 同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 浏览器显示如下: Coffee Milk 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。 自定义列表不仅仅是一列项目,而是项目及其注释的组合。 自定义列表以 浏览器显示如下: Coffee Black hot drink Milk White cold drink 定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
【相关推荐】 1. 免费html在线视频教程 2. html开发手册 以上是网页制作(html)的基本知识(四)链接详解的详细内容。更多信息请关注PHP中文网其他相关文章! 标签来定义。每个表格均有若干行(由
标签定义),每行被分割为若干单元格(由 标签定义)。字母 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"><tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
表格的表头
标签进行定义。 <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>row 2, cell 1</td><td></td></tr>
</table>
row 1, cell 1 row 1, cell 2 row 2, cell 1 <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> </td></tr>
</table>
row 1, cell 1 row 1, cell 2 row 2, cell 1
基本的注意事项 - 有用的提示:<html>
<body>
<h4>一个无序列表:</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>
<html>
<body>
<h4>一个有序列表:</h4>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
</body>
</html>
无序列表
标签。每个列表项始于
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
标签。每个列表项始于
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
定义列表
标签开始。每个自定义列表项以
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>