HTML5新增標籤與屬性

一、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>

運行效果：

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>
        <h2>contentEditable屬性</h2>
        <div contenteditable="true">
            Hello contentEditable
        </div>
    </body>
</html>

1.3、hidden

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

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

爲了兼容一些不支持該屬性的瀏覽器（IE8），可以在CSS中加如下樣式：

*[hidden]{
display: none;
}

var div1=document.querySelector("body #div1");
div1.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>
            #div1,
            #div3 {
                height: 200px;
                width: 200px;
                border: 1px solid #00f;
                margin-bottom: 10px;
            }
            #div2 {
                height: 100px;
                width: 100px;
                background: yellow;
            }
        </style>
        <script>
            var div1, div2, div3, msg;
            window.onload = function() {
                div1 = document.getElementById("div1");
                div2 = document.getElementById("div2");
                div3 = document.getElementById("div3");
                msg = document.getElementById("msg");
                
                div2.ondragstart=function(){
                    msg.innerHTML+="div2開始拖動了<br/>";
                }
                div2.ondrag=function(){
                    msg.innerHTML+="拖動中<br/>";
                }
                div2.ondragend=function(){
                    msg.innerHTML+="拖動結束<br/>";
                }
                
                div1.ondragover = function(e) {
                    e.preventDefault();
                }
                div1.ondrop = function(e) {
                    div1.appendChild(div2);
                }
                div3.ondragover = function(e) {
                    e.preventDefault();
                }
                div3.ondrop = function(e) {
                    div3.appendChild(div2);
                }
                
                $("#div1").data("name","電池");
                alert($("#div1").data("name"));
                
                div1.setAttribute("data-order-price",998.7);
                alert(div1.getAttribute("data-order-price"));
            }
        </script>
    </head>

    <body>
        <div id="div1" data-order-price="98.5" data-name="充電寶"></div>
        <div id="div3"></div>
        <div id="div2" draggable="true"></div>
        <h3 id="msg"></h3>
    </body>

</html>

運行結果：

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>
        <h2>data-*</h2>
        <div id="div1" data-student-name="Tom" data-stu='{"a":1,"b":2}'></div>
        <button onclick="addData()">添加數據</button>
        <button onclick="getData()">獲取數據</button>
        <script type="text/javascript">
            var div1=document.getElementById("div1");
            function addData()
            {
                //給div1添加屬性data-student-name，值爲rose
                div1.setAttribute("data-student-name","Rose");
                $("#div1").data("stu-mark","99分");
            }
            function getData()
            {
                //原生JavaScript
                //alert(div1.getAttribute("data-student-name"));
                
                //jQuery
                alert($("#div1").data("student-name"));
                alert($("#div1").data("stu").a);
                alert($("#div1").data("stu-mark"));
            }
            
            
            var x="{a:1}";
            alert(eval("("+x+")").a);
        </script>
    </body>
</html>

運行效果：

1.6、placeholder佔位屬性

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

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

1.7、required必填屬性

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

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

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>

1.9、autofocus自動聚焦屬性

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

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

1.10、autocomplete自動完成屬性

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

該屬性默認是打開的。

1.11、novalidate不驗證屬性

novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。
<form action="demo_form.asp" method="get" novalidate="true">

1.12、multiple多選屬性

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

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

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>HTML5新的表單元素</title>
    </head>

    <body>
        <h2>HTML5新的表單元素</h2>
        <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表單新功能解析

HTML表單一直都是Web的核心技術之一，有了它我們才能在Web上進行各種各樣的應用,才能和服務器進行方便快捷的交互。HTML5 Forms新增了許多新控件及其API，方便我們做更復雜的應用，而不用藉助其它前端腳本語言(如:javascript),極大的解放了我們的雙手。

2.1、表單結構更自由

