網(wǎng)站前端開發(fā)需要具備什么核心思想？

　　作為一名前端開發(fā)工程師ID嵌套樣式問題，對(duì)于網(wǎng)站前端開發(fā)需要具備什么核心思想？

　　前端開發(fā)核心思想?

　　1、表現(xiàn)、內(nèi)容和行為的分離

　　2、標(biāo)記應(yīng)該是結(jié)構(gòu)良好、語(yǔ)義正確 以及 普遍合法 ID嵌套樣式問題。

　　3、Javascript應(yīng)該起到漸進(jìn)式增強(qiáng)用戶體驗(yàn)的作用 ID嵌套樣式問題。

　　總體原則?

　　1、縮進(jìn)?

　　對(duì)于所有編程語(yǔ)言，我們要求縮進(jìn)必須是軟tab（用空格字符）ID嵌套樣式問題。在你的文本編輯器里敲 Tab 應(yīng)該等于 4個(gè)空格 。

　　2、可讀性 vs 壓縮?

　　對(duì)于維護(hù)現(xiàn)有文件，我們認(rèn)為可讀性比節(jié)省文件大小更重要ID嵌套樣式問題。大量空白和適當(dāng)?shù)腁SCII藝術(shù)都是受鼓勵(lì)的。?cè)魏伍_發(fā)者都不必故意去壓縮HTML或CSS，也不必把Javascript代碼最小化得面目全非。

　　我們會(huì)在服務(wù)器端或build過(guò)程中自動(dòng)最小化并gzip壓縮所有的靜態(tài)客戶端文件，例如CSS和JSID嵌套樣式問題。

　　3、標(biāo)記?

　　任何網(wǎng)頁(yè)的首要組件就是基于標(biāo)簽的HTML標(biāo)記語(yǔ)言ID嵌套樣式問題。標(biāo)記定義了文檔的結(jié)構(gòu)和綱要，并提供結(jié)構(gòu)化的內(nèi)容。除了最基本的概念（例如標(biāo)題、段落和列表）之外，標(biāo)記并不是用來(lái)定義頁(yè)面上內(nèi)容的外觀和體驗(yàn)的。HTML的表現(xiàn)屬性都已經(jīng)被廢棄了，有關(guān)樣式的定義應(yīng)該被包含在 樣式表中。

　　4、HTML5?

　　Doctype?標(biāo)記中必須總是使用合適的Doctype來(lái)指示瀏覽器觸發(fā)標(biāo)準(zhǔn)模式. 永遠(yuǎn)要避免Quirks模式ID嵌套樣式問題。

　　HTML5特別好的一個(gè)方面就是它簡(jiǎn)化了Doctype需要的代碼ID嵌套樣式問題。無(wú)意義的屬性被棄用了，DOCTYPE 聲明也被顯著地簡(jiǎn)化了。另外，也無(wú)需再用 CDATA 對(duì)內(nèi)聯(lián)JavaScript代碼進(jìn)行轉(zhuǎn)義，而這在此之前為了讓XHTML符合XML的嚴(yán)密性是必需的。

　　HTML5 Doctype

　　4.1、!DOCTYPE html

　　字符編碼?

　　所有標(biāo)記必須通過(guò)UTF-8編碼傳遞，因?yàn)檫@種編碼方式是對(duì)國(guó)際化最友好的ID嵌套樣式問題。必須在部分都指定這種編碼。

　　設(shè)定字符編碼是通過(guò) meta 標(biāo)簽進(jìn)行ID嵌套樣式問題。

　　meta " /

　　如果是HTML5ID嵌套樣式問題，則只需要寫：

　　meta charset="utf-8"

　　4.2、標(biāo)記的總體原則?

　　編寫HTML標(biāo)記的總體原則ID嵌套樣式問題。提醒大家一點(diǎn)，在創(chuàng)建的HTML文檔里總是要使用能夠代表內(nèi)容語(yǔ)義的標(biāo)記。

　　段落分隔符要使用實(shí)際對(duì)應(yīng)的p元素，而不是用多個(gè)br標(biāo)簽ID嵌套樣式問題。

　　在合適的條件下，充分利用dl （定義列表）和blockquote 標(biāo)簽ID嵌套樣式問題。

　　列表中的條目必須總是放置于ul、ol或dl 中，永遠(yuǎn)不要用一組 div或p 來(lái)表示ID嵌套樣式問題。

