前言

作為前端小小的一員，在學習的程序中記錄下一些重要、關鍵的知識點，有自己總結一些難點，也有一些前端面試高頻知識考點，有助于我復習的同時也希望能幫到大家，讓我們一起學習一起成長，一起拿offer！

一、HTML和CSS

1、HTML5有那些新特性？

（1）HTML4 規定了三種宣告方式，分別是：嚴格模式、過渡模式 和 框架集模式；而HTML5因為不是SGML的子集，只需要<!DOCTYPE>就可以了

（2）語意化更好的內容標簽，header、footer、article、aside、nav等

（3）音頻、視頻 API(audio,video)

（4）表單控制元件：HTML5 擁有多個新的表單輸入型別，這些新特性提供了更好的輸入控制和驗證

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• ime
• url
• week

（5）5個API-本地存盤，長期存盤資料的localStorage，比較常用，臨時存盤的 sessionStorage，瀏覽器關閉后自動洗掉，實際作業中使用的場景不多，

（6）其他還有Canvas畫布、Geolocation地理：地理位置 API 允許用戶向 Web 應用程式提供他們的位置，出于隱私考慮，報告地理位置前會先請求用戶許可、拖拽釋放、Web Wordker等·，

2、如何理解HTML結構的語意化？

去掉或樣式丟失的時候能讓頁面呈現清晰的結構：

html 本身是沒有表現的，我們看到例如<h1>是粗體，字體大小 2em，加粗；<strong>是加粗 的，不要認為這是 html 的表現，這些其實 html 默認的 css 樣式在起作用，所以去掉或樣式 丟失的時候能讓頁面呈現清晰的結構不是語意化的 HTML 結構的優點，但是瀏覽器都有有默 認樣式，默認樣式的目的也是為了更好的表達 html 的語意，可以說瀏覽器的默認樣式和語 義化的 HTML 結構是不可分割的，

螢屏閱讀器（如果訪客有視障）會完全根據你的標記來“讀”你的網頁. 例如,如果你使用的含語意的標記,螢屏閱讀器就會“逐個拼出”你的單詞,而不是試著去對 它完整發音.

PDA、手機等設備可能無法像普通電腦的瀏覽器一樣來渲染網頁（通常是因為這些設備對 CSS 的支持較弱）

使用語意標記可以確保這些設備以一種有意義的方式來渲染網頁.理想情況下,觀看設備的 任務是符合設備本身的條件來渲染網頁.

語意標記為設備提供了所需的相關資訊,就省去了你自己去考慮所有可能的顯示情況（包括 現有的或者將來新的設備）.例如,一部手機可以選擇使一段標記了標題的文字以粗體顯示. 而掌上電腦可能會以比較大的字體來顯示.無論哪種方式一旦你對文本標記為標題,您就可 以確信讀取設備將根據其自身的條件來合適地顯示頁面.

搜索引擎的爬蟲也依賴于標記來確定背景關系和各個關鍵字的權重 過去你可能還沒有考慮搜索引擎的爬蟲也是網站的“訪客”,但現在它們他們實際上是極其 寶貴的用戶.沒有他們的話,搜索引擎將無法索引你的網站,然后一般用戶將很難過來訪問.

你的頁面是否對爬蟲容易理解非常重要,因為爬蟲很大程度上會忽略用于表現的標記,而只 注重語意標記.

因此,如果頁面檔案的標題被標記,而不是,那么這個頁面在搜索結果的位置可能會比較靠后. 除了提升易用性外,語意標記有利于正確使用 CSS 和 JavaScript,因為其本身提供了許多“鉤 鉤”來應用頁面的樣式與行為.

SEO 主要還是靠你網站的內容和外部鏈接的，

便于團隊開發和維護
W3C 給我們定了一個很好的標準，在團隊中大家都遵循這個標準，可以減少很多差異化的東 西，方便開發和維護，提高開發效率，甚至實作模塊化開發，

3、談談從前端的角度出發做好SEO需要考慮什么？

了解搜索引擎如何抓取網頁和如何索引網頁

你需要知道一些搜索引擎的基本作業原理，各個搜索引擎之間的區別，搜索機器人 （SE robot 或叫 web crawler）如何進行作業，搜索引擎如何對搜索結果進行排序等 等，

Meta 標簽優化

