溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)html5中有什么新屬性的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
html5有新屬性，例contextmenu、contentEditable、hidden、draggable、“data-*”、placeholder、required、pattern、autofocus、autocomplete等等。
本教程操作環(huán)境：windows7系統(tǒng)、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>運(yùn)行效果：
contextmenu 在Html5中，每個(gè)元素新增了一個(gè)屬性：contextmenu, contextmenu 是上下文菜單，即鼠標(biāo)右擊元素會(huì)出現(xiàn)一個(gè)菜單。
menu 要實(shí)現(xiàn)鼠標(biāo)右擊元素會(huì)出現(xiàn)一個(gè)菜單，還必須了解HTML5里新增的另一個(gè)元素:menu 顧名思義menu是定義菜單的， menu 元素屬性： type ：菜單類型屬。 有三個(gè)值 1）context：上下文； 2）toolbar：工具欄；3）list：列表
<menuitem>
<menu> </menu>內(nèi)部可以嵌入一個(gè)一個(gè)菜單項(xiàng)，即<menuitem></menuitem>。
menuitem 屬性：
label：菜單項(xiàng)顯示的名稱
icon：在菜單項(xiàng)左側(cè)顯示的圖標(biāo)
onclick：點(diǎn)擊菜單項(xiàng)觸發(fā)的事件
規(guī)定是否可編輯元素的內(nèi)容
屬性值：
true -----可以編輯元素的內(nèi)容
false -----無(wú)法編輯元素的內(nèi)容
inherit -----繼承父元素的contenteditable屬性
當(dāng)為空字符串時(shí)，效果和true一致。
當(dāng)一個(gè)元素的contenteditable狀態(tài)為true（contenteditable屬性為空字符串，或?yàn)閠rue，或?yàn)閕nherit且其父元素狀態(tài)為true）時(shí)，意味著該元素是可編輯的。否則，該元素不可編輯。
document.body.contentEditable=true; 可以修改已發(fā)布網(wǎng)站
<!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屬性用于隱藏該元素。一旦使用了此屬性，則該元素就不會(huì)在瀏覽器中被顯示
2個(gè)布爾值
true 規(guī)定元素是可見(jiàn)。
false 規(guī)定元素是不可見(jiàn)。
<div hidden="hidden"> Hello Hidden </div>
為了兼容一些不支持該屬性的瀏覽器（IE8），可以在CSS中加如下樣式：
*[hidden]{
display: none;
}var p1=document.querySelector("body #p1");
p1.innerHTML+=" +++";規(guī)定元素是否可拖拽
3個(gè)枚舉值
true 規(guī)定元素是可拖動(dòng)的。
false 規(guī)定元素是不可拖動(dòng)的。
auto 使用瀏覽器的默認(rèn)特性。
示例：
<!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開(kāi)始拖動(dòng)了<br/>";
}
p2.ondrag=function(){
msg.innerHTML+="拖動(dòng)中<br/>";
}
p2.ondragend=function(){
msg.innerHTML+="拖動(dòng)結(jié)束<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>運(yùn)行結(jié)果：
<!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; //記住當(dāng)前被拖動(dòng)的對(duì)象 console.log(e.target);
} function ondropEvent(e){
e.preventDefault();
e.target.appendChild(target);
} function ondragoverEvent(e){
e.preventDefault();
} </script></body></html>
data-*屬性能讓用戶自定義屬性的方式來(lái)存儲(chǔ)數(shù)據(jù)
<span data-order-amount=100></span>
取值：
getAttribute('data-order-amount')
dataset.orderAmount
jQuery中的data()方法同樣可以訪問(wèn)
使用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()">添加數(shù)據(jù)</button>
<button onclick="getData()">獲取數(shù)據(jù)</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>運(yùn)行效果：
這是一個(gè)很實(shí)用的屬性,免去了用JS去實(shí)現(xiàn)點(diǎn)擊清除表單初始值.瀏覽器支持也還不錯(cuò),除了Firefox,其他標(biāo)準(zhǔn)瀏覽器都能很好的支持
<input placeholder="請(qǐng)輸入用戶名">
<p> <label>郵箱：</label> <input type="email" name="mail" id="mail" value="" placeholder="請(qǐng)輸入郵箱"/> </p>
約束表單元在提交前必須輸入值。
<p> <label>博客：</label> <input type="url" name="blog" id="blog" value="" required="required"/> </p>
約束用戶輸入的值必須與正則表達(dá)式匹配。
<p>
<label>帳號(hào)：</label>
<input type="text" required="required" pattern="^[0-9a-zA-Z]{6,16}$" />請(qǐng)輸入a-zA-Z0-9且長(zhǎng)度6-16位的字符
</p>
<p> <label>博客：</label> <input type="url" name="blog" id="blog" value="" required="required" autofocus="autofocus"/> </p>
讓指定的表單元素獲得焦點(diǎn)。
當(dāng)表單元素設(shè)置了自動(dòng)完成功能后，會(huì)記錄用戶輸入過(guò)的內(nèi)容，雙擊表單元素會(huì)顯示歷史輸入。
<input type="text" name="username" autocomplete="on/off" />
該屬性默認(rèn)是打開(kāi)的。
novalidate 屬性規(guī)定在提交表單時(shí)不應(yīng)該驗(yàn)證 form 或 input 域。
<form action="demo_form.asp" method="get" novalidate="true"> <button formnovalidate="formnovalidate" >提交</button>
multiple 屬性規(guī)定輸入域中可選擇多個(gè)內(nèi)容，如：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>帳號(hào)：</label>
<input type="text" name="username" autocomplete="on" required="required" pattern="^[0-9a-zA-Z]{6,16}$" />請(qǐng)輸入a-zA-Z0-9且長(zhǎng)度6-16位的字符 </p>
<p>
<label>郵箱：</label>
<input type="email" name="mail" id="mail" value="" placeholder="請(qǐng)輸入郵箱"/>
</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>感謝各位的閱讀！關(guān)于“html5中有什么新屬性”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