　　給每個(gè)表單里的字段加上 label 標(biāo)簽，其中的 for屬性必須和對(duì)應(yīng)的輸入字段對(duì)應(yīng)，這樣用戶就可以點(diǎn)擊標(biāo)簽ID嵌套樣式問題。同理，給標(biāo)簽加上 cursor:pointer; 樣式也是明智的做法。

　　不用使用輸入字段中的 size 屬性ID嵌套樣式問題。該屬性是和輸入字段里文本的 font-size 相關(guān)的。應(yīng)該使用CSS寬度。

　　在某些閉合的 /div標(biāo)簽旁邊加上一段html注釋，說(shuō)明這里閉合的是什么元素ID嵌套樣式問題。這在有大量嵌套和縮進(jìn)的情況下會(huì)很有用。

　　不要把表格用于頁(yè)面布局ID嵌套樣式問題。

　　在合適的條件下，利用 microformats 和/或者 Microdata ，具體說(shuō)是 hCard 和 adrID嵌套樣式問題。

　　在合適的條件下，利用 thead、tbody和th標(biāo)簽 (以及Scope屬性）ID嵌套樣式問題。

　　具備恰當(dāng)語(yǔ)法結(jié)構(gòu)(THEAD,TBODY,TH [scope])的 Table 標(biāo)記

　　01.table summary="This is a chart of year-end returns for 2005."

　　02. thead

　　03. tr

　　04. th scope="col"Table header 1/th

　　05. th scope="col"Table header 2/th

　　06. /tr

　　07. /thead

　　08. tbody

　　09. tr

　　10. tdTable data 1/td

　　11. tdTable data 2/td

　　12. /tr

　　13. /tbody

　　14./table

　　對(duì)于頁(yè)眉和標(biāo)題，永遠(yuǎn)使用首字母大寫格式ID嵌套樣式問題。不要在標(biāo)記中使用全部大寫或小寫的標(biāo)題，而是應(yīng)用CSS屬性 text-transform:uppercase/lowercase 。

　　屬性加引號(hào)?

　　在HTML5規(guī)范里并沒有嚴(yán)格要求屬性值兩邊加引號(hào)ID嵌套樣式問題。但考慮到一些屬性可以接受空白值，為了保持一致性，我們要求所有屬性值必須加上引號(hào)。

　　p class="line note" data-attribute="106"Thi s is my paragraph of special text./p

　　CSS?

　　1.網(wǎng)頁(yè)的第二個(gè)組件就是在層疊樣式表（CSS）中包含的表現(xiàn)信息ID嵌套樣式問題。Web瀏覽器成功實(shí)現(xiàn)CSS后，整整一代web開發(fā)者對(duì)他們網(wǎng)站的外觀和體驗(yàn)擁有了全部的控制權(quán)。CSS 從表現(xiàn)方面則是通過(guò)對(duì)視覺屬性的定義來(lái)描述網(wǎng)頁(yè)。CSS 的強(qiáng)大之處在于，這些屬性可以混合并通過(guò)各種標(biāo)示符匹配，它可以通過(guò)樣式規(guī)則的分層（”層疊“）來(lái)控制頁(yè)面的布局和視覺特征。

　　2.從外部文件加載CSS，盡可能減少文件數(shù)ID嵌套樣式問題。加載標(biāo)簽必須放在文件的 HEAD 部分。用 LINK 標(biāo)簽加載，永遠(yuǎn)不要用@import。

　　3.加載樣式表

　　link rel="stylesheet" type="text/css" href="myStylesheet.css" /

　　4.不要用內(nèi)聯(lián)式樣式

　　p style="font-size: 12px; color: #FFFFFF"This is poor form, I say/p

　　5.不要在文件中用內(nèi)聯(lián)式引入的樣式，不管它是定義在樣式標(biāo)簽里還是直接定義在元素上ID嵌套樣式問題。這樣會(huì)很難追蹤樣式規(guī)則。

　　6.使用 normalize.css 讓渲染效果在不同瀏覽器中更一致ID嵌套樣式問題。

　　7.使用類似 YUI fonts.css 的字體規(guī)格化文件ID嵌套樣式問題。

　　8.定義樣式的時(shí)候，對(duì)樣式在頁(yè)面只出現(xiàn)一次的元素用id，其他的用classID嵌套樣式問題。

　　9.理解層疊和選擇器的明確度 ，這樣你就可以寫出非常簡(jiǎn)潔且高效的代碼ID嵌套樣式問題。

　　10.編寫性能優(yōu)化的選擇器ID嵌套樣式問題。盡可能避免使用開銷大的CSS選擇器。例如，避免 * 通配符選擇器，也不要疊加限定條件到 ID 選擇器（例如 div#myid）或 class 選擇器（例如 table.results）上。這對(duì)于速度至上并包含了成千上萬(wàn)個(gè)DOM元素的web應(yīng)用來(lái)說(shuō)尤為重要。

　　CSS盒子模型?

　　代碼要求最低要求：選擇器單獨(dú)占一行，每個(gè)屬性占一行ID嵌套樣式問題。屬性聲明要有縮進(jìn)。

　　作為提高的要求，關(guān)聯(lián)或孩子樣式要增加2-4個(gè)空格的縮進(jìn)ID嵌套樣式問題。這樣有利于分層查看和組織，產(chǎn)生（對(duì)某些人來(lái)說(shuō)）可讀性更好的樣式表。

　　另外，在給一個(gè)樣式指定多個(gè)選擇器的時(shí)候，把每個(gè)選擇器單獨(dú)放一行是個(gè)好主意ID嵌套樣式問題。這樣可以避免一行變得太長(zhǎng)，也能提高可讀性及版本控制流程。

　　01..post-list li a{

　　02. color:#A8A8A8;

　　03.}

　　04. .post-list li a:hover{

　　05. color:#000;

　　06. text-decoration:none;

　　07. }

　　08. .post-list li .author a,

　　09. .post-list li .author a:hover{

　　10. color:#F30;

　　11. text-transform:uppercase;

　　12. }

　　在多個(gè)開發(fā)者協(xié)作環(huán)境下，避免用單行CSS格式，因?yàn)檫@樣會(huì)給版本控制帶來(lái)問題ID嵌套樣式問題。

