html5新增及廢除屬性

時間 2019-12-07

標籤 html5 html 新增廢除屬性欄目 HTML5 简体版

原文原文鏈接

html5中，在新增長和廢除不少元素的同時，也增長和廢除了不少屬性。javascript

1、新增屬性

一、表單屬性

a、autofocus

對input[全部類型]、select、textarea與button指定autofocus屬性。它以指定屬性的方式讓元素在頁面加載後自動得到焦點。一個頁面只能有一個元素有autofocus屬性，同時設置多個，則第一個生效。php

這個屬性對登陸頁面頗有用，可提高用戶體驗，有時登陸頁面就一個用戶名，密碼，頁面加載後用戶要手動定位到輸入框，才能輸入，有了autofocus，頁面打開便可直接輸入。css

舉例：html

<form>
<p>用戶名：<input type="text" autofocus /></p>
<p>密&nbsp;&nbsp;碼：<input type="password"/></p>
</form>

b、placeholder

對input[text, search, url, telephone, email 以及 password]、textarea指定placeholder屬性，它會對用戶的輸入進行提示，提示用戶期待什麼樣的輸入。html5

當輸入框獲取焦點時，提示字符消失。java

這個屬性也能提高用戶體驗，用的已經至關廣泛了。jquery

舉例：web

View Code

c、form屬性

對input[全部類型]、output、select、textarea、button與fieldset指定form屬性。它聲明屬於哪一個表單，而後將其放置在頁面的任何位置，都在表單以內。這個屬性解放了form表單裏的元素，給咱們在複雜的佈局時帶來方便。正則表達式

Note：api

一個輸入域能夠屬於一個或多個表單，多個表單用空格分隔開。

輸入域的form屬性必須引用所屬表單的id，這點有點像<label>標籤的for屬性。

舉例：

<form action="" method="" id="user_form">
<p>用戶名：<input type="text" autofocus placeholder="用戶名"/></p>
</form>
<p>下面的密碼框在form表單以外，但仍然屬於form表單會被提交到服務器</p>
<p>密&nbsp;&nbsp;碼：<input type="password" placeholder="密碼" form="user_form"/></p>

d、required屬性

該屬性表示用戶提交時檢查該元素輸入域不能爲空。

適用於如下類型的 input[text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file]。

舉例：

<form action="" method="" id="user_form">
<p>用戶名：<input type="text" autofocus placeholder="用戶名" required/></p>
<p><input  type="submit" value="提交"/></p>
</form>

e、autocomplete屬性。

autocomplete:適用於form,input[text,search,url,telephone,email,password,datepickers,range,color]。

設置"autocomplete"屬性爲"on"，則用戶在自動完成域輸入時，瀏覽器會在該域內顯示填寫的選項。

<form action="" method="get" autocomplete="on">
        First name:
        <input type="text" name="fname" /><br />
        Last name:
        <input type="text" name="lname" /><br />
        E-mail:
        <input type="email" name="email"autocomplete="on"/><br />
        <input type="submit" />
</form>

f、重置表單默認行爲的新屬性

html5中表單的自由度很是高，由於html5爲input[submit,image]、button元素增長formaction、formenctype、formmethod、formnovalidate與formtarget幾個新屬性，能對form元素的某些屬性重置，好比能作到表單1的提交按鈕提交表單2等。

formaction：重寫表單action屬性

formenctype：重寫表單enctype屬性

formmethod：重寫表單method屬性

formnovalidate：重寫表單novalidate屬性

formtarget：重寫表單target屬性

舉例：formaction和formmethod

html中，一個表單內的全部元素都經過表單的action屬性統一提交到另外一個頁面。html5中可經過formaction屬性實現點擊不一樣提交按鈕，將表單提交到不一樣的頁面。

html中一個表單只有一個action屬性來對錶單內全部元素統一指定提交頁面，每一個表單只有一個method屬性統一指定提交方法。html5中新增的formmethod方法，能夠實現不一樣按鈕指定不一樣提交方法，好比post，get等。

<form action="server.jsp" method="get" id="user_form">
     E-mail:
     <input type="email" name="useremail" /><br />
     <input type="submit" formmethod="get"  formaction="s1.jsp" value="get方法提交到s1.jsp" /><br />
     <input type="submit" formmethod="post" formaction="s2.jsp" value="post方法提交到s2.jsp" /><br />
</form>

點"get方法提交到s1.jsp"按鈕，將表單以get方法提交到s1.jsp頁面，從url也能夠看出地址欄顯示提交參數。

