扯淡中的扯淡
首先現(xiàn)在好多都叫div+css也有叫html+css，我個人也喜歡稱它為html+css。這個會從一個更高的層面上來看前端的標簽，div只是html標簽中的一個布局標簽，它還有很多的標簽，如果用div+css來起名，會讓人感覺到頁頭同排版只有用div+css 也是標準化的頁頁（哈哈，本人剛起入這一行時常聽到的是div+css，當時認為寫成div的代碼加上css樣式就是符合w3c標準了，這樣有會一個狹隘的想法，會有一個誤區(qū)是頁面用了大量的div，這樣的頁面及沒有符合語義又沒有符合SEO優(yōu)化。隨著對前端的理解慢慢改正過來了）。
W3C標準
W3C標準是一系列的標準，包含：結構層（HTML標準）、表現(xiàn)層（CSS標準）、行為層（DOM標準）等標準；
HTML+css要點：
個人要書寫前端（HTML+css）代碼時總結幾條適合自己的格式：
HTML：
1.div盡量用頁面布局，而不要用于內(nèi)容的布局；
2.頁面中對于有編號排列的集合用ol，因為它是有序的標簽
3.對于有標簽有描述的片段（只的是小的模塊）用dl它有一個dt標題和dd對標題的一個描述；
4.在使用H1--h6時，對于重要的內(nèi)容用h1-h3，對于側欄的頁面用h4-h5可以滿足需求，同時個人建議H標簽用于欄目標題上，內(nèi)容標題和標題的部分內(nèi)容一起顯示這時用DL的DT和DD一起使用，否則就使用H標簽，在這里對于它們的使用順序也要考慮一下；
5.對于SEO優(yōu)化的標簽有二個比較重要的Strong和Em的。它們的權重是很高的，Strong有重點，突出之意，em有強調(diào) 提醒之意；
6.Span標簽在頁面中的語義非常小，可以接合p em strong等這些標簽配合使用，為了解決這個CSS定義時Class屬性名的定義；
7.對于有一個標題一個集合列表這樣的模塊，可以用H標簽和UL標簽使用。這樣的意義是標題下面緊跟一個集合，是對標題的一個集合列表；
8.面向?qū)ο箝_發(fā)：首先分析設計原圖（模塊、CSS背景圖片合并等），把每個模塊看成一個對象來開發(fā)，然后抽象出父模塊的HTML和CSS進行封裝。最后開發(fā)整體代碼，重用HTML和繼承CSS樣式
9.根據(jù)不同的設計效果，而制訂不同的HTML標簽方案；
CSS：
1.在寫CSS時盡量不要寫成DIV#Img這樣的格式；
2.不建議CSS中嵌套的層次太多，建議三次為佳；（#header #.nav ul li{屬性：值}這樣的寫法會讓瀏覽器會從右向右一層一層地去查找）；
3.建議把具有共性的CSS提成全局的這樣每個需要使用的標簽可以去繼承；減少CSS代碼會提高加載效率；
4.最外層的DIV標簽建議使用ID屬性，它會有一點加載快的優(yōu)勢，可根據(jù)項目的設計而定；
5.CSS樣式的一個選擇器里的屬性可以寫成一行。加減少CSS文件的大小，一個空間也有一個字符的；對于短小的選擇器可以把它們成一條來寫；如：.red{color:red;} .blue{color:blue;}
6.在書寫CSS時，建議使用全小寫字母，為了解決在寫HTML屬性和CSS中定義有可能不一致（有一個好的習慣）；
7.在CSS的選擇器里添加一個背景屬性時，如果這個屬性要求背景圖片是repeat-x屬性時，背景圖片不在過于小，這樣會增加渲染時間；
8.在寫CSS屬性時，有的屬性值可以組合在一個屬性上，如：font:bold 14px/25px "宋體"; border:1px solid red; margin:0px 10px 0px 20px; padding:10px 20px 30px 40px; background:url() no-repeat scroll left top transparent;（CSS3樣式里也有很多這樣的組合在一起的，在這里不列舉了，轉為CSS在部分瀏覽器還沒有得到很好的支持）等等吧；
9.在組合CSS背景圖片時一定要考慮背景圖片的空間大小；
DOM標準：
DOM是采用的JavaScript語言來對瀏覽和HTML還有CSS進行一些動態(tài)的操作,JavaScriptj原生的對DOM的操作語言，JavaScript分為Window對象、內(nèi)置對象、Dom對象、JS語法；
Jquery插件是對以上的對象進行了兼容封裝和代碼編寫封裝（指減少代碼的編寫），優(yōu)點是瀏覽器上的兼容問題、減少代碼的編寫、簡單的鏈式編程、動畫效果、自定義動畫效果、Ajax、異步加載、對HTML和CSS具有很好的支持并且操作簡單、JS文件的壓縮版只有二十幾K小巧和使用靈活等功能；
在CSS中的個人書寫規(guī)范：
selector{
/* 定位屬性 */
display:block;
float:left;
position:absolute;
top:0px;
right:0px;
bottom:0px;
right:0px;
/* 容器屬性 */
width:0px;
height:0px;
margin:auto;
padding:0px;
box-shadouw:1px 1px rgba();
/* 格式屬性 */
line-height:10px;
text-align:center;
text-decoration:underline;
text-shadouw:1px 1px rgba();
/* 文本屬性 */
color:red;
font-size:12px;
font-weight:bold;
font-family:"宋體";
font-style:none;
list-style:none;
/* 邊框背景屬性 */
background-color:red;
background-image:url();
border:1px solid red;
border-raduis:5px;
overflow:hidden;
}
由于自己的水平有限，表達可能有點不明確，希望見諒，那里有不對的地方，希望你能指正和相互交流學習！
|
