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> <body> <p> <a href="http://www.baidu.com"> <img src="file:///D|/wallpicture/杂七杂八/QQ截图20120203220309.png" /> </a> </p> <!-- 下面的连接使用target属性--> <p> <a href="../bookmarks_12-1-28.html" target="_blank"> Go To it !</a> </p> </body> </html>
HTML 链接 - name 属性
name 属性规定锚(anchor)的名称。
name 属性用于创建 HTML 内部的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。
当使用命名锚(named anchors)时,我们可以创建直接跳至页面中某个节的链接,这样使用者就无需不停的滚动页面来寻找他们需要的信息。
<html> <body> <p> <a href="#C4">查看 Chapter 4.</a> </p> <h2> Chapter 1 </h2> <p> This chapter explain ba bla bla </p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> </body> </html>
<html> <body> <p> 给自己发送一封邮件 <a href="mailto:kay0227@foxmail.com? subject=kay%20sprint"> 点击发送 </a> </p> <p> <b>注意: </b>应该使用 <i>%20</i> 来代替单词之间的空格,这样浏览器就可 以正确地显示文本了 </p> </body> </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