本篇內容適合新手小白以及想系統回顧前端知識的開發者。基礎知識是前端一面一定會問的，如果你在基礎知識這裡翻了車，面試官可能不會給你展示其它能力的機會，所以大家千萬不要因為基礎知識錯過了自己心儀的公司。今天就用這28道前端面試題來測試一下自己對於前端基礎的掌握吧～
1.字符集
utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312；
gb2312簡單中文，包括6763個漢字；
BIG5繁體中文，港澳臺等用；
GBK包含全部中文字符，是GB2312的擴展，加入對繁體字的支持，兼容GB2312；
UTF-8則包含全世界所有國家需要用到的字符；
記住一點：以後我們統統使用UTF-8字符集，這樣就避免出現字符集不統一而引起亂碼的情況了。
2.標題標籤
單詞縮寫：head 頭部、標題
為了使網頁更具有語義化，我們經常會在頁面中用到標題標籤，HTML提供了6個等級的標題，即：
標題標籤語義：作為標題使用，並且依據重要性遞減!
其基本語法格式如下：
注意：h1標籤因為重要，儘量少用，一般h1都是給logo使用。
3.段落標籤
單詞縮寫：paragraph 段落
在網頁中要把文字有條理的顯示出來，離不來段落標籤，就如同寫文章需要首行縮進、需要分段一樣，整個網頁也可以分為若干個段落。
段落標籤：
是HTML文檔中最常見的標籤，默認情況下，文本在一個段落中會根據瀏覽器窗口的大小自動換行。例如以下的文本，就隨著窗口大小的變化換行：
4.水平線標籤
單詞縮寫：horizontal橫線
在網頁中常常看到一些水平線講段落與段落之間隔開，使得文檔結構清晰，層次分明。這些水平線可以通過插入圖片實現，也可以簡單的通過標記來完成，其基本語法格式如下：
橫線如下圖：
5.換行標籤
在HTML中一個段落的文字會從左到右依次排列，直到瀏覽器窗口的右端，然後自行換行。如果希望某段文本強制換行顯示，就需要使用換行標籤。<br/>
這時如果還像在word中直接敲回車鍵換行就不起作用了。
6.div span標籤
div span是沒有語義的，是我們網頁佈局主要的兩個盒子；
div就是分割、分區的意思，其實有很多div來組合網頁；
span跨度、跨距、範圍。
7.文本格式化標籤
在網頁中有時需要為文字設置粗體、斜體或者下劃線效果，這時候就需要用到HTML中的文本格式化標記，使文字以特殊的方式顯示。
8.圖像標籤
圖像標籤：img
該語法中src屬性用於指定圖像文件的路徑和文件名，它是img標籤的必要屬性。<img src=“圖像URL”/>
9.鏈接標籤
在HTML中創建超鏈接非常簡單，只需用標籤環繞需要被鏈接的對象即可，其基本語法格式如下：
<a href=“跳轉目標”target=“目標窗口的彈出方式”>文本或圖像</a>
href：用於指定鏈接目標的url地址，當為標籤應用href屬性時，它就具有了超鏈接的功能。
Target：用於指定鏈接頁面的打開方式，其取值有self和blank兩種，其中self為默認值，blank為在新窗口中打開方式。
10.錨點定位
通過創建錨點鏈接，用戶能夠快速定位到目標內容。
11.base標籤
base可以設置整體鏈接的打開狀態。<base target=“blank”/>
12.特殊字符標籤
13.註釋標籤
多寫註釋是非常好的寫代碼習慣，團隊協作更順暢。註釋是寫給隊友看的，瀏覽器是不執行的。例如：
14.相對路徑
路徑可以分為兩種：相對路徑和絕對路徑
相對路徑：
（1） 圖像文件和HTML文件位於同一文件夾，只需要輸入圖像文件的名稱即可，如<img src=“logo.gif”>.
（2） 圖像文件位於HTML文件的下一級文件夾，輸入文件夾名和文件名，之間用“/”隔開，如<img src=“img/img01/logo.gif”/>.
（3） 圖像文件位於HTML文件的上一級文件夾，在文件名之前加入“../”，如果是上兩級，則需要使用“../../”,以此類推，如<img src=“../logo.gif”/>.
絕對路徑：
“D：webimgiogo.gif”，或者完整的網絡地址。
15.無須列表
無需列表的各個列表項之間沒有順序級別之分，是並列的，起基本語法格式如下：
16.有序列表
有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下:
17.自定義列表
定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號，其基本語法如下：
18.CSS的書寫方式
書寫方式有三種：嵌入式、外鏈式、行內式。
嵌入式：將CSS代碼嵌入到HTML文件中，嵌入式是通過HTML中的<style>標籤將CSS代碼嵌入到HTML網頁中！
語法規則：<style type=“text/css”>/*書寫css代碼*/選擇器（屬性：值；屬性；值）</style>
如果我們使用的是HTML5的文檔，type屬性可以省略不寫！
注意：<style></style>它可以出現在HTML中的任何地方，但是一般情況我們只會將它放置在head標籤裡面。
外鏈式：
外鏈式是指單獨寫一個以.css為擴展名的文件，然後在<head></head>標籤中使用<link/>標籤，將這個css文件鏈接到html文件中。
注意：css文件不能單獨的運行，它必須要依賴於HTML文件！
語法格式：
代碼示例：
我們一定要確保css文件已經被正確的引入成功！
link標籤可以有多個，一個HTML頁面可以同時引入多個單獨的css文件。
行內式：
將css代碼書寫在HTML標籤的style屬性中。
style是一個通用屬性，每一個標籤裡面都擁有這個屬性！
語法格式：<標籤名 style=“屬性：值；屬性；值；”></標籤名>
總結：
-使用嵌入式的方式來書寫css代碼，它只能作用於當前的HTML文件。
-使用外鏈式的方式來書寫css代碼，它可以作用於多個HTML文件。
19.註釋
格式：/*註釋的內容*/
注意：千萬不要在css代碼中使用HTML的註釋。
20.基本選擇器
選擇器是指通過一定的語法規則選取到對應的HTML標記，然後給這個對應的HTML標記設置樣式。
選擇器分為四大類：基本選擇器、複合選擇器、偽類選擇器、屬性選擇器。
通用選擇器：
標籤選擇器：
類選擇器：
Id選擇器：
21.尺寸樣式屬性
問：<span></span>能夠設置寬度、高度嗎？
答：不可以，因為span標籤式一個行內元素，它是不可以設置寬度和高度的，只有塊級元素才可以設置寬度與高度。
22.文本屬性
23.字體屬性
關於字體：一般很特殊的字體，網站上面都是使用圖片來表示，是否能夠顯示此字體是根據用戶電腦裡面是否有對應的字體文件，如果沒有該文件就會顯示為宋體。
24.複合選擇器
25.列表樣式屬性
這裡的列表指的是：無序列表和有序列表。
在整個網頁佈局中無序列表使用的是最多的。
list-style-image:將列表前面的項目符號設置為一張圖片，它的值是：url（圖片的地址）
list-style：這個屬性是一個簡寫屬性，它集成了上面三個屬性的功能，可以同時設置上面的三個屬性，每一個屬性值之前使用空格分隔！它的屬性值可以有一個也可以有兩個也可以有三個，其屬性值個數不定，位置也不定！
26.偽類選擇器
偽類選擇器是用來給超級鏈接的不同狀態設置樣式。
超級鏈接的不同狀態：
-正常狀態 超鏈接沒有被訪問 :link
-訪問過後狀態 超鏈接已經被訪問 :visited
-鼠標放上狀態 鼠標放在超鏈接上面，但是並沒有將鼠標的左鍵按下去 :hover
-激活狀態 鼠標左鍵已經按下去了，但是並沒有將鼠標的左鍵彈出 :active
偽類選擇器都是帶有冒號“：”
:link
:visited
:hover
:active
注意：
超鏈接的不同狀態它其實是有順序，也就是說偽類選擇器設置其實是有順序。
如果不按照偽類選擇器的順序，那麼樣式就會失效。
順序：要遵守“愛恨原則”，要先有愛，才有恨。
27.屬性選擇器
屬性選擇器它是與標籤的屬性名和屬性值有關。
屬性選擇器是通過標籤的屬性名和屬性值來匹配元素。
attr是英文單詞“attribute”的簡寫，中文意思“屬性” 屬性名
val是英文單詞“value”的簡寫，中文意思是“值” 屬性值
28.JavaScript語句
程序的三種基本結構
順序結構：從上到下執行的代碼就是順序結構，程序默認就是由上到下順序執行的；
分支結構：根據不同的情況及判斷，執行對應代碼；
循環結構：重複執行一段代碼；
If判斷：
switch-case的用法：
While循環：
do-while循環：
For循環：
Continue和break
break立即跳出整個循環，即循環結果，開始執行循環後面的內容；
continue立即跳出當前循環，繼續下一次循環。
代碼的執行流程分為順序、分支和循環三種結構，順序結構是默認的，判斷結構主要有if-else和switch-case兩種，循環結構有while、do-while、for三種，其中continue和break是跳出循環。
更多專業知識，面試技巧就在阿里雲開發者社區，持續更新中……
感謝瀏覽～
本內容來源：阿里雲開發者社區學習中心-前端開發學習路線