一、對於網頁的基本理解
1、網頁是一種數據展示和信息交互的載體
生活中，我們通過各種各樣的方式獲取信息，網頁是目前被使用最頻繁的一種。
早年網頁的目的更多在於數據的展示，現在的網頁為了提供更好的用戶體驗，在保持原有目的的基礎上，越來越關注：
- 界面的美觀度
- 交互性的提升
- 性能的優化和傳輸效率的提升
2、網頁組成部分
- 網頁結構，關注網頁'長什么樣'
結構提供了網頁骨架、布局 - 網頁數據，關注網頁'提供了什么內容'
數據是網頁承載的主要內容，完成了網頁的數據展示功能 - 網頁樣式，關注網頁'好不好看'
樣式是網頁的外觀，提供對用戶最直觀的感受
樣式審美和整體風格也代表着隱式的數據表達 - 網頁動作，關注網頁'交互性'
動作提供了交互，良好的交互可以提升用戶的體驗
動作優化了性能，良好的數據傳輸設計(如ajax)可以增加傳輸效率
3、支撐一個網頁的技術模塊
- 結構:html
- 數據:web框架(數據處理)+數據庫(數據存儲)
- 樣式:css
- 動作:js
二、html的理解和技術筆記
1、html理解
就像造房子一樣，一棟房子有多個組成部分，html類似於房子的戶型，它設計了房子的整體架構、分區、布局，而且還定義了每個區塊的功能作用。html技術為后續入住的數據事先搭建好了對應的空間。
2、html技術筆記-html標簽
html 代表包含一個網頁文檔，是一個網頁的根元素(某些瀏覽器將body作為根元素)
head 代表文檔的頭部，包含控制信息
meta 代表控制信息，通過標簽中的屬性來提供頁面控制，如:charset='UTF-8'控制編碼格式
title 代表網頁標題
link 外部文件鏈接，主要是css鏈接
body 代表文檔的主體，包含數據、主體骨架、布局、樣式、行為事件和回調函數等
script 代表一個js代碼的引用,包含內聯的js代碼或一個js文件地址
a 代表一個鏈接，包含一個去往某鏈接的文字說明
h1-6 代表文章主題，h1的字體最大
p 代表一個段落，包含段落中的內容
img 代表一個圖像，包含一個展示圖像
i 代表一個圖標，包含一個圖標
div 代表一個盒子模型，一般用於布局
span 代表一個行內文本，一般用於需要特別處理的行內文本標記
hr/br 代表水平分隔符/換行符
button 代表一個按鈕，button在form中會默認type=submit
form 代表一個表單，可以內含很多表單組件，一般用於用戶數據提交
input 代表一個表單組件，通過type來切換不同功能，一般用於數據的輸入
text 代表一個文本輸入框，一般用於輸入小段文本
email 代表一個email輸入框,會對輸入的郵件格式做格式判斷
password 代表一個密碼輸入框，輸入的密碼會被轉換成一個黑點或者星號
radio 代表一個單選框，多個相同name的單選框組成一個組，選項互斥
checkbox 代表一個復選框，多個項目name的復選框組成一個組
textarea 代表一個文本輸入域，一般用於輸入大段文本
select 代表一個下拉框，包含多個下拉選項
option 代表一個下拉選項
label 代表一個標記，一般用於指向對應的輸入框用於實現點擊label時輸入框產生焦點
file 代表一個文件上傳框
submit 代表提交表單，一旦點擊，所屬表單的所有組件值會被統一提交
table 代表一個表格，包含很多表格元素
thead 代表表格頭部，一般是一行
tr 代表一行
th 代表表格數據的名稱，即屬性名，如：名字、年齡、學校、工資等
tbody 代表表格數據主體
tr 同上
td 代表數據單元格，包含一個單元格的數據
ul/ol 代表一個無序/有序列表，包含列表項目
li 代表一個列表項目
三、css的理解和技術筆記
1、css理解
css類似於房子的裝修，裝修讓這棟房子看上去更加的美觀，裝修定義了每一塊牆面該粉刷成什么顏色，地板應該如何規划，是長方形還是正方形。裝修應該從整體主題出發，依據優秀的審美素養規划設計每一個區域的樣式設計，整體裝修方案也表達了這棟房子的主題。
2、css技術筆記
選擇器
選擇器的目的是為了得到對目標元素的引用，一旦得到引用，就可以在此引用上執行各類操作。一個元素有很多不同的表征，這些都可以作為尋找引用的依據。
1. 基本查找方式:
id: id是一個標簽元素在html中的唯一標識，使用id可以快速且唯一的尋找到元素引用
class: class表示了一個標簽元素所屬的類，類和標簽屬於多對多關系，一個類可以有多個標簽，一個標簽也可以屬於多個類，使用class會尋找到歸屬於此類的多個標簽元素
tagName: tagName是一個標簽的名稱，通過標簽名可以找到文檔中所有同名標簽
優先級: 使用id > 使用class > 使用tagName
2. 高級查找方式:
div p: 表示文檔中，所有div子樹中的p都被抓取，不論p是div的兒子輩還是孫子輩
div>p: 表示文檔中，所有div子樹中的直接后輩p都被抓取，即p必須是div的兒子輩
div#box1: 表示文檔中，所有id是box1的div(其實應該只有1個)，查詢結果等價於#box1
div.box1: 表示文檔中，所有class中含有box1的div
div, p, li: 表示組合，即對多個元素組合執行相同的操作
3. 屬性查找
[school]: 表示文檔中，所有含有school屬性的所有標簽
div[school]: 表示文檔中，含有school屬性的所有div
div[school='abc']: 表示文檔中，含有school屬性且值為'abc'的所有div
div[school^='a']: 表示文檔中，含有school屬性且值以'a'開頭的所有div
div[school$='a']: 表示文檔中，含有school屬性且值以'a'結尾的所有div
4. 偽類選擇器
某元素:link 表示當此元素未被訪問時的樣式(即初始默認樣式)
某元素:hover 表示當鼠標移到此元素上時的樣式
某元素:active 表示當鼠標點擊瞬間(未釋放鼠標)時的樣式
某元素:visited 表示當此元素被訪問過(釋放鼠標后)時的樣式
以上4種偽類選擇器定義了當發生某些動作時的樣式改變，可以用於提供簡單的界面交互
p:first-child 表示當p是某一個父元素的第一個子元素時被獲取
p:last-child 表示當p是某一個父元素的最后一個子元素時被獲取
p:nth-child(x) 表示當p是某一個父元素的指定第x個子元素時被獲取
p:nth-child(2n) 表示當p是某一個父元素的指定偶數個子元素時被獲取
以上4種偽類的理解容易發生偏差，且使用時容易出錯，產生意外結果
5. 偽元素選擇器
li:first-letter 表示此元素的第一個文本字符被獲取
li:before
li:after
以上2種一般配合content屬性使用，表示此元素的原有文本前/后增加對應內容,first-letter不能應用於a等行內元素
樣式
字體屬性
顏色屬性
文本屬性
背景屬性
元素分類:塊級、行內、行內塊級
盒子模型
一個盒子模型可以被認為是一個操作單元，頁面的布局由多個盒子組成
外邊距margin：代表盒子外邊界到邊框的距離
邊框border：代表盒子邊框，邊框可以有一定的寬度
內邊距padding：代表盒子邊框到內容區的距離
內容區width/height：代表內容區的寬高
浮動
html文檔被瀏覽器所解析時，瀏覽器會將各元素按照標准文檔流放入頁面中。浮動的作用是將某個元素脫離文檔流，看上去就好像它懸浮在原有頁面上一樣。浮動使用float屬性設置，可以選擇向左或者向右。
此外，浮動的元素會被看作是塊級元素，即一個行內元素一旦浮動，就可擁有width和height屬性浮動一般會配合盒子模型使用，將浮動元素包含在盒子中，再通過盒子完成頁面布局。子元素的浮動一般會導致父元素的height塌陷至0，導致父元素盒子不可見，此時需要在父元素上完成清除浮動。
清除浮動
浮動可以實現多個塊級元素並排在一行。浮動元素會提升層級，這會導致父元素高度塌陷。
父元素設置overflow即可將高度擴展至子元素中最大的高度。
多個浮動的元素在一行，通過clear 的left和right可以取消並排效果，注意clear只應用於元素自身。
定位
相對定位: 不脫離標准流，原區域保留，無浮動效果
絕對定位: 脫離標准流，原區域不保留，浮動效果
固定定位: 脫離標准流,原區域不保留，浮動效果，將會固定在指定區域即使發生滾動
四、js的理解和技術筆記
1、js理解
js類似於房子里的家具，家具提供了交互性功能，給用戶提供了更方便、快捷、簡單的方法用於處理各類事務：
以前我們需要用鑰匙開門，現在有了智能鎖只需要指紋
以前我們需要煙囪排煙，現在有了油煙機只需要打開開關
以前我們需要燒水洗澡，現在有了熱水器
以前我們需要將食物放到水里保質，現在有了冰箱
以前我們需要到社區大隊看電影，現在有了電視、電腦
家具提供了更優秀的用戶體驗，也提升了用戶完成某一件事的效率。
js是運行在客戶端上的編程語言，與后端語言本質上是一樣的，只是適用的場景不同而已。
js由瀏覽器負責解釋執行，js的使用可以減輕服務器的壓力，比如使用js檢測輸入數據格式、局部數據刷新等等。
js是解釋型語言，瀏覽器會實時編譯，所以js和python文件一樣，都是直觀可見的文本類型源代碼。
2、js技術筆記-基本知識
語法
1. 駝峰式命名
2. ;號結尾
3. {}代碼塊
4. var 變量聲明
數據類型
Number
數字類型，數字類型有一個特殊值:NaN，代表當嘗試轉換成Number類型失敗時的值，如Number('abc')
String
字符串類型，js中的字符串也是不可變對象，即所有嘗試針對原字符串修改的操作都會返回一個新字符串
字符串可以使用[]和charAt()訪問，也可以通過for來遍歷
Boolean
布爾類型，true或者false，
注意Boolean('false')的值是true,
注意Boolean([])的值是true，
以下值的布爾值是false:
0,-0,'',NaN,undefined,null,false
其他值都是true
Array
數組類型，js的數組類型也是動態的，不僅長度可變，也可以涵蓋多個不同類型的元素
注意，如下方式遍歷數組，將會得到數組的元素下標
var arr = ['a','b',c'];
for(var i in arr){
console.log(i);
}
Date
時間類型，用於表示時間，初始值是當前時間。時間對象有很多關於時間操作的函數可以使用。
Math
數學函數，使用Math.abs(x)獲取絕對值等
RegExp
正則類型，用於表示一個正則表達式，一般用於處理字符串
undefined和null
undefined表示聲明了，但是未定義值
null表示聲明了，但是定義了一個空值
流程控制
判斷
if [else if] else
分支判斷
switch(x) {
case 1:
break;
default:
//code
}
for循環
for(var i = 0, len = x.length; i < len; i++) {
//code
}
while循環
while(condition){
//code
}
do循環（至少執行一次）
do{
//code
}while(condition)
函數
函數聲明 --> 定義函數方法1
function f(args){
//code
}
函數表達式 --> 定義函數方法2
var f = function(args){
//code
}
自定義對象
字面量方式
var stu = {
name:'xiaoming',
age:26
};
構造函數方式
function Stu(stuName, stuAge){
this.stuName = stuName;
this.stuAge = stuAge;
}
var stu = new Stu('xiaoming', 26);
DOM
- 元素控制
一個html頁面可以被看成是一棵樹，每個節點都是html標簽。js可以操作這棵樹，提供了很多操作方法。
使用js，可以方便的增刪改查html元素，這為我們提供了控制html頁面結構的途徑。 - 屬性控制
js在獲取到相應的元素后，可以控制此元素的屬性，除了html元素自身的屬性之外，還可以通過style控制
元素的樣式屬性，這為我們提供了控制html頁面樣式的途徑。 - 事件控制
js還可以控制元素的事件響應，注冊相應的事件並提供預定義的回調函數，一旦發生期望的事件即可以執行
回調函數。通過事件控制，js可以快速的增加、刪除、修改元素的行為，這為我們提供了控制html頁面行為
的途徑。
BOM
js可以通過某些對象來控制瀏覽器，如:
navigator
location
history
screen
window