整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML5 引入了各種新的語義 HTML 元素 <section> 、<main>等來幫助替換令人生畏的<div> 。在開發網站時，我們應該了解布局的每個部分代表什么，并嘗試為其使用適當的<article>、<nav> 元素。
WCAG指定文本和背景之間的最小對比度4.5:1（可以在 Chrome 開發人員工具中查看）。因此我們在設計時應始終牢記這一點。此外，請記住，顏色的使用應有意義且稀疏，以避免混淆和信息過載。
嘗試使用alt為我們的 <img> 元素提供提示屬性，以便屏幕閱讀器不會讀取該src屬性。我們可以為裝飾圖像使用空alt屬性，這將通知屏幕閱讀器跳過它們。同樣，嘗試為我們網站上的任何視頻內容提供隱藏式字幕。
我們在在網站開發中使用圖標和顏色來指示狀態、突出顯示或提供上下文非常普遍，并且提供了良好的用戶體驗。但是，可能不是每個人都可以單獨使用圖標和顏色，因此請確保使用適當的文本文字來支持它們，從而在此過程中滿足所有用戶的需求。
具有相似含義或功能的元素在我們的網站上應該看起來相似。對于元素及其各自的狀態尤其如此，例如 <a> 和 <button> 元素，因為用戶必須能夠輕松識別他們可以與之交互的元素并預測他們的行為。
任何類型的<input>元素都應該適當地標記，使用<label>元素的for屬性或aria-label屬性進行包裝。不要依賴placeholder屬性來傳達有關<input>元素的含義，因為這會給屏幕閱讀器上的用戶帶來問題。
響應性通常被認為是屏幕大小或移動設備與桌面設備，但用戶可以在許多不同的設備上瀏覽我們的網站。嘗試通過提供通過鼠標、鍵盤、拇指或三者的任意組合來導航和使用應用程序的方法來滿足所有這些需求。
網站的布局與用戶相關的內容應該易于瀏覽、理解和查找。無論設備或可訪問性需求如何，具有清晰和適當分組的良好組織內容可為所有用戶提供更好的用戶體驗。
更多內容請訪問我的網站https://www.icoderoad.com
前面學習了HTML5的基礎新元素，接下來小編將繼續分享HTML5必學的知識點--HTML5新表單
在開始之前，先來了解一下HTML5的聲明，<!doctype html>，通過HTML的聲明，體現W3C故意弱化HTML的版本，但是小標要說明下版本不更新，不等于內容不更新，而是W3C希望HTML5是融合版本。
關于HTML的發展歷史， HTML的規范不嚴格一直以來就是前端開發人員頭疼的地方， 元素定義大小寫不敏感。
直到XHTML 1.0的出現 - 前端開發人員擁抱，因為此時的HTML只允許小寫
XHTML 2.0版本出現后 - 前端開發人員重新回到HTML， 推翻了之前很多習慣
HTML 4版本出現之后 - 比較好的版本
HTML 5版本出現 - 經歷8年后，終于在2014年10月底發布
HTML5的特點：移動端瀏覽器相比PC端瀏覽器對H5的支持更好，這要感謝蘋果公司 - 喬布斯
小編提醒大家：目前網上所謂的H5，并不是指現在所學HTML5技術，HTML5的新特性內容不多,與JS(難)配合使用
那么實際工作中使用多不多?其實實際上來說，相對并不多
其實就是在為將來學習 - HTML5將來一定是主流。
*******華麗分割線*******
接下來開始學習，HTML5必學知識點—新表單，主要從4個方面入手：新類型、新元素、新屬性、新驗證
1.email類型 - 判斷字符串中是否包含"@"符號，注意的是不能以"@"開始、不能以"@"結束
2.搜索類型 - search
3.URL類型 - 判斷字符串中是否包含"http:"，注意的是以"http:"開始,驗證通過，以"http:"結束,驗證通過
4.電話號碼類型 - tel，注意的是只有在手機端瀏覽器訪問時有效果
5.數字類型 - number，需要注意的是允許輸入非數字內容,但是不允許提交，在設置min和max時，允許輸入范圍外的值,不允許提交；這個類型有一些屬性： min - 設置數字的最小值；max - 設置數字的最大值；step - 設置步長,每次增加或減小的量值
6.范圍類型 - range，效果就是滑動條，屬性：min - 最小值、max - 最大值、step - 步長、value - 當前值
7.顏色類型 - color
8.日期類型 - date，日期格式 - yyyy/MM/dd
9周、月份類型 （實際很少使用）
10周 - week（實際很少使用）
11月份 - month（實際很少使用）
1.<datalist>元素，用法：需要配合input元素使用，在input元素中定義list屬性(值為datalist元素的id值)，好處就是數據與結構的分離
2.<progress>元素，就是實現一個進度條，屬性有：max - 設置進度條的最大值、value - 設置進度條當前的值
3. <meter>元素，用法和<progress>元素類似，作用 - 刻度，屬性包括：min和max - 設置最小值和最大值、 value - 表示當前值，high和low - 設置預警值（舉個常見的例子，當你手機的電量小于10%時候，一般會顯示紅色的一小段進度）
4.<output>元素，和<input> 輸入框正好相反，<output>是輸出框，屬性：for指定要輸出的元素進行關聯（實際開發中,很少使用）
1.placeholder屬性：就是實現input輸入框的默認提示信息，相比value屬性值更好用。這個在實際開發過程中非常常見
2.autofocus屬性：就是自動獲取焦點、用法有點不同，它不是key=vlaue的形式，而是直接只定義屬性名(沒有屬性值)
3.multiple屬性：就是允許輸入框輸入多個值，用法和autofocus一樣只定義屬性名(沒有屬性值)
4.form屬性（實際開發中用到不多）：就是表單元素定義在表單之外，用法 - 值是相關表單的id屬性值
1.驗證屬性：
required屬性即：驗證是否為空？返回false,表示當前元素值為空， 返回true,表示當前元素值不為空
pattern屬性即：驗證正則表達式，定義正則表達式時,不能添加"http://"， 正則表達式不能驗證是否為空
min和max屬性即：驗證最小值和最大值 ，只和number類型的input元素配置使用
minlength和maxlength屬性即：驗證最小長度和最大長度，minlength - 驗證最小長度，maxlength - 限制最大長度（輸入內容的長度不能大于maxlength的值）
validity屬性即：HTML5提供表單驗證的接口，通過該屬性得到validityState對象，該對象提供一系列的有效狀態， 有效狀態可用于表單驗證，得到validatyState對象，elem.validaty - 得到該對象
2.有效狀態
valid - 返回Boolean,表示驗證是否通過，true - 表示驗證通過， false - 表示驗證失敗，
valueMissing - 表示值是否為空，返回值true - 表示元素值為空(錯誤)、false - 表示元素值不為空(正確) 注意該狀態配合required屬性使用
typeMismatch - 表示元素類型是否匹配，返回值true - 表示元素類型不匹配、false - 表示元素類型匹配、 該狀態配合email、url、number等使用
patternMismatch - 表示正則表達式是否匹配、返回值true - 表示正則表達式不匹配、false - 表示正則表達式匹配，該狀態配合pattern屬性使用
tooLong - 表示元素內容長度是否過長，返回值true - 表示元素內容長度過長，false - 表示元素內容長度不長，該狀態配合maxlength屬性使用
maxlength屬性 - 限制屬性，tooLong可能不會出現(完整性)
rangeUnderflow - 表示元素值是否小于min值，返回值true - 表示元素值小于min的值，false - 表示元素值不小于min的值 該狀態配合min屬性使用
stepMismatch - 表示元素值與step值是否不符，返回值true - 表示元素值與step值不符，false - 表示元素值與step值相符 該狀態配合step屬性使用
customError - 自定義錯誤，配合setCustomValidity()方法使用，作用就是替換之前的判斷表達式，自定義錯誤提示信息setCustomValidity(自定義錯誤信息)，一旦調用該方法,默認認為就是錯的，上述所有的有效狀態返回錯誤值 驗證正確時,調用該方法,將錯誤信息置為空
HTML5是新的HTML標準，是對HTML和XHML的繼承和發展。學習HTML5首先需要了解HTML5的語法基礎。本章將圍繞HTML5文檔基本格式、HTML5語法來進行講解。
下面是HTML5最基本的代碼結構：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>1.<!doctype>標記
<!doctype>標記位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種HTML標準規范。只有在開頭使用<!doctype>聲明，瀏覽器才能將該網頁作為有效的HTML文檔，并按指定的文檔類型進行解析。使用HTML5的DOCTYPE聲明，會觸發瀏覽器以標準兼容模式來顯示頁面。
2.<html>標記
<html>標記位于<!doctype>標記之后，也稱為根標記，用于告知瀏覽器其自身是一個HTML文檔。<html>標記標志著HTML文檔的開始，</html>標記表示HTML文檔的結束。他們之間是文檔的頭部和主體內容。
3.<head>標記
<head>標記用于定義HTML文檔的頭部信息，也稱頭部標記，是用來封裝其他位于文檔頭部標記的標記，如：<meta>、<title>、<link>、<style>、<script>標記等。上面的代碼中，<meta>標記的屬性charset指的是文檔的字符編碼，“utf-8”表示國際通用字符編碼。<title>標記用于告訴用戶這個頁面是什么，如：百度頁面，在瀏覽器導航欄的最上方百度所屬頁面，會有一個百度的標題。<link>標記一般用來引入外部的CSS文件。<style>標記用來包裹與html標簽對應的CSS樣式，通常與選擇器結合起來使用。<script>標記用于引入外部的JavaScript（js）文件，如果<script>標記位于<body>標記中，就可以將js代碼寫在<script>標記中。
注意：一個HTML文檔中只能包含一對<head>標記，絕大多數文檔頭部包含的數據都不會真正作為內容顯示在頁面中。
部分標記會在下一章節進行詳細解釋
4.<body>標記
<body>標記用于定義HTML文檔所要顯示的內容，也稱為主體標記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于<body>標記內，<body>標記中的內容才是最終展示給用戶看的。
一個HTML文檔只能包含一對<body>標記，且必須位于<html>標記內部，<head>標記的后面，與<head>標記是并列關系。
1.標簽不區分大小寫
為了兼容各個瀏覽器，HTML5采用寬松的語法格式，標簽可以不區分大小寫就是HTML5語法變化的重要體現
<p>開始標記的p標記小寫，結束標記的p標記大寫</P>上面的代碼標簽的開始和結束標簽大小寫雖然不同，但它是符合HTML5語法的規范的。
2.允許屬性值不使用引號
在HTML5中，屬性值不放在引號中也是正確的，如：
<input type=text readonly=readonly/>
<input type=checkbox checked=a/>這段代碼等價于：
<input type="text" readonly="readonly"/>
<input type="checkbox" checked="a"/>3.允許部分屬性值的屬性省略
在HTML5中，部分標志性的屬性的屬性值是可以省略的，如：
<input type="text" readonly="readonly"/>
<input type="checkbox" checked="checked"/>
可以省略為：
<input type="text" readonly/>
<input type="checkbox" checked/>下面是一張關于HTML5可以省略屬性值的屬性表：
提示：雖然HTML5對于語法的規范不是很嚴格，但是個人建議，標簽采用小寫，引號加上，這兩點是為了讓頁面看起來美觀，也是為了方便后面頁面編寫出錯時找錯。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
