Hyperlink
A hyperlink can be a word, a word, or a group of words, or an image. Link documents to other documents or resources, to specific parts of a document.
(1) Grammar
```html
<a href="">text or image</a>
```
(2) Semantics
Hyperlink
(3) Default style
- not on a single line
- By default the current window is open
- Default underline, text color
(4) Hyperlink properties
- href attribute
- Role: specify the address of the link jump
```html
<a href=" http://www.jd.com "> Jingdong Mall (text link)</a>
<a href="4.Example-Navigation.html" target="_blank"><img src="pic.png" alt="">(picture link)</a>
```
- target attribute
- Role: specify the opening method of the target address
- value
- `_blank` new window opens
- `_self` the current window to open (default)
```html
<a href="http://www.jd.com" target="_blank"><img src="pic.png" alt=""></a>
```
- title attribute
- Role: Define the prompt text, hovering the mouse over the link will display the title as a tooltip
**(5) Type of link**
- Empty link
- Description: Use an empty link if there is no link target identified at the time
```html
<a href="#">商品</a>
```
- external link
- Description: Links to other websites outside the site (absolute address)
```html
<a href="https://www.baidu.com "> Baidu</a>
```
- Internal links (relative addresses)
- Description: Interlinks between internal pages of the website. The name of the directly linked internal page
```html
<a href="index.html">Home</a>
```
- download link
- Description: If the address in the href is a file or compressed package, the file will be downloaded.
- code demo
```html
<a href="1.txt">Download text file</a>
```
**(6) Anchor link**
Description: When we click on the anchor link, we can quickly navigate to a certain position on the page.
- Jump to the anchor point of the specified position on the current page
- grammar:
```html
Define the target: <p id="box"></p>
Define jumps: <a href="#box"></a>
```
- Anchor to jump to other pages
- grammar:
```html
Define the target: <div id="box"></div> of the a.html page
Define jump: <a href="a.html#test"></a>
```
**Summary:** Focus on mastering internal links, external links, and anchor links.