网页制作（html）的基本知识（四）链接详解

1.html 链接

本文本 是一个指向本网站中的一个页面的链接。

本文本 是一个指向万维网上的页面的链接。

本例演示如何在 HTML 文档中创建链接。

您也可以使用图像来作链接：

本例演示如何使用图像作为链接。

HTML 超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

立即学习“前端免费学习笔记（深入）”；

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 标签在 HTML 中创建链接。

有两种使用 标签的方式：

1. 通过使用 href 属性 - 创建指向另一个文档的链接

2. 通过使用 name 属性 - 创建文档内的书签

延伸阅读：什么是超文本？

HTML 链接语法

链接的 HTML 代码很简单。它类似这样：

Link text

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

实例

Visit php

上面这行代码显示为：Visit php

点击这个超链接会把用户带到 php的首页。

提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

Visit W3School!

亲自试一试

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。

name 属性用于创建 HTML 内部的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。

命名锚的语法：

Text to be displayed

提示：锚的名称可以是任何你喜欢的名字。

实例

HTML 文档内部的已命名的锚：

Useful Tips Section

然后，我们创建指向相同文档中“有用的提示”部分的链接：

Visit the Useful Tips Section

或者，创建从另一个页面指向该文档中“有用的提示”部分的链接：

Visit the Useful Tips Section

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

具体效果：有用的提示

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

注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="www.w3school.com.cn/html/"。

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

2.HTML 表格

每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。

一列：


  
100



一行三列：


  
100
  
200
  
300



两行三列：


  
100
  
200
  
300


  
400
  
500
  
600

这个例子演示如何在 HTML 文档中创建表格。

带有普通的边框：
  


  
First
  
Row
   

  
Second
  
Row



带有粗的边框：
  


  
First
  
Row
   

  
Second
  
Row



带有很粗的边框：
  


  
First
  
Row
   

  
Second
  
Row

本例演示各种类型的表格边框。

表格

表格由

3.HTML 列表

一个无序列表：

  
咖啡
  
茶
  
牛奶

本例演示无序列表。

一个有序列表：

  
咖啡
  
茶
  
牛奶

有序列表

无序列表

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

无序列表始于

标签。每个列表项始于
• 。

Coffee
Milk

浏览器显示如下：

• Coffee

• Milk

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

有序列表

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

有序列表始于

标签。每个列表项始于
1. 标签。

Coffee
Milk

浏览器显示如下：

1. Coffee

2. Milk

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

定义列表

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

自定义列表以

标签开始。每个自定义列表项以

开始。每个自定义列表项的定义以

开始。

Coffee
Black hot drink
Milk
White cold drink

浏览器显示如下：

• Coffee

• Black hot drink

• Milk

• White cold drink

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

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 在浏览器显示如下： AyWeb企业网站管理系统2.6.3 build 090510 单站点版 系统特色:1.真正静态化页面,可支持htm,html,shtml,asp等后缀,对搜索引擎优化，客户更容易找到您。2.模板制作简单，灵活，无需专业编程知识3.完善的后台管理,包括新闻,产品,下载,招聘等栏目,页面的任意一处的内容都可以通过后台管理控制。4.支持 Access 和 MSSql 数据库5.公告,留言簿,友情链接,评论都是基于ajax技术,更加人性化。6.可批量上传产品,从excel上导 下载 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 表格和边框属性 如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。 使用边框属性来显示一个带有边框的表格 Row 1, cell 1 Row 1, cell 2 表格的表头 表格的表头使用

标签进行定义。 Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 在浏览器显示如下： Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 表格中的空单元格 在大多数浏览器中，没有内容的表格单元显示得不太好。 row 1, cell 1 row 1, cell 2 row 2, cell 1 在浏览器显示如下： row 1, cell 1 row 1, cell 2 row 2, cell 1 注意：这个空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。 row 1, cell 1 row 1, cell 2 row 2, cell 1 在浏览器中显示如下： row 1, cell 1 row 1, cell 2 row 2, cell 1 基本的注意事项 - 有用的提示：