點"post方法提交到s2.jsp"按鈕，將表單以post方法提交到s2.jsp頁面。

舉例：formnovalidate屬性，能夠取消提交時進行的有關檢查，表單能夠被無條件地提交[哪怕form裏有required,min,max等]。

<form action="demo_form.jsp" method="get" id="user_form">
    E-mail:　　 <input type="email" required name="useremail" /><br />
    <input type="submit" formnovalidate="true"  value="Submit without validation" /> 
</form>

點擊「Submit without validation」按鈕時，Form 不會作任何校驗，雖然有required屬性，表單空仍然能夠提交。

g、image提交按鈕新增width,height屬性

width和height來設置image類型的input標籤的圖像的寬高。

舉例：用來做爲提交按鈕，經過width和height設置其寬高。

<form action="server.jsp" method="get" id="user_form">
     E-mail:
     <input type="email" name="useremail" /><br />
     <input type="image" src="img/submit.png"  width="30px" height="30px"/>
</form>

h、list屬性

list屬性與 datalist標籤配合使用，用來規定輸入域的datalist。datalist是輸入域的選項列表，該元素相似<select>，可是比select更好的一點在，當用戶要設定的值不在選擇列表內時，容許自行輸入,該元素自己不顯示，當文本框得到焦點時以提示輸入的方式顯示。

list屬性適用於input[text,search,url,telephone,email,datepickers,numbers,range,color]

Note:

list值爲文檔中的 datalist 的 id，又看到了熟悉的id，回想一下form屬性引用的是表單的id，都相似label屬性引用input的id同樣。

舉例：

<form action="demo_form.jsp" method="get">
    主頁:<input type="url" list="url_list" name="link" />
    <datalist id="url_list">
        <option label="baidu" value="http://www.baidu.com" />
        <option label="qq" value="http://www.qq.com" />
        <option label="Microsoft" value="http://www.microsoft.com" />
      </datalist>
    <input type="submit" />
</form>

舉例：順便說一下datalist和autocomplete配合使用

前面講了autocomplete屬性可讓用戶完成域輸入時，瀏覽器在該域內顯示填寫的選項。如今datalist元素與autocomplete屬性配合使用可更好的提高用戶體驗。

在上面代碼基礎上給datalist增長autocomplete屬性，即<datalist id="url_list" autocomplete>。

用戶第一次輸入http:www.google.com提交後，再次輸入時會同時給出datalist的option提示和autocomplete增長的提示。

i、max，min和step屬性

max,min和step屬性用來爲包含數字或日期的input類型規定限定或者說約束。

max屬性規定輸入域所容許的最大值。

min屬性規定輸入域容許的最小值。

step屬性爲輸入域規定合法的數字間隔。（假如 step="3"，則合法數字應該是 -三、0、三、6，以此類推）step 屬性能夠與 max 以及 min 屬性配合使用，以建立合法值的範圍。

max,min,step屬性適用於input[datepickers,number，range]。

舉例：

這是一個很是好的屬性，以前有人問我用<input type="time">來輸入時間，奈何firefox瀏覽器不支持怎麼辦。能夠經過min max 模擬實現一個時間輸入框，小時容許輸入[0~23]，分鐘容許輸入[0~59]。

<form action="demo_form.jsp" method="get">
    <label>time小時，分鐘：<input type="time" name="user_time"></label>
    <p>input類型time在firefox下不支持，給出模擬實現方案</p>
    <label><input type="number" min="0" max="23" step="1">時</label>
    <label><input type="number" min="0" max="59">分</label>
    <input type="submit" value="提交"/>
</form>

超出max提交時給出提示。

更多細節可參考HTML5 number類型文本框step屬性的驗證機制

j、pattern屬性

pattern屬性用於驗證輸入字段的模式，其實就是正則表達式，不用再寫js綁定正則驗證了，很是方便。

pattern屬性適用於input[text,search,url,telephone,email,password]

舉例：給輸入框定義了 Pattern 爲「[A-z]{3}」，也就是包含三個字母的正則表達式約束，若是輸入不合法，咱們會看到以下效果。

<form action="#" method="get" id="user_form">
    Country code:
    <input type="text" name="country_code" pattern="[A-z]{3}"title="Three letter country code" />
    <input type="submit" />
</form>

k、multiple屬性

multiple屬性規定輸入域中可選擇多個值。

multiple屬性適用於input[email,file]。

舉例：容許上傳時一次上傳多個文件。

<form action="demo_form.jsp" method="get">
    選擇圖片:<input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>

l、<fieldset>增長disabled屬性

