Maison  >  Article  >  interface Web  >  Balises HTML utiles que vous pourriez ignorer (résumé)

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

青灯夜游
青灯夜游avant
2021-02-13 08:59:562873parcourir

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

Recommandé : tutoriel HTML

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&#39;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 alt="Balises HTML utiles que vous pourriez ignorer (résumé)" > comme d'habitude, mais cette fois en utilisant l'attribut <code>usemap.

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

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.

<code><area>

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

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 :

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

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

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

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

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

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

Forme Coordonnées
rect
形状 Coordinates
rect <code>left, top, right, bottom
circle <code>center-x, center-y, radius
poly <code>x1, y1, x2, y2, .….
default 整个区域
cercle <code>centre-x, centre-y, rayon poly <code>x1, y1, x2, y2, .... par défaut La zone entière

<code><abbr></abbr> 和 <code><dfn></dfn>

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

<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&#39;s the standard markup language for creating web pages.</p>
</body>
</html>

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

也可以单独使用 <code><abbr></abbr>:

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

<code><pre class="brush:php;toolbar:false"></pre> 和  <code><code>

预格式化的文本或 <code><pre class="brush:php;toolbar:false"></pre> 标签用于在编写文本时显示文本(通常是代码)。它显示所有空格和制表符,并完全按照块中的格式进行设置。

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

<code><fig></fig> 和  <code><figcaption></figcaption>

这两个标签通常会一起出现。<code><figcaption></figcaption> 用作 <code><fig></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>

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

代码块

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

视频

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

音频

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

<code><details></details> 和 <code><summary></summary>

<code><details></details> 和 <code><summary></summary> 用来创建一个可切换的部分。 <code><summary></summary> 标签位于 <code><details></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>

<code><cite></cite> 和 <code><blockquote></blockquote>

基本上 <code><blockquote></blockquote> 是从另一个来源引用的部分。并添加了 <code><cite></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>

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

<code><cite></cite>

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

总结

我们应该更多地关注这些标记,并通过编写更多的语义代码来改善网站的功能。

更多编程相关知识,请访问:编程教学!!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer