當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5规范~

發布時間：2024/4/17 HTML 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5规范~ 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

http://codeguide.bootcss.com/?

規范的唯一判定方式是：保證正確性的同時，讓人一看就是一個人寫的~一致性。

HTML5：

展開說幾點：

1. HTML5 DOCTYPE

<!DOCTYPE html> 為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現。

2. 語言屬性

強烈建議為 html 根元素指定 lang 屬性，從而為文檔設置正確的語言。這將有助于語音合成工具確定其所應該采用的發音，有助于翻譯工具確定其翻譯時所應遵守的規則等等。

1?<html?lang="zh-CN">
2???
3?</html> View Code

3. IE兼容模式

IE 支持通過特定的 <meta> 標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設置為 edge mode，從而通知 IE 采用其所支持的最新的模式。

1?<meta?http-equiv="X-UA-Compatible"?content="IE=Edge">

更多資料

從IE8 出現文檔兼容性。

文檔兼容性是對 Microsoft Internet Explorer 6 中引入的兼容性模式的擴展，使您可以選擇 Internet Explorer 用于顯示網頁的特定呈現模式。——微軟的官方文檔。

瀏覽器模式(browser mode)和文檔模式(document mode)。這兩個模式的引入，讓我們在IE瀏覽器上能夠簡單的處理兼容性問題，當然，其實也并不簡單，先看看這兩個概念的定義：

　　瀏覽器模式（browser mode）：用于切換IE針對該網頁的默認文檔模式、對不同版本瀏覽器的條件備注解析、發送給網站服務器的用戶代理（User-Agent）字符串的值。網站可以根據瀏覽器返回的不同用戶代理字符串判斷瀏覽器的版本和安裝的功能，這樣就可以向不同的瀏覽器返回不同的頁面內容。

　　默認情況下，IE8的瀏覽器模式為IE8。用戶可以通過單擊地址欄旁邊的兼容性視圖按鈕來手動切換到不同的瀏覽器模式。在IE8中，IE8兼容性視圖會以IE7文檔模式來顯示網頁，同時會向服務器發送IE7的用戶代理字符串。

　　文檔模式（document mode）：用于指定IE的頁面排版引擎（Trident）以哪個版本的方式來解析并渲染網頁代碼。切換文檔模式會導致網頁被刷新，但不會更改用戶代理字符串中的版本號，也不會從服務器重新下載網頁。切換瀏覽器模式的同時，瀏覽器也會自動切換到相應的文檔模式。

　　簡而言之：瀏覽器模式的改變，能夠改變請求中User Agent的值，讓服務器獲取后，能夠按照UA的值進行對應處理（如果服務器上有這個處理功能）。而文檔模式的改變只反映在本地的瀏覽器解析HTML上，對客戶端顯示會有影響，而對服務器透明。同時，修改瀏覽器模式會影響文檔模式，反之卻不成立。

　　使用文檔兼容性的方法比較容易，就是在我們要反饋給客戶端的HTML代碼中的head中添加一個meta元素，用來描述當前的文檔需要使用何種瀏覽器版本來解釋當前文檔。<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

?舉幾個例子：

IE=edge	這個設置是讓IE使用當前的最高版本進行文檔的解析，官方文檔指明，edge模式僅適用在測試環境，不建議在生產環境中使用
IE=7	使用標準IE7來處理
IE=EmulateIE7	模擬IE7來處理，遵循 <!DOCTYPE> 指令，如果文檔有當前有一個合法的<!DOCTYPE>，就使用IE7模式，否者使用Quirks模式（Internet Explorer 5 Quirks），對于大部分網站來說，這是首選的兼容性模式

X-UA-Compatible不僅可以用meta元素放在頁面內，也可以在服務器上進行配置，比如在IIS上配置默認的Header，或者在使用.NET中配置web.config文件，讓服務器端配置上默認的標頭，這樣系統就有默認的標頭來指定全局的文檔模式。因為單個頁面的文檔模式設置會覆蓋默認的文檔模式，因此，在某個需要特殊的文檔模式展示的頁面可以在進行單獨配置meta元素即可。

