Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
Freizeit
suchen
Deutsch
Inhaltsverzeichnis
HTML5 neue Attribute
1.1, Kontextmenü
1.2, contentEditable
1.3, das Attribut „hidden“ wird verwendet, um dieses Element auszublenden. Sobald dieses Attribut verwendet wird, wird das Element nicht im Browser angezeigt. 2 Boolesche Werte true gibt an, dass das Element sichtbar ist.
Gibt an, ob das Element gezogen werden kann 3 Aufzählung Wertewahre Vorschriften Elemente sind ziehbar.
Daten-*-Attribute ermöglichen Benutzern das Speichern von Daten in Form von benutzerdefinierten Attributen<span data-order -amount=100></span>Wert:

该属性默认是打开的。

1.11、novalidate不验证属性" ><input type="text" name="username" autocomplete="on/off" />

该属性默认是打开的。

1.11、novalidate不验证属性

1.12、multiple多选属性
Heim Web-Frontend HTML-Tutorial Hat HTML5 neue Attribute?

Hat HTML5 neue Attribute?

青灯夜游
青灯夜游
May 20, 2021 pm 03:51 PM
html5

html5 verfügt über neue Attribute wie Kontextmenü, Inhalt bearbeitbar, versteckt, ziehbar, „Daten-*“, Platzhalter, erforderlich, Muster, Autofokus, automatische Vervollständigung usw.

Hat HTML5 neue Attribute?

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

HTML5 neue Attribute

1.1, Kontextmenü

Die Funktion des Kontextmenüs besteht darin, das Rechtsklickmenü anzugeben. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="div1" style="height:900px; background: lightgreen;" contextmenu="menuShare">
        </div>
        <menu id="menuShare" type="context">
            <menuitem label="分享到QQ空间" onclick="alert(&#39;QQ&#39;);"></menuitem>
            <menuitem label="分享到朋友圈" onclick="alert(&#39;朋友圈&#39;);"></menuitem>
            <menuitem label="分享到微博" onclick="alert(&#39;微博&#39;);"></menuitem>
        </menu>
    </body>
</html>
Nach dem Login kopieren

Laufeffekt:

contextmenu In HTML5 hat jedes Element ein neues Attribut: contextmenu ist das Kontextmenü, d. h. ein Menü erscheint, wenn Sie mit der rechten Maustaste auf das Element klicken.
Menü Um zu erkennen, dass ein Menü angezeigt wird, wenn Sie mit der rechten Maustaste auf ein Element klicken, müssen Sie auch ein weiteres neues Element in HTML5 verstehen: Menü. Wie der Name schon sagt, definiert Menü das Menüelementattribut: Typ: Menütypattribut. Es gibt drei Werte: 1) Kontext: Kontext; 3) Liste: Liste

kann Menüelemente einzeln einbetten ist < ;/menuitem>.
menuitem-Attribute:
label: der vom Menüelement angezeigte Name
icon: das auf der linken Seite des Menüelements angezeigte Symbol
onclick: das durch Klicken auf das Menüelement ausgelöste Ereignis

1.2, contentEditable

gibt an, ob Der Inhalt des Elements kann bearbeitet werden

Attributwert:
true -----Der Inhalt des Elements kann bearbeitet werden
false -----Der Inhalt des Elements kann nicht bearbeitet werden
inherit -----Inherit das contenteditable-Attribut des übergeordneten Elements
Wenn es sich um eine leere Zeichenfolge handelt, ist der Effekt derselbe wie bei True Consistent.
Wenn der contenteditable-Status eines Elements „true“ ist (das contenteditable-Attribut ist eine leere Zeichenfolge oder „true“ oder „vererbt“ ist und der Status seines übergeordneten Elements „true“ ist), bedeutet dies, dass das Element bearbeitbar ist. Andernfalls kann das Element nicht bearbeitet werden.

document.body.contentEditable=true; Sie können die veröffentlichte Website ändern

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>contentEditable属性</title>
    </head>
    <body>
        <h2>contentEditable属性</h2>
        <div contenteditable="true">
            Hello contentEditable
        </div>
    </body>
</html>
Nach dem Login kopieren

