語(yǔ)義化的HTML結(jié)構(gòu)怎么理解
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括容縣網(wǎng)站建設(shè)、容縣網(wǎng)站制作、容縣網(wǎng)頁(yè)制作以及容縣網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái),我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,容縣網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前,我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到容縣省份的部分城市,未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任!
關(guān)于html結(jié)構(gòu)的面試題,語(yǔ)義化的html占據(jù)了很大一部分。那么為什么要使用語(yǔ)義化的HTML?語(yǔ)義化的HTML到底有什么好處呢?
HTML是提供網(wǎng)頁(yè)文檔內(nèi)容的上下文結(jié)構(gòu)和含義;html本身是沒(méi)有表現(xiàn)的,我們看到例如h1是粗體,字體大小2em,加粗;strong是加粗的,不要認(rèn)為這是html的表現(xiàn),這些其實(shí)html默認(rèn)的css樣式在起作用,所以首先我們要知道html和頁(yè)面的表現(xiàn)是沒(méi)有關(guān)系的,這些是css的事情。HTML在頁(yè)面中的作用就是結(jié)構(gòu)和含義,通俗點(diǎn)說(shuō)就是劃分內(nèi)容,這里放什么,我們放的是什么。
語(yǔ)義化的HTML結(jié)構(gòu)首先要強(qiáng)調(diào)HTML結(jié)構(gòu)
HTML結(jié)構(gòu)是頁(yè)面的骨架,一個(gè)頁(yè)面就好像一幢房子,HTML結(jié)構(gòu)就是鋼精鋼筋混泥土的墻,一幢房子如果沒(méi)有鋼精鋼筋混泥土的墻那就是一堆費(fèi)磚頭,不能住人,不能辦公。css是裝飾材料,是原木地板,是大理石,是油漆,是用來(lái)裝飾房子的,CSS的強(qiáng)大就不用多說(shuō)了,css如果沒(méi)有html結(jié)構(gòu)那就是一堆木板,一同油漆,沒(méi)有了實(shí)際使用價(jià)值。CSS完全依靠引用它的(X)HTML文檔。如果你想使CSS的能力充分發(fā)揮到極致,提供一個(gè)用既干凈又有結(jié)構(gòu)的內(nèi)容的html是非常必要的,“HTML是在互聯(lián)網(wǎng)上發(fā)布超文本的通用語(yǔ),HTML使用標(biāo)簽來(lái)對(duì)文本結(jié)構(gòu)化”。
語(yǔ)義化的HTML結(jié)構(gòu)怎么寫(xiě)?
HTML是一種對(duì)文本內(nèi)容進(jìn)行結(jié)構(gòu)和意義(或者說(shuō)“語(yǔ)義”)進(jìn)行補(bǔ)充的方法。它會(huì)告訴我們說(shuō):“這行是一個(gè)標(biāo)題,這幾行組成了一個(gè)段落。這些文字是項(xiàng)目列表,這些文字是鏈接到互聯(lián)網(wǎng)上另一個(gè)文件的超鏈接。”值得注意的是,不應(yīng)該讓HTML來(lái)告訴我們:“這些文字是藍(lán)色的,這些文字又是紅色的。這部分內(nèi)容是最最靠右的一欄,這行內(nèi)容是斜體字。”這些和表現(xiàn)相關(guān)的信息是CSS的工作。在做前端開(kāi)發(fā)的時(shí)候要記住:HTML告訴我們一塊內(nèi)容是什么(或其意義),而不是它長(zhǎng)的什么樣子。當(dāng)我們提到“語(yǔ)義標(biāo)記”的時(shí)候,我們所說(shuō)的HTML應(yīng)該是完全脫離表現(xiàn)信息的,其中的標(biāo)簽應(yīng)該都是語(yǔ)義化地定義了文檔的結(jié)構(gòu)。
語(yǔ)義化的HTML結(jié)構(gòu)其實(shí)很簡(jiǎn)單,首先掌握html中各個(gè)標(biāo)簽的語(yǔ)義,div是一個(gè)容器;strong是表示強(qiáng)調(diào);ulli是一個(gè)無(wú)序列表等等…在看到內(nèi)容的時(shí)候想想用什么標(biāo)簽?zāi)芨玫拿枋鏊鞘裁淳陀檬裁礃?biāo)簽。
語(yǔ)義化的HTML結(jié)構(gòu)到底有什么好處?
我們知道HTML5新增的標(biāo)簽,比如header和footer,html正在朝著更加健壯的語(yǔ)義化的HTML結(jié)構(gòu)發(fā)展,xhtml2在這點(diǎn)上沒(méi)html5先進(jìn),這也是xhtml2死亡的一個(gè)原因,這一點(diǎn)也說(shuō)明語(yǔ)義化的HTML結(jié)構(gòu)是html的發(fā)展趨勢(shì)。
1.去掉或樣式丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu):
html本身是沒(méi)有表現(xiàn)的,我們看到例如h1是粗體,字體大小2em,加粗;strong是加粗的,不要認(rèn)為這是html的表現(xiàn),這些其實(shí)html默認(rèn)的css樣式在起作用,所以去掉或樣式丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)不是語(yǔ)義化的HTML結(jié)構(gòu)的優(yōu)點(diǎn),但是瀏覽器都有有默認(rèn)樣式,默認(rèn)樣式的目的也是為了更好的表達(dá)html的語(yǔ)義,可以說(shuō)瀏覽器的默認(rèn)樣式和語(yǔ)義化的HTML結(jié)構(gòu)是不可分割的。
2.屏幕閱讀器(如果訪(fǎng)客有視障)會(huì)完全根據(jù)你的標(biāo)記來(lái)“讀”你的網(wǎng)頁(yè).
例如,如果你使用的含語(yǔ)義的標(biāo)記,屏幕閱讀器就會(huì)“逐個(gè)拼出”你的單詞,而不是試著去對(duì)它完整發(fā)音.
3.PDA、手機(jī)等設(shè)備可能無(wú)法像普通電腦的瀏覽器一樣來(lái)渲染網(wǎng)頁(yè)(通常是因?yàn)檫@些設(shè)備對(duì)CSS的支持較弱).
使用語(yǔ)義標(biāo)記可以確保這些設(shè)備以一種有意義的方式來(lái)渲染網(wǎng)頁(yè).理想情況下,觀(guān)看設(shè)備的任務(wù)是符合設(shè)備本身的條件來(lái)渲染網(wǎng)頁(yè).
語(yǔ)義標(biāo)記為設(shè)備提供了所需的相關(guān)信息,就省去了你自己去考慮所有可能的顯示情況(包括現(xiàn)有的或者將來(lái)新的設(shè)備).例如,一部手機(jī)可以選擇使一段標(biāo)記了標(biāo)題的文字以粗體顯示.而掌上電腦可能會(huì)以比較大的字體來(lái)顯示.無(wú)論哪種方式一旦你對(duì)文本標(biāo)記為標(biāo)題,您就可以確信讀取設(shè)備將根據(jù)其自身的條件來(lái)合適地顯示頁(yè)面.
4.搜索引擎的爬蟲(chóng)也依賴(lài)于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重.
過(guò)去你可能還沒(méi)有考慮搜索引擎的爬蟲(chóng)也是網(wǎng)站的“訪(fǎng)客”,但現(xiàn)在它們他們實(shí)際上是極其寶貴的用戶(hù).沒(méi)有他們的話(huà),搜索引擎將無(wú)法索引你的網(wǎng)站,然后一般用戶(hù)將很難過(guò)來(lái)訪(fǎng)問(wèn).
5.你的頁(yè)面是否對(duì)爬蟲(chóng)容易理解非常重要,因?yàn)榕老x(chóng)很大程度上會(huì)忽略用于表現(xiàn)的標(biāo)記,而只注重語(yǔ)義標(biāo)記.
因此,如果頁(yè)面文件的標(biāo)題被標(biāo)記,而不是,那么這個(gè)頁(yè)面在搜索結(jié)果的位置可能會(huì)比較靠后.除了提升易用性外,語(yǔ)義標(biāo)記有利于正確使用CSS和JavaScript,因?yàn)槠浔旧硖峁┝嗽S多“鉤鉤”來(lái)應(yīng)用頁(yè)面的樣式與行為.SEO主要還是靠你網(wǎng)站的內(nèi)容和外部鏈接的。
6.便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)
W3C給我們定了一個(gè)很好的標(biāo)準(zhǔn),在團(tuán)隊(duì)中大家都遵循這個(gè)標(biāo)準(zhǔn),可以減少很多差異化的東西,方便開(kāi)發(fā)和維護(hù),提高開(kāi)發(fā)效率,甚至 實(shí)現(xiàn)模塊化開(kāi)發(fā)。
如有不同觀(guān)點(diǎn),補(bǔ)充,歡迎留言討論。
自從接觸網(wǎng)站開(kāi)發(fā)以來(lái)到現(xiàn)在已經(jīng)有六個(gè)年頭了,今天偶然整理電腦資料看到當(dāng)時(shí)為參加系里面一個(gè)比賽而做的第一個(gè)網(wǎng)站時(shí),勾起了在這網(wǎng)站開(kāi)發(fā)道路上的一串串回憶,成功與喜悅、煩惱與糾結(jié)都?xì)v歷在目,感慨頗多。在此與大家分享,希望對(duì)初學(xué)Web前端的各位童鞋來(lái)說(shuō)有所幫助。歡迎各位吐槽、拍磚。
先從大家學(xué)習(xí)上的一個(gè)誤區(qū)開(kāi)始談起。
前端開(kāi)發(fā)是一個(gè)近幾年興起的新興行業(yè),所以遠(yuǎn)沒(méi)有電子商務(wù)那樣成熟的課程體系,大學(xué)內(nèi)也沒(méi)有完整的前端課程體系,所以學(xué)習(xí)前端在國(guó)內(nèi)無(wú)非就是培訓(xùn),以及自學(xué)。
培訓(xùn)是針對(duì)那些有條件的人來(lái)說(shuō),很多小伙伴更喜歡的是自學(xué)。但是一個(gè)人自學(xué)畢竟力量是有限的,為了讓想學(xué)習(xí)的人可以更好的學(xué)習(xí),給大家推薦一個(gè)裙,前面是4
9 4,中間是〇 6 4,最后面就是 9 三 4
,這里有很多想學(xué)習(xí)的人和你一起交流,也有大牛每天晚上免費(fèi)教學(xué),想要學(xué)習(xí)的人都可以加入我們,但是我們只歡迎想學(xué)習(xí)的人,不是來(lái)學(xué)習(xí),隨便看看的就不要進(jìn)了。
Web前端的學(xué)習(xí)誤區(qū)
網(wǎng)頁(yè)制作是計(jì)算機(jī)專(zhuān)業(yè)同學(xué)在大學(xué)期間都會(huì)接觸到的一門(mén)課程,而學(xué)習(xí)網(wǎng)頁(yè)制作所用的第一個(gè)集成開(kāi)發(fā)環(huán)境(IDE)想必大多是Dreamweaver,這種所見(jiàn)即所得的“吊炸天”IDE為我們制作網(wǎng)頁(yè)帶來(lái)了極大的方便。
入門(mén)快、見(jiàn)效快讓我們?cè)诓恢挥X(jué)中已經(jīng)深深?lèi)?ài)上了網(wǎng)頁(yè)制作。此時(shí),很多人會(huì)陷入一個(gè)誤區(qū),那就是既然借助這么帥的IDE,通過(guò)鼠標(biāo)點(diǎn)擊菜單就可以快速方便地制作網(wǎng)頁(yè)。
那么我們?yōu)槭裁催€要去學(xué)習(xí)HTML、CSS、JavaScrpt、jQuery等這些苦逼的代碼呢?這不是舍簡(jiǎn)求繁嗎?
但是隨著學(xué)習(xí)的深入,就會(huì)發(fā)現(xiàn)我們步入了一種窘境——過(guò)分的依賴(lài)IDE導(dǎo)致我們不清楚其實(shí)現(xiàn)的本質(zhì),知其然但不知其所以然。
因此在頁(yè)面效果出現(xiàn)問(wèn)題時(shí),我們便手足無(wú)措,更不用提如何進(jìn)行頁(yè)面優(yōu)化以及完成一些更高級(jí)的應(yīng)用了。其原因是顯而易見(jiàn)的——聰明的IDE成全了我們的惰性,使我們忽略了華麗的網(wǎng)頁(yè)背后最本質(zhì)的內(nèi)容——code。
正確的方向勝過(guò)無(wú)謂的努力
有兩只螞蟻想翻越一段墻,尋找墻那頭的食物。一只螞蟻來(lái)到墻腳就毫不猶豫地向上爬去,可是每當(dāng)它爬到大半時(shí),就會(huì)由于勞累、疲倦而跌落下來(lái)。雖然它不氣餒,一次次跌下來(lái),又迅速地調(diào)整一下自己,重新開(kāi)始向上爬去。
另一只螞蟻觀(guān)察了一下,決定繞過(guò)墻去。很快,這只螞蟻繞過(guò)墻來(lái)到食物前,開(kāi)始享受起來(lái);而另一只螞蟻還在不停地跌落下去又重新開(kāi)始。
很多時(shí)候,成功除了勇氣、堅(jiān)持不懈外,更需要方向。也許有了一個(gè)好的方向,成功來(lái)得比想象的更快。如果在錯(cuò)誤的路上奔跑,再怎么努力也是白搭。學(xué)習(xí)Web前端也是如此,首先應(yīng)該選擇一個(gè)正確的學(xué)習(xí)路線(xiàn)。
Web前端的學(xué)習(xí)路線(xiàn)結(jié)合我的學(xué)習(xí)經(jīng)歷、近年來(lái)輔導(dǎo)學(xué)生的經(jīng)驗(yàn)以及公司中實(shí)際項(xiàng)目的需求,在這里將Web前端的學(xué)習(xí)分為以下幾個(gè)階段,具體的學(xué)習(xí)路線(xiàn)圖如圖所示。
第一階段——HTML的學(xué)習(xí)。
超文本標(biāo)記語(yǔ)言(HyperText
Mark-up Language
簡(jiǎn)稱(chēng)HTML)是一個(gè)網(wǎng)頁(yè)的骨架,無(wú)論是靜態(tài)網(wǎng)頁(yè)還是動(dòng)態(tài)網(wǎng)頁(yè),最終返回到瀏覽器端的都是HTML代碼,瀏覽器將HTML代碼解釋渲染后呈現(xiàn)給用戶(hù)。因此,我們必須掌握HTML的基本結(jié)構(gòu)和常用標(biāo)記及屬性。
HTML的學(xué)習(xí)是一個(gè)記憶和理解的過(guò)程,在學(xué)習(xí)過(guò)程中可以借助Dreamweaver的“拆分”視圖輔助學(xué)習(xí)。在“設(shè)計(jì)”視圖中看效果,在“代碼”視圖中學(xué)本質(zhì),將各種視圖的優(yōu)勢(shì)發(fā)揮到極致,這種對(duì)照學(xué)習(xí)的方法彌補(bǔ)了單純識(shí)記HTML標(biāo)簽和屬性的枯燥乏味,想必對(duì)各位初學(xué)的小盆友們來(lái)說(shuō)必定是極好的!
在學(xué)習(xí)了HTML之后,我們只是掌握了各種“原材料”的制作方法,要想蓋一幢樓房就還需要把這些“原材料”按照我們?cè)O(shè)計(jì)的方案組合布局在一起并進(jìn)行一些樣式的美化。
于是進(jìn)入第二個(gè)階段——CSS的學(xué)習(xí)。
CSS是英文Cascading Style Sheets的縮寫(xiě),叫做層疊樣式表,是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言其樣式是可以復(fù)用的,這樣就極大地提高了我們開(kāi)發(fā)的速度,降低了維護(hù)的成本。
同時(shí)CSS中的盒子模型、相對(duì)布局、絕對(duì)布局等能夠?qū)崿F(xiàn)對(duì)網(wǎng)頁(yè)中各對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制。通過(guò)此階段的學(xué)習(xí),我們就可以順利完成“一幢樓房”的建設(shè)。
“樓房”建設(shè)完成之后,我們可以交給用戶(hù)使用,但是如果想讓用戶(hù)獲得更佳的體驗(yàn),我們還可以對(duì)“樓房”進(jìn)行更深一步的“裝修”,讓它看起來(lái)更“豪華”一些。
為了完成這個(gè)任務(wù),我們進(jìn)入第三個(gè)階段——JavaScript的學(xué)習(xí)。
JavaScript是一種在客戶(hù)端廣泛使用的腳步語(yǔ)言,在JavaScript當(dāng)中為我們提供了一些內(nèi)置函數(shù)、對(duì)象和DOM操作,借助這些內(nèi)容我們可以來(lái)實(shí)現(xiàn)一些客戶(hù)端的特效、驗(yàn)證、交互等,使我們的頁(yè)面看起來(lái)不那么呆板,屌絲瞬間逆襲高富帥!有么有?
此時(shí),也許你還沉浸在JavaScript給你帶來(lái)的驚喜之中,但你的項(xiàng)目經(jīng)理卻突然對(duì)你大吼道:
“這個(gè)效果在××瀏覽器下不兼容,重新搞……”
“不兼容?”瞬間石化了有木有?
“我擦,坑爹啊!那可是花了我一個(gè)晚上寫(xiě)了幾百行代碼搞定的啊,吐血了都!”
JavaScript的兼容性和復(fù)雜性有時(shí)候的確讓我們頭疼,還好有“大神”幫我們做了封裝。
接下來(lái)我們進(jìn)入第四個(gè)階段——jQUery的學(xué)習(xí)。
jQuery是一個(gè)免費(fèi)、開(kāi)源的輕量級(jí)的JavaScript庫(kù),并且兼容各種瀏覽器(jQuery2.0及后續(xù)版本放棄了對(duì)IE6/7/8瀏覽器的支持),同時(shí)現(xiàn)在有很多基于jQuery的插件可供選擇,這樣在我們實(shí)現(xiàn)一些豐富的動(dòng)態(tài)效果時(shí)更方便快捷,大大節(jié)省了我們開(kāi)發(fā)的時(shí)間,提高了開(kāi)發(fā)速度,這也充分體現(xiàn)了其write
less,do more的核心宗旨。這個(gè)Feel倍兒爽!有么有?
“豪華大樓”至此拔地而起,但是每天這樣日復(fù)一日,年復(fù)一年的蓋樓,好繁瑣!能不能將大樓里面每一個(gè)單獨(dú)部件模塊化,當(dāng)需要蓋樓時(shí)就像堆積木一樣組合在一起,這樣豈不是爽歪歪?可以實(shí)現(xiàn)嗎?答案是肯定的。
這種思想在Web前端開(kāi)發(fā)中也是適合的,于是乎就出現(xiàn)了各種前端框架,在這里推薦給大家的是Bootstrap。 Bootstrap是Twitter推出的一個(gè)開(kāi)源的用于前端開(kāi)發(fā)的工具包,是一個(gè)CSS/HTML框架,并且支持響應(yīng)式布局。一經(jīng)推出后頗受歡迎,一直是GitHub上的熱門(mén)開(kāi)源項(xiàng)目。
在項(xiàng)目開(kāi)發(fā)過(guò)程中,我們可以借助Bootstrap提供的CSS樣式、組件、JavaScript插件等快速的完成頁(yè)面布局和樣式設(shè)置,然后再有針對(duì)性的微調(diào)樣式,這樣基于框架進(jìn)行開(kāi)發(fā)大大縮短了開(kāi)發(fā)周期。站在巨人的肩膀上就是爽!
Web前端的學(xué)習(xí)建議
最后給大家聊聊在學(xué)習(xí)Web前端中的一些建議和方法。
在CSS布局時(shí)需要注意的一個(gè)問(wèn)題是很多同學(xué)缺乏對(duì)頁(yè)面布局進(jìn)行整體分析,不能夠從宏觀(guān)上對(duì)頁(yè)面中盒子間的嵌套關(guān)系進(jìn)行把握,就急于動(dòng)手去做,導(dǎo)致頁(yè)面中各元素間的關(guān)系很混亂,容易出現(xiàn)盒子在浮動(dòng)時(shí)錯(cuò)位等情況。建議大家在布局時(shí)采用“自頂向下,逐步細(xì)化”的思想,先用幾個(gè)盒子將頁(yè)面從整體上劃分,然后逐步在盒子中繼續(xù)嵌套盒子。
“君子生非異也,善假于物也”,在學(xué)習(xí)的過(guò)程中還要多瀏覽一些優(yōu)秀的網(wǎng)站,善于分析借鑒其設(shè)計(jì)思路和布局方法,見(jiàn)多方能識(shí)廣,進(jìn)而才可以融會(huì)貫通,取他人之長(zhǎng)為我所用。
同時(shí)還要善于使用Firebug這個(gè)利器。Firebug一方面可以在我們學(xué)習(xí)過(guò)程中幫助我們調(diào)試自己的頁(yè)面,另一方面我們可以使用Firebug方便地查看、分析別人網(wǎng)站的源代碼,“偷”也是一種技能!
隨著移動(dòng)互聯(lián)網(wǎng)熱潮的到來(lái),移動(dòng)開(kāi)發(fā)越來(lái)越受到大家的追捧,響應(yīng)式布局、微網(wǎng)站等需求量不斷增加,也是我們Web前端未來(lái)的發(fā)展方向之一,學(xué)有余力的同學(xué)可以多多關(guān)注。最后祝愿大家能在Web前端開(kāi)發(fā)道路上走出一片更寬更廣的天地!
完全可以的,你可以根據(jù)自己需要做適合自己的照片墻。一般來(lái)說(shuō)在代碼和布局上面來(lái)說(shuō)都是不難的。
輸入QQ號(hào)碼和密碼,點(diǎn)擊登錄登錄成功后點(diǎn)擊正下方“動(dòng)態(tài)”找到并點(diǎn)擊“好友動(dòng)態(tài)”進(jìn)入好友動(dòng)態(tài),點(diǎn)擊正上方的背景圖片進(jìn)入背景商城,找到并點(diǎn)擊“照片墻”進(jìn)入照片墻,點(diǎn)擊右上角的“添加”,你可以選擇從手機(jī)里或者從空間相冊(cè)里添加照片
名稱(chēng)欄目:html5墻,Html5
URL標(biāo)題:http://www.chinadenli.net/article28/dscddcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導(dǎo)航、虛擬主機(jī)、ChatGPT、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)