前路漫漫，寫給初級前端的學習指南-有解無憂

前言：

筆者曾經一度很迷茫，在選擇入門前端以后學習了 HTML 和 CSS，接著學習了JavaScript，但是好像遇到了一些瓶頸，不知道該怎樣繼續深入下去，

相信這也是很多初學前端的人遇到的共同問題，這篇文章，筆者想分享一些整理出的路線，幫助各位初學前端的伙伴少走一些彎路，

這篇文章會提到學習筆記，路線圖和一下面試資料，如果你還在初學的階段，不必太焦慮，可以把這篇文章作為一個學習的路線圖，在未來的時日里朝著這個方向努力就好，

基礎能力

HTML(5)篇

1. html 基本結構

html 標簽是由<>包圍的關鍵詞，
html 標簽通常成對出現，分為標簽開頭和標簽結尾，
有部分標簽是沒有結束標簽的，為單標簽，單標簽必須使用 / 結尾，
頁面所有的內容，都在 html 標簽中，
html 標簽分為三部分：標簽名稱，標簽內容，標簽屬性，
html 標簽具有語意化，可通過標簽名能夠判斷出該標簽的內容，語意化的作用是網頁
結構層次更清晰，更容易被搜索引擎收錄，更容易讓螢屏閱讀器讀出網頁內容，
標簽的內容是在一對標簽內部的內容，
標簽的內容可以是其他標簽，

2. 標簽屬性

class 屬性：用于定義元素的類名
id 屬性：用于指定元素的唯一 id，該屬性的值在整個 html 檔案中具有唯一性
style 屬性：用于指定元素的行內樣式，使用該屬性后將會覆寫任何全域的樣式設定
title 屬性：用于指定元素的額外資訊
accesskey 屬性：用于指定激活元素的快捷鍵
tabindex 屬性：用于指定元素在 tab 鍵下的次序
dir 屬性：用于指定元素中內容的文本方向，屬性只有ltr或rtl兩種
lang 屬性：用于指定元素內容的語言

3. 事件屬性

window 視窗事件
onload：在網頁加載結束之后觸發
onunload：在用戶從網頁離開時發生（點擊跳轉，頁面多載，關閉瀏覽器視窗等）
form 表單事件
onblur：當元素失去焦點時觸發
onchange：在元素的值被改變時觸發
onfocus：當元素獲得焦點時觸發
onreset：當表單中的重置按鈕被點擊時觸發
onselect：在元素中文本被選中后觸發
onsubmit：在提交表單時觸發
keyboard：鍵盤事件
onkeydown：在用戶按下按鍵時觸發
onkeypress：在用戶按下按鍵后，按著按鍵時觸發，該屬性不會對所有按鍵生效，不生效的有，alt,ctrl,shift,esc
mouse 滑鼠事件
onclick：當在元素上發生滑鼠點擊時觸發，
onblclick：當在元素上發生滑鼠雙擊時觸發，
onmousedown：當元素上按下滑鼠按鈕時觸發，
onmousemove：當滑鼠指標移動到元素上時觸發，
onmouseout：當元素指標移出元素時觸發，
onmouseup：當元素上釋放滑鼠按鈕時觸發，Media 媒體事件，
onabort：當退出時觸發，
onwaiting：當媒體已停止播放但打算繼續播放時觸發，

4. 文本標簽

段落標簽 <p></p>，段落標簽用來描述一段文字
標題標簽 <hx></hx>，標題標簽用來描述一個標題，標題標簽總共有六個級別，<h1></h1> 標簽在每個頁面中通常只出現一次
強調陳述句標簽，<em></em>，用于強調某些文字的重要性
更加強調標簽，<strong></strong> 和 <em> 標簽一樣，用于強調文本，但它強調的程度更強一些
無語意標簽 <span></span>，標簽是沒有語意的
短文本參考標簽 <q></q>，簡短文字的參考
長文本參考標簽 <blockquote></blockquote>，定義長的文本參考
換行標簽 <br/>

5. 多媒體標簽

鏈接標簽，<a></a>
圖片標簽，<img/>
視頻標簽，<video></video>
音頻標簽，<audio></audio>

6. 串列