4. 字符編碼

通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實體標記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。?

5. 引入js和css

根據 HTML5 規范，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的默認值。

6. 實用性

盡量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標簽并保持最小的復雜度。

7. 布爾型

布爾型屬性可以在聲明時不賦值。XHTML 規范要求為其賦值，但是 HTML5 規范不需要。

三種方式都表示checked&&disabled
<label><input?type=checkbox?checked?name=cheese?disabled>?Cheese</label>
<label><input?type=checkbox?checked=checked?name=cheese?disabled=disabled>?Cheese</label>
<label><input?type='checkbox'?checked?name=cheese?disabled="">?Cheese</label>

8.減少標簽數量：

編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現。

<span?class="avatar">
??<img?src="...">
</span>


<img?class="avatar"?src="...">

CSS:

1. 聲明順序

相關的屬性聲明應當歸為一組，并按照下面的順序排列：

Positioning

Box model

Typographic

Visual

由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。盒模型排在第二位，因為它決定了組件的尺寸和位置。

其他屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，因此排在后面。

?1?.declaration-order?{
?2???/*?Positioning?*/
?3???position:?absolute;
?4???top:?0;
?5???right:?0;
?6???bottom:?0;
?7???left:?0;
?8???z-index:?100;
?9?
10???/*?Box-model?*/
11???display:?block;
12???float:?right;
13???width:?100px;
14???height:?100px;
15?
16???/*?Typography?*/
17???font:?normal?13px?"Helvetica?Neue",?sans-serif;
18???line-height:?1.5;
19???color:?#333;
20???text-align:?center;
21?
22???/*?Visual?*/
23???background-color:?#f5f5f5;
24???border:?1px?solid?#e5e5e5;
25???border-radius:?3px;
26?
27???/*?Misc?*/
28???opacity:?1;
29?}View Code

2. 不要使用@import

與 <link> 標簽相比，@import 指令要慢很多，不光增加了額外的請求次數，還會導致不可預料的問題。替代辦法有以下幾種：

使用多個 <link> 元素
通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯為一個文件
通過 Rails、Jekyll 或其他系統中提供過 CSS 文件合并功能

3. 媒體查詢

將媒體查詢放在盡可能相關規則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。

1?.element?{?...?}
2?.element-avatar?{?...?}
3?.element-selected?{?...?}
4?
5?@media?(min-width:?480px)?{
6???.element?{?...}
7???.element-avatar?{?...?}
8???.element-selected?{?...?}
9?}View Code

4. 帶前綴的屬性

當使用特定廠商的帶有前綴的屬性時，通過縮進的方式，讓每個屬性的值在垂直方向對齊，這樣便于多行編輯。

1?/*?Prefixed?properties?*/
2?.selector?{
3???-webkit-box-shadow:?0?1px?2px?rgba(0,0,0,.15);
4???????????box-shadow:?0?1px?2px?rgba(0,0,0,.15);
5?}View Code

5. 單行規則聲明

對于只包含一條聲明的樣式，為了易讀性和便于快速編輯，建議將語句放在同一行。對于帶有多條聲明的樣式，還是應當將聲明分為多行。

方便定位錯誤。

?1?/*?Single?declarations?on?one?line?*/
?2?.span1?{?width:?60px;?}
?3?.span2?{?width:?140px;?}
?4?.span3?{?width:?220px;?}
?5?
?6?/*?Multiple?declarations,?one?per?line?*/
?7?.sprite?{
?8???display:?inline-block;
?9???width:?16px;
10???height:?15px;
11???background-image:?url(../img/sprite.png);
12?}
13?.icon???????????{?background-position:?0?0;?}
14?.icon-home??????{?background-position:?0?-20px;?}
15?.icon-account???{?background-position:?0?-40px;?}View Code

