Balises HTML utiles que vous pourriez ignorer (résumé)-tutoriel HTML-php.cn

Balises HTML utiles que vous pourriez ignorer (résumé)

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

`<base>`

<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 href ou 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&#39;s used for Messaging, Voice and Video Calls</p>
</body>
</html>

Copier après la connexion

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 <base> dans un document HTML, et il doit être à l'intérieur d'un élément <head>.

Carte d'image

Carte d'image est une image avec une zone cliquable spécifique et est définie via la balise map. Ces zones sont définies à l'aide de la balise <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 <img alt="Balises HTML utiles que vous pourriez ignorer (résumé)" > comme d'habitude, mais cette fois en utilisant l'attribut usemap.

<img src="study.jpg" alt="Workplace" usemap="#workmap">

Copier après la connexion

Créez ensuite une balise <map> et utilisez l'attribut img avec la même valeur que l'attribut usemap dans la balise name. Cela reliera la balise <image> à la balise map.

  <map name="workmap">

  </map>

Copier après la connexion

Ensuite, commencez à créer des zones cliquables. Nous devons définir comment dessiner chaque zone, généralement avec shape et coords.

`<area>`

<map name="workmap">
  <area shape="rect" coords="255,119,634,373" alt="book" href="book.html">
</map>

Copier après la connexion

Utilisez l'élément <area> pour définir des zones cliquables sur l'image. Il est ajouté à l'intérieur de l'élément map.

Ces propriétés incluent :

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).
alt est utilisé pour spécifier un texte alternatif à afficher lorsque l'élément area ne peut pas être rendu pour une raison quelconque.
href Contient une URL reliant une zone cliquable à une autre page
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 left, top, right, bottom.

Ici nous avons top, left coordonnées :

Balises HTML utiles que vous pourriez ignorer (résumé)

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 right, bottom :

Balises HTML utiles que vous pourriez ignorer (résumé)

Finissant par :

<img src="study.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="255,119,634,373" alt="book" href="book.html">
</map>

Copier après la connexion

D'autres formes peuvent également être utilisées, mais chacune Les coordonnées des formes sont écrites différemment.

Pour circle, il doit y avoir les coordonnées du centre du cercle puis ajouter le rayon :

<map name="workmap">
  <area shape="circle" coords="504,192,504" alt="clock" href="clock.html">
</map>

Copier après la connexion

Balises HTML utiles que vous pourriez ignorer (résumé)

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 poly revient plus à dessiner à main levée. Il vous suffit de relier différents points sur l'image et ils seront connectés :

<map name="workmap">
  <area shape="poly" coords="154,506,168,477,252,429,187,388,235,332,321,310,394,322,465,347,504,402,510,469512,532,454,581,423,585,319,593,255,589,240,536" alt="clock" href="clock.html">
</map>

Copier après la connexion

Balises HTML utiles que vous pourriez ignorer (résumé)

Voici les valeurs requises lors de la création d'une forme en HTML :

< td>

Forme	Coordonnées
rect

形状	Coordinates
rect	`left, top, right, bottom`
circle	`center-x, center-y, radius`
poly	`x1, y1, x2, y2, .….`
default	整个区域

cerclecentre-x, centre-y, rayonpolyx1, y1, x2, y2, ....par défaut< / td>La zone entière

`<abbr>` 和 `<dfn>`

标签 <dfn> 指定要在父元素中定义的术语。它代表“定义元素”。标签 <dfn> 的父级包含术语的定义或解释，而术语位于 <dfn> 内部。可以这样添加：

<p><dfn title="HyperText Markup Language">HTML</dfn> 
  Is the standard markup language for creating web pages.
</p>

Copier après la connexion

也可以与 <abbr> 结合使用：

<!DOCTYPE html>
<html>
<body>

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> 
  It&#39;s the standard markup language for creating web pages.</p>
</body>
</html>

Copier après la connexion

这可以增强可访问性，因为这样编写语义 HTML 可以使阅读器和浏览器在适合用户的上下文中解释页面上的内容。

也可以单独使用 <abbr>：

 <abbr title="Cascading Stylesheet">CSS</abbr>

Copier après la connexion

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></code> 和 <code><code></code></h2><p>预格式化的文本或 <code><pre class="brush:php;toolbar:false"></code> 标签用于在编写文本时显示文本（通常是代码）。它显示所有空格和制表符，并完全按照块中的格式进行设置。</p><pre class="xml hljs"> <pre class="brush:php;toolbar:false"> <code> p { color: black; font-family: Helvetica, sans-serif; font-size: 1rem; } </code> </pre><div class="contentsignin">Copier après la connexion</div></div></pre><h2 id="item-6"><code><fig> 和 `<figcaption>`

这两个标签通常会一起出现。<figcaption> 用作 <fig> 的标题。

 <fig>
  <img  src="https://images.unsplash.com/photo-1600618538034-fc86e9a679aa?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Balises HTML utiles que vous pourriez ignorer (résumé)" >
  <figcaption>basketball<figcaption/>
<fig>

Copier après la connexion

这些标签也可以与代码块、视频和音频一起使用，如下所示。

代码块：

 <figure>
  <pre class="brush:php;toolbar:false">
    <code>
      p {
          color: black;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>

Copier après la connexion

<figcaption>The code block

视频：

 <figure>
 <video src="ex-b.mov"></video>
 <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>

Copier après la connexion

音频：

 <figure>
    <audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
</audio>
  <figcaption>An audio file</figcaption>
</figure>

Copier après la connexion

`<details>` 和 `<summary>`

<details> 和 <summary> 用来创建一个可切换的部分。 <summary> 标签位于 <details> 标签内，单击后会自动显示和隐藏的内容。

最好用的地方是你可以用 CSS 去设置它们的样式，即使不依赖 JavaScript 也可以完美地工作。

 <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&#39;s happening externally. They enjoy spending time with just one or two people, rather than large groups or crowds</div>
    <div>        
</details>

Copier après la connexion

`<cite>` 和 `<blockquote>`

基本上 <blockquote> 是从另一个来源引用的部分。并添加了 <cite> 属性来指示源。

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

Copier après la connexion

如果使用 cite 属性，那么这个属性必须是指向源的有效 URL。要获得相应的引文链接，必须相对于元素的节点文档来解析属性的值。有时它们是私有的，例如调用服务器端脚本收集有关网站使用情况的统计信息。

`<cite>`

cite 元素表示作品或知识产权的标题，例如书籍、文章、论文、诗歌、歌曲等。

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

Copier après la connexion