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

Inhaltsverzeichnis

物种

Heim

Web-Frontend

Front-End-Fragen und Antworten

Welche neuen globalen Attribute werden zu HTML5 hinzugefügt?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 21, 2021 pm 02:36 PM

html

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 id="物种">物种</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!

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

4 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

3 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

4 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

1 Monate vor By DDD

Wie kann ich KB5055523 in Windows 11 nicht installieren?

2 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7719

Java-Tutorial

1641

CakePHP-Tutorial

1396

Laravel-Tutorial

1289

PHP-Tutorial

1233

Related knowledge

Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles