溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關html5中有什么新屬性的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
html5有新屬性，例contextmenu、contentEditable、hidden、draggable、“data-*”、placeholder、required、pattern、autofocus、autocomplete等等。
本教程操作環境：windows7系統、HTML5版、Dell G3電腦。
contextmenu的作用是指定右鍵菜單。
<!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('QQ');"></menuitem>
<menuitem label="分享到朋友圈" onclick="alert('朋友圈');"></menuitem>
<menuitem label="分享到微博" onclick="alert('微博');"></menuitem>
</menu>
</body>
</html>運行效果：
contextmenu 在Html5中，每個元素新增了一個屬性：contextmenu, contextmenu 是上下文菜單，即鼠標右擊元素會出現一個菜單。
menu 要實現鼠標右擊元素會出現一個菜單，還必須了解HTML5里新增的另一個元素:menu 顧名思義menu是定義菜單的， menu 元素屬性： type ：菜單類型屬。 有三個值 1）context：上下文； 2）toolbar：工具欄；3）list：列表
<menuitem>
<menu> </menu>內部可以嵌入一個一個菜單項，即<menuitem></menuitem>。
menuitem 屬性：
label：菜單項顯示的名稱
icon：在菜單項左側顯示的圖標
onclick：點擊菜單項觸發的事件
規定是否可編輯元素的內容
屬性值：
true -----可以編輯元素的內容
false -----無法編輯元素的內容
inherit -----繼承父元素的contenteditable屬性
當為空字符串時，效果和true一致。
當一個元素的contenteditable狀態為true（contenteditable屬性為空字符串，或為true，或為inherit且其父元素狀態為true）時，意味著該元素是可編輯的。否則，該元素不可編輯。
document.body.contentEditable=true; 可以修改已發布網站
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>contentEditable屬性</title> </head> <body> <h3>contentEditable屬性</h3> <div contenteditable="true"> Hello contentEditable </div> </body> </html>
hidden屬性用于隱藏該元素。一旦使用了此屬性，則該元素就不會在瀏覽器中被顯示
2個布爾值
true 規定元素是可見。
false 規定元素是不可見。
<div hidden="hidden"> Hello Hidden </div>
為了兼容一些不支持該屬性的瀏覽器（IE8），可以在CSS中加如下樣式：
*[hidden]{
display: none;
}var p1=document.querySelector("body #p1");
p1.innerHTML+=" +++";規定元素是否可拖拽
3個枚舉值
true 規定元素是可拖動的。
false 規定元素是不可拖動的。
auto 使用瀏覽器的默認特性。
示例：
<!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>
<h4 id="msg"></h4>
</body></html>運行結果：
<!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>
data-*屬性能讓用戶自定義屬性的方式來存儲數據
<span data-order-amount=100></span>
取值：
getAttribute('data-order-amount')
dataset.orderAmount
jQuery中的data()方法同樣可以訪問
使用jQuery與javascript添加與獲取data屬性示例：
<!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>
<h3>data-*</h3>
<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>運行效果：
這是一個很實用的屬性,免去了用JS去實現點擊清除表單初始值.瀏覽器支持也還不錯,除了Firefox,其他標準瀏覽器都能很好的支持
<input placeholder="請輸入用戶名">
<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"/> </p>
約束用戶輸入的值必須與正則表達式匹配。
<p>
<label>帳號：</label>
<input type="text" required="required" pattern="^[0-9a-zA-Z]{6,16}$" />請輸入a-zA-Z0-9且長度6-16位的字符
</p>
<p> <label>博客：</label> <input type="url" name="blog" id="blog" value="" required="required" autofocus="autofocus"/> </p>
讓指定的表單元素獲得焦點。
當表單元素設置了自動完成功能后，會記錄用戶輸入過的內容，雙擊表單元素會顯示歷史輸入。
<input type="text" name="username" autocomplete="on/off" />
該屬性默認是打開的。
novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。
<form action="demo_form.asp" method="get" novalidate="true"> <button formnovalidate="formnovalidate" >提交</button>
multiple 屬性規定輸入域中可選擇多個內容，如：email 和 file
<input type="file" multiple="multiple” />
<p> <label>相片：</label> <input type="file" multiple="multiple"/> </p>
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>HTML5新的表單元素</title>
</head>
<body>
<h3>HTML5新的表單元素</h3>
<form>
<p>
<label>姓名：</label>
<input type="text" required="required"/>
</p>
<p>
<label>相片：</label>
<input type="file" multiple="multiple"/>
</p>
<p>
<label>帳號：</label>
<input type="text" name="username" autocomplete="on" required="required" pattern="^[0-9a-zA-Z]{6,16}$" />請輸入a-zA-Z0-9且長度6-16位的字符 </p>
<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>
<p>
<label>生日：</label>
<input type="date">
</p>
<p>
<label>身高：</label>
<input type="number" max="226" min="80" step="10" value="170" />
</p>
<p>
<label>膚色：</label>
<input type="color" onchange="document.bgColor=this.value" />
</p>
<p>
<label>體重：</label>
<input type="range" max="500" min="30" step="5" value="65" onchange="showValue(this.value)"/>
<span id="rangeValue"></span>
</p>
<button formnovalidate="formnovalidate">提交</button>
<script type="text/javascript">
function showValue(val){
document.getElementById("rangeValue").innerHTML=val;
} </script>
</form>
</body></html>感謝各位的閱讀！關于“html5中有什么新屬性”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
