當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端知识点梳理（二）

發(fā)布時間：2023/12/10 HTML 23 豆豆

生活随笔收集整理的這篇文章主要介紹了前端知识点梳理（二）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1.內(nèi)核

瀏覽器內(nèi)核（Rendering Engine）最初分為：渲染引擎（layout engineer）或（Rendering Engine）和js引擎；后來 JS 引擎越來越獨(dú)立，內(nèi)核就傾向于單指渲染引擎。

瀏覽器=shell+內(nèi)核
Shell是指瀏覽器的外殼：例如菜單，工具欄等。主要是提供給用戶界面操作，參數(shù)設(shè)置等等。它是調(diào)用內(nèi)核來實現(xiàn)各種功能的。內(nèi)核才是瀏覽器的核心。

發(fā)展歷程：①Netscape王者（Gecko內(nèi)核;開源）→ ②蝗蟲IE(伴隨操作系統(tǒng)，Trident) → ③烈士（網(wǎng)景）遺孤Mozilla （Gecko）→ ④蘋果Safari （WebKit）→ ⑤后起之秀-谷歌Chrome（Bink/Chromium）→ ⑥1+1>2，雙核時代 UC瀏覽器（WebKit+Trident）

為什么有些用戶寧愿瀏覽器雙開，也不愿意用國產(chǎn)的雙核瀏覽器呢？

可能存在以下原因：
1.chrome的界面設(shè)計甩雙核瀏覽器好幾條街。
2.chrome功能上更加安全可靠，雙核瀏覽器感覺會打折扣。
3.chrome有ie tab插件（插件會有Cookies丟失、假死現(xiàn)象），可以實現(xiàn)內(nèi)核切換，沒必要用雙核。
4.用ie的場景不多了，網(wǎng)銀和各大電商都已支持chrome了。
5.雙核瀏覽器是一條死路，隨著web標(biāo)準(zhǔn)的推廣，ie內(nèi)核也會越來越靠近標(biāo)準(zhǔn)。
6.國產(chǎn)雙核瀏覽器的花里胡哨的自帶插件各種彈窗廣告和自作聰明的復(fù)雜設(shè)計、無用功能、過度吹噓開始讓人生厭。
7.極客、技術(shù)發(fā)燒友的使用習(xí)慣和普通網(wǎng)友有本質(zhì)區(qū)別。
8.國產(chǎn)的外殼，商業(yè)目的遠(yuǎn)大于技術(shù)目的，第一目的是賺錢，而不是做一個好產(chǎn)品。

瀏覽器內(nèi)核歷史

2. !Doctype

!Doctype
瀏覽器模式
文檔模式

2.1 嚴(yán)格模式和混雜模式

所謂的標(biāo)準(zhǔn)模式是指，瀏覽器按W3C標(biāo)準(zhǔn)解析執(zhí)行代碼；怪異模式則是使用瀏覽器自己的方式解析執(zhí)行代碼，因為不同瀏覽器解析執(zhí)行的方式不一樣，所以我們稱之為怪異模式。
1)當(dāng)采用嚴(yán)格模式，任意瀏覽器效果相同；
2)當(dāng)采用怪異模式，因瀏覽器而異；
3)采用哪種模式？取決于DTD聲明

HTML 4.01：嚴(yán)格模式、過渡模式、框架模式

嚴(yán)格模式：不包括展示性的和棄用的元素（比如font），不允許框架集（Framesets）

過渡模式：只不允許框架集（Framesets）

框架模式：都o(jì)k

2.2 document.compatMode

document.compatMode，可以用來判斷當(dāng)前頁面采用的渲染方式。下面官方文檔的說明：

BackCompat：標(biāo)準(zhǔn)兼容模式關(guān)閉。
CSS1Compat：標(biāo)準(zhǔn)兼容模式開啟。

當(dāng)document.compatMode等于BackCompat時，瀏覽器客戶區(qū)寬度是document.body.clientWidth；

當(dāng)document.compatMode等于CSS1Compat時，瀏覽器客戶區(qū)寬度是document.documentElement.clientWidth。

2.3 用IE調(diào)試怪異模式

以上要用IE調(diào)，在chrome里我沒有看到不同模式的差別
是否可以理解成：怪異模式在IE不同的文檔模式中菜體現(xiàn)出區(qū)別？
是否可以理解成：怪異模式指的就是IE5？
深刻總結(jié)：
重要！
怪異模式（Quirks Mode）對 HTML 頁面的影響
IE“瀏覽器模式”和“文檔模式”的渲染測試
只有IE瀏覽器中才會有“瀏覽器模式”和“文檔模式”
IE下頁面樣式錯亂，其他瀏覽器正常

嚴(yán)格模式的div渲染大小不同（更大）：因為IE盒模型=內(nèi)容+padding+border，當(dāng)寬度設(shè)置為500，同時又有padding和border，那么內(nèi)容的寬度便小于500；而嚴(yán)格模式下，按W3C標(biāo)準(zhǔn)盒模型，繪制出的div，內(nèi)容寬度=500，再加上padding和border，實際渲染大小 > IE5 ；