?引申：如何調試CSS，定位CSS中的報錯？

?6. 限制使用簡寫的屬性聲明

在需要顯示地設置所有值的情況下，應當盡量限制使用簡寫形式的屬性聲明。?常見的濫用簡寫屬性聲明的情況如下：

padding
margin
font
background
border
border-radius

大部分情況下，我們不需要為簡寫形式的屬性聲明指定所有值。?

過度使用簡寫形式的屬性聲明會導致代碼混亂，并且會對屬性值帶來不必要的覆蓋從而引起意外的副作用。

?1?/*?Bad?example?*/
?2?.element?{
?3???margin:?0?0?10px;
?4???background:?red;
?5???background:?url("image.jpg");
?6???border-radius:?3px?3px?0?0;
?7?}
?8?
?9?/*?Good?example?*/
10?.element?{
11???margin-bottom:?10px;
12???background-color:?red;
13???background-image:?url("image.jpg");
14???border-top-left-radius:?3px;
15???border-top-right-radius:?3px;
16?}View Code

7.? Less和Sass中的嵌套

避免非必要的嵌套。這是因為雖然你可以使用嵌套，但是并不意味著應該使用嵌套。只有在必須將樣式限制在父元素內（也就是后代選擇器），并且存在多個需要嵌套的元素時才使用嵌套。1?//?Without?nesting
2?.table?>?thead?>?tr?>?th?{?…?}
3?.table?>?thead?>?tr?>?td?{?…?}
4?
5?//?With?nesting
6?.table?>?thead?>?tr?{
7???>?th?{?…?}
8???>?td?{?…?}
9?}View Code

8. class命名

class 名稱中只能出現小寫字符和破折號（dashe）（不是下劃線，也不是駝峰命名法）。破折號應當用于相關 class 的命名（類似于命名空間）（例如，.btn 和 .btn-danger）。
避免過度任意的簡寫。.btn 代表 button，但是 .s 不能表達任何意思。
class 名稱應當盡可能短，并且意義明確。
使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現形式（presentational）的名稱。
基于最近的父 class 或基本（base） class 作為新 class 的前綴。
使用 .js-* class 來標識行為（與樣式相對），并且不要將這些 class 包含到 CSS 文件中。

1?/*?Bad?example?*/
2?.t?{?...?}
3?.red?{?...?}
4?.header?{?...?}
5?
6?/*?Good?example?*/
7?.tweet?{?...?}
8?.important?{?...?}
9?.tweet-header?{?...?}View Code

9. 選擇器

對于通用元素使用 class ，這樣利于渲染性能的優化。
對于經常出現的組件，避免使用屬性選擇器（例如，[class^="..."]）。瀏覽器的性能會受到這些因素的影響。
選擇器要盡可能短，并且盡量限制組成選擇器的元素個數，建議不要超過 3 。
只有在必要的時候才將 class 限制在最近的父元素內（也就是后代選擇器）（例如，不使用帶前綴的 class 時 -- 前綴類似于命名空間）。

1?/*?Bad?example?*/
2?span?{?...?}
3?.page-container?#stream?.stream-item?.tweet?.tweet-header?.username?{?...?}
4?.avatar?{?...?}
5?
6?/*?Good?example?*/
7?.avatar?{?...?}
8?.tweet-header?.username?{?...?}
9?.tweet?.avatar?{?...?}View Code

10. 代碼組織

以組件為單位組織代碼段。
制定一致的注釋規范。
使用一致的空白符將代碼分隔成塊，這樣利于掃描較大的文檔。
如果使用了多個 CSS 文件，將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動。

轉載于:https://www.cnblogs.com/hanyuxinting/p/4920495.html

總結

以上是生活随笔為你收集整理的HTML5规范~的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SVN基于Maven的Web项目更新，本
下一篇： 2017年html5行业报告,云适配发布