結構層HTML + 表現層CSS

---

一、HTML5 超文本標記語言

• 什么是HTML5

1. 用於取代1999年所定制的HTML4.01和XHTML1.0標准的html標准版本
2. 強化Web網頁的表現性能，其次追加了本地數據庫等Web應用的功能
3. 是包括HTML、CSS、JavaScript在內的一套技術組合
4. 特性【優勢】：各大瀏覽器廠商的支持  跨平台  兼容性  市場需求

• HTML5結構元素

1. 之前的版本中
• 開發者不同,ID的命名也不同導致代碼可讀性差
• 不能很好的定位標記，明確某標記在頁面中的位置和作用
• 代碼不夠簡潔和高效，不利於搜索引擎搜索
2. HTML5新增加的結構元素
• header 頁面或頁面中某一個區塊的頁眉，通常是一些引導和導航信息。
• nav 可以作為頁面導航的鏈接組 
• section web頁面中的一塊獨立區域 頁面中的一個內容區塊，通常由內容及其標題組成  
• article  獨立的文章內容代表一個獨立的、完整的相關內容塊，可獨立於頁面其它內容使用  
• aside 相關內容或應用（常用語側邊欄）非正文的內容，與頁面的主要內容是分開的，被刪除而不會影響到網頁的內容  
• footer 頁面或頁面中某一個區塊的腳
• Html5的設計以效率優先為原則，要求樣式和內容分離，因此在實際開發中，必須使用css來定義樣式

• HTML5媒體元素

1. 一種是視頻媒體元素標簽<video>   還有一種是音頻<audio>  embed：嵌入內容（包括各種媒體），Midi、Wav、AU、MP3、Flash、AIFF等。
2. 【屬性】src是視頻路徑
3. 【屬性】controls是控制播放器開始 關閉 音量調節等
4. 【屬性】source 也可以輸入地址，避免各個瀏覽器不兼容的問題
5. 【屬性】autoplay是自動播放

• HTML5其他元素

1. dialog：對話框標簽，內容表現為“浮起來的對話框”
2. progress：進度條標簽（單標簽）表現為一個進度條的樣子；代碼<progress value="50" max="100">
3. mark：標記標簽，文本有“突出顯示”效果（通常是顯示為黃色背景）
4. time：時間標簽，表示其內容是一個時間；跟span一樣的表現效果
5. address：地址標簽，表示其內容是一個地址
6. canvas：畫布標簽，可以在其上面作畫（需要后續js知識才能實現）http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp   Canvas vs  . SVG
7. details/summary：兩者配合使用，實現文本的“詳情/概述的折疊效果”、
8. HTML5新增元素、標簽總結 https://www.cnblogs.com/ksl666/p/5964810.html
9. HTML5新增的標簽和屬性歸納 https://blog.csdn.net/garvisjack/article/details/54754928

• Html5表單 http://www.w3school.com.cn/html5/html_5_form_input_types.asp 【* Date Pickers（日期選擇器）】
• Html5全局屬性 【新增全局屬性的概念，是指可以對任何元素都使用的屬性】
• 

二、CSS3 http://www.runoob.com/css3/css3-tutorial.html

• CSS的優勢 

1. 內容與表現分離 
2. 表現的統一
3. 豐富的樣式，使得頁面布局更加靈活
4. 減少頁面的代碼量，提高頁面的瀏覽速度，節省網絡帶寬
5. 運用獨立於頁面的CSS，還有利於網頁被搜索引擎收錄

• 高級選擇器
• 
• 邊框
  • border-radius 圓角 
  1. 1. 四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。
     2. 三個值: 第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角
     3. 兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角
     4. 一個值： 四個圓角值相同
  • box-shadow 盒子陰影
  • border-image 便捷圖片
• 文本效果
  • text-shadow 文本陰影
  • text-overflow 文本溢出解決
  • word-wrap  自動換行屬性允許您強制文本換行
  • word-break 單詞拆分換行
• 背景
  • Background-size 規定背景圖片大小
  • Background-origin 規定定位區域
  • Bacaground-clip 規定背景圖片繪制區域
  • background-image
  • background-position 屬性設置背景圖像的起始位置。
  • 字體 @font-face http://www.runoob.com/css3/css3-fonts.html  
• 透明度設置
  • Background：rgba（0，0，0，0.5）
  • Opacity：0.8
  • Background-color：transparent；（不能設置半透明）
  • Filter：alpha（opacity=x）（IE專用）
• 高級特效
  • 2D變形轉換 transform
    • translate（） 根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。
    • rotate（）  在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
    • scale（） 該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數。
    • skew(<angle> [,<angle>]) 分別表示X軸和Y軸傾斜的角度，如果第二個參數為空，則默認為0，參數為負表示向相反方向傾斜
    • matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。
  • 3D變形轉換
    • Transform（）
    • transform-origin 允許改變元素的位置
    • transform-style 潛逃元素在3D空間如何顯示
    • perspective 規定3D元素的透視效果
    • Perspective-origin 規定3D元素的底部位置
    • Backface-visibility 元素在不面都屏幕時是否可見
    • 注意：如果想要某一個元素進行3D轉換，必須在父元素上添加transform-style，而且該屬性值必須設置為preserve-3d
  • transition 屬性的過渡效果 http://www.runoob.com/css3/css3-transitions.html
  • animation 屬性的動畫效果 http://www.runoob.com/css3/css3-animations.html
  • gradient  屬性的漸變效果 http://www.runoob.com/css3/css3-gradients.html
• 多列布局 http://www.runoob.com/css3/css3-multiple-columns.html
• 清除浮動，防止父級邊框塌陷的四種方法：
  • 浮動元素后加空div：很簡單，空div會造成HTML代碼冗余；
  • 設置父元素的高度：很簡單，元素固定高會降低元素可擴展；
  • 父級添加overflow屬性：很簡單，但是有下拉框的場景不能用；
  • 父級添加偽類after：寫法上比上面稍微復雜一點，但是沒有副作用，推薦使用