Welche neuen globalen Attribute werden zu HTML5 hinzugefügt?-Front-End-Fragen und Antworten-php.cn

Welche neuen globalen Attribute werden zu HTML5 hinzugefügt?

WBOY

Freigeben： 2021-12-21 14:36:30

Original

2421 Leute haben es durchsucht

Attribute: 1. Attribut „contenteditable“; 3. Attribut „data-*“ 5. Attribut „versteckt“;

Welche neuen globalen Attribute werden zu HTML5 hinzugefügt?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, HTML5-Version, Dell G3-Computer.

Welche neuen globalen Attribute werden zu HTML5 hinzugefügt?

In HTML sind globale Attribute Attribute, die mit allen HTML-Elementen verwendet werden können.

In HTML5 gibt es acht neue globale Attribute. Schauen wir uns die einzelnen unten an.

1. contenteditable-Attribut

Das contenteditable-Attribut gibt an, ob der Elementinhalt bearbeitet werden kann.

Hinweis: Wenn das contenteditable-Attribut in einem Element nicht festgelegt ist, erbt das Element vom übergeordneten Element.

Die Syntax lautet:

<element contenteditable="true|false">

Nach dem Login kopieren

Das Beispiel lautet wie folgt:

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

Nach dem Login kopieren

Ausgabeergebnis:

Welche neuen globalen Attribute werden zu HTML5 hinzugefügt?

2. contextmenu-Attribut

Derzeit unterstützt nur der Firefox-Browser das contextmenu-Attribut. Das Attribut

contextmenu gibt das Kontextmenü des Elements an. Ein Kontextmenü wird angezeigt, wenn der Benutzer mit der rechten Maustaste auf ein Element klickt. Der Wert des Attributs /p>

contextmenu ist die ID des

-Elements, das geöffnet werden muss.

Syntax:

<element contextmenu="menu_id">

Nach dem Login kopieren

Beispiele sind wie folgt:

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

Nach dem Login kopieren

3. „data-*“-Attribute

Alle gängigen Browser unterstützen data-*-Attribute.

data-*-Attribute werden zum Speichern benutzerdefinierter Daten verwendet, die hinter privaten Seiten angewendet werden.

data-*-Attribute können Daten in alle HTML-Elemente einbetten.

Benutzerdefinierte Daten können der Seite ein besseres interaktives Erlebnis verleihen (keine Notwendigkeit, Ajax zu verwenden oder Daten auf dem Server abzufragen).

data-*-Attribute bestehen aus den folgenden zwei Teilen:

Der Attributname sollte keine Großbuchstaben enthalten und nach data- muss mindestens ein Zeichen stehen. Dieses Attribut kann eine beliebige Zeichenfolge sein

Hinweis: Das benutzerdefinierte Attributpräfix „data-“ wird vom Client ignoriert.

Die Syntax lautet:

<element data-*="somevalue">

Nach dem Login kopieren

Das Beispiel lautet wie folgt:

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

Nach dem Login kopieren

4. Das ziehbare Attribut gibt an, ob das Element gezogen werden kann.

Tipp: Links und Bilder sind standardmäßig ziehbar.

Die Syntax lautet:

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

Nach dem Login kopieren

Das Beispiel lautet wie folgt:

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

Nach dem Login kopieren

Ausgabeergebnis:

Welche neuen globalen Attribute werden zu HTML5 hinzugefügt? 5. Kein Mainstream-Browser unterstützt das Dropzone-Attribut.

Das Dropzone-Attribut gibt an, ob die gezogenen Daten kopiert, verschoben oder verknüpft werden, wenn sie auf dem Element abgelegt werden. Die Syntax lautet:

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

Nach dem Login kopieren

Das Beispiel lautet wie folgt:

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

Nach dem Login kopieren

6. verstecktes Attribut

hidden-Attribut gibt an, dass das Element ausgeblendet ist.

Versteckte Elemente werden nicht angezeigt. Wenn dieses Attribut verwendet wird, wird das Element ausgeblendet.

Sie können das versteckte Attribut so festlegen, dass Benutzer ein Element nur sehen können, wenn bestimmte Bedingungen erfüllt sind (z. B. das Aktivieren eines Kontrollkästchens usw.). Anschließend können Sie mithilfe von JavaScript das ausgeblendete Attribut entfernen und das Element sichtbar machen.

Die Syntax lautet:

<element hidden>

Nach dem Login kopieren

Das Beispiel lautet wie folgt:

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

Nach dem Login kopieren

Ausgabeergebnis:

7. Rechtschreibprüfungsattribut

Welche neuen globalen Attribute werden zu HTML5 hinzugefügt? Das Rechtschreibprüfungsattribut gibt an, ob eine Rechtschreibprüfung für den Elementinhalt durchgeführt werden soll.

Der folgende Text kann einer Rechtschreibprüfung unterzogen werden: Der Wert im Eingabeelement vom Typ Text (kein Passwort) Der Wert im Textbereichselement Der Wert im bearbeitbaren Element

Syntax

<element spellcheck="true|false">

Nach dem Login kopieren

Beispiele sind wie folgt:

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

Nach dem Login kopieren

Ausgabeergebnis:

8. Translate-Attribut

Welche neuen globalen Attribute werden zu HTML5 hinzugefügt? Derzeit unterstützt kein Mainstream-Browser das Translate-Attribut. Das

translate-Attribut gibt an, ob der Elementinhalt übersetzt werden soll. Test: Verwenden Sie das Google Übersetzer-Tool, um zu sehen, wie das folgende Wort „Eiscreme“ wird:

Hier verwenden wir Translate="no": Eiscreme.

Hier verwenden wir Class="notranslate": Eiscreme .

Tipps: Verwenden Sie stattdessen class="notranslate".

Grammatik

<element translate="yes|no">

Nach dem Login kopieren

Beispiele sind wie folgt:

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

Nach dem Login kopieren

Empfohlenes Tutorial: „

HTML-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonWelche neuen globalen Attribute werden zu HTML5 hinzugefügt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!