在HTML5中表單完全可以放在頁面任何位置，然後通過新增的form屬性指向元素所屬表單的id值，即可關聯起來。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        姓名：<input type="text" name="realname" form="form1"/>
        <form id="form1" method="get">
            <button>提交</button>
        </form>
    </body>
</html>

運行結果：

2.2、表單重寫屬性

表單重寫屬性（form override attributes）允許您重寫 form 元素的某些屬性設定。
表單重寫屬性有：
formaction - 重寫表單的 action 屬性
formenctype - 重寫表單的 enctype 屬性
formmethod - 重寫表單的 method 屬性
formnovalidate - 重寫表單的 novalidate 屬性
formtarget - 重寫表單的 target 屬性

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        姓名：<input type="text" name="realname" form="form1"/>
        <form id="form1" method="get">
            <button formmethod="get"  formaction="d01.html">get提交給d01.html</button>
            <button formmethod="post" formaction="d02.html">post提交d02.html</button>
        </form>
    </body>
</html>

運行結果：

2.3、郵箱與URL輸入

email輸入類型外表與文本框一樣，但在移動端運行時將切換對應的輸入鍵盤，約束格式

格式：<input type="email" />

url輸入類型
說明：上面代碼展示的文本域要求輸入格式正確的URL地址,Opera中會自動在開始處添加http://.
格式：<input type= "url">

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5新的表單元素</title>
    </head>
    <body>
        <h2>HTML5新的表單元素</h2>
        <form>
            <p>
                <label>郵箱：</label>
                <input type="email" name="mail" id="mail" value="" />
            </p>
            <p>
                <label>博客：</label>
                <input type="url" name="blog" id="blog" value="" />
            </p>
            <button>提交</button>
        </form>
    </body>
</html>

2.4、日期時間相關輸入類型

提供日曆控件,但目前只有Opera/Chrome新版本支持,且展示效果也不一樣..
<input type=date>
<inputtype=time>
<input type=month>
<input type=week>
<input type=datetime>
<input type=datetime-local/>

            <p>
                <label>生日：</label>
                <input type="date">
            </p>

2.5、數字輸入類型

實現一個數字輸入框，輸入不了非數字字符。

<input type="number" max=10 min=0 step=1 value=5/>
max number 規定允許的最大值
min number 規定允許的最小值
step number 規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等）
value number 規定默認值

            <p>
                <label>身高：</label>
                <input type="number" max="226" min="80" step="10" value="168" />
            </p>

必須輸入數字，且數字的大小要介於指定的範圍。

2.6、range滑塊類型

特定值的範圍的數值，以滑動條顯示
<input type="range" max=10 min=0 step=1 value=5/>
max number 規定允許的最大值
min number 規定允許的最小值
step number 規定合法的數字間隔
（如果 step="3"，則合法的數是 -3,0,3,6 等）
value number 規定默認值

            <p>
                <label>體重：</label>
                <input type="range" max="500" min="30" step="5" value="65" onchange="showValue(this.value)"/>
                <span id="rangeValue"></span>
            </p>
            <button>提交</button>
            <script type="text/javascript">
                function showValue(val){
                    document.getElementById("rangeValue").innerHTML=val;
                }
            </script>

默認沒有顯示值，需要使用javascript手動顯示。

2.7、搜索輸入類型

此類型表示輸入的將是一個搜索關鍵字,可顯示一個搜索小圖標。
<input type=search>

在Chrome中右邊會出現有一個清除符號。

2.8、電話輸入類型

此類型要求輸入一個電話號碼,但實際上它並沒有特殊的驗證,與text類型沒什麼區別.
<input type=tel>
在移動端會彈出輸入數字的鍵盤。

2.9、color輸入類型

此類型表單,可讓用戶通過顏色選擇器選擇一個顏色值,並反饋到該控件的value值中
<input type=color>

            <p>
                <label>膚色：</label>
                <input type="color" onchange="document.bgColor=this.value" />
            </p>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>HTML5新的表單元素</title>
    </head>

    <body>
        <h2>HTML5新的表單元素</h2>
        <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>