無序串列標簽 ul,li，<ul></ul> 串列定義一個無序串列，<li></li> 代表無需串列中的每一個元素
有序串列 ol,li
定義串列 <dl></dl>，定義串列通常和 <dt></dt> 和 <dd></dd> 標簽一起使用

7. 表格

表格標簽 <table></table>
表格的一行 <tr></tr>
表格的表頭 <th></th>
單元格 <td></td>
表格合并，同一行內，合并幾列 colspan="2"，同一列內，合并幾行 rowspan="3"

8. 表單標簽
9. 其他語意化標簽
10. 網頁結構
11. 模塊劃分
12. HTML5 的優勢
13. HTML5 廢棄元素
14. HTML5 新增元素
15. HTML5 表單相關元素和屬性

CSS(3)篇

1. CSS 代碼語法

CSS 全稱為層疊樣式表(Cascading Style Sheets)，它主要是用于定義 HTML 內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等，
CSS 代碼通常存放在 <style></style> 標簽內
CSS 樣式由選擇符和宣告組成，而宣告又由屬性和值組成
選擇符{ 屬性:值 }
選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素

2. CSS 放置位置

行內樣式，不建議使用
行內式樣式表
外聯樣式表

3. CSS 的繼承

CSS 的某些樣式是具有繼承性的，繼承是一種規則，它允許樣式不僅應用于某個特定 html 標簽元素，而且應用于其后代，
不可繼承樣式：
display、margin、border、padding、background、height、 min-height、max-height、width、min-width、max-width、overflow、 position、left、right、top、bottom、z-index、float、clear
可以繼承的樣式：
letter-spacing 、 word-spacing 、 white-space 、line-height 、color 、 font、 font-family 、font-size 、 font-style、 font-variant 、 font-weight 、 text-decoration 、 text-transform 、 direction、visibility、cursor

4. 選擇器的種類

標簽選擇器：通過標簽的名字，修改 css 樣式
通配符選擇器：選擇頁面中所有的元素
屬性選擇器
后代選擇器：選擇某個父元素下面所有的元素
一級子元素選則器：選擇某個父元素的直接子元素，后代選擇器是選擇父元素的所有子孫元素，一級子元素原則器只選擇第一級子元素，不會再向下查找元素
id 選擇器：通過 id 查找頁面中唯一的標簽
class 選擇器：通過特定的 class（類）來查找頁面中對應的標簽，以 .class 名稱
偽類選擇器:
:hover 滑鼠移入某個元素;
:before 在某個元素的前面插入內容;
:after 在某個元素的后面插入內容
群組選擇器：可以對多個不同的選擇器設定相同的樣式

5. 背景樣式

背景顏色 background-color
背景圖片 background-image

background-image:url(bg01.jpg);

背景圖片位置background-position

background-position:10px 100px; // 代表坐標 x，y 軸

背景圖片重復 background-repeat

background-repeat:no-repeat
// no-repeat 設定影像不重復
// round 自動縮放直到適應并填充滿整個容器 
// space 以相同的間距平鋪且填充滿整個容器

背景圖片定位 background-attachment

background-attachment:fixed
// 背景影像是否固定或者隨著頁面的其余部分滾動 
// background-attachment 的值可以是 scroll（跟隨滾動），fixed（固定）

background 縮寫

background:#ff0000 url(bg01.jpg) no-repeat fixed center

6. 字體樣式

字體族 font-family

font-family:"微軟雅黑","黑體";

font-size font-size:12px;

網頁默認字體大小是 16px

字體粗細

font-weight font-weight:400;

normal（默認）
bold（加粗）
bolder（相當于 <strong> 和 <b> 標簽）
lighter （常規）
100 ~ 900 整百（400=normal，700=bold）

字體顏色【color】
顏色的英文單詞 color:red;
十六進制色：color: #FFFF00;
RGB(紅綠藍) color:rgb(255,255,0)
RGBA（紅綠藍透明度）A 是透明度在 0~1 之間取值，color:rgba(255,255,0,0.5)
字體斜體
font-style font-style:italic

7. 文本屬性

行高

line-height line-height:50px;

可以將父元素的高度撐起來