html5爲 fieldset元素增長了disabled屬性，能夠把它的子元素設爲disabled狀態,可是注意不包括legend裏的元素。

舉例：點擊legend中的checkbox，切換filed子元素的disabled狀態。

<form>
    <fieldset name="userInfo">
        <legend>
            <label><input type="checkbox" checked name="enableUserInfo" onchange="form.userInfo.disabled=!checked">啓用用戶信息</label>
        </legend>
        <p>
            <label>姓名:<input name="userName" required></label>
        </p>
        <fieldset name="personalInfo">
            <legend>
                <label><input type="checkbox" checked  name="enablePersonalInfo" onchange="form.personalInfo.disabled=!checked">我的信息</label>
            </legend>
            <p>
                <label>生日:<input name="birthday" required></label>
            </p>
        </fieldset>
        <fieldset name="companyInfo">
            <legend>
                <label><input type="checkbox" checked name="enableCompanyInfo" onchange="form.companyInfo.disabled=!checked">公司信息</label>
            </legend>
            <p>
                <label>公司名稱:<input name="companyName" required></label>
            </p>
        </fieldset>
    </fieldset>
</form>

m、<label>增長control屬性

html5中爲標籤新增了control屬性，在標籤內部放置一個表單元素，經過標籤的control屬性訪問該表單元素。

舉例：

<script>
    function setValue(){
        var label=document.getElementById("label");
        var textbox=label.control;
        textbox.value="718308";
    }
</script>
<form>
<label id="label">
    郵編：
    <input id="txt_zip" maxlength="6">
    <small>請輸入6位數字</small>
</label>
<input type="button" value="設置默認值" onclick="setValue()">
</form>

分析：經過label的control屬性控制input輸入框的value，因此點「設置默認值」按鈕，將郵編輸入框值初始化爲"718308"。

n、新增SelectionDirection屬性

selectionDirection適用於input元素和textarea元素。

用戶在input元素或textarea元素中用鼠標選取部分文字時，可使用該屬性來獲取選取方向。當用戶正向選取文字時，該屬性值爲"forward"，反向選取值爲「backward」，且當用戶沒有選取任何文字時，該屬性值爲"forward"。

舉例：

<script type="text/javascript">
    function alertSelectionDirection(){
        var testInput=document.getElementById("test");
        var direction=testInput.selectionDirection;
        alert(direction);
    }
</script>
<form>
    <input type="text" name="text" id="test">
    <input type="button" value="查看選中文本方向" onclick="alertSelectionDirection()"> 
</form>

o、複選框的indeterminate屬性

這個屬性用來表示複選框部分選中，像qq郵箱中，郵件部分選中就有這樣的效果。

舉例：經測試，貌似仍是必須經過腳本控制indetermidate屬性。

<form>
     <input type="checkbox" checked/>
     <input type="checkbox" indeterminate/>只寫一個indeterminate不起做用
     <input type="checkbox" id="test"/>
     <input type="checkbox" />
</form>
 <script>
    document.getElementById('test').indeterminate = true;
</script>

indeterminate屬性主要是在複選框嵌套時使用，瞭解更多可參考css-tricks indetermidate-checkboxes

二、連接屬性

a、media屬性

爲a、area增長media屬性。規定目標 URL 是爲哪一種類型的媒介/設備進行優化的，只能在href屬性存在時使用。該屬性用於規定目標 URL 是爲特殊設備（好比 iPhone）、語音或打印媒介設計的，可接受多個值。

<a href="http://www.baidu.com" media="print and (resolution:300dpi)" >查詢</a>

取值以下：【沒懂這個media到底有什麼樣的優化措施】

View Code

更多可參考w3c media

b、<area>新增herflang、media、rel、type屬性

herflang,media,rel,type爲了保證a元素和link元素的一致性。

hreflang【取值language_code】規定在被連接文檔中的文本的語言。只有當設置了 href 屬性時，才能使用該屬性。註釋：該屬性是純諮詢性的。

media【取值media query】：對何種設備優化。【具體怎麼優化？】

舉例：

<a media="handheld" href="#">手持設備</a>
<a media="tv" href="#">電視</a>

rel 【取值alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag】規定當前文檔與被連接文檔/資源之間的關係。只有當使用 href 屬性時，才能使用 rel 屬性。

舉例：

<a href=http://www.mukewang.com/" hreflang="zh" rel="external">

表示超連接使用的是中文，而且這個超連接是個外部的超連接。

type【mime_type】規定目標 URL 的 MIME 類型。

c、<link>新增sizes屬性

