溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
HTML5 標準規范有哪些，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
在每一個html頁面的第一行添加標準模式的聲明,必須使用
<!DOCTYPE html>
必須為html根元素制定lang屬性，從而為文檔設置正確的語言。這將有助于語音合成工具確定其所應該采用的發音，有助于翻譯工具確定其翻譯時所應遵守的規則等
<html lang="zh">
參照以下寫法
<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="zh"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="zh"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="zh"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js" lang="zh"> <!--<![endif]-->
這樣寫的好處：
可以使用class作為全局條件區分低版本的IE瀏覽器并進行調整，這顯然要優于使用CSS Hack
可以避免IE6條件注釋引起的高版本IE文件阻塞問題，原文的解決方法是在前面加一個空白的條件注釋，但是這里顯然將原本無用空白的條件注釋變得有意義了
仍然可以通過HTML驗證
與Modernizr等特征檢測類庫使用相同的class，更具備通用性
no-js標簽是需要與Modernizr等類庫配合使用的
<script src="js/libs/modernizr-2.5.0.min.js"></script>
必須加上viewport可以讓我們開發出來的頁面在不同大小的設備上都能統一友好顯示
<meta name="viewport" content="width=device-width">
IE 支持通過特定的<meta>標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求，否則設置為edge mode，從而通知 IE 采用其所支持的最新的模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
所有標記都應設置為utf–8，它應該同時指定在HTTP報頭和文檔頭部
<meta charset="utf-8">
為了更好讓搜索引擎找到你的頁面，必須寫上keywords和description
<meta name="description" content=""> <meta name="keywords" content="">
必須給每個頁面加上有意義的標題
<title>HTML5 standardization</title>
將樣式表和腳本中的type省略，除非你不是用的css或javascript，在html5，該值默認是text/css和text/javascript
在指向圖片或其他媒體文件、樣式表和腳本的URL地址中省略http: https:協議部分，除非已知相應文件不能同時兼容2個協議
<!-- Not recommended --> <script src="http://www.hengtiansoft.com/js/demo.js"></script> <!-- Recommended --> <script src="//www.hengtiansoft.com/js/demo.js"></script>
將結構(markup)、表現樣式(style)和行為動作(script)分開處理,盡量使三者之間的關聯度降到最小,這樣有利于維護
必須將css文件引入并置于head中
必須將js文件引入并置于body底部 ###大小寫：只使用小寫 所有的代碼都應是小寫的，包括元素名稱、屬性，屬性值（除非text或CDATA的內容）、選擇器、css屬性、屬性值（字符串除外）
<!-- Not recommended --> <A HREF="/">Home</A> <!-- Recommended --> <img src="hengtian.png" alt="hengtian"> <!-- Not recommended --> color: #E5E5E5; <!-- Recommended --> color: #e5e5e5;
每次縮進使用4個空格不要使用Tab
.example {
color: blue;
}
<ul>
<li>Fantastic</li>
<li>Great</li>
</ul>針對每一個塊級元素都另起一行，并在每個子元素前縮進，可提升可讀性
<table> <thead> <tr> <th scope="col">header 1</th> <th scope="col">header 2</th> <tbody> <tr> <td>line 1</td> <td>line 2</td> </table>
盡可能減少嵌套,減少不必要的標簽，如果結構可以滿足上下文要求，就不需要有冗余的結構
<!-- Not recommended --> <div><div>test</div></div> <!-- Recommended --> <div>test</div> <!-- Not recommended --> <div><div>test</div></div> <!-- Recommended --> <div>test</div>
1.塊級元素 address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h2~h7、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul
2.內嵌元素 a、abbr、acronym、b、bdo、big、br、cite、code、 dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、 strong、sub、sup、textarea、tt、u、var
1. 塊元素可以包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素：
<div><h2></h2><p></p></div> —— 對 <a href=”#”><span></span></a> —— 對 <span><div></div></span> —— 錯
2. 塊級元素不能放在<p>里面：
<p><ol><li></li></ol></p> —— 錯 <p><div></div></p> —— 錯
3. 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標簽是：
h2、h3、h4、h5、h6、h7、p、dt
4. 塊級元素與塊級元素并列、內嵌元素與內嵌元素并列：
<div><h3></h3><p></p></div> —— 對 <div><a href=”#”></a><span></span></div> —— 對 <div><h3></h3><span></span></div> —— 錯
單行注釋，需在<!--后空一格，在-->前空一格
多行注釋，注釋起始和結尾都另起一行，注釋內容縮進4個空格，不要使用Tab
<!-- This is a one line comment --> <p>This is a comment</p> <!-- This comment is require more than one line, so we should use block-style indented text -->
使用有效的html標簽，并利用工具如W3C html validator進行檢查
<!-- Not recommended --> <title>Demo</title> <article>This is a demo. <!-- Recommended --> <title>Demo</title> <article>This is a demo.</article>
根據標簽的語義來合理使用它 如使用footer元素來定義頁腳，section元素來定義文檔中的章節 這對代碼的執行效率和可讀性都非常重要
<!-- Not recommended --> <div> <h2>Journey</h2> <p>One day you finally knew what you had to do, and began.</p> </div> <!-- Recommended --> <section> <h2>Journey</h2> <p>One day you finally knew what you had to do, and began.</p> </section>
添加屬性的時候需要去掉前綴data-*，-后為一個單詞小寫.如下
<div id="J_test" data-age="24"> Click Here </div>
為了良好的閱讀性，不要使用實體引用的方式，除了以下幾種情況：
鍵盤上沒有該字符
在HTML中有特殊含義的字符，如：<,>,&
空格
常用HTML字符實體（建議使用實體）：
| 字符 | 名稱 | 實體名 | 實體數 |
|---|---|---|---|
| " | 雙引號 | " | " |
| ' | 撇號 | '(IE不支持) | ' |
| & | 和號 | & | & |
| > | 右尖括號（大于號） | > | > |
| < | 左尖括號（小于號） | < | < |
| 空格 | |   | |
| 中文全角空格 | 　 |
常用特殊字符實體（不建議使用實體）：
| 字符 | 名稱 | 實體名 | 實體數 |
|---|---|---|---|
| ￥ | 元 | ¥ | ¥ |
| 斷豎線 | ¦ | ||
| ? | 版權 | © | © |
| ? | 注冊商標R | ® | ® |
| ? | 商標TM | ™ | ™ |
| ? | 間隔符 | · | · |
| ? | 左雙尖括號 | « | « |
| ? | 右雙尖括號 | » | » |
| ° | 度 | ° | ° |
| × | 乘 | × | × |
| ÷ | 除 | ÷ | ÷ |
| ‰ | 千分比 | ‰ | ‰ |
給圖片添加width和height，提升頁面加載速度
給所有img添加alt屬性
不要使用或盡量少用gif文件
在IDE中，需要去來回拖動滾動條來查看末尾的代碼是很不方便的，所以要在合適的位置來斷句。
無內容元素是一種不能包含任何內容的特殊元素，比較常見的無內容元素有：br,hr,img,input,link,meta 此類元素不要使用無閉合標簽，且在>前無空格
<meta name="author" content="Hengtian">
將未實現或待定內容用TODO標記出來，如需要可將TODO項的負責人也列出來，并可再寫上需要做的內容
<!-- TODO(Jason) : add more items -->
布爾型屬性在聲明時必須為其賦值
<input type="text" disabled="diabled"> <select> <option value="1" selected="slected">1</option> </select>
無論你是否使用框架，99%的展現設計應該在stylesheets中，以下幾點應避免去做：
不要使用內聯樣式，如：<div >
用<p>來代替<br>來對內容換行
不要使用<em>和<strong>,用css來控制
不要使用<i>和<b>，HTML5不贊成使用
| 元素 | 解決方法 |
|---|---|
<acronym> | 使用<abbr>標簽替代 |
<applet> | 使用<object>標簽替代 |
<basefont> | 使用CSS來設置大小 |
<big> | 使用CSS中font size來實現 |
<dir> | 使用<ul>標簽代替 |
<font> | 使用CSS來實現 |
<frame> | 糟糕的可用性和訪問性 |
<frameset> | 糟糕的可用性和訪問性 |
<isindex> | 使用HTML5表單控件來替代 |
<noframes> | 糟糕的可用性和訪問性 |
<s> | 使用CSS來實現 |
<strike> | 使用CSS來實現 |
<tt> | 使用CSS來實現 |
<u> | 使用CSS來實現 |
| 屬性 | 所屬的元素 |
|---|---|
| align | caption, iframe, img, input, object, legend, table, hr, div, h2, h3, h4, h5, h6, h7, p, col, colgroup, tbody, td, tfoot, th, thead and tr |
| alink | body |
| link | body |
| vlink | body |
| text | body |
| background | body |
| bgcolor | table, tr, td, th and body |
| border | table and object |
| cellpadding | table |
| cellspacing | table |
| char | col, colgroup, tbody, td, tfoot, th, thead and tr |
| charoff | col, colgroup, tbody, td, tfoot, th, thead and tr |
| clear | br |
| compact | dl, menu, ol and ul |
| frame | table |
| compact | dl, menu, ol and ul |
| frame | table |
| frameborder | iframe |
| hspace | img and object |
| vspace | img and object |
| marginheight | iframe |
| marginwidth | iframe |
| noshade | hr |
| nowrap | td and th |
| rules | table |
| scrolling | iframe |
| size | hr |
| type | li, ol and ul |
| valign | col, colgroup, tbody, td, tfoot, th, thead and tr |
| width | hr, table, td, th, col, colgroup and pre |
關于HTML5 標準規范有哪些問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