　　字母排序?

　　如果你對(duì)性能情有獨(dú)鐘， 對(duì)CSS屬性進(jìn)行字母排序有利于在GZIP壓縮中識(shí)別大量可重復(fù)的特征ID嵌套樣式問題。

　　Classes vs. IDs?

　　對(duì)于所用的樣式只出現(xiàn)一次的元素，給它設(shè)一個(gè)id屬性ID嵌套樣式問題。這個(gè)屬性只會(huì)應(yīng)用于該元素，不會(huì)用到其他地方。Class屬性則可以用到多個(gè)具有相同樣式屬性的元素上。具有相同外觀和表現(xiàn)的元素可以具有相同的class名。

　　1.ul id="categories"

　　2. li class="item"Category 1/li

　　3. li class="item"Category 2/li

　　4. li class="item"Category 3/li

　　5./ul

　　選擇器命名的慣例?

　　無(wú)論是 ID 還是 class，對(duì)任何東西最好總是根據(jù)它是什么而不是它看上去是什么樣子來(lái)命名ID嵌套樣式問題。 比如一個(gè)頁(yè)面上的特別提示的 class 名是 bigBlueText （大藍(lán)字），可它的樣式早就被改成紅色小字體，這個(gè)名字就沒意義了。使用更聰明的慣例如 noteText （提示文字）就好多了，因?yàn)榧词挂曈X樣式改變了，它也還是管用的。

　　選擇器?

　　CSS3 選擇器 規(guī)格引入了一整套對(duì)于更好地選擇元素極其有用的 CSS 選擇器ID嵌套樣式問題。

　　偽類?

　　偽類 使你能動(dòng)態(tài)地修飾網(wǎng)頁(yè)內(nèi)容的樣式ID嵌套樣式問題。有些偽類從CSS1 （:visited, :hover等） 和 CSS2 （:first-child, :lang）那時(shí)候開始就有了。CSS3又往列表里加入了16個(gè)新的偽類，這些偽類對(duì)于動(dòng)態(tài)地修飾網(wǎng)頁(yè)內(nèi)容的樣式特別有用。 學(xué)習(xí)如何深度使用偽類。

　　組合及屬性選擇器?

　　組合選擇器 提供了為特定元素選擇其后代元素、孩子元素或兄弟元素的快捷方式ID嵌套樣式問題。

　　屬性選擇器 適用于具有特定屬性 和/或 特定值的元素ID嵌套樣式問題。正則表達(dá)式的知識(shí)對(duì)屬性選擇大有幫助。

　　明確度?

