91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html5中有什么新屬性

發布時間:2021-05-21 09:35:08 來源:億速云 閱讀:165 作者:小新 欄目:web開發

這篇文章給大家分享的是有關html5中有什么新屬性的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

html5有新屬性,例contextmenu、contentEditable、hidden、draggable、“data-*”、placeholder、required、pattern、autofocus、autocomplete等等。

本教程操作環境:windows7系統、HTML5版、Dell G3電腦。

HTML5新增屬性

1.1、contextmenu

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>

運行效果:

html5中有什么新屬性

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:點擊菜單項觸發的事件

1.2、contentEditable

規定是否可編輯元素的內容
屬性值:
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>

html5中有什么新屬性

1.3、hidden

hidden屬性用于隱藏該元素。一旦使用了此屬性,則該元素就不會在瀏覽器中被顯示
2個布爾值
true 規定元素是可見。
false 規定元素是不可見。

        <div hidden="hidden">
            Hello Hidden
        </div>

為了兼容一些不支持該屬性的瀏覽器(IE8),可以在CSS中加如下樣式:

*[hidden]{
   display: none;
}
var p1=document.querySelector("body #p1");
p1.innerHTML+=" +++";

1.4、draggable

規定元素是否可拖拽
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>

運行結果:

html5中有什么新屬性

<!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>

html5中有什么新屬性

1.5、data-*

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>

運行效果:

html5中有什么新屬性

1.6、placeholder占位屬性

這是一個很實用的屬性,免去了用JS去實現點擊清除表單初始值.瀏覽器支持也還不錯,除了Firefox,其他標準瀏覽器都能很好的支持
<input placeholder="請輸入用戶名">

            <p>
                <label>郵箱:</label>
                <input type="email" name="mail" id="mail" value="" placeholder="請輸入郵箱"/>
            </p>

html5中有什么新屬性

1.7、required必填屬性

約束表單元在提交前必須輸入值。

            <p>
                <label>博客:</label>
                <input type="url" name="blog" id="blog" value="" required="required"/>
            </p>

html5中有什么新屬性

1.8、pattern正則屬性

約束用戶輸入的值必須與正則表達式匹配。

            <p>
                <label>帳號:</label>
                <input type="text" required="required" pattern="^[0-9a-zA-Z]{6,16}$" />請輸入a-zA-Z0-9且長度6-16位的字符            
                </p>

html5中有什么新屬性

1.9、autofocus自動聚焦屬性

            <p>
                <label>博客:</label>
                <input type="url" name="blog" id="blog" value="" required="required" autofocus="autofocus"/>
            </p>

讓指定的表單元素獲得焦點。

html5中有什么新屬性

1.10、autocomplete自動補全屬性

當表單元素設置了自動完成功能后,會記錄用戶輸入過的內容,雙擊表單元素會顯示歷史輸入。

<input type="text" name="username" autocomplete="on/off" />

html5中有什么新屬性

該屬性默認是打開的。

1.11、novalidate不驗證屬性

novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。

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

1.12、multiple多選屬性

multiple 屬性規定輸入域中可選擇多個內容,如:email 和 file

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

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

html5中有什么新屬性

<!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中有什么新屬性”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

兴国县| 惠东县| 汝州市| 安西县| 治多县| 茂名市| 郎溪县| 靖州| 文化| 扬州市| 临猗县| 北碚区| 安新县| 长丰县| 罗江县| 独山县| 广平县| 天台县| 镇赉县| 田林县| 筠连县| 惠州市| 遂平县| 龙泉市| 奉贤区| 台北县| 越西县| 三明市| 偏关县| 万宁市| 图们市| 稷山县| 黎平县| 杨浦区| 沙坪坝区| 开原市| 花莲市| 衡阳县| 黄骅市| 深圳市| 皮山县|