爲link增長sizes屬性。sizes 屬性規定被連接資源的尺寸。只有當被連接資源是圖標時 (rel="icon")，才能使用該屬性。該屬性可接受多個值。值由空格分隔。

網上千篇一概都是這樣寫的：

<link rel="icon" href="img/demo_icon.ico" type="image/gif" sizes="16x16" />

可是通過測試用不用sizes都同樣，沒看出sizes有什麼做用。查了一下目前幾乎沒有主流瀏覽器支持 sizes 屬性。

d、<base>新增target屬性

爲base元素增長target屬性，主要是保持與a元素的一致性。

舉例：target表示頁面中超連接都將使用_blank在新窗口中打開頁面，且加上http://localhost地址，後面至關於相對地址。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>base element target</title>
    <base href="http://localhost/ " target="_blank">
</head>
<body>
<a href="a.html" >a.html頁面</a>
</body>
</html>

點a.html頁面將在新窗口中打開連接：http://localhost/a.html

三、其餘屬性

a、ol新增reversed屬性

reversed是個bool屬性，規定有序列表倒序。

舉例：有序列表起始值50，倒序。

<ol start="50" reversed>
    <li>coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

b、meta新增charset屬性

爲meta增長charset屬性

c、menu新增type和label屬性

menu在html4.01中廢棄，後在html5中從新定義，爲menu增長type和label屬性。label爲菜單定義一個菜單的標註，type屬性讓才當能夠以上下文菜單、工具條與列表右鍵菜單三種形式出現。

label取值是文本，表示菜單名稱。

type取值三個：

popup:瀏覽器不支持。

toolbar:瀏覽器不支持。
context:右鍵菜單。僅firefox支持。

可經過w3c menu元素瞭解更多。

舉例：toolbar

<menu type="toolbar" label="menu">
    <li><input type="checkbox" />red</li>
    <li><input type="checkbox">blue</li>
</menu>

可見menu的瀏覽器默認樣式爲：

