Avec la dépendance croissante aux frameworks et bibliothèques JavaScript, de nombreuses personnes accordent moins d'attention au HTML. Cela nous empêche de tirer pleinement parti de nombreuses fonctionnalités du HTML, qui peuvent grandement améliorer les fonctionnalités du site Web. De plus, en écrivant du HTML sémantique, vous pouvez ajouter le contexte correct au contenu de votre site Web, améliorant ainsi considérablement l'expérience utilisateur.
Cet article présentera quelques balises HTML utiles que vous avez peut-être négligées. La balise
<code><base>
<code><base> vous permet de créer un scénario dans lequel il existe une URL de base qui fait office de préfixe pour toutes les URL relatives dans le document. La balise doit avoir un attribut <code>href ou <code>target, ou les deux, qui contient l'URL de base.
<!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>
De cette façon, vous n'avez pas besoin de répéter le préfixe de l'URL pour chaque requête.
Il ne peut y avoir qu'un seul élément <code><base> dans un document HTML, et il doit être à l'intérieur d'un élément <code>.
Carte d'image
Carte d'image est une image avec une zone cliquable spécifique et est définie via la balise <code>map. Ces zones sont définies à l'aide de la balise <code><area>. Cela vous permet d'intégrer des liens dans différentes parties de l'image, qui peuvent mener vers d'autres pages, ce qui est utile pour décrire ce qu'il y a dans l'image.
Regardez un exemple :
La première étape consiste à insérer l'image en utilisant la balise <code><img src="/static/imghwm/default1.png" data-src="study.jpg" class="lazy" alt="Balises HTML utiles que vous pourriez ignorer (résumé)" > comme d'habitude, mais cette fois en utilisant l'attribut <code>usemap.
Créez ensuite une balise <code><map></map> et utilisez l'attribut <code>img avec la même valeur que l'attribut <code>usemap dans la balise <code>name. Cela reliera la balise <code><image></image> à la balise <code>map.
<map name="workmap">
</map>
Ensuite, commencez à créer des zones cliquables. Nous devons définir comment dessiner chaque zone, généralement avec <code>shape et <code>coords.
Utilisez l'élément <code><area> pour définir des zones cliquables sur l'image. Il est ajouté à l'intérieur de l'élément <code>map.
Ces propriétés incluent :
<code>shape est requis lors du dessin d'un rectangle sur la zone concernée. Vous pouvez utiliser d'autres formes telles qu'un rectangle, un cercle, un polygone ou la forme par défaut (image entière).
<code>alt est utilisé pour spécifier un texte alternatif à afficher lorsque l'élément <code>area ne peut pas être rendu pour une raison quelconque.
<code>href Contient une URL reliant une zone cliquable à une autre page
<code>coords Utilisez des coordonnées (en pixels) pour découper précisément la forme. Vous pouvez utiliser divers logiciels pour obtenir les coordonnées exactes d'une image ; le logiciel de dessin de Microsoft est utilisé ci-dessous à titre d'exemple simple. Différentes formes représentent leurs coordonnées de différentes manières, comme un rectangle représenté par <code>left, top, right, bottom.
Ici nous avons <code>top, left coordonnées :
Vous pouvez lire le curseur en bas à gauche de l'image . Coordonnées sur la photo, il est également possible d'utiliser la règle uniquement sur les plans horizontal et vertical.
La capture d'écran ci-dessous montre les coordonnées <code>right, bottom :
Les coordonnées du centre du cercle s'accordent pour être dans le coin inférieur gauche, la distance horizontale du centre à l'extrémité du cercle est le rayon.
Créer un <code>poly revient plus à dessiner à main levée. Il vous suffit de relier différents points sur l'image et ils seront connectés :
<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>
