HTML Text label 、 picture 、 route 、 How to define hyperlinks and anchors

Today I'd like to share with you HTML Text label 、 picture 、 route 、 How hyperlinks and anchors are defined , Detailed content , Clear logic , I believe most people still know too much about this knowledge , So share this article for your reference , I hope you will gain something after reading this article , Now let's take a look .

1 Text label

Text labels are often nested in formatting labels , It itself is no longer wrapped with other labels , It's used to wrap a word , Instead of long paragraphs .

notes ：

• stay HTML Specification <strong> More emphasis than <em> stronger , In actual development, there is no distinction between , Both can be used ; Emphasis is to let the search engine know the keyword .

• <del> and <ins> Labels are often used to indicate original and current prices .

• <sup> and <sub> It can be used to represent the upper and lower footmarks of a few formulas , Such as H₂O、100³

2 picture

2.1  img label

notes ：

• alt The function of attributes ：1、 Search engines can use alt Attribute to determine the content of the picture , Easy to search by browser ;2、 Display alternative text when the picture cannot be displayed normally , You can know what picture this is , Therefore, it is suggested that <img> Set up alt attribute .

• width and height If only one , The other will be calculated automatically according to the scale of the original drawing . Therefore, only one... Is usually set , If two are set at the same time , It is necessary to ensure the correct proportion , No, the side picture will be deformed .

2.2 Common image formats

• jpg / jpeg   Compress

• png   Nondestructive

• gif   Moving graph , The degree of loss is the highest

3 Absolute path and relative path

If the target file is not on the same computer as the current file , You must use an absolute path to access the target file ;

If the target file is on the same computer as the current file , It is more convenient to use relative paths .

3.1 Absolute path

In the front desk , Refers to the absolute address of a file in the network . Such as ：

https://upload.jianshu.io/users/upload_avatars/xxxxx.jpg

3.2 Relative paths

• ./ Indicates the directory of the current file . When the target file is at the same level or lower level of the current file , The path to ./ Start ../ It can be omitted .

• ../ Indicates the upper level directory of the current file . When the target file is at or above the level of the current file , The path to ../ Start .../ Don't omit .../ It means one level up ,../../ It means two levels above ,../../../ It means three levels above , And so on .

4 Hyperlinks and anchors

4.1  a label

notes ：

• Only with href Attribute <a> Tags are hyperlinks .

• If href The value of is empty , Then the target file is the current file , Clicking the hyperlink will jump to the page itself , Therefore, we can achieve Refresh the page The effect of .

  <a href=""> Refresh current page </a>

• a In addition to the package text , You can also wrap pictures , That is, the picture can also be used as a hyperlink .

4.2 Hyperlinks

① Jump to a new page

<!--  The address is .com、.cn The type of ending , Through this hyperlink, you can access  The server , The server will return to its home page by default  --><a href="https://www.jianshu.com/" target="_blank"> The front page of the book </a><!--  The address is .html The type of ending , Through this hyperlink, you can visit a specific web page , That is, a html file  --><a href="https://www.jianshu.com/xxxxx.html" > Some HTML file </a>

② Jump to other types of files

Generally, the browser opens html Files of type . The browser can also open other types of files , Basically, all text files can be opened , Such as ： picture 、pdf、 video ; But a small number of files that are not text type , Such as ：.docx、.7z Wait for compressed files , The browser cannot be opened directly , Can only download .

<!--  Open the picture file  --><a href="images/dog.jpg">dog</a><!--  open PDF file  --><a href="documents/dog.pdf">dog</a><!--  Open video file  --><a href="documents/dog.mp4">dog</a><!--  download Word file  --><a href="documents/dog.docx">dog</a><!--  Download the compressed file  --><a href="documents/dog.7z">dog</a><!--  open markdown file , But it is displayed in source code format  --><a href="documents/dog.md">dog</a>

③ Hyperlinks and other functions

Not only can it be used on Web pages , You can also use hyperlinks on your phone , Such as ： Make a phone call 、 Send a text message .

Hyperlinks can also be used to open APP, example ： Click the Taobao link shared by wechat , Some mobile phones can automatically jump to Taobao application .

<a href="mailto: Email address "> Send email </a><a href="tel： Phone number "> Make a phone call </a><a href="sms: Phone number "> Send a text message </a>

4.3 Anchor point

effect ： Mark a position on this page or other pages , You can jump to this location with a hyperlink .

When you click a hyperlink that jumps to an anchor , The anchor name will appear at the end of the web address .

① How to set anchor points

Method 1 ： adopt <a> Labeled name Property to set the anchor point

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

Method 2 ： By setting the label id Property to set the anchor point （ Any label can ）

<div id=" Anchor name "></div><p id=" Anchor name "></p>

② How to jump to anchor

Use the hyperlink to jump to the specified anchor

<!--  Jump to the anchor point of this page  --><a href="# Anchor name "></a><!--  Jump to the anchor of the rest of the page  --><a href=" Address of other pages # Anchor name "></a><!--  Jump to the top of the page  --><a href="#"></a>

That's all “HTML Text label 、 picture 、 route 、 How to define hyperlinks and anchors ” All the content of this article , Thank you for reading ！ I believe you will gain a lot after reading this article , Xiaobian will update different knowledge for you every day , If you want to learn more , Please pay attention to the Yisu cloud industry information channel .