Quels nouveaux attributs globaux sont ajoutés au HTML5 ?-Questions et réponses frontales-php.cn

Quels nouveaux attributs globaux sont ajoutés au HTML5 ?

WBOY

Libérer： 2021-12-21 14:36:30

original

2375 Les gens l'ont consulté

Attributs : 1. attribut contenteditable ; 2. attribut de menu contextuel ; 3. attribut "data-*" ; 4. attribut draggable ; 6. attribut caché ; 7. attribut de vérification orthographique ;

Quels nouveaux attributs globaux sont ajoutés au HTML5 ?

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur Dell G3.

Quels nouveaux attributs globaux sont ajoutés au HTML5 ?

En HTML, les attributs globaux sont des attributs qui peuvent être utilisés avec tous les éléments HTML.

En HTML5, il existe huit nouveaux attributs globaux. Examinons chacun d'eux ci-dessous.

1. Attribut contenteditable

L'attribut contenteditable spécifie si le contenu de l'élément est modifiable.

Remarque : lorsque l'attribut contenteditable n'est pas défini dans un élément, l'élément héritera de l'élément parent.

La syntaxe est :

<element contenteditable="true|false">

Copier après la connexion

L'exemple est le suivant :

<html>
<head> 
<meta charset="utf-8"> 
<title>123</title> 
</head>
<body>
<p contenteditable="true">这是一个段落。是可编辑的。尝试修改文本。</p>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Quels nouveaux attributs globaux sont ajoutés au HTML5 ?

2. Attribut de menu contextuel

Actuellement, seul le navigateur Firefox prend en charge l'attribut de menu contextuel. L'attribut

contextmenu spécifie le menu contextuel de l'élément. Un menu contextuel apparaîtra lorsque l'utilisateur clique avec le bouton droit sur un élément. La valeur de l'attribut /p>

contextmenu est l'identifiant de l'élément

qui doit être ouvert.

Syntaxe :

<element contextmenu="menu_id">

Copier après la connexion

Les exemples sont les suivants :

<body>
<p contextmenu="supermenu">本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。</p>  
<menu id="supermenu">
  <command label="Step 1: Write Tutorial" onclick="doSomething()">
  <command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
</menu>
<p><b>注意：</b>目前的主流浏览器都不支持 contextmenu 属性。</p>
</body>

Copier après la connexion

3. Attributs "data-*"

Tous les principaux navigateurs prennent en charge les attributs data-*. Les attributs

data-* sont utilisés pour stocker des données personnalisées appliquées derrière des pages privées. Les attributs

data-* peuvent intégrer des données dans tous les éléments HTML.

Les données personnalisées peuvent donner à la page une meilleure expérience interactive (pas besoin d'utiliser Ajax ou d'interroger des données sur le serveur). Les attributs

data-* se composent des deux parties suivantes :

Le nom de l'attribut ne doit pas contenir de lettres majuscules et il doit y avoir au moins un caractère après data-. Cet attribut peut être n'importe quelle chaîne

Remarque : le préfixe d'attribut personnalisé "data-" sera ignoré par le client.

La syntaxe est :

<element data-*="somevalue">

Copier après la connexion

L'exemple est le suivant :

<script>
function showDetails(animal)
{
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>
<h1>物种</h1>
<p>点击一个物种，看看它是什么类型：</p>
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>
</body>

Copier après la connexion

4. Attribut draggable

L'attribut draggable spécifie si l'élément peut être déplacé.

Astuce : les liens et les images peuvent être déplacés par défaut.

La syntaxe est :

<element draggable="true|false|auto">

Copier après la connexion

L'exemple est le suivant :

<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
</body>

Copier après la connexion

Résultat de sortie :

Quels nouveaux attributs globaux sont ajoutés au HTML5 ?

5. Attribut dropzone

Aucun navigateur grand public ne prend en charge l'attribut dropzone.

L'attribut dropzone spécifie si les données glissées sont copiées, déplacées ou liées lorsqu'elles sont déposées sur l'élément.

La syntaxe est :

<element dropzone="copy|move|link">

Copier après la connexion

L'exemple est le suivant :

<div dropzone="copy"></div>

Copier après la connexion

6 attribut caché

l'attribut caché spécifie que l'élément est masqué.

Les éléments masqués ne seront pas affichés.

Si cet attribut est utilisé, l'élément sera masqué.

Vous pouvez définir l'attribut masqué afin que les utilisateurs ne puissent voir un élément que lorsque certaines conditions sont remplies (comme cocher une case, etc.). Vous pouvez ensuite utiliser JavaScript pour supprimer l'attribut masqué, rendant ainsi l'élément visible.

La syntaxe est :

<element hidden>

Copier après la connexion

L'exemple est le suivant :

<body>
<p hidden="hidden">这是一段隐藏的段落。</p>
<p>这是一段可见的段落。</p>
</body>

Copier après la connexion

Résultat de sortie :

Quels nouveaux attributs globaux sont ajoutés au HTML5 ?

7. Attribut de vérification orthographique

L'attribut de vérification orthographique spécifie s'il faut effectuer une vérification orthographique sur le contenu de l'élément.

Le texte suivant peut être vérifié orthographiquement :

La valeur dans l'élément d'entrée de type texte (pas de mot de passe) La valeur dans l'élément textarea La valeur dans l'élément modifiable

Syntaxe

<element spellcheck="true|false">

Copier après la connexion

Les exemples sont les suivants :

<body>
<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>
First name: <input type="text" name="fname" spellcheck="true">
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本不支持 spellcheck 属性。</p>
</body>

Copier après la connexion

Résultat de sortie :

Quels nouveaux attributs globaux sont ajoutés au HTML5 ?

8. attribut de traduction

Actuellement, aucun navigateur grand public ne prend en charge l'attribut de traduction. L'attribut

translate spécifie si le contenu de l'élément doit être traduit.

Test : utilisez l'outil Google Translate pour voir ce que deviendra le mot suivant "ice cream" :

Ici, nous utilisons translation="no": ice cream.

Ici, nous utilisons class="notranslate": ice cream .

Conseils : utilisez plutôt class="notranslate".

Grammar

<element translate="yes|no">

Copier après la connexion

Les exemples sont les suivants :

<p translate="no">这个段落不能翻译。</p>
<p>这个段落可以被翻译</p>

Copier après la connexion

Tutoriel recommandé : "Tutoriel vidéo HTML"

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Quels nouveaux attributs globaux sont ajoutés au HTML5 ?