Introduction to the use of anchors (named anchors) in HTML web pages
|
The following information is compiled from the Internet 1. Anchor is a type of hyperlink in web page production, also called named anchor . A named anchor is a hyperlink within a page, like a quick locator, and is widely used. English name: anchor Named anchors allow you to set markers in your document, which are usually placed at or at the top of a specific topic in the document. You can then create links to these named anchors that quickly take visitors to the specified location. Creating a link to a named anchor is a two-step process. First, create a named anchor, and then create a link to the named anchor. Sample Code Define the following anchor at the appropriate location in the HTML page: <a name="top">This is the TOP part</a> <a name="content">This is the CONTENT section</a> <a name="foot">This is the FOOT part</a> (You can use an id attribute instead of a name attribute; named anchors also work. [1]) There are two ways to access the above anchor points. One is to use the hyperlink tag <a></a> to create an anchor link, which is mainly used for anchor point access within the page. <a href="#top">Click me to link to TOP</a> <a href="#content">Click me to go to CONTENT</a> <a href="#foot">Click me to go to FOOT</a> Another way is to add an anchor tag directly after the page address, which is mainly used for anchor access between different pages. If the address of this page is http://file path/index.html, to access the foot anchor, just visit the following link http://filepath/index.html#foot 2. What exactly is the HTML anchor used for? To put it simply, if you want to read a long article precisely by paragraphs, you can use anchor points. Code: <a href="#001">Jump to 001</a> ...text omitted <a name="001" id="001" ></a> ...text omitted In fact, the anchor only needs a name, and adding an id is to make it more compatible. The value of href must be consistent with name \ id, and "#" must be added in front. The above code is compatible in ie6/7, ff, but not in ie8. Because the value of our anchor point <a></a> is empty, we just add a space to avoid affecting the appearance. The following code is compatible with IE8 <a href="#001">Jump to 001</a> ...text omitted <a name="001" id="001" > & nbsp </a> ...text omitted Another question, what if you want to display the content of a certain anchor point of a certain page (such as: 123.html)? The code is as follows <a href="123.html#001">Jump to 001</a> ...text omitted <a name="001" id="001" > & nbsp </a> ...text omitted This was when I was working on the background yesterday. I wanted to implement "modify positioning", so I moved out the anchor mark (I usually forget it). But the program says that they need to get the value, and there must be a "?" or "&" in the connection, so my anchor point is incompatible... hehe! There will be a solution later! Although there are problems with anchor compatibility in jsp pages, there are no problems in static pages, so it is still worth learning! 3. In WEB development, page anchors will be used . HTML page anchors are used to link to a section of a page. W3School says that creating anchors uses the <a> (anchor) tag and the name attribute, but this is not the only way to create a page anchor. Here are two ways to create HTML page anchors. We can use W3School's online testing tool to test. The test code after opening the link uses <a href="#C4"> and <a name="C4">, and the test has no problem. Then change “ <h2> <a name=”C4″>Chapter 4 </a> </h2>” to “ <h2 id=”C4″>Chapter 4 </h2>” and test it, the effect is the same. Note: In addition to using the name attribute of the anchor tag, you can also use the id attribute to create a page anchor. The value of the href attribute in the anchor <a> tag starts with # and is followed by the name or id of the target: Copy code The code is as follows:<html> <body> <p> <a href="#method1">Page anchor method 1</a> </p> <p> <a href="#method2">Page anchor method 2</a> </p> <h2><a name="method1">Method 1</a></h2> <p>Use the href and name attributes of the anchor tag</p> <h2 id="method2">Method 2</h2> <p>Using anchor tags and id attributes</p> </body> </html> |
<<: Several methods of horizontal and vertical centering of div content using css3 flex
>>: How to solve the problem of invalid left join in MySQL and the precautions for its use
Recommend
Table shows the border code you want to display
Common properties of tables The basic attributes ...
Summary of Linux Logical Volume Management (LVM) usage
Managing disk space is an important daily task fo...
Use VSCode's Remote-SSH to connect to Linux for remote development
Install Remote-SSH and configure it First open yo...
How to use union all in MySQL to get the union sort
Sometimes in a project, due to some irreversible ...
Solution to the problem that the audio component of WeChat applet cannot be played on iOS
Solution: Bind the click event to the audio compo...
Nginx domain forwarding usage scenario code example
Scenario 1: Due to server restrictions, only one ...
Detailed explanation of Vue transition effects and animation transition usage examples
Table of contents transition hook function Custom...
Use Rem layout to achieve adaptive
I have written an article about mobile adaptation...
MySQL 5.7.16 installation and configuration method graphic tutorial (Ubuntu 16.04)
How to install MySQL 5.7 in Ubuntu 16.04? Install...
HTML Tutorial: title attribute and alt attribute
XHTML is the basis of CSS layout. jb51.net has al...
How to change the password of mysql5.7.20 under linux CentOS 7.4
After MySQL was upgraded to version 5.7, its secu...
Detailed explanation of Linux zabbix agent deployment and configuration methods
1. Install zabbix-agent on web01 Deploy zabbix wa...
CSS uses the autoflow attribute to achieve seat selection effect
1. Autoflow attribute, if the length and width of...
Nginx/Httpd load balancing tomcat configuration tutorial
In the previous blog, we talked about using Nginx...
A brief discussion on what situations in MySQL will cause index failure
Here are some tips from training institutions and...