/面包理想
一轉眼已經2018年,前端行業也風風雨雨地走過了10多年,網頁布局也從最原始的文檔變成了精彩紛呈的交互。當我看到第四代CSS布局技術的時候,在驚嘆互聯網發展如此突飛猛進的同時,不禁會有一個疑問:CSS經歷1.0到3.0的版本變遷,最終又將走向哪里?
今天我們就回顧一下CSS簡史和四次布局技術的躍遷。
1.CSS簡史
為什么我們需要回顧一下CSS簡史呢?
1.了解過去能夠更好地預測未來,畢竟太陽底下沒有什么新鮮事。
2.相比預測未來,通過了解CSS發展演變趨勢,能夠科學合理地評判CSS的發展,指導我們學習CSS的核心技術,讓我們在有限的精力和時間內學對知識,學好知識。
那是1989年的第一場雪,比1988年來的更早一些,伯納斯·李(Tim Berners-Lee)以超人的智慧和消耗了前額無數濃密的頭發為代價發明了World Wide Web,沒有他就沒有我們今天互聯網相關的工作,也就沒有了這個專欄教程,請允許我代表廣大前端致以崇高的敬意。我們先一睹大神的風采。
對互聯網之父,我只想對他說一句話,有一款洗發水增發效果挺好的,我一直用,你要不要試試?
互聯網誕生了以后,最初的網頁僅僅是純文本,但是隨著互聯網的發展,大家意識到web的原始版本根本就沒有提供一種裝飾網頁的方法。這就好比一個嬰兒不會穿著衣服出生一樣,孩子大了,總不能裸奔吧?這個時候兩個大神提供了解決方案Pei Yaun Wei和Andreesen。
Pei Yaun Wei說,這個好辦,我們可以給孩子穿上紙尿褲。
Pei-Yuan Wei在1991年創建圖形瀏覽器 ViolaWWW ,他整合了自己提出的樣式語言到自己開發的瀏覽器中,還期望自己的樣式語法最終能成為web關于樣式的官方標準。雖然這個目標并未達到,但是他提出的樣式語法確實為其它的一些樣式語法提供了一些靈感。
Andreesen說,那玩意得換多麻煩,我給孩子畫一身衣服吧,當然你懂的,最后Pei Yaun Wei的方案被采用了,但是我們還是看看Andreessen畫出來的情況有多亂。
與此同時,Andreessen 在他開發的網景瀏覽器中進行了不同的嘗試。他并沒有創建一種分離式的標記語言,而是采取拓展HTML標簽的方法來包含非標準化的HTML標簽已達到裝飾網頁的目的。不幸的是,沒過多久,網頁就失去了所有的語義化并看起來像下面這樣混亂:
<MULTICOL COLS="3" GUTTER="25"> <P><FONT SIZE="4" COLOR="RED">This would be some font broken up into columns</FONT></P></MULTICOL>
最終被大家采納的語言是由Hakon Wium 在 1994年 10月提出的樣式語法。它被稱為樣式層疊表,簡稱CSS,但是直到1996年的時候,CSS才演變成我們熟悉的樣子。
html { margin-left: 2cm; font-family: "Times", serif; }h1 { font-size: 24px; }
然后在1998年5月W3C發表了CSS2,緊接著一個讓我們深惡痛覺的瀏覽器誕生了!對沒錯,就是你深惡痛絕的那個萬能的IE6,2001年微軟發布了IE6,不過搞笑的是,IE6最初的出現確實很大程度推動了CSS發展。那時候的網頁已經變成跟現在很接近了。
按照常理你肯定會想,后面我就知道了,你不用說了,然后就是CSS3.0了。好吧,如果是我,我也這樣想,但是國際友人的腦回路可能跟我們不一樣,事實上,CSS3早于1999年已經開始制訂,直到2011年6月7日,CSS 3 Color Module終于發布為W3C Recommendation。這個故事告訴我們兩件事:
1.w3c這個組織活的真夠長,甚至比很多讀者年齡都大。
2.不是CSS正式版發布了你才放心使用,如果等到那個時候使用,你的項目可能未曾綻放就枯萎了。
細心的讀者可能會問了,CSS3正式版什么時候發布啊?另外CSS4.0什么時候發布?
好吧,我只能告訴你隨緣吧……而且沒有CSS4.0了,也不會有CSS5.0了。
來我們再看看國際友人的腦回路:
簡單地說,就是從CSS3開始,CSS規范就被拆成眾多模塊(module)單獨進行升級,或者將新需求作為一個新模塊來立項并進行標準化。因此今后不會再有CSS4、CSS5這種所謂大版本號的變更,有的只是CSS某個模塊級別的躍遷。
按照CSS工作組的說法,CSS歷史上并沒有版本的概念,有的只是“級別”(level)的概念。比如,CSS3其實是CSS Level 3,CSS2是CSS Level 2,而CSS Level 1當然就是CSS1。每個級別都以上一個級別為基礎。
大家可能說這個命名好亂啊,這事兒我只想跟你說,你就把CSS工作組當成你女朋友就好了,她開心就好,她說的都是對的,她說啥就是啥……
至于我們,會用就好了。
CSS出現的好處就是讓結構和表現分離,可以更靈活的修飾網頁,學習也很簡單。這里我更想說說它的不足。
1.CSS只有一個全局的命名空間,所以是無法避免出現選擇器沖突的。
2.模塊化做的不夠好,所以造成嵌套和覆蓋混亂,容易產生一大堆亂糟糟的樣式。
所以現在CSS也在向“模塊化、JS化發展”
不過客觀地說,CSS的出現確實是互聯網里程碑式的進步。
CSS其實就做了兩件事:
1.如何布局
2.元素怎么表現
說直白一點就是兩件事,一個房子是蓋成兩室一廳還是三室兩廳,另一件事是精裝修。
這里大家就會看到如果一個房子180平米隔成1個10平米的主臥170平米的廁所,你再怎么精裝修也不會是一個宜居的房間。所以布局在CSS中是極其重要的。與CSS發展簡史類似,CSS布局也經歷了一代又一代的迭代,才成為當前的樣子。
接下來我們就說說CSS布局簡史。
2.CSS布局簡史
初代table布局
在1997年的時候,David Siegel 改變了web,他自己研究出了一項網頁布局技術,利用html中的table元素和gif圖片縫合在一起,創造了表格布局技術,之后他就猶如一頭猛獸泛濫起來。
優點:布局容易、快捷、兼容性好
缺點:改動不便,需要重新調整,工作量大
由于互聯網網站越來越復雜,內容和業務更新頻繁,所以table布局是完全不能勝任的,以至于table布局的發明人都說:
“我把炸醬和面倒在了一起,并且沒法分開它。”
不過這個真不是我杜撰出來的,原文:
David Siegel:“有人說我毀掉了Web,我回答他們,的確如此。我毀掉了Web是因為我把巧克力和花生醬混合在一起卻再也不能把它們分開。我犯下了把結構跟表現混合在一起的錯誤。”
然后第二代布局技術登場了,
CSS+div布局
CSS+div布局總結起來有三大優點,
1.省時,學習容易,寫代碼也很容易,很快,效率高
2.省事,如果業務邏輯變了,改起來特別方便快捷
3.省錢,代碼量少,省帶寬,適合seo
基于這三年不難看出CSS+div布局人畜無害,人見人愛,也就不難解釋為什么被廣泛地使用成為目前主流的布局技術了。當然了他也有缺點:
1.需要考慮平臺兼容性,對制作人員的技能要求較高。
2.在移動端布局顯得有些力不從心,如未知寬高float內部元素居中、垂直水平布局、響應式布局等方面略顯繁瑣。
基于此,第三代布局技術應運而生。
Flex布局
優點:
1.CSS3的布局方式,可以在不使用其他框架的情況下,簡便、完整、響應式地實現各種頁面布局 2.移動端布局簡直太友好
缺點:
兼容性較差,IE瀏覽器版本在9.0以上,基本要10.0 對于其他瀏覽器,要求兼容性寫法
Flex布局日漸成為移動端主流布局技術,但是它是單一維度的布局,這個我會在專欄后面講到,有時候也會捉襟見肘,所以目前出現了第四代的布局技術:
grid布局
因為目前大部分瀏覽器并不支持這種技術,但是它代表了網絡發展,這里大家保持關注就好,這里我重點說下它為什么可以稱為第四代網絡布局技術。首先一個觀點大家先記住:
它并不會取代第三代的布局技術,而是顛覆和突破。就好像Flex遠比div+CSS布局更方便,但是div+CSS依然有用武之地。
我們說下它的突破之處:
1.flex對標的是float,本質上還是一維布局,這就跟別人開著夏利,你開奔馳都是地面上跑沒啥本質區別一樣。但是grid升維了,grid是飛機,在地面馬路這條線一維之上讓人能夠思考高度這個維度,以前是汽車一維交通工具(你只能在水平方向一個方向開),飛機是二維(能俯沖了(橫向、縱向同時)),所以grid可以說是拓寬了CSS布局的維度。不排除將來會有三維布局的出現。到時候CSS不僅僅能控制橫向布局,縱向布局,還可以深度布局(這個要依賴于三維展示的出現,如VR,AR三維立體的展示設備出現)。
2.grid布局里面采用了“可視化布局(template部分,所見即所得)”,這個是顛覆了傳統的,寫一句代碼刷一下瀏覽器這樣的開發方式,不排除以后會出現代碼即效果的開發模式。比如你在一個設備上畫一個區域,然后畫輪播圖。
這種方式類似于vc++控件方式,但是更智能,也更友好。誰說不可能呢?大家不要忘了grid布局的來源是早就廢棄的table布局。說到這里我多說一句搞笑的微軟,frontpage沒火,dreamwaver火了,最早提出“canvas”概念的 VML沒火,最后html5的canvas火了,連CSS3網格布局也是由微軟創建的一個模塊 ,最后火起來居然沒人認識它。心疼微軟一秒鐘。
說到這里大家對CSS簡史和布局也有所了解了,我們總結下,通過本文你應該學到:
(1)CSS的發展歷史。
(2)熟知布局的發展歷史,以便對未來布局技術的發展有一個客觀的判斷,來選擇是否學習。
通過本文的學習大家已經對CSS相關基礎知識有所了解,接下來我們就開始真正的進入技術的學習,大家是不是迫不及待了呢?
使用2個空格縮進
<ul>
<li>Fantastic</li>
<li>Great</li>
</ul>
.example {
color: blue;
}
只允許使用小寫。
所有的代碼都用小寫字母:適用于元素名,屬性,屬性值(除了文本和CDATA), 選擇器,特性,特性值(除了字符串)。
<!-- 不推薦 -->
<A HREF="/">Home</A>
<!-- 推薦 -->
<img src="google.png"
alt="Google">
建議刪除行尾白空格。
<!-- 不推薦 -->
<p>What? </p>
<!-- 推薦 -->
<p>Yes please.</p>
如果沒有特殊需求,一般采用utf-8編碼。如果是cms站點,則遵守該站點的編碼規則。
<!-- 網頁編碼 -->
<meta charset="utf-8">
盡可能的去解釋你寫的代碼。說明該代碼包括什么、目的是什么、能做什么、為什么使用它等。
注釋是否需要詳盡,取決于項目的復雜程度。
一般單行注釋:
<!-- col -->
模塊間注釋:
<!-- news -->
<div class="news">
<h2>News</h2>
<p>...</p>
</div>
<!--/ news -->
循環注釋:
<ul>
<!-- loop: new list -->
<li>new's title 1</li>
<li>new's title 2</li>
<li>new's title 3</li>
<li>new's title 4</li>
<li>new's title 5</li>
<!-- /loop: new list -->
</ul>
cms輸出注釋:
<!-- cms: news list -->
<ul>
<li>new's title 1</li>
<li>new's title 2</li>
<li>new's title 3</li>
<li>new's title 4</li>
<li>new's title 5</li>
</ul>
<!-- /cms: news list -->
Tab選項卡內容注釋:
<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->
使用html5文檔聲明,不再使用XHTML(application/xhtml+xml)。
HTML5是目前所有HTML文檔類型中的首選:
<!DOCTYPE html>
編寫有效、正確的HTML代碼,否則很難達到性能上的提升。
可以使用一些工具驗證你的代碼,如 W3C HTML validator
根據HTML各個元素的用途而去使用它們。
<!-- 不推薦 -->
<div class="col">
<div class="title">
news</div>
<p>list1</p>
<p>list2</p>
<p>list3</p>
</div>
<!-- 推薦 -->
<div class="col">
<h2 class="title">
news</h2>
<p>list1</p>
<p>list2</p>
<p>list3</p>
</div>
部分標簽說明:
不推薦使用的標簽:
給多媒體元素,比如canvas、videos、 images增加alt屬性,提高可用性(特別是常用的img標簽,盡可量得加上alt屬性,提供圖片的描述信息)。
<!-- 不推薦 -->
<img src="world.jpg">
<!-- 推薦 -->
<img src="world.jpg"
alt="our world images">
在樣式表和腳本的標簽中忽略type屬性。
HTML5默認type為text/css和text/javascript類型,所以沒必要指定。即便是老瀏覽器也是支持的。
<!-- 不推薦 -->
<link rel="stylesheet"
href="//www.google.com/css/maia.css"
type="text/css">
<script src="
//www.google.com/
js/gweb/analytics/autotrack.js"
type="text/javascript">
</script>
<!-- 推薦 -->
<link rel="stylesheet"
href="//www.google.com/css/maia.css">
<script src="
//www.google.com/
js/gweb/analytics/autotrack.js">
</script>
每個塊元素、列表元素或表格元素都獨占一行,每個子元素都相對于父元素進行縮進。按設計稿劃分模塊,盡量使頁面模塊化,模塊與模塊之前要有清晰的注釋。
如上面頁面框架,推薦寫法:
<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
<!-- container -->
<div class="container">
<!--news-->
<div class="news">
<h2>news<h2>
<p>...</p>
</div>
<!--news-->
</div>
<!--/container-->
<!--sidebar-->
<div class="sidebar">
sidebar</div>
<!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->
保證整個頁面在未加載樣式表時仍有較好的層次清晰的頁面結構。
<!-- 不推薦 -->
<div class="logo">My Site</div>
<div class="nav">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">Mobile</a>
</div>
<div class="news">
<div>News</div>
<a href="#">
news list 1</a>
<a href="#">
news list 2</a>
<a href="#">
news list 3</a>
</div>
<!-- 推薦 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
<li><a href="#">
Home</a></li>
<li><a href="#">
News</a></li>
<li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
<h2>News</h2>
<ul>
<li><a href="#">
news list 1</a>
</li>
<li><a href="#">
news list 2</a>
</li>
<li><a href="#">
news list 3</a>
</li>
</ul>
</div>
H標簽使用
strong、b使用
將需要加粗的文字使用b標簽來顯示。
將需要強調的文字(主要指包含關鍵詞的信息)使用strong標簽來強調主要內容。
注:b是粗體標簽,屬于實體標簽,它所包圍的字符將被設為bold(粗體);strong 是加重語氣標簽,屬于邏輯標簽,它的作用是加強字符語氣。
在很多情況下,a都要使用title來說明該鏈接的相關說明或目的意義。
例如:當使用overflow隱藏掉a中的溢出文字時,該a中的title是必不可少的,它可以告訴用戶被隱藏掉的文字內容是什么;又或者當一個圖片型鏈接出現時,該a中的title同樣是必不可少的,它可以告訴用戶這個圖片鏈接是做什么用的。
注:僅在img里添加alt標簽在火狐提示文字是出不來的,alt是圖片加載失敗或未加載完全時顯示出來的提示文字,要想鼠標移上去顯示提示信息應該用title,嚴謹的寫法是img里加入alt和title這兩個標簽。
代碼保持精簡,最優化,這樣搜索引擎才更喜歡。
例
簡單的 HTML5 文檔:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
文檔內容......
</body>
</html>
瀏覽器支持
所有主流瀏覽器都支持 <html> 標簽。
標簽定義及使用說明
<html> 標簽告知瀏覽器這是一個 HTML 文檔。
<html> 標簽是 HTML 文檔中最外層的元素。
<html> 標簽是所有其他 HTML 元素(除了 <!DOCTYPE> 標簽)的容器。
HTML 4.01 與 HTML5之間的差異
HTML5 中,增加了一個新屬性:manifest。
HTML 與 XHTML 之間的差異
xmlns 屬性在 XHTML 中是必需的,但在 HTML中不是。
然而,即使 XHTML 文檔中的 <html> 沒有使用 xmlns 屬性,W3C 上的 HTML 驗證器也不會報錯。這是因為 "xmlns=http://www.w3.org/1999/xhtml" 是一個固定值,即使您沒有包含它,此值也會被添加到 <html> 標簽中。
屬性
New :HTML5 中的新屬性。
屬性 | 值 | 描述 |
---|---|---|
manifestNew | URL | 定義一個 URL,在這個 URL 上描述了文檔的緩存信息。 |
xmlns | http://www.w3.org/1999/xhtml | HTML 不支持。只有 XHTML 支持。 規定 XML 的 namespace 屬性(如果您需要您的內容符合 XHTML,則使用這個屬性。)。 |
全局屬性
<html> 標簽支持 HTML 的全局屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。