1.Html基本語法
1. 概念
Html是一種超文字標記語言;
2.html註釋
<!--註釋內容-->
註釋的作用：程式碼說明;
3.語法結構
1.符號
尖括號<>;所有的HTML語言都必須括在其中;
2.標籤格式
雙標籤：成對出現<標籤名></標籤名> <titile>HTML語言</title>
單標籤：<br/>
*雙標籤通常用於包含內容的元素,單標籤表示無內容的元素;
3. 結構
3個組成部分：標籤 屬性 值
<標籤名 屬性="值" 屬性="值">...</標籤名 >
4.規範
1.標籤名和屬性名都使用小寫;
2.屬性的值用雙引號括起來;
3.標籤的使用符號巢狀規則;
5.編寫網頁的流程
1.找參考
2.準備素材/建站
3.新增內容元素
4.標籤結構化
6.基本結構
<html>
<head>
</head>
<body>
</body>
</html>
7.css樣式
1.行內樣式
通過標籤style屬性來設定css樣式，css程式碼位於HTML標籤的標記中;
僅對當前使用的標籤有效;
2.內嵌樣式
將css放在頁面的head區域中，使用 <style></style>標籤進行呼叫;
僅對當前頁面有效,不能跨頁面使用;
3.外部樣式
單獨的css樣式檔案 （.css）,在網頁的head區域通過 <link>標籤關聯css檔案;
<link>標籤的rel屬性指定為stylesheet,href屬性指定css檔案的路徑;
實現了html結構和css樣式完全分離,多個網頁可以呼叫1個樣式檔案;
4.就近原則
行內樣式>內嵌樣式>外部樣式
8.css基礎語法
組成部分：
物件{樣式宣告}
基本格式：
選擇符{屬性:值;}
選擇符(物件)：
以html標籤作為css的物件（標籤本身,標籤的特定屬性id或class,標籤的某種狀態（偽類））;
9.標籤選擇符
1.id選擇符(#id名)
以html標籤的唯一識別符號id屬性的值作為物件;
在html語言中：id屬性是html中的通用屬性，但是id的值的命名是唯一的,不允許重複；
css語言中：#代表後面的名稱代表是id的值,id選擇符主要用於針對具有唯一性的html物件;
2.class選擇符(.class名)
將一組css樣式歸納為一個類,做為css應用的物件；
html語言中：class屬性是html標籤的通用屬性，可以定義多個,類名之間以空格分隔；
css語言中：class選擇符主要用於需要呼叫相同的css樣式的多個html物件;
3.標籤選擇符
主要對網頁文件中的基礎標籤進行統一的標準化設定；
優先順序：
id選擇符>class選擇符>標籤選擇符
id和class命名規則
1.id屬性和class屬性的值命名都為自定義；
2.不允許用數字開頭，不允許使用特殊符號;
3.命名最好具有語義化，可使用-或_來連線片語;
10.組合選擇符
1.通配選擇符（*）
適配文件中的所有的html物件；
用於定義html文件中所以物件的基礎樣式（消除瀏覽器預設設定的基礎樣式）
根據就近原則，要放在css程式碼的首行；（從上至下讀，先載入預設的在做其他特殊的操作）
最常用的用法： *{margin:0;padding: 0;} 消除所有html標籤預設存在的內外邊距；
2.包含選擇符（父級物件 子級物件）
根據html物件的巢狀關係，指定某個元素的子級元素的樣式；
選擇符物件可以是多重包含，即一層層的包含下去，樣式僅作用在最後的內部物件；
元素物件之間用空格分割；
3.群組選擇符（物件1,物件2....）
將相同的樣式用於多個選擇符物件，選擇符物件之間用逗號隔開;
h1,h2,h3,h4{color:blue;}
4.指定選擇符(標籤名.class類名)
將class類選擇符和標籤選擇符結合在一起使用；
主要適用於在使用了某個class類的所有html物件中特別指定某一標籤;
p.h1{color:blue}
11.css屬性和值
1.css參考手冊;
http://t.mb5u.com/css3/
2.常見的取值：
數值單位 ：px(畫素)/ew(倍數（相對父元素）)/%（百分比）
方向：top/right/left/bottom/center
色彩：16進位制程式碼（#RRGGBB或#RGB）0-9/a-z/基本色彩單詞；
引用路徑：url(檔案路徑)
3.值的一些寫法規則
1.表示長寬高的數值必須帶上單位；
2.表示色彩的十六進位制程式碼前面必須用#號；
3.一個屬性如果有多個值，值與值之間用空格分隔；
4.如果指定多個方向按上右下左的順序排列；
12.盒子模型（box model）
content:內容
內容區域設定：
widht:寬度
height:高度
寬度和高度的設定可以是具體的數值（帶單位）也可以是百分比設定;
寬度和高度是設定內容的寬度和高度；不是整個盒子的寬度和高度;
padding：
內邊距的設定用來控制盒子中裝載的內容到盒子的邊緣（邊框）之間的距離；
盒子的內邊距佔據的是盒子裡面的空間，最小為0,不允許出現負值；
margin：
外邊距的設定用來控制盒子外圍四周的距離，不屬於盒子本身的範疇；
外邊距的主要用途是控制盒子的位置,所以可以出現負值；
border：
大部分的元素物件在預設情況下是沒有邊框的；
要設定邊框必須同時設定三個要素：寬度，樣式和色彩；
border:red 1px solid;
複合屬性:
border-width:邊框的寬度
border-style:邊框的樣式
border-color:邊框的顏色
複合屬性
border-top-color:
具有方向性的符合屬性可以在一個宣告中設定所以方向的定義;
方向性複合屬性的值的縮寫方法：
1個值 ：4個方向 margin：10px 所以的4個邊距都是10px；
2個值：上下/左右 margin：5px 10px 上下邊距5px，左右邊距10px；
3個值：上/左右/下 margin：5px 10px 15px 上邊距5px,左右邊距10px,下邊距15px;
4個值：上/右/下/左 margin：5px 10px 15px 20px 上邊距5px,右邊距10px,下邊距15px，右邊距20px;
13.盒子模型的計算
標準盒子尺寸計算
盒子自身尺寸：
內容的寬高+兩側內邊距+兩側邊框
盒子在頁面中佔位尺寸：
內容的寬高+兩側內邊距+兩側邊框+兩側的外邊距
當盒子的寬度和高度無法確認數值的時候怎麼辦？
設定一個邊框為30px,寬度為瀏覽器的50% 的盒子不能實現；
解決辦法：框架盒子
框架盒子
直接將寬/高屬性設定為盒子自身的調整尺寸，如果帶有內邊距或邊框，則通過縮小內容的區域來實現
box-sizing :盒子型別設定（css3）
值 content-box ：設定盒子為標準盒子型別(預設) 尺寸=widht/height+padding+margin+border
border-box：設定盒子為框架盒子；尺寸=width/height
1.實現一個兩欄並列的網頁佈局（float）
2.其中左列30%寬，右列70px
3.兩個盒子中的內容距離盒子邊緣有一點的空白距離;
14.塊狀元素和行間元素
1.塊狀元素（block）
1.獨佔一行（該元素前後的其他內容都要換行）
2.直接適合盒子模型的所有的css屬性
2.行間元素 （inline）
1.寬度由裝載的內容決定的,寬度設定無效
2.由於受到行的限制，高度及上下方向的邊距設定無效
不同：
塊狀元素可以巢狀塊狀元素，也可以巢狀行間元素；
行間元素不能巢狀塊狀元素,只能巢狀行間元素;
塊狀元素本身即是盒子，行間元素需要轉換後變成"盒子";
3. css：display屬性
值 說明 作用
block 物件呈現為塊狀元素 為了便於使用css盒模型屬性
inline 物件呈現為行間元素 實現html塊狀元素和行間元素的互換
inline-block 物件呈現為行間-塊狀元素 實現同在一行中的元素能適用盒子模型屬性
none 物件呈現為“無” 實現元素在頁面中“消失”
html標籤都有自己的預設的display設定，塊狀元素：預設為block;行間元素預設為：inline;
inline-block
1.本身是inline元素，但視覺表現上是按照block效果呈現,及可以直接使用於盒子模型屬性;
2.典型的例子：<img><input>
3.這類的html元素通常是代表頁面中外部引入檔案，或直接定義好的外掛;
15.盒子模型思維構建網頁佈局
1.盒模型思維：
1.通過css的siplay屬性，可以使所有html標籤物件都變身完美的盒子
2.通過各種“盒子”相互巢狀、並列，實現介面的佈局
2.構建網頁佈局的思路和步驟
1.使用盒子模型思維進行頁面或板塊的分析
2.html--使用符合佈局語義的標籤進行結構化;
3.css---控制標籤的尺寸和定位;
16.H5中的佈局標籤
1.Html是具有語義化的語言,針對頁面的佈局,有一類標籤代表各種意義的"佈局盒子"；
2.所有的佈局標籤都主要是用來構建頁面的內容區域，是雙標籤型別，，預設顯示為塊狀元素;
3.<div>標籤 佈局（盒子）
4.HTML5新增的常用的佈局標籤
<header></header>頁面/區域頭部
<footer></footer>頁面/區域底部
<nav></nav> 導航
<section></section> 文件中的章節，區段，板塊等（類似div，但主要針對文件區域）
<aside></aside> 側邊欄
<article></article> 文章/文件
5.hmtl5的優勢
頁面程式碼更加簡單，高效
新佈局標籤本身具有語義明確告知瀏覽器其在頁面總的位置和結構意義，增強了對搜尋引擎的友好性，提升SEO的價值;
6.缺點
老版本的瀏覽器不支援HTML5這類的佈局標籤,如IE8或更早的版本;
從相容的角度出發,目前多數任然使用<div>標籤構建傳統的佈局;
17.float屬性
1.將頁面元素浮動起來（讓塊狀元素左右排版），使其能夠向左或向右排列;
值：left 元素本身向左浮動
right 元素本身向右浮動
none(預設值)
原理：
浮動元素將脫離預設的文件流，漂浮在預設的文件流之上；
浮動的元素會向左或向右移動,直到它的外邊緣碰到父級元素或這個元素之前的另一個浮動的元素的邊框為止;
特點：一旦元素浮動起立了，就可以直接適用於css盒子模型屬性;
不管元素如何浮動，始終以父級容器或它前面同一層次並且並列的元素作為參考（和父元素對齊）;
對內容的影響：
儘管浮動的元素脫離了預設的文件流，但仍然會影響到預設文件流中的盒子裡面的內容(圖文),這些內容會給浮動元素留出佔位;
clear:
作用：規定元素的某一側不允許存在浮動元素（消除其他浮動元素對其產生的影響）
值：
both 兩側不允許存在浮動元素
left 清除左側的浮動元素
right 清除右側的浮動元素
none 無清除效果 預設值
設定了clear 的元素將不再向前一浮動元素對齊，換行重新開始；
解決網頁中的“塌陷”問題
如果父元素只包含了浮動元素 ，那麼在未設定高度時，則父元素高度塌縮為零;
1.建立一個用來清除浮動的css樣式類（.clearfix）
2.針對包裹的全是浮動元素的父級容器使用
.clearfix{zoom:1}//IE瀏覽器的專用屬性（針對IE）
.clearfix:after{//偽物件選擇符 （在這個物件被瀏覽器渲染後新增一定的內容）
content:".";//新增內容寫在這裡的屬性值 這個屬性是專門配合偽類物件,必須寫;
display:block;//將新增的內容轉換為塊級元素
visibility:hidden;//視覺化屬性；控制元素是否可見;無論是否可見，保留物理空間；和display屬性不同;
height:0;//將新增進去的內容的高度設定為0；消除其佔位；
clear:both;//將新增去的內容作為清除浮動的物件，實現外圍物件中由內容存在，因此可以自動判斷高度;