suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >Welche neuen globalen Attribute werden zu HTML5 hinzugefügt?

Welche neuen globalen Attribute werden zu HTML5 hinzugefügt?

WBOY
WBOYOriginal
2021-12-21 14:36:302500Durchsuche

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

Das Beispiel lautet wie folgt: 

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

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

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>

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

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>

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

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>

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

Das Beispiel lautet wie folgt: 

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

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>

Das Beispiel lautet wie folgt: 

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

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

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>

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

Beispiele sind wie folgt:

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

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ist das s-Tag neu in HTML5?Nächster Artikel：Ist das s-Tag neu in HTML5?

In Verbindung stehende Artikel

Mehr sehen