1.3, das Attribut „hidden“ wird verwendet, um dieses Element auszublenden. Sobald dieses Attribut verwendet wird, wird das Element nicht im Browser angezeigt. 2 Boolesche Werte true gibt an, dass das Element sichtbar ist.

false gibt an, dass das Element unsichtbar ist. 

        <div hidden="hidden">
            Hello Hidden
        </div>
Nach dem Login kopieren

Um mit einigen Browsern (IE8) kompatibel zu sein, die dieses Attribut nicht unterstützen, können Sie CSS die folgenden Stile hinzufügen: 
*[hidden]{
   display: none;
}
Nach dem Login kopieren
var p1=document.querySelector("body #p1");
p1.innerHTML+=" +++";
Nach dem Login kopieren

1.4, ziehbar

Gibt an, ob das Element gezogen werden kann 3 Aufzählung Wertewahre Vorschriften Elemente sind ziehbar.

false gibt an, dass das Element nicht ziehbar ist.

auto verwendet die Standardfunktionen des Browsers.

Beispiel: 

<!DOCTYPE html><html>

    <head>
        <meta charset="utf-8">
        <script src="Scripts/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>    
        <title></title>
        <style>
            #p1,
            #p3 {
                height: 200px;
                width: 200px;
                border: 1px solid #00f;
                margin-bottom: 10px;
            }
            #p2 {
                height: 100px;
                width: 100px;
                background: yellow;
            }
        </style>
        <script>
            var p1, p2, p3, msg;
            window.onload = function() {
                p1 = document.getElementById("p1");
                p2 = document.getElementById("p2");
                p3 = document.getElementById("p3");
                msg = document.getElementById("msg");
                
                p2.ondragstart=function(){
                    msg.innerHTML+="p2开始拖动了<br/>";
                }
                p2.ondrag=function(){
                    msg.innerHTML+="拖动中<br/>";
                }
                p2.ondragend=function(){
                    msg.innerHTML+="拖动结束<br/>";
                }
                
                p1.ondragover = function(e) {
                    e.preventDefault();
                }
                p1.ondrop = function(e) {
                    p1.appendChild(p2);
                }
                p3.ondragover = function(e) {
                    e.preventDefault();
                }
                p3.ondrop = function(e) {
                    p3.appendChild(p2);
                }
                
                $("#p1").data("name","电池");
                alert($("#p1").data("name"));
                
                p1.setAttribute("data-order-price",998.7);
                alert(p1.getAttribute("data-order-price"));
            }        </script>
    </head>

    <body>
        <p id="p1" data-order-price="98.5" data-name="充电宝"></p>
        <p id="p3"></p>
        <p id="p2" draggable="true"></p>
        <h3 id="msg"></h3>
    </body></html>
Nach dem Login kopieren

Laufergebnisse: 

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title></head><body>
    <p style="height: 300px; background: lightgoldenrodyellow;"  ondrop="ondropEvent(event)" ondragover="ondragoverEvent(event)"></p>
    <img src="img/x.png" width="200" draggable="true" ondragstart="ondragstartEvent(event)"/>
    <img src="img/tv.png" width="200" draggable="true" ondragstart="ondragstartEvent(event)"/>
    <script>
        var target;        function ondragstartEvent(e){
            target=e.target;            //记住当前被拖动的对象            console.log(e.target);
        }        function ondropEvent(e){
            e.preventDefault();
            e.target.appendChild(target);

        }        function ondragoverEvent(e){
            e.preventDefault();
        }    </script></body></html>
Nach dem Login kopieren

1.5, Daten-*

Daten-*-Attribute ermöglichen Benutzern das Speichern von Daten in Form von benutzerdefinierten AttributenWert:

getAttribute('data-order-amount')

dataset.orderAmount
Auf die data()-Methode in jQuery kann auch zugegriffen werden

