學習網站
更多詳細學習網址：https://www.w3school.com.cn/
簡介
前端主要分爲三層，結構層、樣式層、行爲層。結構層即HTML標籤，標籤互相組合，構建了網頁的基本結構；樣式層即css，爲標籤添加樣式，比如標籤的顏色，大小，位置等等，結構層和樣式層組成了靜態頁面；最後行爲層即javaScript，我們可以在script標籤中動態修改頁面，通常我們用javaScript實現動態頁面。
下面就我最近關於html5,css,javaScript的學習簡單整理記錄一下，方便自己回憶。
html
初識html
我們常見的網頁基本上都是用html編寫的，常見的html架構如下：
<!DOCTYPE html>
<!--此元素可告知瀏覽器其自身是一個 HTML 文檔。-->
<html lang="en">
<!--定義文檔的頭部，它是所有頭部元素的容器。style和link標籤都定義在head中-->
<head>
<meta charset="UTF-8">
<title>text</title>
</head>
<!--定義文檔的主體。-->
<body>
</body>
</html>
其中<!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。
標籤
剛剛有說過靜態頁面由html標籤和css樣式組成，html標籤又分爲兩種，塊元素和行內元素，塊元素獨佔一行，而行內元素不獨佔一行，從左到右進行排列。
常用的塊元素有：標題<h1>\到<h6>，盒模型<div>，段落<p>，列表標籤<ul>、<ol>、<li>。
常用的行內元素有：超鏈接<a>、樣式元素<span>、圖片<img>、表單元素<input>。其中表單元素可以根據type類型劃分：text、password、date、color、range、submit、chechbox、radio。
屬性
每個標籤都具有自己的屬性，如我們常見的超鏈接<a href=“url”>text</a>，其中href屬性即爲其超鏈接屬性。更多詳細屬性可以從w3c中學習，這裏就不贅述了。
另外，我們可以爲標籤設置他們的class和id屬性，來控制他們的樣式和行爲。我們可以通過標籤選擇器對相應的標籤進行操作。id選擇器爲"#"，class選擇器爲"."。
css
樣式簡介
樣式分爲外部樣式、內部樣式和行內樣式，優先級爲外部樣式<內部樣式<行內樣式。
- 外部樣式：外部樣式通常是單獨的css文件，使用時，在html中的頭部<head>通過標籤<link>引入。
- 內部樣式：內部樣式直接定義在頭部<head>的<style>中。
- 行內樣式：行內樣式定義在標籤中，通過style屬性進行配置。
樣式中的盒模型
任何可視化標籤都具有三個屬性，外邊距margin，邊框border，內邊距padding。這三個屬性組成了盒模型。我們可以打開任意的網頁，進入開發者模式，可以看到Styles選項下有一個盒模型的圖片。
定位
css一般通過屬性postion來配置定位模式，同時結合left、right、top、bottom屬性來設置偏移量。
css常用三種定位模式：
- 固定定位：position:fixed，無論怎麼拖動頁面窗口，固定定位的標籤永遠固定在一個位置，常見的如一些網頁的廣告。
- 相對定位：position:relation，相對於標籤原本應該在的位置發生的偏移。
- 絕對定位：相對於該標籤的上級發生偏移，默認是body。但如果標籤的父標籤定位類型爲相對定位，則該標籤是在該父標籤內進行偏移。這也是前端常說的子絕父相。
浮動
通常我們的塊元素都獨佔一行，這種格式我們稱之爲文檔流。我們可以通過設置css屬性float來改變標籤的樣式，定義標籤向哪個方向浮動，一般值爲right或left。
javaScript
javaScript是前端的行爲層，通過腳本和函數，實現網頁的動態加載。
javaScript做爲前端三層的一層，其自身也由三部分組成。
- ECMAScript：歐洲計算機協會每年6月定製的語法規範。
- DOM：document object model文檔對象模型。
- BOM：brower object model瀏覽器對象模型。
數據類型
JS的數據類型一共有六個，其中分爲五個基本數據類型和一個複雜數據類型。
- 基本數據類型
- String，字符串類型。
- Number，數字類型，注意NaN(not a number)也是數字類型。
- Boolean，布爾類型，true或者false。
- undefined，未定義類型。
- Null，空類型。
- 複雜數據類型
- Object，類對象。
語法
- JS中的腳本都必須寫在其作用域<script></script>標籤內。
- 變量必須先生命再使用，通常用var 聲明變量，用fuction聲明函數和類。
- 包含數字運算符5個加+、減-、乘*、除/、取餘%。比較運算符八個小於<、小於等於<=、相等==、大於等於>=、大於>、不等!=、全等===、不全等!==。邏輯運算符與&&、或||、非
- 條件語句和java類似，常用的有if、else、else if。
- 循環語句和java類似，常用的有有for、while、do while。
函數
函數在script標籤內，先定義再使用。用function來定義，可以有參數。參數有形參和實參兩種類型，在定義function時寫於小括號"()"中參數是形參，在代碼中調用函數傳入的參數是實參。
另外有全局變量和局部變量的概念。在函數內聲明的變量是局部變量。其他的變量都是全局變量。
函數中有一個很關鍵的this類型，代表函數的上下文。
原型是類的一個屬性prototype，通常我們在prototype中聲明類方法。
數組
JS中也存在數組，可以用[]表示。常用的方法有：
- pop從尾部添加元素。
- push從尾部彈出元素。
- shift從頭部彈出元素。
- unshift從頭部添加元素。
- reverse反轉數組。
- indexOf獲取元素的索引值。
- join拼接數組。
- slice(start,end)截取數組，返回[start,end)數組，不改變原數組。
- splice(index,delNum)從index開始刪除delNum個元素，並返回修改後的數組。
總結
本節主要對前端三層理論進行整理，梳理了各層一些基本的概念。在下一章中，通過一個動態頁面來對學過的內容進行應用。
傳送門：前端學習(二)-士兵行走案例