HTML5 1、html5是什麼 萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言(HTML)的第五次重大修改。 h5並不是一門新的語言,而是html語言的第五次修訂。 2.html5支持的瀏覽器版本 基本上所有的主流瀏覽器都支持(Chrome,Firefox,Safari 等) IE9 ...
HTML5
1、html5是什麼
萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言(HTML)的第五次重大修改。-------h5並不是一門新的語言,而是html語言的第五次修訂。
2.html5支持的瀏覽器版本
基本上所有的主流瀏覽器都支持(Chrome,Firefox,Safari 等)
IE9及IE9以上支持html5,IE8及IE8以下不支持。
3.html5與html4的不同
html5相對於html4拋棄了一些不合理不常用的標記和屬性,然後新增了一些標記和屬性(表單),可以跨平臺使用。
html5的代碼更加簡潔明瞭,提高了可用性並且使用戶的體驗更加友好。
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
主要新增元素
<!-- <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>