之前一些章節(jié)介紹了html跟css單獨(dú)的一些基礎(chǔ)知識(shí).大部分都是書(shū)上或者是其他教材上不會(huì)明確提及到的一些東西.

其實(shí)學(xué)習(xí)前端是一門(mén)想比較其他語(yǔ)言學(xué)習(xí)起來(lái)更加枯燥和繁瑣的事情.比如我當(dāng)初開(kāi)始學(xué)習(xí)java的時(shí)候,有個(gè)eclipse,運(yùn)行執(zhí)行,寫(xiě)什么都很有勁的感覺(jué).IO.net組件,那些玩意雖然很繞,但總會(huì)去總結(jié),哪個(gè)api速度快,那個(gè)api用起來(lái)方便.但寫(xiě)來(lái)寫(xiě)去還脫不出那個(gè)天地.那時(shí)候估計(jì)還小,還不懂什么是設(shè)計(jì)模式,只知道怎么編寫(xiě)代碼,自己看起來(lái)舒服.莫名其妙的學(xué)會(huì)了遞歸,學(xué)會(huì)了單例和工廠(chǎng),只是當(dāng)時(shí)還不知道.

后來(lái)看過(guò)python的教程,會(huì)寫(xiě)些簡(jiǎn)單的py,看過(guò)php,便又能寫(xiě)php.只是沒(méi)了當(dāng)初學(xué)習(xí)java的沖勁跟感悟.一直在用些自己常用的思維去編寫(xiě)代碼.

直到自己開(kāi)始正式的覺(jué)得自己是個(gè)前端.很多認(rèn)為前端比較難,是,沒(méi)錯(cuò),前端需要掌握的語(yǔ)言籠統(tǒng)來(lái)說(shuō)就有3種,html,css,js.變通起來(lái),還不知道有多少變化.

實(shí)現(xiàn)一種效果,

有些人會(huì)說(shuō),”我僅用html就可以實(shí)現(xiàn)”.

一般的人說(shuō),”我得用html+css”.

還有人說(shuō),”除了html跟css以外,我還得用上js”

以上的3句話(huà),并沒(méi)有褒貶的意思,只是證明了前端制作是三種語(yǔ)言混合的產(chǎn)物.三種語(yǔ)言用到熟悉,至少也得1年,到精通就不知道啥時(shí)候了.主要還是看勤奮.

我是個(gè)有時(shí)候比較懶散的人,不想在博客里面寫(xiě)太多的基礎(chǔ)知識(shí).所以大家看我寫(xiě)的東西以外,還需要看些別的資料書(shū).多看看別人的代碼是怎么寫(xiě)的.

今天說(shuō)說(shuō)html跟css的組合吧.

一.關(guān)于dtd與瀏覽器細(xì)節(jié)差異.

之前在說(shuō)html的時(shí)候呢,說(shuō)到過(guò)dtd,這里我就不重復(fù)了,這里提到的重點(diǎn)是html4標(biāo)準(zhǔn)跟html5標(biāo)準(zhǔn)的差異.

總所周知,html5添加了一些標(biāo)簽,導(dǎo)致了低版本的ie,或者其他瀏覽器在解析的時(shí)候出現(xiàn)問(wèn)題.現(xiàn)代支持html5的瀏覽器,如果用了html4的聲明,但是文件里面寫(xiě)了html5的標(biāo)簽,大約也是會(huì)有解析上不一致.再加上本身各個(gè)瀏覽器的內(nèi)核實(shí)現(xiàn)方式不一致,所以一些標(biāo)簽的默認(rèn)屬性不一致也是很正常的.

很久以前呢,有一群前端就已經(jīng)發(fā)現(xiàn)了這個(gè)問(wèn)題,并致力于解決這個(gè)問(wèn)題.提出了一個(gè)方案,就是reset.css.差不多意思的還有normal.css(關(guān)鍵字有了,大家谷歌,百度均可.方案很多.)

原先前端內(nèi)部的意見(jiàn)還是不夠統(tǒng)一的,認(rèn)為,這玩意是沒(méi)有必要的.或者說(shuō)是破壞了瀏覽器的初衷.

這玩意的原理其實(shí)很簡(jiǎn)單.利用了css選擇器的優(yōu)先級(jí)和屬性的繼承以及覆蓋機(jī)制.

Ps:這塊倒是真需要百度一下繼承機(jī)制.我這里就不多說(shuō).因?yàn)橥暾年U述這個(gè)性質(zhì),估計(jì)還得寫(xiě)個(gè)博文.

Css這塊的默認(rèn)屬性解決了,html5的標(biāo)簽?zāi)?/span>?

