Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > body text

Basic knowledge of web page production (html) (4) Detailed link explanation

零下一度
Release： 2017-05-06 13:40:35
Original
1802 people have browsed it

1.HTML link

<html>
<body>
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>

<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

</body>
</html>
Copy after login

This example demonstrates how to create a link in an HTML document. 

<html>
<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

</body>
</html>
Copy after login


This example demonstrates how to use an image as a link.

HTML Hyperlink(Link)

Hyperlink can be a word, a word, or a group of words , or it can be an image that you can click to jump to a new document or a certain part of the current document.

When you move the mouse pointer over a link on the web page, the arrow will change into a small hand.

We create links in HTML by using the tag.

There are two ways to use the tag:

  1. By using the href attribute - create a link to another A link to a document

  2. By using the name attribute - Create a bookmark within the document

Extended reading: What is hypertext?

HTML link syntax

The HTML code for the link is very simple. It looks like this: 

<a href="url">Link text</a>
Copy after login

The href attribute specifies the target of the link.

The text between the opening tag and the closing tag is displayed as a hyperlink.

Example

<a href="www.php.cn/">Visit php</a>
Copy after login

The above line of code is displayed as: Visit php

##Click this super The link will take the user to the php homepage.

Tip: "Link text" does not have to be text. Pictures or other HTML elements can become links.

HTML Links - target attribute

Using the Target attribute, you can define where the linked document will be displayed.

The following line will open the document in a new window: 

<a href="http://www.php.cn/" target="_blank">Visit W3School!</a>
Copy after login

Try it yourself

HTML Link - name attribute

The name attribute specifies the name of the anchor.

The name attribute is used to create bookmarks inside HTML.

The bookmark is not displayed in any special way and is invisible to the reader.

When using named anchors, we can create links that jump directly to a section of the page, so users don’t have to keep scrolling to find what they need. Information.

Syntax for naming anchors: 

<a name="label">Text to be displayed</a>
Copy after login

Tip: The name of the anchor can be anything you like.

Example

Named anchor inside HTML document: 

<a name="tips">Useful Tips Section</a>
Copy after login

Then, we create a pointer to the same document " Link to the Helpful Tips section: 

<a href="#tips">Visit the Useful Tips Section</a>
Copy after login

Alternatively, create a link from another page to the Helpful Tips section of this document: 

<a href="www.w3school.com.cn/html_links.htm#tips">
Visit the Useful Tips Section
</a>
Copy after login

In the above code, we add the # symbol and the anchor name to the end of the URL, so that we can directly link to the tips named anchor.

Specific results: Useful tips

Basic Notes - Useful tips :

NOTE : Always add forward slashes to subfolders. If the link is written like this: href="www.w3school.com.cn/html", two HTTP requests will be generated to the server. This is because the server will add a forward slash to the address and then create a new request, like this: href="www.w3school.com.cn/html/".

Tip: Named anchors are often used to create a table of contents at the beginning of a large document. You can give each chapter a named anchor, and then place links to these anchors at the top of the document. If you frequently visit Baidu Encyclopedia, you will find that almost every entry in it uses this navigation method.

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

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>
Copy after login

这个例子演示如何在 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>
Copy after login

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

表格

表格由

标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 , 和 很少被用到，这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的 XHTML 中会有所改观。如果你使用 IE5.0 或者更新的版本，可以查看在我们的《XML教程》中的具体例子。

3.HTML 列表

<html>
<body>
<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

</body>
</html>
Copy after login

本例演示无序列表。

<html>
<body>

<h4>一个有序列表：</h4>
<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

</body>
</html>
Copy after login

有序列表

无序列表

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

无序列表始于

标签定义）。字母 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>
Copy after login

在浏览器显示如下：

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


表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格

<table border="1"><tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Copy after login

表格的表头

表格的表头使用

标签进行定义。

<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>
Copy after login

在浏览器显示如下：

HeadingAnother Heading
row 1, cell 1row 1, cell 2
row 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>row 2, cell 1</td><td></td></tr>
</table>
Copy after login

在浏览器显示如下：

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

注意：这个空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<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>
Copy after login

在浏览器中显示如下：

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


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