< ;/menuitem>. 1.2, contentEditable gibt an, ob Der Inhalt des Elements kann bearbeitet werden Attributwert:
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
*[hidden]{
display: none;
} Nach dem Login kopieren
var p1=document.querySelector("body #p1");
p1.innerHTML+=" +++"; Nach dem Login kopieren
Gibt an, ob das Element gezogen werden kann 3 Aufzählung Werte wahre Vorschriften Elemente sind ziehbar. false gibt an, dass das Element nicht ziehbar ist. auto verwendet die Standardfunktionen des Browsers.
<!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
<!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 Attributen getAttribute('data-order-amount')dataset.orderAmount
<!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='{"a":1,"b":2}'></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
1.6, Platzhalterattribut
<p>
<label>邮箱：</label>
<input type="email" name="mail" id="mail" value="" placeholder="请输入邮箱"/>
</p> Nach dem Login kopieren
<p>
<label>博客：</label>
<input type="url" name="blog" id="blog" value="" required="required"/>
</p> Nach dem Login kopieren
1.8, reguläres Musterattribut
<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
1.10, Attribut zur automatischen Vervollständigung
该属性默认是打开的。
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新的表单元素
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!
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
Der Unterschied zwischen HTML und HTML5
So implementieren Sie Farbschriftarten in CSS
Festplattenwiederherstellungsdaten
So aktivieren Sie den sekundären Anmeldedienst
So implementieren Sie Instant Messaging im Frontend
JS-Array-Sortierung: Methode sort()
Der Geschwindigkeitsunterschied zwischen USB2.0 und 3.0