嚴(yán)格模式：圖片底端3px空白(IE5的vertical-align是bottom 而嚴(yán)格模式是baseline) ；

嚴(yán)格模式：table中的font屬性會繼承于body的樣式（斜體、顏色、加粗、字體都會）；而怪異模式下，只繼承字體；

怪異模式下，行內(nèi)元素（除了img，input，textarea，select，object）可以設(shè)置寬高！想象一下一個< span>標(biāo)簽內(nèi)無內(nèi)容，但可以設(shè)置寬高，像div一樣顯示出來；

百分比的高度必須在父元素有聲明高度時使用
這點(diǎn)在以上分享的文章里分明是睜眼說瞎話，我在IE5-11中調(diào)出了不同的效果：

怪異模式子元素溢出：父元素也跟隨子元素調(diào)整高度

css：

table.a {height: 300px;background-color: pink;}div.b {background-color: orange;width: 300px;height: 90%;display: block;}div.c {width: 200px;height: 200px;background-color: blue;}

html：

2.4 css hack

不同瀏覽器，或同一瀏覽器的不同版本，會導(dǎo)致生成的頁面效果不一樣。CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。

史上最全的CSS hack方式一覽

hack 英[h?k]
v. 砍; 劈; 猛踢; 非法侵入(他人計算機(jī)系統(tǒng));

3 網(wǎng)頁相關(guān)

3.1 meta標(biāo)簽的屬性

常用meta整理

三個維度：
1） SEO優(yōu)化：name屬性 - description / keywords
2）移動設(shè)備：name屬性 - viewport

name=“viewport” content=“initial-scale=1.0,maximum-scale=1.0 或者user-scalable=no”
用戶將不能放大/縮小網(wǎng)頁來看到全部的內(nèi)容

3）網(wǎng)頁相關(guān)： charset、http-equiv - Content-Type屬性

http-equiv
content
content 屬性始終要和 name 屬性或 http-equiv 屬性一起使用。

優(yōu)先使用 IE 最新版本和 Chrome

3.2 響應(yīng)式布局

（不同設(shè)備）
需要通過練習(xí)，改造項目代碼來加深理解。
用CSS實現(xiàn)響應(yīng)式布局
響應(yīng)式布局

3.3 自適應(yīng)布局

（某塊固定，其余自適應(yīng)）
自適應(yīng)布局
（這個晚點(diǎn)看看）
這可能是史上最全的CSS自適應(yīng)布局總結(jié)### 3.4 提高網(wǎng)頁加載速度

3.4 字符編碼方式

關(guān)于幾種編碼詳解（Unicode，UTF-8，GB系列）

歷史：

如何才能區(qū)別 Unicode 和 ASCII ？計算機(jī)怎么知道三個字節(jié)表示一個符號，而不是分別表示三個符號呢？ → UTF-8的出現(xiàn)（Unicode 是一個符號集，規(guī)定了符號的二進(jìn)制代碼，UTF-8規(guī)定了這個二進(jìn)制代碼應(yīng)該如何存儲。）
UTF-8 是 Unicode 的實現(xiàn)方式之一。

大神這篇必須要轉(zhuǎn)：
字符編碼筆記：ASCII，Unicode 和 UTF-8

3.5 頁面性能優(yōu)化

3.5.1 CDN托管（京東配送服務(wù)）

教你如何使用免費(fèi)的CDN服務(wù)

當(dāng)您訪問托管在CDN上的網(wǎng)站時，網(wǎng)絡(luò)將使用離您地理位置最近的服務(wù)器智能地向您提供內(nèi)容。

3.5.2 利用多個域名來存儲網(wǎng)站資源

利用多個域名來存儲網(wǎng)站資源

3.5.3 圖片懶加載

存儲圖片真實src，當(dāng)距離↓，替換
圖片懶加載實現(xiàn)及其原理

web前端頁面性能優(yōu)化（提升頁面加載速度）

3.棄用元素

htm5新特性新增與棄用元素1
htm5新特性新增與棄用元素2

4.框架

4.1 iframe 行內(nèi)（html5支持）

Web前端之iframe詳解
關(guān)注使用iframe的缺點(diǎn)
優(yōu)點(diǎn):

程序調(diào)入靜態(tài)頁面比較方便;

頁面和程序分離;

缺點(diǎn)：

iframe有不好之處：樣式/腳本需要額外鏈入，會增加請求。
另外用js防盜鏈只防得了小偷，防不了大盜。

iframe好在能夠把原先的網(wǎng)頁全部原封不動顯示下來,但是如果用在首頁,是搜索引擎最討厭的.那么你
的網(wǎng)站即使做的在好,也排不到好的名次!
如果是動態(tài)網(wǎng)頁，用include還好點(diǎn)！
但是必須要去除他的標(biāo)簽！

