title
abstract
content
comments
username
content
username
content
資訊專欄INFORMATION COLUMN
摘要：最基本的元素選擇器比如選擇器比如類選擇器比如在代碼中常常用到，還有一些偶爾用到的兄弟選擇器比如子選擇器比如通用選擇器。顯然，關鍵選擇器中類選擇器會比標簽選擇器匹配更少的元素，瀏覽器能夠更快的找到它們并渲染。
常用H5結構標簽
在HTML 5中，為了解決文檔結構不夠清晰、明確，追加了很多跟結構相關的元素。
header元素header元素是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或頁面內(nèi)的一個內(nèi)容區(qū)塊的標題，但也可以包含其他內(nèi)容，例如數(shù)據(jù)表格、搜索表單或相關的LOGO圖片。
nav元素nav元素是一個可以用來作為頁面導航的鏈接組，其中的導航元素鏈接到其他頁面或當前頁面的其他部分。
main元素main元素表示網(wǎng)頁中的主要內(nèi)容。主要內(nèi)容區(qū)域指與網(wǎng)頁標題或應用程序中本頁面主要功能直接相關或進行擴展的內(nèi)容。
section元素section元素用來對網(wǎng)站或應用程序中頁面上的內(nèi)容進行分塊，一個section元素通常由內(nèi)容及其標題組成。
article元素article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內(nèi)容。
aside元素aside元素用來表示當前頁面或文章的附屬信息部分，它可以包含當前頁面或主要內(nèi)容相關的引用、側(cè)邊欄、廣告、導航條，以及其他類似的有別于主要內(nèi)容的部分。
footer元素footer元素可以作為其上層父級內(nèi)容區(qū)塊或一個根區(qū)塊的腳注。footer通常包括其相關區(qū)塊的腳注信息，如作者、相關閱讀鏈接以及版權信息等。
新標簽如何向下兼容 兼容HTML 5新增結構元素和媒體查詢由于IE8及更早的IE瀏覽器不能解析HTML 5新增的結構元素，所以需要通過document.createElement來創(chuàng)建并設置默認樣式display:block來進行兼容處理。還有更簡單的辦法就是引入html5shiv，其原理類似。
IE瀏覽器需要respond.js配合才能實現(xiàn)對媒體查詢（media query）的支持。
但是，要注意以下幾點：
respond.js與跨域css的問題需要額外做一些跨域的配置。
respond.js不能在通過file://協(xié)議訪問的頁面上發(fā)揮正常的功能，務必通過http（https）協(xié)議訪問頁面。
respond.js不支持@import引入的css文件。
上面的方案解決了HTML 5新增結構元素和媒體查詢的兼容問題，與此同時，盡量直接讓IE瀏覽器運行最新的渲染模式。
如果是國內(nèi)的瀏覽器，一般都同時支持兼容模式（IE內(nèi)核）和高速模式（webkit內(nèi)核），可以通過以下方式讓國產(chǎn)瀏覽器默認采用高速模式渲染頁面。
不要使用section、article作為div的替代品在使用HTML 5新增結構標簽的過程中，新的結構標簽能夠較快的布局出頁面骨架（skeleton），HTML代碼的可讀性和清晰度大大的提高，但是它們僅限于幫助構建文檔概要的語義部分，如果是樣式容器還是繼續(xù)使用div。
CSS選擇器效率問題title
abstract
content
comments
username
content
username
content
對我們大多數(shù)人來說，CSS選擇器并不陌生。最基本的元素選擇器（比如div）、ID選擇器（比如#id）、類選擇器（比如.class）在CSS代碼中常常用到，還有一些偶爾用到的兄弟選擇器（比如h2+p）、子選擇器（比如ul>li）、通用選擇器（*）。諸多的選擇器類型導致選擇同一個DOM元素的選擇器會有多種，至于選擇哪種，可以從高效的角度考慮來形成平時編寫CSS選擇器的規(guī)范。
單個選擇器單個CSS選擇器的效率從高到低的排序如下：
ID選擇器（#id）
類選擇器（.class）
元素選擇器（div）
兄弟選擇器（h2+p）
子選擇器（ul>li）
后代選擇器（ul li a）
通配符選擇器（*）
屬性選擇器（type="text"）
偽類/偽元素選擇器（a:hover）
組合選擇器然而在實際應用場景中，更多用到是的組合選擇器。組合選擇器在被瀏覽器解析的時候是從右到左的方式，所以組合選擇器里最右邊的選擇器（關鍵選擇器）在效率方面起決定性作用，這樣就可以根據(jù)單個選擇器的效率選擇在關鍵選擇器處使用哪種類型的選擇器了。
#links a {...}
#links a.link {...}
顯然，關鍵選擇器中a.link類選擇器會比a標簽選擇器匹配更少的元素，瀏覽器能夠更快的找到它們并渲染。
html body .wrapper #nav li a {...}
但是，要避免像上面這樣過度限制選擇器，否則瀏覽器將花費更多的時間。
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/113576.html
摘要：最基本的元素選擇器比如選擇器比如類選擇器比如在代碼中常常用到，還有一些偶爾用到的兄弟選擇器比如子選擇器比如通用選擇器。顯然，關鍵選擇器中類選擇器會比標簽選擇器匹配更少的元素，瀏覽器能夠更快的找到它們并渲染。 常用H5結構標簽 在HTML 5中，為了解決文檔結構不夠清晰、明確，追加了很多跟結構相關的元素。 header元素 header元素是一種具有引導和導航作用的結構元素，通常用來放置...
摘要：難以通過重構手法完成設計的改動先想像重構的情況。何時不該重構現(xiàn)有代碼根本不能正常運作?，F(xiàn)在，我可以修改這個子類而不必承擔午一中影響另一處的風險。 重構：對軟件內(nèi)部結構的一種調(diào)整，目的是再不改變軟件的可觀察行為的前提下，提高其可理解性，降低其修改成本。 兩頂帽子 添加新功能 添加新功能時不應該修改既有代碼，只管添加新功能，通過測試重構 重構時你就不能再添加功能，只管改進程序結構，此時...
摘要：寫在前面月到這天，前端提升營，騰訊大佬們分享個人經(jīng)驗，使出各種前端方面的大招。并且減輕服務器的負擔，的原則是按需取數(shù)據(jù)，可以最大程度的減少冗余請求和響應對服務器造成的負擔?？刂票韱慰丶慕脿顟B(tài)。 寫在前面 5月24到30這7天，IMWeb前端提升營，騰訊大佬們分享個人經(jīng)驗，使出各種前端方面的大招。從中學習了很多前端方面的知識，也get到了前端學習的方法論，還有一些算法知識等等。 現(xiàn)將...
閱讀 2914·2023-04-25 21:26
閱讀 1595·2021-11-25 09:43
閱讀 2008·2019-08-30 15:52
閱讀 1000·2019-08-30 14:05
閱讀 2690·2019-08-29 16:10
閱讀 485·2019-08-29 13:48
閱讀 1929·2019-08-29 12:47
閱讀 1352·2019-08-23 18:04
