整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
<article> 標(biāo)記定義一篇文章
<header> 標(biāo)記定義一個頁面或一個區(qū)域的頭部
<nav> 標(biāo)記定義導(dǎo)航鏈接
<section> 標(biāo)記定義一個區(qū)域
<aside> 標(biāo)記定義頁面內(nèi)容部分的側(cè)邊欄
<hgroup> 標(biāo)記定義文件中一個區(qū)塊的相關(guān)信息
<figure> 標(biāo)記定義一組媒體內(nèi)容以及它們的標(biāo)題
<figcaption> 標(biāo)簽定義 figure 元素的標(biāo)題。
<footer> 標(biāo)記定義一個頁面或一個區(qū)域的底部
<dialog> 標(biāo)記定義一個對話框(會話框)類似微信
<video> 標(biāo)記定義一個視頻
<audio> 標(biāo)記定義音頻內(nèi)容
<source> 標(biāo)記定義媒體資源
<canvas> 標(biāo)記定義圖片
<embed> 標(biāo)記定義外部的可交互的內(nèi)容或插件 比如flash
<menu>命令列表
<menuitem>menu命令列表標(biāo)簽 FF（嵌入系統(tǒng)）
<command> menu標(biāo)記定義一個命令按鈕
<meter>狀態(tài)標(biāo)簽(實時狀態(tài)顯示:氣壓、氣溫)C、O
<progress>狀態(tài)標(biāo)簽 (任務(wù)過程:安裝、加載) C、F、O
<datalist> 為input標(biāo)記定義一個下拉列表,配合option F、O
<details> 標(biāo)記定義一個元素的詳細(xì)內(nèi)容 ，配合dt、dd C
<ruby> 標(biāo)記定義 注釋或音標(biāo)
<rp> 告訴那些不支持 Ruby元素的瀏覽器如何去顯示
<rt> 標(biāo)記定義對ruby的注釋內(nèi)容文本
<keygen> 標(biāo)記定義表單里一個生成的鍵值(加密信息傳送)O、F
<mark> 標(biāo)記定義有標(biāo)記的文本 (黃色選中狀態(tài))
<output> 標(biāo)記定義一些輸出類型,計算表單結(jié)果配合oninput事
刪除的HTML標(biāo)簽
basefont，big，center，font, s，strike，tt，u；
frame，frameset，noframes；
acronym ，applet，isindex，dir
<b> 代表內(nèi)聯(lián)文本，通常是粗體，沒有傳遞表示重要的意思
<i> 代表內(nèi)聯(lián)文本，通常是斜體，沒有傳遞表示重要的意思
<dd> 可以同details與figure一同使用，定義包含文本，dialog也可用
<dt> 可以同details與figure一同使用，匯總細(xì)節(jié)，dialog也可用
<hr> 表示主題結(jié)束，而不是水平線，雖然顯示相同
<menu> 重新定義用戶界面的菜單，配合commond或者menuitem使用
<small> 表示小字體，例如打印注釋或者法律條款
<strong> 表示重要性而不是強調(diào)符號
若有不全歡迎評論！(*￣︶￣)
TML5從入門到精通，兄弟連京修隨堂筆記（二）HTML的框架結(jié)構(gòu)，每日都有新內(nèi)容，訂閱走一波
HTML5的form標(biāo)簽
問：網(wǎng)站怎樣與用戶進(jìn)行交互? 答案:使用HTML表單(form).
表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端的程序(比如ASP,PHP)的HTML元素,服務(wù)器端程序可以處理表單傳過來的數(shù)據(jù),從而進(jìn)行一些動作.比如,bbs,blog的登陸系統(tǒng),購物車系統(tǒng)等.
form 標(biāo)簽 -- 代表HTML表單
form標(biāo)簽是成對出現(xiàn)的,以<form>開始,以</form>結(jié)束
常用屬性.
action -- 瀏覽者輸入的數(shù)據(jù)被傳送到的地方,如一個PHP頁面(dofm.php)
method -- 數(shù)據(jù)傳送的方法
get -- 此方式傳遞數(shù)據(jù)量少,但是傳遞的信息顯示在網(wǎng)址上。
post --此方式傳送信息多,而且不會把傳遞信息顯示在網(wǎng)址上
enctype -- 表示將數(shù)據(jù)發(fā)送到服務(wù)器時瀏覽器使用的編碼類型
application/x-www-form-urlencoded -- 窗體數(shù)據(jù)被編碼為名稱/值對.這是標(biāo)準(zhǔn)的編碼格式.默認(rèn)的。
multipart/form-data -- 窗體數(shù)據(jù)被編碼為一條消息,頁上的每個控件對應(yīng)消息中的一個部分.
text/plain -- 以純文本形式進(jìn)行編碼,其中不含任何控件或格式字符
HTML5 input標(biāo)簽
input 標(biāo)簽 -- 代表HTML表單的單行輸入域
input標(biāo)簽是單獨出現(xiàn)的,<input />
屬性.
type -- 代表一個輸入域的顯示方式(分為輸入型,選擇型,點擊型)
name – 此表單項名稱
value -- 輸入域的值
size -- 輸入域的長度
maxlength -- 輸入域最多可以輸入文字的長度
checked -- 如果是選擇型的輸入域,代表已經(jīng)被選擇，值為checked
readonly -- 輸入域可以選擇,但是無法修改 ，值為readonly
disabled -- 輸入域無法獲得焦點,無法選擇,以灰色顯示,在表單中不起任何作用。如：disabled="disabled"
accesskey -- 表單的快捷鍵訪問方式，如值為h即按Alt+h快捷鍵。
tabindex -- 輸入域的"tab"鍵遍歷順序
src -- 當(dāng)使用圖片來表示按鈕時,代表圖片的位置(URI)
alt -- 用來替換提交按鈕的圖片(當(dāng)在input的src屬性定義的圖片無法顯示時)提示信息。
type屬性 -- 代表HTML表單,單行輸入域(框)的表現(xiàn)方式
type屬性取值:
text -- 文字輸入域(輸入型)
password -- 也是文字輸入域,但是輸入的文字以密碼符號'*'顯示(輸入型)
file -- 可以輸入一個文件路徑(輸入型)
checkbox -- 復(fù)選框.可以選擇零個或多個(選擇型)
radio -- 單選框.只可以選擇一個而且必須選擇一個(選擇型)
hidden -- 代表隱藏域,可以傳送一些隱藏的信息到服務(wù)器
button -- 按鈕(點擊型)
image -- 使用圖片來顯示按鈕,使用src屬性指定圖像的位置(就像img標(biāo)簽的src屬性)(點擊型)
submit -- 提交按鈕,表單填寫完畢可以提交,把信息傳送到服務(wù)器.可以使用value屬性來顯示按鈕上的文字(點擊型)
reset -- 重置按鈕,可以把表單中的信息清空(點擊型)
select 標(biāo)簽 -- 選擇列表標(biāo)簽
select標(biāo)簽是成對出現(xiàn)的,以<select>開始,以</select>結(jié)束
此標(biāo)簽中的每對option標(biāo)簽代表一個選擇項
屬性:
name – 表單項名稱
size -- 選擇域的高度
multiple -- 可以有多個選擇
disabled -- 以灰色顯示,在表單中不起任何作用
tabindex -- 使用"tab"鍵的遍歷順序
TML
語法
- 用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。
- 嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個空格）。
- 對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。
- 不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規(guī)范中明確說明這是可選的。
- 不要省略可選的結(jié)束標(biāo)簽（closing tag）（例如，</li>或 </body>）。
<!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </body> </html>
HTML5 doctype
為每個 HTML 頁面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現(xiàn)。
<!DOCTYPE html> <html> <head> </head> </html>
語言屬性
根據(jù) HTML5 規(guī)范：
強烈建議為 html 根元素指定 lang 屬性，從而為文檔設(shè)置正確的語言。這將有助于語音合成工具確定其所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時所應(yīng)遵守的規(guī)則等等。
<html lang="en-us"> <!-- ... --> </html>
IE 兼容模式
IE 支持通過特定的 <meta> 標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設(shè)置為 edge mode，從而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
字符編碼
通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內(nèi)容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實體標(biāo)記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。
<head> <meta charset="UTF-8"> </head>
引入 CSS 和 JavaScript 文件
根據(jù) HTML5 規(guī)范，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript分別是它們的默認(rèn)值。
<!-- External CSS --> <link rel="stylesheet" href="code-guide.css"> <!-- In-document CSS --> <style> /* ... */ </style> <!-- JavaScript --> <script src="code-guide.js"></script>
屬性順序
HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列，確保代碼的易讀性。
- class
- id, name
- data-*
- src, for, type, href, value
- title, alt
- role, aria-*
class 用于標(biāo)識高度可復(fù)用組件，因此應(yīng)該排在首位。id 用于標(biāo)識具體組件，應(yīng)當(dāng)謹(jǐn)慎使用（例如，頁面內(nèi)的書簽），因此排在第二位。
<a class="..." id="..." data-toggle="modal" href="#"> Example link </a> <input class="form-control" type="text"> <img src="..." alt="...">
布爾（boolean）型屬性
布爾型屬性可以在聲明時不賦值。XHTML 規(guī)范要求為其賦值，但是 HTML5 規(guī)范不需要。
元素的布爾型屬性如果有值，就是 true，如果沒有值，就是 false。
如果一定要為其賦值的話，請參考 WhatWG 規(guī)范：
如果屬性存在，其值必須是空字符串或 [...] 屬性的規(guī)范名稱，并且不要在首尾添加空白符。
簡單來說，就是不用賦值。
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>
減少標(biāo)簽的數(shù)量
編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構(gòu)來實現(xiàn)。請看下面的案例：
<!-- Not so great --> <span class="avatar"> <img src="..."> </span> <!-- Better --> <img class="avatar" src="...">
JavaScript 生成的標(biāo)簽
通過 JavaScript 生成的標(biāo)簽讓內(nèi)容變得不易查找、編輯，并且降低性能。能避免時盡量避免。
CSS
語法
- 用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。
- 為選擇器分組時，將單獨的選擇器單獨放在一行。
- 為了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格。
- 聲明塊的右花括號應(yīng)當(dāng)單獨成行。
- 每條聲明語句的 : 后應(yīng)該插入一個空格。
- 為了獲得更準(zhǔn)確的錯誤報告，每條聲明都應(yīng)該獨占一行。
- 所有聲明語句都應(yīng)當(dāng)以分號結(jié)尾。最后一條聲明語句后面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯。
- 對于以逗號分隔的屬性值，每個逗號后面都應(yīng)該插入一個空格（例如，box-shadow）。
- 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的內(nèi)部的逗號后面插入空格。這樣利于從多個屬性值（既加逗號也加空格）中區(qū)分多個顏色值（只加逗號，不加空格）。
- 對于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
- 十六進(jìn)制值應(yīng)該全部小寫，例如，#fff。在掃描文檔時，小寫字符易于分辨，因為他們的形式更易于區(qū)分。
- 盡量使用簡寫形式的十六進(jìn)制值，例如，用 #fff 代替 #ffffff。
- 為選擇器中的屬性添加雙引號，例如，input[type="text"]。只有在某些情況下是可選的，但是，為了代碼的一致性，建議都加上雙引號。
- 避免為 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;。
/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,.selector-secondary,.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
聲明順序
相關(guān)的屬性聲明應(yīng)當(dāng)歸為一組，并按照下面的順序排列：
- Positioning
- Box model
- Typographic
- Visual
由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆蓋盒模型（box model）相關(guān)的樣式，因此排在首位。盒模型排在第二位，因為它決定了組件的尺寸和位置。
其他屬性只是影響組件的內(nèi)部（inside）或者是不影響前兩組屬性，因此排在后面。
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
不要使用 @import
與 <link> 標(biāo)簽相比，@import 指令要慢很多，不光增加了額外的請求次數(shù)，還會導(dǎo)致不可預(yù)料的問題。替代辦法有以下幾種：
- 使用多個 <link> 元素
- 通過 Sass 或 Less 類似的 CSS 預(yù)處理器將多個 CSS 文件編譯為一個文件
- 通過 Rails、Jekyll 或其他系統(tǒng)中提供過 CSS 文件合并功能
<!-- Use link elements -->
<link rel="stylesheet" href="core.css">
<!-- Avoid @imports -->
<style>
@import url("more.css");
</style>
媒體查詢（Media query）的位置
將媒體查詢放在盡可能相關(guān)規(guī)則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。下面給出一個典型的實例。
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
帶前綴的屬性
當(dāng)使用特定廠商的帶有前綴的屬性時，通過縮進(jìn)的方式，讓每個屬性的值在垂直方向?qū)R，這樣便于多行編輯。
在 Textmate 中，使用 Text → Edit Each Line in Selection(??A)。在 Sublime Text 2 中，使用 Selection → Add Previous Line (??↑) 和 Selection → Add Next Line(??↓)。
/* Prefixed properties */
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
單行規(guī)則聲明
對于只包含一條聲明的樣式，為了易讀性和便于快速編輯，建議將語句放在同一行。對于帶有多條聲明的樣式，還是應(yīng)當(dāng)將聲明分為多行。
這樣做的關(guān)鍵因素是為了錯誤檢測 -- 例如，CSS 校驗器指出在 183 行有語法錯誤。如果是單行單條聲明，你就不會忽略這個錯誤；如果是單行多條聲明的話，你就要仔細(xì)分析避免漏掉錯誤了。
/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Multiple declarations, one per line */
.sprite {
display: inline-block;
width: 16px;
height: 15px;
background-image: url(../img/sprite.png);
}
.icon { background-position: 0 0; }
.icon-home { background-position: 0 -20px; }
.icon-account { background-position: 0 -40px; }
簡寫形式的屬性聲明
在需要顯示地設(shè)置所有值的情況下，應(yīng)當(dāng)盡量限制使用簡寫形式的屬性聲明。常見的濫用簡寫屬性聲明的情況如下：
- padding
- margin
- font
- background
- border
- border-radius
大部分情況下，我們不需要為簡寫形式的屬性聲明指定所有值。例如，HTML 的 heading 元素只需要設(shè)置上、下邊距（margin）的值，因此，在必要的時候，只需覆蓋這兩個值就可以。過度使用簡寫形式的屬性聲明會導(dǎo)致代碼混亂，并且會對屬性值帶來不必要的覆蓋從而引起意外的副作用。
/* Bad example */
.element {
margin: 0 0 10px;
background: red;
background: url("image.jpg");
border-radius: 3px 3px 0 0;
}
/* Good example */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
Less 和 Sass 中的嵌套
避免不必要的嵌套。這是因為雖然你可以使用嵌套，但是并不意味著應(yīng)該使用嵌套。只有在必須將樣式限制在父元素內(nèi)（也就是后代選擇器），并且存在多個需要嵌套的元素時才使用嵌套。
// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// With nesting
.table > thead > tr {
> th { … }
> td { … }
}
Less 和 Sass 中的操作符
為了提高可讀性，在圓括號中的數(shù)學(xué)計算表達(dá)式的數(shù)值、變量和操作符之間均添加一個空格。
// Bad example
.element {
margin: 10px 0 @variable*2 10px;
}
// Good example
.element {
margin: 10px 0 (@variable * 2) 10px;
}
注釋
代碼是由人編寫并維護(hù)的。請確保你的代碼能夠自描述、注釋良好并且易于他人理解。好的代碼注釋能夠傳達(dá)上下文關(guān)系和代碼目的。不要簡單地重申組件或 class 名稱。
對于較長的注釋，務(wù)必書寫完整的句子；對于一般性注解，可以書寫簡潔的短語。
/* Bad example */
/* Modal header */
.modal-header {
...
}
/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
...
}
class 命名
- class 名稱中只能出現(xiàn)小寫字符和破折號（dashe）（不是下劃線，也不是駝峰命名法）。破折號應(yīng)當(dāng)用于相關(guān) class 的命名（類似于命名空間）（例如，.btn 和 .btn-danger）。
- 避免過度任意的簡寫。.btn 代表 button，但是 .s 不能表達(dá)任何意思。
- class 名稱應(yīng)當(dāng)盡可能短，并且意義明確。
- 使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現(xiàn)形式（presentational）的名稱。
- 基于最近的父 class 或基本（base） class 作為新 class 的前綴。
- 使用 .js-* class 來標(biāo)識行為（與樣式相對），并且不要將這些 class 包含到 CSS 文件中。
- 在為 Sass 和 Less 變量命名時也可以參考上面列出的各項規(guī)范。
/* Bad example */
.t { ... }
.red { ... }
.header { ... }
/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }
選擇器
- 對于通用元素使用 class ，這樣利于渲染性能的優(yōu)化。
- 對于經(jīng)常出現(xiàn)的組件，避免使用屬性選擇器（例如，[class^="..."]）。瀏覽器的性能會受到這些因素的影響。
- 選擇器要盡可能短，并且盡量限制組成選擇器的元素個數(shù)，建議不要超過 3 。
- 只有在必要的時候才將 class 限制在最近的父元素內(nèi)（也就是后代選擇器）（例如，不使用帶前綴的 class 時 -- 前綴類似于命名空間）。
/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }
代碼組織
- 以組件為單位組織代碼段。
- 制定一致的注釋規(guī)范。
- 使用一致的空白符將代碼分隔成塊，這樣利于掃描較大的文檔。
- 如果使用了多個 CSS 文件，將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動。
/*
* Component section heading
*/
.element { ... }
/*
* Component section heading
*
* Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
*/
.element { ... }
/* Contextual sub-component or modifer */
.element-heading { ... }
編輯器配置
- 將你的編輯器按照下面的配置進(jìn)行設(shè)置，以避免常見的代碼不一致和差異：
- 用兩個空格代替制表符（soft-tab 即用空格代表 tab 符）。
- 保存文件時，刪除尾部的空白符。
- 設(shè)置文件編碼為 UTF-8。
- 在文件結(jié)尾添加一個空白行。
來源網(wǎng)絡(luò)，侵權(quán)聯(lián)系刪除
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
