HTML5知識點彙總(1)

HTML5

一、html5是什麼

萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言HTML)的第五次重大修改。-------h5並非一門新的語言,而是html語言的第五次修訂。javascript

2.html5支持的瀏覽器版本

基本上全部的主流瀏覽器都支持(Chrome,Firefox,Safari 等)html

IE9及IE9以上支持html5,IE8及IE8如下不支持。前端

3.html5與html4的不一樣

html5相對於html4拋棄了一些不合理不經常使用的標記和屬性,而後新增了一些標記和屬性(表單),能夠跨平臺使用。html5

html5的代碼更加簡潔明瞭,提升了可用性而且使用戶的體驗更加友好。java

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------正則表達式

主要新增元素

 <!-- <div class="header"></div> -->
    <header>頭部</header>
    <!-- <div class="nav"></div> -->
    <nav>導航</nav>
    <!-- <div class="mainContent"></div> -->
    <main>
        <!-- <div class="left"></div> -->
        <article>左邊</article>
        <!-- <div class="right"></div> -->
        <aside>右邊</aside>
    </main>
    <!-- <div class="footer"></div> -->
    <footer>底部</footer>

主要表單元素

<form action="">
    用戶名:<input type="text" name="userName"> <br>
    密碼:<input type="password" name="userPwd"> <br>
    <!--email提供了默認的電子郵箱的完整驗證:要求必須包含@符號,同時必須包含服務器名稱,若是不能知足驗證,則會阻止當前的數據提交-->
    郵箱:<input type="email"> <br>
    <!--tel它並非來實現驗證。它的本質目的是爲了可以在移動端打開數字鍵盤。意味着數字鍵盤限制了用戶只能輸入數字。  如何查看效果:qq發送文件>>手機端使用qq來接收>>使用手機瀏覽器查看-->
    電話:<input type="tel"> <br>
    <!--驗證只能輸入合法的網址:必須包含http://-->
    網址:<input type="url"> <br>
    <!--number:只能輸入數字(包含小數點),不能輸入其它的字符
    max:最大值
    min:最小值
    value:默認值-->
    數量:<input type="number" value="60" max="100" min="0"> <br>
    <!--search:能夠提供更人性化的輸入體驗-->
    請輸入商品名稱:<input type="search"> <br>
    <!--range:範圍-->
    範圍:<input type="range" max="100" min="0" value="50"> <br>
    顏色:<input type="color"> <br>
    <!--日期時間相關-->
    <!--time:時間:時分秒-->
    時間:<input type="time"> <br>
    <!--date:日期:年月日-->
    日期:<input type="date"> <br>
    <!--datetime:大多數瀏覽器不能支持datetime.用於屏幕閱讀器-->
    日期時間:<input type="datetime"><br>
    <!--datetime-local:日期和時間-->
    日期時間:<input type="datetime-local"> <br>
    月份:<input type="month"> <br>
    星期:<input type="week">
    <!--提交-->
    <input type="submit">
</form>
<form action="" id="myForm">
    <!--placeholder:提示文本,提示佔位-->
    <!--autofocus:自動獲取焦點-->
    <!--autocomplete:自動完成:on:打開  off:關閉
    1.必須成功提交過:提交過纔會記錄
    2.當前添加autocomplete的元素必須有name屬性-->
    用戶名:<input type="text" name="userName" placeholder="請輸入用戶名" autofocus autocomplete="on"> <br>
    <!--tel並不會實現驗證,僅僅是在移動端可以彈出數字鍵盤-->
    <!--required:必須輸入,若是沒有輸入則會阻止當前數據提交-->
    <!--pattern:正則表達式驗證
    *:表明任意個
    ?:表明0個或1個
    +:表明1個或多個-->
    手機號:<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br>
    <!--multiple:能夠選擇多個文件-->
    文件:<input type="file" name="photo" multiple> <br>
    <!--email:有默認驗證  在email中,multiple容許輸入多個郵箱地址,以逗號分隔-->
    郵箱:<input type="email" name="email" multiple><br>
    
    <!--提交:-->
    <input type="submit"> <br>
</form>
<!--下面這個表單元素並無包含在form中:默認狀況下面表單元素的數據不會進行提交-->
<!--form:指定表單id,那麼在未來指定id號的表單進行數據提交的時候,也會將當前表單元素的數據一塊兒提交-->
地址:<input type="text" name="address" form="myForm">
<form action="">
    <!--不只能夠選擇,還應該能夠輸入-->
    <!--創建輸入框與datalist的關聯  list="datalist的id號"-->
    專業:<input type="text" list="subjects"> <br>
    <!--經過datalist建立選擇列表-->
    <datalist id="subjects">
        <!--建立選項值:value:具體的值 label:提示信息,輔助值-->
        <!--option能夠是單標籤也能夠是雙標籤-->
        <option value="英語" label="不會"/>
        <option value="前端與移動開發" label="前景很是好"></option>
        <option value="java" label="使用人數多"></option>
        <option value="javascript" label="作特效"></option>
        <option value="c" label="不知道"></option>
    </datalist>

    網址:<input type="url" list="urls">
    <datalist id="urls">
        <!--若是input輸入框的type類型是url,那麼value值必須添加http://-->
        <option value="http://www.baidu.com" label="百度"></option>
        <option value="http://www.sohu.com"></option>
        <option value="http://www.163.com"></option>
    </datalist>
</form>

新增表單元素事件

 /*1.oninput:監聽當前指定元素內容的改變:只要內容改變(添加內容,刪除內容),就會觸發這個事件*/
    document.getElementById("userName").oninput=function(){
        console.log("oninput:"+this.value);
    }

    /*onkeyup:鍵盤彈起的時候觸發:每個鍵的彈起都會觸發一次*/
    document.getElementById("userName").onkeyup=function(){
        console.log("onkeyup:"+this.value);
    }

    /*oninvalid:當驗證不經過時觸發*/
    document.getElementById("userPhone").oninvalid=function(){
        /*設置默認的提示信息*/
        this.setCustomValidity("請輸入合法的11位手機號");
   }

進度條

<!--max:最大值
value:當前進度值-->
<progress max="100" value="100"></progress>

<!--度量器:衡量當前進度值-->
<!--high:規定的較高的值
low:規定的較低的值
max:最大值
min:最小值
value:當前度量值-->
<meter max="100" min="0" high="80" low="40" value="30"></meter>
<meter max="100" min="0" high="80" low="40" value="60"></meter>
<meter max="100" min="0" high="80" low="40" value="100" name="level"></meter>

 類樣式操做

toggle:切換元素樣式,若是元素含有指定樣式則刪除,沒有就添加
contains:判斷元素是否包含指定名稱樣式,返回true/false 
---------------------------------------------------------------------------------------------------
相關文章
相關標籤/搜索