1. Web基礎 網頁的骨骼HTML
什麼是HTML
超文本標記語言：Hyper Text Markup Language
這都不重要，重要的是：
HTML是Web網頁的基本組成部分
HTML中定義的元素，決定了網頁的內容和結構
Python：編程語言，編寫程序
HTML：標記語言，像畫畫一樣，畫出網頁的內容
基本結構
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
常用標籤
單標籤、雙標籤
<meta charset="UTF-8"/>
<title>我是一個標題</title>
塊級標籤、內聯標籤
<h1>我是一號標題</h1>，塊級
<h6>我是六號標題</h6>，塊級
<p>我是一個默默無聞的段落</p>，塊級
<a href="http://zhanghonglun.cn" target="_blank">帶你去一個好地方</a>，內聯
<img src="logo.png" width="200" height="200"/>，內聯
<br/>
<div>我是塊級元素</div>
<span>我是內聯元素</span>
表格：table、tr、th、td
列表：ul、ol、li
下拉：<select><option></option></select>
元素的屬性
id、class、style
<a href="#id">跳轉到某個id的元素</a>
HTML註釋
<!-- 這是一個註釋 -->
表單
<form action="" method="post">
用戶名 <input type="text" placeholder="默認文本" name="username"/>
密碼 <input type="text" placeholder="密碼" name="password"/>
一大段文本 <textarea rows="10" cols="10" placeholder="想說的話" name="content"></textarea>
<button type="submit">登陸</button>
</form>
input的type：button、checkbox、color、date、datetime、email、file、month、number、password、radio、range、submit、text、time
HTML顏色
十六進制：#FFF
RGB：rgb(255, 255, 255)，rgba(255, 255, 255, 1)
顏色名稱：red，green，blue
DOM
文檔對象模型：Document Object Model
HTML5
新標籤：canvas、svg、audio、video、embed
svg：http://www.runoob.com/svg/svg-tutorial.html
canvas：http://zhanghonglun.cn/blog/canvas初探：基本語法
新的語義元素：header、nav、section、article、aside、figcaption、figure、footer
新功能：元素拖放、地理定位、video、audio、更豐富的input type、Web存儲（localStorage和sessionStorage）
HTML補充學習
http://www.runoob.com/html/html-tutorial.html
2. Web基礎 網頁的血肉CSS
什麼是CSS
層疊樣式表：Cascading Style Sheets
這都不重要，重要的是：
CSS決定了如何顯示HTML元素
基本結構
選擇器 + 樣式（key: value）
p {
color: red;
font-size: 20px;
}
使用CSS
引入外部.css文件
在html中定義css
在元素中使用內聯css
常用選擇器
元素名
id
class
後代選擇器
子元素選擇器
相鄰兄弟選擇器、普通相鄰兄弟選擇器
僞類
常用樣式
背景：background-color、background-image、background-repeat、background-size、background-attachment、background-position
大小：width、height
大小單位：px、%、em
文本：color、text-align、text-decoration、text-indent、line-height、font-size、font-family
留白：margin、padding
邊框：border、border-radius、box-shadow
顯示：display
定位：static、fixed、relative、absolute、float
CSS註釋
/* 這是一個註釋 */
CSS3
新屬性：漸變、transform（translate、rotate、scale、skew、matrix）、transition、animation（keyframes）
新功能：加載想要的字體
實例
美化一個button、添加hover動畫效果
CSS補充學習
http://www.runoob.com/css/css-intro.html
什麼是JS
HTML中的腳本編程語言：JavaScript，但和Java毛關係沒有
這都不重要，重要的是：
JS決定了如何動態改變HTML元素
使用JS
在html中使用js
引入外部.js文件
內容
document.write()
變量var：數值、字符、數組、字典/對象
document.getElementById()
onclick="myFunction()"
innerHTML
console.log()
運算符、條件、循環
註釋
函數
作用域
事件
3. Web進階 比JS更方便的JQuery
簡介
JQuery是一個JS庫
極大地簡化了JS編程
JQuery很容易學習
引入
下載下來並引入：http://jquery.com/download/
直接引用CDN： http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js
語法
$(document).ready(function(){});
$('選擇器').action();
選擇器可以是：元素名、id、class、子元素選擇器、後代元素選擇器、（相鄰）兄弟選擇器、屬性選擇器、this
action可以是：click、dbclick、mouseenter/leave/over/out、hover、keypress/up/down、change、focus、blur，效果和動畫，DOM操作
效果：hide、show、toggle，fadeIn、fadeOut、fadeToggle、slideUp、slideDown、slideToggle
動畫：animate
回調（callback）：完成某一函數之後再執行的操作
JQuery鏈（Chaining）：連續寫多個action
DOM操作
獲取和設置內容：text()、html()、val()
獲取屬性：attr()
添加元素：append()、prepend()、before()、after()
刪除元素：remove()、empty()
獲取和設置屬性：css()
遍歷和關係：each()、parent()、children()、find()、siblings()
AJAX
異步 JavaScript 和 XML（Asynchronous JavaScript and XML）
JQuery補充學習
http://www.runoob.com/jquery/jquery-tutorial.html