一：簡介
h5 優點：兼容性強；更新方便
缺點：正因爲其兼容性強，需要考慮的設備類型比較多，故用戶體驗差
h5開發工具 `
eclipse
Dreamweaver
webStorm （iOS）
web3.0時代
主流技術：HTML5+CSS3
HTML5：亮點：Canvas(畫板)；音視頻；存儲（即數據庫）；定位（Geolocation）；多線程處理
CSS3亮點：設計動畫，2D變形
二：常用標籤
網頁組成：HTML（超文本標記語言：內容+結構）；CSS（樣式美化）；JavaScript（動態效果）
三：
h5新增標籤：
1.結構性標籤;寫在body裏邊
article:文章的主題內容
header：文章頭
footer：文章尾部
section：文章的章節
nav:菜單導航，連接導航
2.塊級性標籤
完成web的塊級劃分
aside 註記
figure 對多個元素組合並展示的元素，常與figcaption聯合使用
code 表示一段代碼塊
dialog 人與人之間的對話，包含dt（表示說話者）和dd（表示說話者的內容）兩個組合元素
3..行內語義性標籤
完成文本頁面的具體內容的引用和表述（內容的引用和表述）豐富展示內容
meter：特定範圍的數值；如工資數量，百分比
time ：時間值
progress ：進度條，可用max，min，step進行控制，完成對進度條的表示和監聽
video：視頻元素，用於視頻播放，支持緩衝預載和多種視頻媒體格式
audio：音頻元素，用於音頻播放，支持緩衝預載和多種音頻媒體格式
4.交互性標籤
功能性內容的表達，有一定內容和數據的關聯，是各種事件的基礎
details 表示一段具體的內容，默認不顯示，通過魔種方式單擊或legend交互纔會顯示
datagrid 控制客戶端數據與顯示，可用於動態腳本即使更新
menu 用於交互菜單
command ：用於處理命令按鈕
二：CSS樣式
CSS（Cascading Style Sheets）層疊樣式表
用來紅紙html中的樣式，美化網頁
CSS的編寫格式是鍵值對形式的
屬性名：屬性值
有第三種書寫形式
1.行內樣式：（內聯樣式）直接在標籤的style屬性中寫
<body style="background-color: red; ">
<div style="font-size: 30px;color: red;background-color: yellow">11111111</div>
2.頁內樣式
在本網頁的style標籤中寫
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
color: green;
background-color: yellow;
}
p{
color: blue;
background-color: purple;
font-size: 40px;
}
</style>
</head>
3.外部樣式
在單獨的CSS文件中寫，然後用link標籤引用
CSS遵循一個規律：就近原則；疊加原則
src：引用，該資源是頁面不可缺少的部分（img，video，radio）
href：引入，引入外部資源如a標籤，link標籤
三、CSS選擇器
1.標籤選擇器
在head的style中div{}
<style>
div{
color: red;
}
p{
color: blue;
}
</style>
2.類選擇器
/*類選擇器，CSS中註釋方式*/
.high{
color: yellow;
}
.l{
background-color: purple;
}
3.id選擇器(此標識在網頁裏是獨一無二的，只能用一次)
#fi{
color: black;
background-color: green;
}
3.並列選擇器
}/*並列選擇器，邏輯或的關係，只要滿足其中一種就壞改變樣式*/
div,.higer{
color: blue;
font-size: 100;
background-color: yellowgreen;
}
4.符合選擇器
/*符合選擇器，邏輯與的關係*/
div.hihhrt{
color: white;
background-color: black;
font-size: 10px;
}
5.後代選擇器
/*後代選擇器*/
div p{
color: deeppink;
background-color: yellow;
font-size: 60px;
6、直接後代選擇器
/*直接後代選擇器*/
div > p{
color: white;
background-color: yellow;
}
7.相鄰兄弟選擇器
/*相鄰兄弟選擇器 與div相鄰的一個p標籤*/
div + p{
color: hotpink;
}
8.屬性選擇器
/*屬性選擇器 */
/*一維屬性選擇器 標籤是div且有name屬性的標籤格式設置*/
div[name]{
color: black;
background-color: yellow;
}
/*二維屬性選擇器*/
div[name][age]{
color: peru;
background-color: yellow;
}
/*指定屬性內容的選擇器*/
div[name = "ll"]{
color: lawngreen;
background-color: black;
}
9.僞類選擇器
僞類的屬性
:active 向被激活的元素添加樣式
:focus 向擁有鍵盤輸入焦點的元素添加樣式
:hover 當鼠標懸浮在元素上方的元素添加樣式
:link 向未被訪問的鏈接添加樣式
:visited 向已被訪問的鏈接添加樣式
:first-child 向元素的第一個子元素添加樣式
:lang 向帶有指定lang屬性的元素添加樣式
10僞元素
屬性
:first-letter 向文本的第一個字母添加樣式
:first-line 向文本的首行添加樣式
:before 在元素之前添加內容
:after 在元素之後添加內容
/*<!--CSS選擇器遵循
1，在相同級別選擇器中 疊加原則，就近原則
2，類選擇器的優先級大於標籤選擇器
3，id選擇器的優先級大於類選擇器
4. 範圍越小優先級別就越高(針對性越強，優先級越高)
優先級整理：全職
通配符* 0
標籤選擇器：1
類選擇器： 10
id選擇器： 100
複合選擇器： 101
import： 1000 !import改變優先級爲最高
行內的style的優先級大於head中style的優先級，但是小於import
原則：選擇器的權值加到一起，大的優先；如果權值相同，後定義的優先（就近原則）
優先級排序
import > 內聯 > id > 類 > 標籤|僞類|屬性選擇 > 僞元素 > 通配符 > 繼承
-->*/
四、html標籤的類型
html中有很多標籤，根據顯示的類型，主要可以分爲三大類
1.塊級標籤 獨佔一行的標籤，能隨時設置寬度和而高度 （div，p，h，ul，li）
2.行內標籤 （內聯標籤）即多個標籤可以顯示在同一行；寬度和高度不可以改變，由內容決定(span，label，a)
3.行內塊級標籤 （內聯塊級標籤，既能改變寬度高度，又能使其在同一行）：多個塊級標籤在行內顯示（input button）
修改標籤的顯示類型
CSS的display屬性，此屬性有四個取值：
none:相當於hidden；
block：(讓標籤變爲塊級標籤，主要針對於行內標籤和行內塊級標籤);
inline：讓標籤變爲行內標籤，主要針對於塊級標籤和行內塊級標籤
inline-block :讓標籤變爲行內塊級標籤，主要針對於行內標籤和塊級標籤
五、CSS屬性
http://localhost:63342/05-CSS%E5%B1%9E%E6%80%A7/index.html webstorm相當於構建了一個本地屬性
CSS有很多屬性，根據繼承性，主要分兩大類
可繼承屬性
父標籤的屬性會傳遞給子標籤
一般是文字控制屬性
不可繼承屬性
行內塊級屬性，display屬性不能繼承
1可繼承屬性
1.1所有標籤都可以繼承的屬性 visibility cursor
visibility 可見否（即使是不可見也是有佔位的）visibility與display都可以隱藏標籤，不同的是display隱藏標籤後，連佔位都沒有了，而visibility隱藏標籤後還有佔位
cursor （光標的類型）pointer手 crosshair十字架
1.2 內聯標籤可繼承的屬性
line-height
color
font-family
font-size
font-weight
text-decoration
letter-spacing;word-spacing;white-space;font-style;font-variant;text-transform;direction(不常用)
1.3塊級標籤可繼承的屬性
text-indent（縮進）;text-align（對齊）
1.4 列表標籤(ul;ol;li)可繼承
list-style :列表標籤前邊的點的類型
list-style-type; list-style-position; list-style-image(不常用)
2.不可繼承的屬性
2.1display； margin； border； padding； background
display: inline; block; inline-block; none
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-break-before
uinicode-bidi
3.CSS3新增屬性
3.1 RGBA透明度 background-color: rgba(255,0,0,0.8); opacity
3.2塊陰影與圓角陰影
塊陰影 box-shadow ; text-shadow
圓角陰影 border: 20px solid yellow;
border-radius: 30px;
border-top-left-radius: 60px;
border-bottom-right-radius: 100px;
3.3邊框圖片 border-image
3.4形變
transform ：none | <transform-function>[<transform-function>]
六.盒子模型
盒子模型的四個屬性
content （內容）
padding （填充）
border （內邊距）
margin（外邊距）
盒子模型的大小其實就是content的大小，而microsoft的盒子模型的盒子大小是border的大小
1.content:
屬性 height max-height max-width min-height min-width width
2.padding（內邊距）
屬性 padding （複合屬性 四個值：上 右 下 左 三個值：上 左右 下 兩個值 ：上下 左右 一個值：上下左右邊距相同 ） padding-bottom padding-left padding-right padding-top
3.border
屬性：寬度 樣式 顏色 border-width border-style border-color border-radius（此爲複合屬性，border-top-left-radius）
4.magin（類似於padding）
屬性：margin margin-top margin-left margin-bottom margin-right
3.13居中
水平居中
css的style中的標籤選擇器中
text-align: center;即可對行內標籤與行內塊級標籤居中進行設置，而對塊級標籤不好使，塊級標籤用margin進行整個標籤的水平居中，而test-align：center只是對標籤內容進行居中設置
豎直居中：
line-height：父標籤的高度
第二天8.30
CSS佈局
佈局原則：標準流（從上到下，從左到右）
脫離標準流方法：
1.float 取值left（浮動在父標籤的左邊），right（浮動在父標籤右邊）
2.position：在父標籤的任意位置
position取值：
absolute ：子標籤若想相對於父標籤進行定位，則子標籤需要設置absolute（並在absolute下邊設置top，left，right，bottom），而其相對於的父標籤要設置relative，否則就會以body爲父標籤進行定位
relative：若某標籤相對於父標籤進行定位，則此父標籤必須設置爲relative
static：默認屬性，如果父標籤是static則會去找其父標籤，若父標籤也是static則會去找其父標籤的父標籤，如果多層父標籤都是static則會找到body，以bady爲其父標籤進行定位
fixed ：
inherit：
註冊登陸界面：
1有兩層div；若想實現子層div在父層div居中，則將子層的塊級標籤轉換爲行內塊級標籤，然後在外層標籤內些text-align：center；（轉換爲行內標籤纔有水平居中特性）
2在input樣式中設置border，然後在此處只改顏色則，不會出現input輸入框動的現象；若直接在focus樣式中給border並設置其顏色和寬度會有動的現象
3.border-left-color: green;/**在focus狀態下，input的左邊欄的顏色設置*/
4. border: 0px;/*button有個默認的border，需要手動設置爲0，纔會消失*/
1.1塊級標籤水平居中的第二種方法：
直接在該塊級標籤的css中寫以下兩行代碼：
margin: 0px auto;
text-align: center;
margin與test-align合用的方式
複習：
absolute： 子標籤設置爲absolute
relative：父標籤設置爲relative
static：標籤的默認屬性
2016.3.14
Bootstrap網址
1.bootstrap.css：沒做過代碼混淆的css，裏邊的代碼是開源的，能看的,開發階段用這個
bootstrap.min.css:做過代碼混淆的css，裏邊的代碼是看不了的，做過代碼混淆的內存也會相對變小,上線時用這個
2.
按鈕：button
常用類：class = “btn btn-sucess”
class = “btn btn-warning”
class = “btn btn-danger”
面板：panel
class =“panel pannel-warning”//外層div
class = “panel pannel-heading”//子層div的標題
class = “panel pannel-body”//子層div的體
斜體標籤：i(行內塊級標籤)
class = “badge”style = “background-color : red ; width : 50px; height :20px”
Glyph icons：字體圖標(這是boot's'tbootstrap的標籤行內塊級標籤)
字體圖標的實質是對字體進行操作，所以其此字體的標籤的大小要用font-size調整
注意：bootstrap引入到工程中的文件夾的名稱切記不能修改
3.此處用相對路徑
body{
background: url("../Image/bg.jpg")/*相對路徑*/;
background-size: cover;
}
4.字體如何設置想要的寬度？
5.圖片間距如何調整？
6.如何讓那麼多字自動換行？
寵物網跟做
1.
網頁中，很多都有默認邊距的，應該上來就清掉，方法如下（使用並列選擇器，邏輯或的關係）：
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
padding: 0px;
margin: 0px;
}
清掉網頁中原有的邊距方法二
*{
padding: 0px;
margin: 0px;
}
2.
background: url("../img/tw.png”);//好多鳥的平鋪圖片爲背景
background: url("../img/tw.png") no-repeat;//一隻鳥的圖片做整個的背景
3.使用外部字體
/*使用外部字體*/
@font-face {
font-family: 此處填寫外部字體名稱;
src: url(此處填寫外部字體名稱);
}
然後在要修改字體的標籤的css中的font-family屬性中填寫外部字體名
/*使用外部字體*/
@font-face {
font-family:BebasNeue-webfont;
src: url("../fonts/BebasNeue-webfont.ttf");
}
body{
/*background: url("../img/tw.png");*/
/*background: url("../img/tw.png") no-repeat;*/
/*background: url("../img/pattern.gif") no-repeat;*/
background: url("../img/pattern.gif");
font-family: "BebasNeue-webfont";
}
4.
塊級標籤自動換行
4.1給塊級標籤一個寬度（內容依據此寬度換行）
4.2在塊級標籤的css中設置（以div爲例）
div{
word-wrap: break-word;
}
4.3注意，行內塊級標籤的內容會根據標籤的高度和寬度而自動換行，不用設置word-warp：break-word
5.不透明度：
當hover時，鼠標放上去會有變化，設置opacity
6.響應式設計
@media screen and (max-width:1153px){
要修改的某個標籤的css
}