current position:Home>How to define HTML text tags, pictures, paths, hyperlinks and anchors

How to define HTML text tags, pictures, paths, hyperlinks and anchors

2022-04-29 17:25:57Billion cloud speed

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 .

Tag name Semantics and function attribute Single label or Double label
em emphasize , The default is italicized
Double label
strong emphasize , The default is bold
Double label
del Indicates that , The default text has a strikeout
Double label
ins Indicates inserted , The default text is underlined
Double label
sup superscript
Double label
sub Subscript word
Double label

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 H2O、1003

2 picture

2.1  img label

Tag name Semantics and function attribute Single label or Double label
img Display pictures in the page src: Specify the path of the picture
alt: Alternate text for pictures
width: Set picture width
height: Set the image height
Single 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

Tag name Semantics and function attribute Single label or Double label
a Set hyperlink href: Set the destination file address
target: Set the target file in the current window ( value :_self) Or in a new window ( value :_blank) open
name: Set the anchor name
Double 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 .

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

① 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 .

copyright notice
author[Billion cloud speed],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291539467624.html

Random recommended