　　瀏覽器會(huì)通過(guò)計(jì)算選擇器的明確度ID嵌套樣式問題。來(lái)決定應(yīng)用哪個(gè)CSS規(guī)則。?cè)绻麅蓚€(gè)選擇器都適用于同樣的元素，具有更高明確度的那個(gè)會(huì)勝出。ID 選擇器比屬性選擇器明確度高，class 選擇器比任何數(shù)量的元素選擇器明確度高。盡量使用 ID 選擇器來(lái)提高明確度。有時(shí)候我們可能會(huì)想方設(shè)法給一個(gè)元素應(yīng)用一條CSS規(guī)則，但用盡方法也不能如愿。這種情況有可能是因?yàn)槲覀兪褂玫倪x擇器比另外一個(gè)的明確度低，所以明確度高的另一個(gè)選擇器里的屬性就比我們想應(yīng)用的選擇器優(yōu)先了。這種情況在更大或更復(fù)雜的樣式表里更為常見。在小一些的項(xiàng)目里，通常這不是大問題。

　　計(jì)算明確度?

　　當(dāng)你在一個(gè)很大很復(fù)雜的樣式表上干活的時(shí)候，知道如何計(jì)算選擇器的明確度會(huì)有很大幫助，會(huì)節(jié)約你的時(shí)間，并讓你的選擇器更有效率ID嵌套樣式問題。

　　明確度的計(jì)算方式是對(duì)你的CSS的各種組件計(jì)數(shù)，并用 (a,b,c,d) 格式表達(dá)出來(lái)ID嵌套樣式問題。

　　元素ID嵌套樣式問題，偽元素: d = 1 – (0,0,0,1)

　　類ID嵌套樣式問題，偽類，屬性: c = 1 – (0,0,1,0)

　　Id: b = 1 – (0,1,0,0)

　　內(nèi)聯(lián)樣式: a = 1 – (1,0,0,0)

　　不過(guò)，也許使用現(xiàn)成的明確度計(jì)算器更好一些ID嵌套樣式問題。

　　明確度計(jì)算器

　　你應(yīng)該了解的關(guān)于明確度的一些事

　　IE 明確度 bugs

　　使用 !important 會(huì)覆蓋掉所有的明確度，不管它有多高ID嵌套樣式問題。因此我們傾向于避免使用它。大部分時(shí)候是沒必要用它的。即使你需要覆蓋某個(gè)你訪問不到的樣式表里的選擇器，往往也會(huì)有其他的辦法去覆蓋。盡可能避免使用它。

　　像素 vs. Em?

　　我們使用 px 作為定義 font size 的度量單位，因?yàn)樗芴峁?duì)文本的絕對(duì)控制ID嵌套樣式問題。我們知道為字體大小使用 em 單位一度很流行，這樣可以解決 IE6 無(wú)法改變基于像素的文本大小的問題。不過(guò)，現(xiàn)在所有的主流瀏覽器（包括 IE7 和 IE8）都支持基于像素單位的文本大小 和/或 整頁(yè)縮放。既然 IE6 被廣泛認(rèn)為已廢棄，用像素定義文本尺寸更好。另外，無(wú)單位的 line-height 也應(yīng)該優(yōu)先考慮，因?yàn)樗粫?huì)從父元素繼承一個(gè)百分比值，而是基于 font-size 的一個(gè)乘數(shù)。

　　正確

　　1.#selector {

　　2. font-size: 13px;

　　3. line-height: 1.5; /* 13 * 1.5 = 19.5 ~ Rounds to 20px. */

　　4.}

　　不正確

　　1./* Equivalent to 13px font-size and 20px line-height, but only if the browser default text size is 16px. */

　　2.#selector {

　　3. font-size: 0.813em;

　　4. line-height: 1.25em;

　　5.}

　　IE Bugs?

021yin.com 了解更多信息。

　　修復(fù) IE

　　1.!--[if lt IE 7 ] body class="ie6" ![endif]--

　　2.!--[if IE 7 ] body class="ie7" ![endif]--

　　3.!--[if IE 8 ] body class="ie8" ![endif]--

　　4.!--[if IE 9 ] body class="ie9" ![endif]--

　　5.!--[if !IE]!-- body !--![endif]--

　　1..box { float: left; margin-left: 20px; }

　　2..ie6 .box { margin-left: 10px; }

　　如果你在用HTML5（以及 HTML5 Boilerplate）ID嵌套樣式問題， 我們推薦使用 Modernizer JavaScript庫(kù)和下列模式：

