With the increasing reliance on JavaScript frameworks and libraries, many people pay less attention to HTML. . This results in us not being able to take full advantage of many features of HTML, which can greatly enhance website functionality. Also by writing semantic HTML you can add the correct context to your website content, significantly improving the user experience.
This article will introduce some useful HTML tags that you may have overlooked. The
<code><base>
<code><base> tag allows you to create a scenario where there is a base URL that acts as the Prefix for all relative URLs. The tag must have a <code>href or <code>target attribute that contains the base URL, or both.
<!DOCTYPE html>
<html>
<head>
<base href="https://www.google.com/" target="_blank">
</head>
<body>
<h1>The base element(Google As a case study)</h1>
<p> <a href="gmail">Gmail</a> - Used to send emails; which are messages distributed by electronic means from one computer user to one or more recipients via a network.</p>
<p><a href="hangouts">Hangouts</a> - It's used for Messaging, Voice and Video Calls</p>
</body>
</html>
This way you don’t have to repeat the URL prefix for each request.
There can only be one <code><base> element in an HTML document, and it must be located within the <code> element.
Image map
Image map is an image with a specific clickable area and is defined through the <code>map tag. These areas are set up using the <code><area> tag. This allows you to embed links in different parts of the image, which can lead to other pages, which is useful for describing what is in the image.
Look at an example:
The first step is to insert the image using the <code><img src="/static/imghwm/default1.png" data-src="study.jpg" class="lazy" alt="Useful HTML tags you might ignore (summary)" > tag as usual, but this time using the <code>usemap attribute .
Next create a <code><map></map> tag and use the <code> same value as the usemap<code> attribute in the img<code> tag name attribute. This will link the <code><image></image> tag with the <code>map tag.
<map name="workmap">
</map>
Then start creating clickable areas. We need to define how to draw each area, usually using <code>shape and <code>coords.
Use the <code><area> element to define clickable areas on the image. It is added inside the <code>map element.
These properties include:
<code>shape is required when drawing a rectangle over the relevant area. You can use other shapes such as rectangle, circle, polygon or the default shape (whole image)
<code>alt is used to specify when the <code>area element is Alternate text to be displayed when rendering fails
<code>href Contains a URL linking the clickable area to another page
<code>coords using coordinates (starting with (in pixels) to cut out shapes accurately. You can use various software to obtain the exact coordinates of an image; Microsoft's drawing software is used below as a simple example. Different shapes represent their coordinates in different ways. For example, a rectangle is represented by <code>left, top, right, bottom.
Here we have <code>top, left Coordinates:
You can find the The lower left corner reads the coordinates of the cursor on the picture, or you can just use the ruler on the horizontal and vertical planes.
The screenshot below shows the <code>right, bottom coordinates:
The coordinates of the center of the circle Agreeing to be located in the lower left corner, the horizontal distance from the center to the end of the circle is the radius. Creating a
poly<code> is more like drawing freehand. You just link different points on the image and they will be connected:
<p><dfn title="HyperText Markup Language">HTML</dfn>
Is the standard markup language for creating web pages.
</p>
也可以与 <code><abbr></abbr> 结合使用:
<!DOCTYPE html>
<html>
<body>
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>
It's the standard markup language for creating web pages.</p>
</body>
</html>
这可以增强可访问性,因为这样编写语义 HTML 可以使阅读器和浏览器在适合用户的上下文中解释页面上的内容。
<details>
<summary>
<span>I am an introvert</span>
</summary>
<div>An introvert is a person with qualities of a personality type known as introversion, which means that they feel more comfortable focusing on their inner thoughts and ideas, rather than what's happening externally. They enjoy spending time with just one or two people, rather than large groups or crowds</div>
<div>
</details>
<blockquote cite="https://en.wikipedia.org/wiki/History_of_Nigeria">
The history of Nigeria can be traced to settlers trading across the middle East and Africa as early as 1100 BC. Numerous ancient African civilizations settled in the region that is known today as Nigeria, such as the Kingdom of Nri, the Benin Empire, and the Oyo Empire. Islam reached Nigeria through the Borno Empire between (1068 AD) and Hausa States around (1385 AD) during the 11th century,[1][2][3][4] while Christianity came to Nigeria in the 15th century through Augustinian and Capuchin monks from Portugal. The Songhai Empire also occupied part of the region.[5]
</blockquote>
<p>The best movie ever made is <cite>The Godfather</cite> by
Francis Ford Coppola . My favorite song is <cite>Monsters You Made</cite> by the Burna boy.</p>
The above is the detailed content of Useful HTML tags you might ignore (summary). For more information, please follow other related articles on the PHP Chinese website!