主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords），還有一些其它 的隱藏文字比如 Author（作者），Category（目錄）Language（編碼語種）等，

如何選取關鍵詞并在網頁中放置關鍵詞

搜索就得用關鍵詞，關鍵詞分析和選擇是 SEO 最重要的作業之一，首先要給網站確定主關鍵 詞（一般在 5 個上下），然后針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相 關度（Relavancy），突出性（Prominency）等等，

了解主要的搜索引擎

雖然搜索引擎有很多，但是對網站流量起決定作用的就那么幾個，比如英文的主要有 Google，Yahoo，Bing 等；中文的有百度，搜狗，有道等，不同的搜索引擎對頁面的抓取和 索引、排序的規則都不一樣，還要了解各搜索門戶和搜索引擎之間的關系，比如 AOL 網頁搜 索用的是 Google 的搜索技術，MSN 用的是 Bing 的技術，

主要的互聯網目錄

Open Directory 自身不是搜索引擎，而是一個大型的網站目錄，他和搜索引擎的主要區別 是網站內容的收集方式不同，目錄是人工編輯的，主要收錄網站主頁；搜索引擎是自動收集 的，除了主頁外還抓取大量的內容頁面，

按點擊付費的搜索引擎

搜索引擎也需要生存，隨著互聯網商務的越來越成熟，收費的搜索引擎也開始大行其道，最 典型的有 Overture 和百度，當然也包括 Google 的廣告專案 Google Adwords，越來越多的 人通過搜索引擎的點擊廣告來定位商業網站，這里面也大有優化和排名的學問，你得學會用 最少的廣告投入獲得最多的點擊，

搜索引擎登錄

網站做完了以后，別躺在那里等著客人從天而降，要讓別人找到你，最簡單的辦法就是將網 站提交（submit）到搜索引擎，如果你的是商業網站，主要的搜索引擎和目錄都會要求你付 費來獲得收錄（比如 Yahoo 要 299 美元），但是好訊息是（至少到目前為止）最大的搜索引 擎 Google 目前還是免費，而且它主宰著 60％以上的搜索市場，

鏈接交換和鏈接廣泛度（Link Popularity）

網頁內容都是以超文本（Hypertext）的方式來互相鏈接的，網站之間也是如此，除了搜索 引擎以外，人們也每天通過不同網站之間的鏈接來 Surfing（“沖浪”），其它網站到你的 網站的鏈接越多，你也就會獲得更多的訪問量，更重要的是，你的網站的外部鏈接數越多， 會被搜索引擎認為它的重要性越大，從而給你更高的排名，

4、CSS中link和@import的區別是？

Link屬于 html 標簽，而@import是 CSS 中提供的

在頁面加載的時候，link 會同時被加載，而@import 參考的 CSS 會在頁面加載完成后才會加 載參考的 CSS
@import 只有在 ie5 以上才可以被識別，而 link 是 html 標簽，不存在瀏覽器兼容性問題
Link 引入樣式的權重大于@import 的參考（@import 是將參考的樣式匯入到當前的頁面中）
故一般來說使用link更快更安全

5、為什么要初始化樣式？

由于瀏覽器的兼容問題，不同瀏覽器對標簽的默認樣式值不同，若不初始化會照成不同瀏覽器之間的顯示差異
但是初始化css會對搜索引擎優化造成小影響

6、實作元素居中

兩種實作方法，第一種簡單快捷通過設定外層盒子flex布局，然后設定justify-content：center; 實作橫向居中（默認水平居中），align-iten: center;實作縱向居中（默認即垂直居中），