文本水平對齊方式【text-align】
left 左對齊
center 文字居中
right 右對齊
文本所在行高的垂直對齊方式【vertical-align】
baseline 默認
sub 垂直對齊文本的下標，和 <sub> 標簽一樣的效果
super 垂直對齊文本的上標，和 <sup> 標簽一樣的效果
top 物件的頂端與所在容器的頂端對齊
text-top 物件的頂端與所在行文字頂端對齊
middle 元素物件基于基線垂直對齊
bottom 物件的底端與所在行的文字底部對齊
text-bottom 物件的底端與所在行文字的底端對齊
文本縮進

text-indent text-indent:2em;

通常用在段落開始位置的首行縮進

字母之間的間距 letter-spacing
單詞之間間距 word-spacing
文本的大小寫 text-transform
capitalize 文本中的每個單詞以大寫字母開頭
uppercase 定義僅有大寫字母
lowercase 定義僅有小寫字母
文本的裝飾 text-decoration
none 默認
underline 下劃線
overline 上劃線
line-through 中線
自動換行 word-wrap

word-wrap: break-word;

8. 基本樣式

寬度 width

width:200px;

定義元素的寬度

高度

height height:300px
//元素默認沒有高度 
//需要設定高度 
//可以不定義高度，讓元素的內容將元素撐高

滑鼠樣式 cursor

cursor:pointer //定義滑鼠的樣式 
//default 默認
//pointer 小手形狀 
//move 移動形狀

透明度 opacity

opacity:0.3 
//透明度的值 0~1 之間的數字，0 代表透明，1 代表完全不透明 
//透明的元素，只是看不到了，但是還占據著檔案流

可見性 visibility

visibility:hidden;
//visible 元素可見 
//hidden 元素不可見 
//collapse 當在表格元素中使用時，此值可洗掉一行或一列，不會影響表格的布局，

溢位隱藏 overflow
設定當物件的內容超過其指定高度及寬度時如何顯示內容

visible 默認值，內容不會被修剪，會呈現在元素框之外 
hidden 內容會被修剪，并且其余內容是不可見的 
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容 
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容

邊框顏色 outline

input 文本輸入框自帶邊框，且樣式丑陋，我們可以通過 
outline 修改邊框 
outline:1px solid #ccc; 
outline:none 清除邊框

9. 樣式重置
10. 盒模型樣式
11. 浮動float
12. 定位position
13. 瀏覽器默認樣式
14. CSS3 新增選擇器
15. CSS3 新增屬性
16. 新增變形影片屬性
17. 3D 變形屬性
18. CSS3 的過渡屬性
19. CSS3 的影片屬性
20. CSS3 新增多列屬性
21. CSS3 新增單位
22. 彈性盒模型

JavaScript基礎篇

1. JavaScript基礎

外部引入 js 檔案：

<script src="main.js"></script>

關鍵詞
變數名大小寫敏感
命名規范

JavaScript 資料型別

字串(String)
數字（Number）
布林值（Boolean）
未定義（Undefined）

//undefined 有兩種結果 
//1、真的沒定義 
alert(typeof dada); //undefined 
//2、定義了，但是沒有放東西進去 
var dada; alert(dada); //undefined

undefined：表示未定義或只宣告未給值的變數

物件（Object） js 中內置了如下的物件：
Object 是所有 JS 物件的超類(基類），JS 中的所有物件都是繼承自 Object 物件的
Array 陣列物件定義陣列屬性和方法
Number 數字物件
Boolean 布爾物件布林值相關
Error 錯誤物件處理程式錯誤
Function 函式物件定義函式屬性和方法
Math 數學物件
Date 日期物件
RegExp 物件正則運算式物件定義文本匹配與篩選規則
String 字串物件定義字串屬性和方法

3. 算術運算

var y = 3;

4. 強制轉換

字串轉數字 parseInt() parseFloat() isNaN()
數字轉為字串 toString()

5. 賦值運算
6. 關系運算
7. 邏輯運算
8. 三元運算
9. 分支回圈
10. switch
11. while
12. do-while
13. for
14. break和continue
15. 陣列
16. 陣列方法
17. 二維陣列
18. 字串