Hyperlink - anchor

A text label

Tag name	Semantics and function	attribute	Single or double
em	Emphasis, italics		double
stong	Emphasis, stronger tone, bold words		double
ins	Indicates the newly added content. Underline it		double
del	Indicates the content to be deleted, and a delete line is added		double
sub	Subscript		double
sup	superscript		double

Two pictures

1 img label

Tag name	Semantics and function	attribute	Single or double
img	Show pictures on page	src attribute: Specifies the address of the picture. alt attribute: Specifies the alternate text of the picture. Width property: sets the width of the picture. Height property: sets the height of the picture. Border property: sets the width of the picture border	single

be careful:

1.alt can not only specify the substitute text of the picture (picture loading fails), but also help the search engine to accurately capture the picture. This attribute should be added.

2. If only one of the width and height attributes is specified, the other will be automatically calculated according to the picture scale, so if you set the width and height at the same time, be sure to pay attention to the picture scale.

2 common picture formats

jpg
png
gif

Three phase pair path and absolute path

1 absolute path

The absolute path used in the front end is the absolute address of the file in the network.

http://image.baidu.com/images/pc_34124123123/im123123123.jpg

2 relative path

./		Indicates the current folder (the folder where the code writing file is located), which can be omitted. Used when the target file is at the same level or lower level

../		Represents the upper level folder (the upper level folder of the file where the code is written). Used when the target file is at a higher level or higher
		../../ Indicates the upper two levels
		../../../ Indicates the upper three levels

3 scenario of using path in HTML

use img Label loading picture file
 use audio Tag load audio file
 use vidoe Tag load video file
 use iframe Label load other html file
a Label set hyperlink address
 use link Label introduction css file
 use script Label introduction js file

Four hyperlinks and anchors

1 a label

Tag name	Semantics and function	attribute	Single or double
a	Hyperlinks	herf attribute: sets the address of the target file. **Target attribute: * * set whether the target file is opened in this window or a new window. Value:_ Blank (new window)_ Self (default, this window). Name attribute: used to specify the anchor name.	double

be careful:

Only a tag with the herf attribute set can be called a hyperlink.

2 hyperlinks

① Jump to a new page

A page is an html file.

<!--Specify the destination file address using the absolute path-->
<a href="https://news. 163.com/21/0227/12/G3RFGNPG000189FH. HTML "> a news</a>

<!--Specifies the destination file using a relative path-->
<a href="../02-Picture label/01-Picture label.html">picture</a>

② Jump to another type of file

<a href="images/Fangfang.jpg" target="_blank">Fangfang's self photographing</a>
<br>
<a href="../../Day02_HTML Classroom notes.md">markdown file</a>
<br>
<a href="resouces/How to reach the peak of life before the age of 30.pdf">How to reach the peak of life before the age of 30</a>
<br>
<a href="resouces/How to own 10 billion assets.docx">How to own 10 billion assets</a>
<br>
<a href="resouces/Xiaole's private room photo.7z">Xiaole's private room photo</a>
<br>
<a href="resouces/Teacher Xiaole's sexual life.mp4">Teacher Xiaole's sexual life</a>

The target file of the hyperlink can be any type of file.

If the type of the target file can be opened by the browser, the browser will open the file (such as html, picture, markdown format, video, audio, text document, etc.) as soon as you click the hyperlink

If the browser cannot open the type of target file, click the hyperlink to download the file directly. (e.g. exe file, compressed file, word file, etc.)

③ Hyperlinks and other features

<a href="mailto:fmuncle@163.com">Email me</a>
<br>
<a href="tel:18618176338">Call me up</a>
<br>
<a href="sms:18618176338">Text me</a>

④ The value of href is empty

<a href=""></a>

If the value of the href attribute is empty, the target file of the hyperlink is itself (the current file). Clicking the hyperlink will open this page again.

Five anchor points

① How to set anchor points

The first method: set anchor point with a label:

<a name="Anchor name></a>

The second method: set the anchor name through the id attribute of the tag:

Any label can be used as an anchor by setting id!

<div id="page01">
	content...
</div>

<h2 id="section"></h2>

② How to jump to anchor

Hyperlinks can jump to the specified anchor point.

<!--Jump to the anchor point specified on this page-->
<a href="#Anchor name "> hyperlink</a>

<!--Jump to the anchor point specified on another page-->
<a herf="Page address#Anchor name "> hyperlink</a>

<!--Jump to an empty anchor, resulting in a return to the top of the page-->
<a href="#"> hyperlink</a>