第二種即通過定位來實作，注意外層position設定為relative內層的absolute才管用，設定完相應的偏移值后別忘了平移一下，將內盒子自身的寬高算進去，

		.outer { 
			width: 300px;
			height: 300px;
			border: 1px solid red;
			background-color: red;
/* 			display: flex;
			justify-content: center;
			align-items: center; */
			position: relative;
		}
				
		.inner { 
			width: 150px;
			height: 150px;
			background: blue; 
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

7、通過css實作一個三角形，并且滑鼠移入時能旋轉

注意實作旋轉的時候通過transform-origin設定旋轉中心，

		.box {
			margin: 0 auto;
			width: 0;
			height: 0;
			border-top: 100px solid transparent;
			border-bottom: 100px solid transparent;
			border-left: 100px solid greenyellow;
			transform-origin: 0% 50%; /* 這個不能放在下面不然會亂 ->*/
			transition: transform 0.5s;
		}
		.box:hover {
			transform: rotate(90deg);	
		}

8、如何實作瀏覽器內多個標簽之間的通信？

呼叫 localstorge、cookies 等本地存盤方式:

• 在 B 頁面中可以使用 window.opener 獲得 A 頁面的 window 句柄，使用該句柄即可呼叫 A 頁面中的物件，函式等，
  例如 A 頁面定義 js 函式 onClosePageB，在 B 頁面可以用 window.opener.onClosePageB 來進行回呼，
• 使用 window.showModalDialog(sURL [, vArguments] [,sFeatures])打開新視窗， 其中vArguments 引數可以用來向對話框傳遞引數，傳遞的引數型別不限，包括陣列、函式等，對話框通過window.dialogArguments來取得傳遞進來的引數，
• 如果是支持 HTML5 的話，建議用本地存盤 (local storage)，它支持一個事件方法window.onstorage，只要其中一個視窗修改了本地存盤，其他同源視窗會觸發這個事件，
  
  

9、簡述一下src與href的區別？

• src ?于替換當前元素，href?于在當前?檔和引?資源之間確?聯系，
• src 是 source 的縮寫，指向外部資源的位置，指向的內容將會嵌?到?檔中當前標簽所在位置；在請求 src 資源時會將其指向的資源下載并應?到?檔內，例如 js 腳本，img 圖?和 frame 等元素
• 當瀏覽器決議到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執?完畢，圖?和框架等元素也如此，類似于將所指向資源嵌?當前標簽內，這也是為什么將js腳本放在底部?不是頭部
• href 是 Hypertext Reference 的縮寫，指向?絡資源所在位置，建?和當前元素（錨點）或當前?檔（鏈接）之間的鏈接，如果我們在?檔中添加<link href="common.css" rel="stylesheet"/> 那么瀏覽器會識別該?檔為 css ?件，就會并?下載資源并且不會停?對當前?檔的處理，這也是為什么建議使? link ?式來加載 css ，?不是使? @import ?式
  
  

10、瀏覽器是怎么渲染頁面的？

11、Canvas和SVG圖形的區別是什么？

• Canvas 和 SVG 都可以在瀏覽器上繪制圖形，

• SVG Canvas 繪制后記憶，換句話說任何使用 SVG 繪制的形狀都能被記憶和操作，瀏覽器可以再次顯示 Canvas 則是繪制后忘記，一旦繪制完成你就不能訪問像素和操作它 SVG 對于創建圖形例如 CAD 軟體是良好的，一旦東西繪制，用戶就想去操作它 Canvas 則用于繪制和遺忘類似動漫和游戲的場畫，

• 為了之后的操作，SVG 需要記錄坐標，所以比較緩慢，

• 因為沒有記住以后事情的任務，所以 Canvas 更快，

• SVG 并不屬于 html5 專有內容，在 html5 之前就有 SVG，
  SVG 檔案的擴展名是”.svg”，
  SVG 繪制的影像在圖片質量不下降的情況下被放大，
  SVG 影像經常在網頁中制作小圖示和一些動態效果圖

12、CSS的權重和優先級

權重

• 從0開始，一個行內樣式+1000，一個id選擇器+100，一個屬性選擇器、class或者偽類+10，一個元素選擇器，或者偽元素+1，通配符+0

CSS的偽類選擇器有 :hover、:active、:focus等，偽元素選擇器有::first-letter、::before、::after等，具體可以看這篇文章

優先級

• 權重相同，寫在后面的覆寫前面的
• 使用 !important 達到最大優先級，都使用 !important 時，權重大的優先級高

13、圣杯布局和雙飛翼布局

這兩個三列布局的方式是大廠的高頻考點，不只是要能實作，還要知道這兩者實作的差異，這篇博客清楚的介紹了這兩者的概念、實作程序和他們的區別，

二、JavaScript基礎

1、

三、web開發

1、談談降低頁面加載時間的方法

1、壓縮 css、js 檔案
2、合并 js、css 檔案，減少 http 請求
3、外部 js、css 檔案放在最底下
4、減少 dom 操作，盡可能用變數替代不必要的 dom 操作

更多精彩使用內容后續持續更新

我的世界
我的世界
我的世界
我的世界