　　1.!--[if lt IE 7] html class="no-js ie ie6" lang="en" ![endif]--

　　2.!--[if IE 7] html class="no-js ie ie7" lang="en" ![endif]--

　　3.!--[if IE 8] html class="no-js ie8" lang="en" ![endif]--

　　4.!--[if IE 9] html class="no-js ie9" lang="en" ![endif]--

　　5.!--[if gt IE 9]!--html class="no-js" lang="en"!--![endif]--

　　速記格式?

　　一般情況下要優(yōu)先使用CSS速記格式，一是因?yàn)樗暮?jiǎn)潔，二是用它也可以擴(kuò)充已有的值，例如margin和padding的情況ID嵌套樣式問題。 開發(fā)者必須注意TRBL 縮寫，它表示元素的各邊按順時(shí)針方向定義的順序：上、右、下、左。?cè)绻鸼ottom沒有定義，它就會(huì)從top繼承值。同理，如果left未定義，它從right繼承值。?cè)绻挥衪op的值有定義，所有的邊都會(huì)繼承那一個(gè)值。

　　下面是關(guān)于減少樣式表代碼冗余和使用CSS速記格式的更多內(nèi)容：

021yin.com /journal/news/css-background-shorthand

021yin.com /journal/css-redundancy

021yin.com /css-shorthand

　　圖片?

　　對(duì)于（用于背景的）重復(fù)圖片ID嵌套樣式問題，要使用 比 1×1 像素大的圖片

　　永遠(yuǎn)不要用空白圖片ID嵌套樣式問題。

　　多使用 CSS精靈（sprites）ID嵌套樣式問題。它會(huì)使懸停狀態(tài)更簡(jiǎn)單，改善頁(yè)面加載速度，并減少二氧化碳的排放。

　　一般情況下，所有的圖片都應(yīng)該切成帶透明背景（PNG8），并裁減成緊密貼合圖片外邊框ID嵌套樣式問題。

　　不過(guò)，logo必須總是帶有背景遮片，并在裁減內(nèi)容之外留出內(nèi)邊框ID嵌套樣式問題。

　　顏色管理?

　　確認(rèn)團(tuán)隊(duì)所有成員都有一致的顏色管理設(shè)置ID嵌套樣式問題。

　　任意兩臺(tái)顯示器顯示的顏色很可能會(huì)有所不同，但必須使用sRGB顏色作為缺省配置ID嵌套樣式問題。

　　當(dāng)你在Photoshop打開文件時(shí)，要注意顏色配置警告，當(dāng)Photoshop建議把圖片轉(zhuǎn)換到另一個(gè)配置時(shí)，要通知其他團(tuán)隊(duì)成員ID嵌套樣式問題。

　　永遠(yuǎn)不要把顏色配置嵌入到圖片里ID嵌套樣式問題。

　　當(dāng)你從Photoshop保存圖片時(shí)，務(wù)必去掉”Embed Color Profile”選項(xiàng)的勾選ID嵌套樣式問題。

　　通用的文本和字體樣式?

　　標(biāo)題?

　　要給 h1-h6 標(biāo)題 — 包括作為鏈接的標(biāo)題 — 定義缺省樣式ID嵌套樣式問題。在你的CSS文檔頂部定義它們，在必要時(shí)修改它們以保持整個(gè)站點(diǎn)的一致性。

　　標(biāo)題必須有層次，能表明從大到小不同級(jí)別的重要性，h1具有最大的字體大小ID嵌套樣式問題。

　　SEO：要大致地了解頁(yè)面的層次組織和閱讀效果，在開發(fā)者工具里關(guān)閉CSS效果，你會(huì)看到一個(gè)基于文字的視圖，包括所有的 h1-h6 ， strong， em 等標(biāo)簽ID嵌套樣式問題。

　　鏈接?

　　必須定義鏈接的缺省樣式，樣式要和主要的文字樣式不同，載懸停狀態(tài)下也要有不同的樣式ID嵌套樣式問題。

　　當(dāng)給鏈接加下劃線樣式時(shí)，使用 border-bottom 并用 text-decoration: none; 加點(diǎn)內(nèi)邊框ID嵌套樣式問題。這樣看起來(lái)更好一些。

　　深入學(xué)習(xí)和理解CSS及基于瀏覽器的盒子模型，對(duì)于掌握CSS布局的基礎(chǔ)是非常必要的ID嵌套樣式問題。

021yin.com /qdkfjc/46.html