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
How to quickly use mysqlreplicate to build MySQL master-slave
Introduction The mysql-utilities toolset is a col...
How to use Docker containers to implement proxy forwarding and data backup
Preface When we deploy applications to servers as...
How to implement Mysql switching data storage directory
How to implement Mysql switching data storage dir...
How to use Nginx to carry rtmp live server
This time we set up an rtmp live broadcast server...
jQuery implements accordion small case
This article shares the specific code of jQuery t...
Common structural tags in XHTML
structure body, head, html, title text abbr, acro...
Detailed explanation of how to create an updateable view in MySQL
This article uses an example to describe how to c...
mysql-8.0.15-winx64 uses the zip package to install and the service is shut down immediately after starting
The MySQL version used in this example is mysql-8...
How to quickly build your own server detailed tutorial (Java environment)
1. Purchase of Server 1. I chose Alibaba Cloud...
JD Vue3 component library supports the detailed process of mini program development
Source code preview: https://github.com/jdf2e/nut...
Linux CentOS 6.5 Uninstall, tar and install MySQL tutorial
Uninstall the system-provided MySQL 1. Check whet...
Vue monitoring properties and calculated properties
Table of contents 1. watch monitoring properties ...
Compatibility with the inline-block property
<br />A year ago, there were no articles abo...
MySQL slow query: Enable slow query
1. What is the use of slow query? It can record a...
View the dependent libraries of so or executable programs under linux
View the dependent libraries of so or executable ...