框架結(jié)構(gòu)有時會讓人感到迷惑，特別是在多個框架中都出現(xiàn)上下、左右滾動條的時候。這些滾動條除了會擠占已經(jīng)特別有限的頁面空間外，還會分散訪問者的留心力。訪問者遇到這種站點(diǎn)往往會立刻轉(zhuǎn)身離開。他們會想，既然你的主頁如此混亂，那么站點(diǎn)的其他部分也許更不值得閱讀。

鏈接導(dǎo)航疑問。運(yùn)用框架結(jié)構(gòu)時，你必須保證正確配置所有的導(dǎo)航鏈接，如不然，會給訪問者帶來很大的麻煩。比如被鏈接的頁面出現(xiàn)在導(dǎo)航框架內(nèi)，這種情況下訪問者便被陷住了，因為此時他沒有其他地點(diǎn)可去。

調(diào)用外部頁面,需要額外調(diào)用css,給頁面帶來額外的請求次數(shù);

4.2 frameset框架集（多個框架frame）（html5廢棄）

frameset使用時要將body刪除，使用frameset代替body；

frame和frameset組合使用，且frame沒有結(jié)束標(biāo)簽；

frameset可以嵌套使用；

html5廢棄使用frameset、frame、noframes，他們的使用破壞了可使用性和可訪問性；
HTML框架（frameset框架集和iframe內(nèi)嵌框架）

框架的優(yōu)點(diǎn)

重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁(減少了數(shù)據(jù)的傳輸，增加了網(wǎng)頁下載速度)
方便制作導(dǎo)航欄

框架的缺點(diǎn)

會產(chǎn)生很多頁面，不容易管理
不容易打印
瀏覽器的后退按鈕無效
代碼復(fù)雜,無法被一些搜索引擎索引到
多數(shù)小型的移動設(shè)備（PDA 手機(jī)）無法完全顯示框架
多框架的頁面會增加服務(wù)器的http請求
由于上面諸多缺點(diǎn)，因此不符合標(biāo)準(zhǔn)網(wǎng)頁設(shè)計的理念,已經(jīng)被標(biāo)準(zhǔn)網(wǎng)頁設(shè)計拋棄

4.3 相關(guān)：window的onload事件

window.onload 是窗口（頁面）加載事件，當(dāng)文檔內(nèi)容完全加載完成會觸發(fā)該事件（包括圖像，腳本文件，css文件等），就調(diào)用的處理函數(shù)

window常見事件onload

網(wǎng)頁中的某些JavaScript腳本代碼往往需要在文檔加載完成后才能夠去執(zhí)行，否則可能導(dǎo)致無法獲取對象的情況，為了避免類似情況的發(fā)生，可以使用以下兩種方式:
（1) 將腳本代碼放在網(wǎng)頁的底端，運(yùn)行腳本代碼的時候，可以確保要操作的對象已經(jīng)加載完成。
（2）通過window.onload來執(zhí)行腳本代碼。

解釋以上

5. table布局

5.1 table布局案例

html中使用table元素
html頁面布局之table布局

display: table| table-cell | table-row
配合居中對齊
text-align: center;
vertical-align: middle;
table布局指南

5.2 優(yōu)缺點(diǎn)

Table布局的優(yōu)缺點(diǎn)
table要等其中的內(nèi)容完全下載之后才會顯示出來，顯示比div+css布局慢。

6. 了解漸進(jìn)增強(qiáng)和優(yōu)雅降級

出發(fā)點(diǎn)是針對高/低版本瀏覽器

6.1 漸進(jìn)增強(qiáng)和優(yōu)雅降級之間有什么不同

漸進(jìn)增強(qiáng)和優(yōu)雅降級之間有什么不同

6.2 前綴css3

當(dāng)屬性超過一個參數(shù)值的時候，不同的屬性產(chǎn)生的作用是不一樣的。

渲染為每個角都是30像素寬10像素高的圓弧：

-webkit-border-radius: 30px 10px;

左上和右下角為30像素圓弧，左下角和右上是10像素圓弧：

border-radius: 30px 10px;

將無前綴的css寫后面！
需警惕CSS3屬性的書寫順序

表示xx瀏覽器的私有屬性：

1、-moz代表firefox瀏覽器私有屬性2、-ms代表ie瀏覽器私有屬性3、-webkit代表-webkit內(nèi)核瀏覽器常見瀏覽器有-safari、chrome

7. 微格式

什么是微格式？在前端構(gòu)建中應(yīng)該考慮微格式嗎？

8. normalize.css 初始化樣式

css樣式初始化 normalize
normalize.css中文版

9. link和@import的區(qū)別

link和@import的區(qū)別

10. 總結(jié)

以上是生活随笔為你收集整理的前端知识点梳理（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

知识点

上一篇： IDEA设置护眼色
下一篇： html5同心圆代码,HTML5/Can