三、特殊的超鏈接

3.1、短信

在手機端，當點擊短信時將實現發送短信功能，進入發送短信界面，自動填寫好手機號碼

3.2、電話

在手機端，當點擊電話時將實現撥打電話功能，進入撥打電話界面，自動填寫好手機號碼

3.3、郵件

點擊郵件時將啓動客戶端發送郵件的軟件如outlook,foxmail等

3.4、QQ客戶

3.5、地圖

在手機端可以直接進入baidu的地圖

3.6、分享

自定義設置：shang.qq.com

示例代碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <a href='sms:15919218899'>短信</a>
        <br />
        <a href="tel:15919218899">電話</a>
        <br />
        <a href="mailto:[email protected]">郵件</a>
        <br/>
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=99518888&site=qq&menu=yes" alt="點擊這裏給我發消息" title="點擊這裏給我發消息">QQ客服</a>
        <br />
        <a href="http://map.baidu.com/mobile/webapp/search/search/qt=s&wd=%E7%8F%A0%E6%B5%B7%E6%B8%AF&c=348&searchFlag=bigBox&version=5&exptype=dep/vt=map/?fromhash=1">地圖</a>
        <br />
        <a href="http://map.baidu.com/mobile/webapp/index/index#place/detail/qt=ninf&wd=%E5%8D%97%E6%96%B9IT%E5%AD%A6%E9%99%A2&c=140&searchFlag=bigBox&version=5&exptype=dep&src_from=webapp_all_bigbox&sug_forward=&src=0&uid=717b5c621070ee955d0d0270&industry=education&qid=3767972802907606580/showall=1&pos=0&da_ref=listclk&da_qrtp=11&da_adtp=&da_log=sampid%3A3_eno%3A206_adnum%3A0_sid%3A9712246999610050_from%3Awebappmap_exptype%3Aurl_query%3A%E5%8D%97%E6%96%B9IT%E5%AD%A6%E9%99%A2_adids%3A_killnum%3A0_userids%3A&da_adquery=%E5%8D%97%E6%96%B9it%E5%AD%A6%E9%99%A2&da_adtitle=%E5%8D%97%E6%96%B9IT%E5%AD%A6%E9%99%A2&da_adindus=%E6%95%99%E8%82%B2%E5%9F%B9%E8%AE%AD%3B%E9%AB%98%E7%AD%89%E9%99%A2%E6%A0%A1&detail_from=list%26pos%3D0%26ad_page_logs%3D%26semStatType%3Dlist&vt=map">IT學院</a>
        <br />
        <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空間"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到騰訊微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人網"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"32"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
    </body>

</html>

運行效果：

HTML5新增標籤與屬性

HTML5新增標籤與屬性

一、HTML5新增屬性

1.1、contextmenu

1.2、contentEditable

1.3、hidden

1.4、draggable

1.5、data-*

1.6、placeholder佔位屬性

1.7、required必填屬性

1.8、pattern正則屬性

1.9、autofocus自動聚焦屬性

1.10、autocomplete自動完成屬性

1.11、novalidate不驗證屬性

1.12、multiple多選屬性

二、HTML5表單新功能解析

2.1、表單結構更自由

2.2、表單重寫屬性

2.3、郵箱與URL輸入

2.4、日期時間相關輸入類型

2.5、數字輸入類型

2.6、range滑塊類型

2.7、搜索輸入類型

2.8、電話輸入類型

2.9、color輸入類型

三、特殊的超鏈接

3.1、短信

3.2、電話

3.3、郵件

3.4、QQ客戶

3.5、地圖

3.6、分享

【SQL進階】CASE語句的使用

三元條件運算符

js中replace()方法

github配置密鑰

MVVM-框架介紹

GitHub入門與實踐（二）——初始設置Git，以及在GitHub中添加公開密鑰

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結