Verwenden Sie jQuery und Javascript zum Hinzufügen und Abrufen Datenattributbeispiel: 

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>data-*</title>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h2>data-*</h2>
        <p id="p1" data-student-name="Tom" data-stu=&#39;{"a":1,"b":2}&#39;></p>
        <button onclick="addData()">添加数据</button>
        <button onclick="getData()">获取数据</button>
        <script type="text/javascript">
            var p1=document.getElementById("p1");            function addData()
            {                //给p1添加属性data-student-name，值为rose                p1.setAttribute("data-student-name","Rose");
                $("#p1").data("stu-mark","99分");
            }            function getData()
            {                //原生JavaScript
                //alert(p1.getAttribute("data-student-name"));
                
                //jQuery                alert($("#p1").data("student-name"));
                alert($("#p1").data("stu").a);
                alert($("#p1").data("stu-mark"));
            }            
            
            var x="{a:1}";
            alert(eval("("+x+")").a);        </script>
    </body></html>
Nach dem Login kopieren

Laufeffekt:

1.6, Platzhalterattribut

Dies ist ein sehr praktisches Attribut, das die Verwendung von JS zum Löschen des Anfangswerts des Formulars überflüssig macht auch verfügbar Ja, neben Firefox können es auch andere Standardbrowser gut unterstützen

            <p>
                <label>邮箱：</label>
                <input type="email" name="mail" id="mail" value="" placeholder="请输入邮箱"/>
            </p>
Nach dem Login kopieren


1.7, erforderliches erforderliches Attribut

Constraint-Tabelleneinheit wird übermittelt Zuvor muss ein Wert eingegeben werden. 

            <p>
                <label>博客：</label>
                <input type="url" name="blog" id="blog" value="" required="required"/>
            </p>
Nach dem Login kopieren

1.8, reguläres Musterattribut

schränkt den vom Benutzer eingegebenen Wert so ein, dass er mit dem regulären Ausdruck übereinstimmt. 

            <p>
                <label>帐号：</label>
                <input type="text" required="required" pattern="^[0-9a-zA-Z]{6,16}$" />请输入a-zA-Z0-9且长度6-16位的字符            
                </p>
Nach dem Login kopieren

1.9, Autofokus-Automatikfokus-Attribut

            <p>
                <label>博客：</label>
                <input type="url" name="blog" id="blog" value="" required="required" autofocus="autofocus"/>
            </p>
Nach dem Login kopieren
ermöglicht, dass das angegebene Formularelement den Fokus erhält.

1.10, Attribut zur automatischen Vervollständigung

Wenn die Funktion zur automatischen Vervollständigung für ein Formularelement festgelegt ist, wird der vom Benutzer eingegebene Inhalt aufgezeichnet und beim Doppelklicken werden historische Eingaben angezeigt Formularelement.

该属性默认是打开的。

1.11、novalidate不验证属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

<form action="demo_form.asp" method="get" novalidate="true">
<button formnovalidate="formnovalidate" >提交</button>
Nach dem Login kopieren

1.12、multiple多选属性

multiple 属性规定输入域中可选择多个内容，如：email 和 file

<input type="file" multiple="multiple” />

            <p>
                <label>相片：</label>
                <input type="file" multiple="multiple"/>
            </p>
Nach dem Login kopieren



    
        
        HTML5新的表单元素
    

    
        
HTML5新的表单元素

        

            

                
                
            

            <p>
                <label>相片：</label>
                <input type="file" multiple="multiple"/>
            </p>
            

                
                请输入a-zA-Z0-9且长度6-16位的字符            

            <p>
                <label>邮箱：</label>
                <input type="email" name="mail" id="mail" value="" placeholder="请输入邮箱"/>
            </p>
            <p>
                <label>博客：</label>
                <input type="url" name="blog" id="blog" value="" required="required" autofocus="autofocus"/>
            </p>
Nach dem Login kopieren

推荐教程：html视频教程

Das obige ist der detaillierte Inhalt vonHat HTML5 neue Attribute?. 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

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Mehr anzeigen

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle -Lösung
2 Wochen vor By DDD
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?
7465
15
CakePHP-Tutorial
1376
52
Wie lautet das Format des Kontonamens von Steam?
77
11
Win11 -Aktivierungsschlüssel dauerhaft
45
19
NYT -Verbindungen Hinweise und Antworten
18
19
Mehr anzeigen
Related knowledge
Tabellenrahmen in HTML 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 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 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 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 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 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 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 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

Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

Über uns Haftungsausschluss Sitemap

© php.cn All rights reserved