menu {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

舉例：context

<div contextmenu="mymenu">
    <p>在黃色div區域右鍵可看到右鍵菜單的效果哦~</p>
    <menu type="context" id="mymenu">
        <menuitem label="自定義刷新" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
        <menu label="自定義分享到...">
            <menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
            <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
        </menu>
        <menuitem label="自定義發送郵件" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
    </menu>
</div>
<p>目前僅firefox支持menu屬性</p>

d、style新增scoped屬性

html5爲style增長scoped屬性。有了一個樣式做用域的概念，它容許咱們爲文檔的指定部分定義樣式，而不是整個文檔。若是使用 "scoped" 屬性，那麼所規定的樣式只能應用到 style 元素的父元素及其子元素。 scoped爲開發單頁面樣式帶來方便，但不能經常使用，不然css難以維護。

舉例：

<!-- 這個article正常使用head裏聲明的style -->
<article>
    <h1>h1標籤內容</h1>
    <p>p標籤內容</p>
</article>

<article>
    <!-- 這裏聲明的style只能讓該article以及子元素使用 -->
    <style scoped>
        h1,p{ color: hotpink; }
        article { border: solid 1px hotpink; }
    </style>
    <h1>h1標籤內容，受局部做用域的樣式控制</h1>
    <p>p標籤內容，受局部做用域的樣式控制</p>
</article>

e、script新增async屬性

html5爲script新增了一個async屬性，用來定義腳本是否異步執行。async僅適用於外部腳本（只有在使用src屬性時）。

和async【異步執行】相近的還有一個屬性defer【推遲執行】，defer屬性過去也有，但在html5中進行了更好的支持。

使用：

若是 async="async"：腳本相對於頁面的其他部分異步地執行，由於async表示下載腳本文件，以後立刻運行，運行的同時並不阻止瀏覽器去解析下面的內容，因此稱之爲異步。

若是不使用 async 且 defer="defer"：腳本將在頁面完成解析時執行，由於defer表示腳本下載完並不執行而是等頁面所有加載完以後再執行。

若是既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面以前，當即讀取並執行腳本。

舉例：

在jquery官網有兩個jquery文件，以下。

咱們就拿這兩個文件舉例，jquery-1.11.3.min.js是標準庫文件，93.7k。jquery-migrate-1.2.1.min.js是jquery向後兼容的文件，7.03k。代碼以下。

<!DOCTYPE>
<meta charset="utf-8"></meta>
<meta http-equiv="prama" content="no-cache"><!--禁止掉頁面緩存-->
<script defer src="http://code.jquery.com/jquery-1.11.3.min.js" onload="alert('a')"></script>
<script async src="http://code.jquery.com/jquery-migrate-1.2.1.min.js" onload="alert('b')"></script>

運行效果，先彈出b，後彈出a。

f、html元素新增manifest屬性

html5爲html元素增長manifest，指向一個用於結合離線web應用API的應用程序緩存清單。開發離線web應用程序時他與API結合使用，定義一個URL，在這個URL上描述文檔的緩存信息。

訪問一次之後下次就是斷網了也能看到之前的內容。

用法：

首先，建立mainfest文件

CACHE MANIFEST
#This is a comment

CACHE #須要緩存的文件
index.html
style.css

NETWORK: #不須要緩存的文件
search.php
login.php

FALLBACK: #資源不可用的狀況下，重定向的地址
/api offline.html

而後將該mainfest文件的地址加到html屬性中。

<html manifest="/offline.manifest">

詳細步驟可參考：How to create offline HTML5 web apps in 5 easy steps

瞭解更多可參考：w3c manifests

g、iframe元素新增sandbox、seamless、srcdoc屬性

爲iframe增長三個屬性，sandbox、seamless、srcdoc。用來提升頁面安全性，防止不信任的web頁面執行某些操做。

seamless：有這個屬性，表示iframe框架沒有邊框，沒有邊距。

srcdoc:用來指定內嵌框架的內容，srcdoc和src屬性有順序區分，有了srcdoc，後面src的內容被忽略。

舉例：

<iframe  srcdoc="<h1>srcdoc出現，後面src內容被忽略</h1>" src="http://www.baidu.com"></iframe>

sandbox：是個安全沙箱。有了sandbox，內嵌框架就有了嚴格的安全限制，禁止提交表單，禁止運行js腳本，且內嵌頁面和外面頁面不一樣源。等。

固然能夠經過給sandbox設置來取消限制。可選值：

""：應用如下全部限制。

allow-scripts:運行運行JavaScript。

allow-same-origin:容許iframe內容被視爲與包含文檔有相同的源。

allow-top-navigation：容許iframe內容從包含文檔導航（加載）內容。

allow-forms：運行提交表單。

2、刪除屬性

刪除了一些能夠用css代替的屬性，多餘屬性和其餘屬性。

在HTML 4中使用的屬性	使用該屬性的元素	在HTML 5中的替代方案
rev	link、a	rel
charset	link、a	在被連接的資源的中使用HTTP Content-type頭元素
shape、coords	a	使用area元素代替a元素
longdesc	img、iframe	使用a元素連接到校長描述
target	link	多餘屬性，被省略
nohref	area	多餘屬性，被省略
profile	head	多餘屬性，被省略
version	html	多餘屬性，被省略
name	img	id
scheme	meta	只爲某個表單域使用scheme
archive、chlassid、codebose、codetype、declare、standby	object	使用data與typc屬性類調用插件。須要使用這些屬性來設置參數時，使用param屬性
valuetype、type	param	使用name與value屬性，不聲明之的MIME類型
axis、abbr	td、th	使用以明確簡潔的文字開頭、後跟詳述文字的形式。能夠對更詳細內容使用title屬性，來使單元格的內容變得簡短
scope	td	在被連接的資源的中使用HTTP Content-type頭元素
align	caption、input、legend、div、h一、h二、h三、h四、h五、h六、p	使用CSS樣式表替代
alink、link、text、vlink、background、bgcolor	body	使用CSS樣式表替代
align、bgcolor、border、cellpadding、cellspacing、frame、rules、width	table	使用CSS樣式表替代
align、char、charoff、height、nowrap、valign	tbody、thead、tfoot	使用CSS樣式表替代
align、bgcolor、char、charoff、height、nowrap、valign、width	td、th	使用CSS樣式表替代
align、bgcolor、char、charoff、valign	tr	使用CSS樣式表替代
align、char、charoff、valign、width	col、colgroup	使用CSS樣式表替代
align、border、hspace、vspace	object	使用CSS樣式表替代
clear	br	使用CSS樣式表替代
compace、type	ol、ul、li	使用CSS樣式表替代
compace	dl	使用CSS樣式表替代
compace	menu	使用CSS樣式表替代
width	pre	使用CSS樣式表替代
align、hspace、vspace	img	使用CSS樣式表替代
align、noshade、size、width	hr	使用CSS樣式表替代
align、frameborder、scrolling、marginheight、marginwidth	iframe	使用CSS樣式表替代
autosubmit	menu

3、資源連接

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。