前言
工作需要，開始學習HTML5!
什么是HTML5
- 2014年才定制完HTML5的標準，歷時8年
- 移動先行原則
為什么用HTML5
- 跨平臺(利用HTML5編寫的UI界面能運行在所有擁有瀏覽器的平臺)
- HTML5的運行平臺：瀏覽器
- 但是HTML5不能完成一些特定的功能，比如：拍照、訪問相冊...
HTML5框架
- sencha-touch
- phoneGap
- jQuery mobile
- Bootstrap
Web開發新時代
-
Web1.0主流技術：HTML+CSS -
Web2.0主流技術：Ajax(JavaScript/DOM/異步數據請求) -
Web3.0主流技術：HTML5+CSS3- HTML5亮點:
CanvasHTML5音視頻 Web存儲GeolocationWorkers多線程處理 - CSS3亮點：設計動畫 2D變形 N多新特性
- HTML5亮點:
網頁的組成
- HTML(網頁的具體內容和結構)
- CSS(網頁的樣式，美化網頁)
- JavaScript(網頁的交互效果，比如對用戶鼠標事件做出響應)
HTML
HTML的全稱是
HyperText Markup Language，超文本標記語言
其實它就是文本，由瀏覽器負責將它解析成具體的網頁內容。HTML由N個標簽（節點、元素、標記）組成。
1.常見的HTML標簽
標題：h1、h2、h3、h4、h5....
段落：p
換行：br
容器：div、span（用來容納其他標簽）
表格：table、tr、td
列表：ul、ol、li
圖片：img
表單：input
鏈接：a
- 塊級標簽
- 獨占一行的標簽
- 能隨時設置寬度和高度（比如div、p、h1、h2、ul、li）
- 行內標簽（內聯標簽)
- 多個行內標簽能同時顯示在一行
- 寬度和高度取決于內容的尺寸（比如span、a、label）
- 行內-塊級標簽（內聯-塊級標簽）
- 多個行內-塊級標簽可以顯示在同一行
- 能隨時設置寬度和高度（比如input、button）
2.HTML5新增標簽
HTML5新增了27個標簽元素,廢棄了16個標簽元素,主要包括結構性標簽、級塊性標簽、行內語義性標簽、交互性標簽
2.1 結構性標簽
負責Web上下文結構的定義
article 文章主體內容(一篇博客、一篇論壇帖子、一段用戶評論、插件)
header 標記頭部區域內容
footer 標記腳部區域內容
section 區域章節表述
nav 菜單導航,鏈接導航
2.2 塊級性標簽
完成Web頁面區域的劃分，確保內容的有效分隔
aside 注記,貼士,側欄,摘要,插入的引用作為補充主體的內容
figure 對多個元素組合并展示的元素,常與figcaption聯合使用
code 表示一段代碼塊
dialog 人與人之間對話,包含dt和dd兩個組合元素（dt用于表示說話者、dd用于表示說話者的內容）
2.3 行內語義性標簽
完成Web頁面具體內容的引用和表述，豐富展示內容
meter 特定范圍內的數值，如工資、數量、百分比
time 時間值
progress 進度條，可用max、min、step進行控制，完成對進度的表示和監聽
video 視頻元素，用于視頻播放，支持緩沖預載和多種視頻媒體格式
audio 音頻元素，用于音頻播放，支持緩沖預載和多種音頻媒體格式
2.4 交互性標簽
功能性內容的表達，有一定的內容和數據的關聯，是各種事件的基礎
details 表示一段具體的內容，默認不顯示，通過某種方式（單擊）與legend交互才會顯示
datagrid 控制客戶端數據與顯示，可用于動態腳本及時更新
menu 用于交互菜單
command 用來處理命令按鈕
CSS
CSS的全稱是
Cascading Style Sheets，層疊樣式表,它用來控制HTML標簽的樣式，在美化網頁中起到非常重要的作用。
CSS的編寫格式是鍵值對形式的。
比如
color: red;
background-color: blue;
font-size: 20px;
冒號:左邊的是屬性名，冒號:右邊的屬性值
CSS的3種書寫形式
1.行內樣式：（內聯樣式）直接在標簽的style屬性中書寫
<body style="color: red;">
2.頁內樣式：在本網頁的style標簽中書寫
<style>
body {
color: red;
}
</style>
3.外部樣式：在單獨的CSS文件中書寫，然后在網頁中用link標簽引用
<link rel="stylesheet" href="index.css">
CSS的兩大重點
- 屬性(通過屬性的復雜疊加才能做出漂亮的網頁)
- 選擇器(通過選擇器找到對應的標簽設置樣式)
CSS選擇器
選擇器的作用:選擇對應的標簽，為之添加樣式
選擇器的權值
通配選擇符（*）：0
標簽： 1
類： 10
屬性： 10
偽類： 10
偽元素： 1
id： 100
important： 1000
原則：選擇器的權值加到一起，大的優先；如果權值相同，后定義的優先
優先級排序:important > 內聯 > id > 類 > 標簽 | 偽類 | 屬性選擇 > 偽元素 > 通配符 > 繼承
屬性
CSS有N多屬性，根據繼承性，主要可以分為2大類
- 可繼承屬性
- 父標簽的屬性值會傳遞給子標簽
- 一般是文字控制屬性
所有標簽可繼承
visibility、cursor
內聯標簽可繼承
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
塊級標簽可繼承
text-indent、text-align
列表標簽可繼承
list-style、list-style-type、list-style-position、list-style-image
- 不可繼承屬性
- 父標簽的屬性值不能傳遞給子標簽
- 一般是區塊控制屬性
不可繼承屬性
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
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi
CSS中有個display屬性，能修改標簽的顯示類型
none：隱藏標簽
block：讓標簽變為塊級標簽
inline：讓標簽變為行內標簽
inline-block：讓標簽變為行內-塊級標簽（內聯-塊級標簽）
JavaScript
JavaScript是一門廣泛用于瀏覽器客戶端的腳本語言,由Netspace公司設計，當時跟Sun公司合作，所以名字起得像Java,業內一般簡稱JS。
JS的常見用途
- HTML DOM操作（節點操作，比如添加、修改、刪除節點）
- 給HTML網頁增加動態功能，比如動畫
- 事件處理：比如監聽鼠標點擊、鼠標滑動、鍵盤輸入
JS常見的書寫方式有2種
頁內JS：在當前網頁的script標簽中編寫
<script type="text/javascript">
</script>
外部JS
<script src="index.js"></script>
后記
持續學習中...