這就需要html5.js,原理嘛,其實(shí)就是向文檔結(jié)構(gòu)里面注冊(cè)html5的標(biāo)簽,并給他們賦予默認(rèn)的屬性.性質(zhì)跟自定義標(biāo)簽差不多.js這塊,現(xiàn)在我還不想說(shuō),下面會(huì)具體談js在前端技術(shù)中扮演的一個(gè)角色.大家可以自行參照.

還有個(gè)就是解決html5特性的js庫(kù),modernizr.

那么這些個(gè)小玩意到底需要不需要呢?我覺(jué)得還是需要的好,為啥呢?

這就是前端最重要的模塊化思想.

二.模塊化

前端為什么發(fā)展到現(xiàn)在如此的繁榮,就是因?yàn)樗_(kāi)放.

再窮的小孩,小時(shí)候都玩過(guò)積木,沒(méi)玩過(guò)積木也玩過(guò)捏泥巴.在我看來(lái),前端本身就是一個(gè)創(chuàng)造力大于體力的一個(gè)技術(shù)行業(yè).前些日子幡然悔悟了兩個(gè)字,匠義.大抵是看過(guò)程序猿的修煉之道,從小工到專(zhuān)家.

總覺(jué)得這個(gè)翻譯有些中國(guó)化,專(zhuān)家這種東西在中國(guó),大馬路上掉下一塊廣告牌,若新聞報(bào)道里面說(shuō)是砸死的人里面有什么什么方面的專(zhuān)家,一定不要覺(jué)得這是巧合.好吧,我又黑了一把專(zhuān)家.

既然是小工,即便是轉(zhuǎn)行,同是技術(shù)行業(yè),到后面便是匠.所以有能力的同學(xué),還是建議你們看看原版的書(shū),因?yàn)檫@塊呢,語(yǔ)境和語(yǔ)義,只可意會(huì),翻譯出來(lái),就少了那個(gè)味道.

扯遠(yuǎn)了,拉回來(lái).

開(kāi)始寫(xiě)代碼的時(shí)候,都是一步一步的敲出來(lái),重復(fù)的東西多了,就把他們共用出來(lái),這是常識(shí).而重復(fù)的東西大多有共性,對(duì)這行東西進(jìn)行總結(jié)歸納,就是設(shè)計(jì)模式.而把那些具有特定用途的代碼進(jìn)行接口編程,這些就是模塊工具.

什么叫接口編程呢,就是我告訴怎么用我這個(gè)工具,告訴你api,寫(xiě)個(gè)使用的demo,你需要關(guān)注的就是怎么用,是否得到你預(yù)期的結(jié)果,不需要在意我在這里面怎么做的.

如果有個(gè)工具說(shuō),幫你把你可能需要的所有技術(shù)都考慮了,我這里面有這么一個(gè)大個(gè)的工具集.這個(gè)玩意就是解決方案.你需要的就是把用這個(gè)工具集去解決大部分的問(wèn)題.

這些都是思想性質(zhì)的東西,我說(shuō)了你可能現(xiàn)在不太明白.或者等你明白了對(duì)我說(shuō)的有些別的意見(jiàn).都沒(méi)關(guān)系.拿出來(lái)討論,見(jiàn)光,前端這個(gè)行業(yè)才能長(zhǎng)足進(jìn)步,造福于后來(lái)之人.

現(xiàn)在再去看reset.css之類(lèi)的小玩意.你們覺(jué)得需要嗎?

我的答案是,看你做什么東西,要去完成什么目標(biāo).然后選擇你需要的這些模塊或者說(shuō)是工具.

某一點(diǎn)上我倒是很同意,國(guó)內(nèi)有些過(guò)于追求片面的高手定義,比如說(shuō)精通js,有些單位單位的面試要求里面就寫(xiě)到,精通js的原生api,然后要求,精通jquery的源代碼.諸如此類(lèi)的一些事情.

從立意上中國(guó)的軟件開(kāi)發(fā)似乎就低了國(guó)外一等.盲目的認(rèn)為只有國(guó)外的軟件,才是最優(yōu)秀的.而中國(guó)的開(kāi)源軟件,有時(shí)候被噴,這不好,那不好,要么就是盲目崇拜,上來(lái)就是大神,能不能教我,比如老趙,有時(shí)去看看,我跟他也不認(rèn)識(shí).只是常去看看他的博客.

http://blog.zhaojie.me/

前端還有些人.比如周愛(ài)民,阮一峰等等,我就不一一去列舉了,有興趣的時(shí)候,百度一些知識(shí)點(diǎn)都是他們撰文的.

多看看他們的博客,想想他們是怎么做,怎么去學(xué)的.不要盲目的叫大神.你們要想的是,比我們,他們走的更遠(yuǎn).

說(shuō)的太雜了,大家看看吧,之后的博文會(huì)教大家怎么從小組建代碼.

轉(zhuǎn)載于:https://blog.51cto.com/daqianduan/1216106

總結(jié)

以上是生活随笔為你收集整理的前端 html结合css-1篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。