前言
- 工作一周,差不多的又忘了,在學(xué)習(xí)新知識之前,回顧一下上周末學(xué)習(xí)的HTML5知識.
1, 什么是HTML5 ?
- 所謂的HTML5就是網(wǎng)頁5.0版本的超文本標(biāo)記語言,是HyperText Markup Labguage 5的簡稱,2014年才完成HTML5的標(biāo)準(zhǔn)制定,歷時8年. 簡單理解其實它就是一個文本而已,只是它是由瀏覽器負(fù)責(zé)將它解析成具體的網(wǎng)頁內(nèi)容而已.
**2, 學(xué)習(xí)HTML5的好處與缺點 ? **
- HTML5是跨平臺的,用HTML5編寫的UI界面能夠運(yùn)行在所有擁有瀏覽器的平臺,也就是說,HTML5的運(yùn)行平臺(環(huán)境)是瀏覽器.但是,使用HTML5也有很多缺點:比如,不能使用照相機(jī),不能訪問相冊等功能.
- Web 3.0 : 就是H5與C3的結(jié)合(主流技術(shù)) :
- HTML5亮點: Canvas HTML5音視頻 Web存儲 Geolocation Workers多線程處理
- CSS3亮點: 設(shè)計動畫 2D變形 N多新特性
**3, HTML5中常見的標(biāo)簽? **
- 標(biāo)題 : h1 h2 h3 h4 h5 h6...
- 段落 : p
- 換行 : dr
- 容器 : div span // 就是用于容納其他標(biāo)簽
- 表格 : table tr td
- 列表 : ul li ol
- 圖片 : img
- 輸入框 : input
- 連接 : a
- 按鈕 : button
- 更多資源可以去官網(wǎng) :http://www.w3school.com.cn/
4, CSS的基本回顧
- 1, 什么是CSS
- CSS的全稱是Cascading Style Sheets，層疊樣式表,簡稱CSS
- 2,CSS的作用
- 它的主要作用就是用于美化HTML中的內(nèi)容,控制標(biāo)簽的樣式.它都是以鍵值對的形式存在的,比如 : color : red(左邊是屬性名 : 右邊是屬性值)
- CSS有3種書寫方法,來控制htmt的標(biāo)簽樣式
行內(nèi)樣式：（內(nèi)聯(lián)樣式）直接在標(biāo)簽的style屬性中書寫
<body style="color: red;">
頁內(nèi)樣式：在本網(wǎng)頁的style標(biāo)簽中書寫
<style>
body {
color: red;
}
</style>
外部樣式：在單獨的CSS文件中書寫，然后在網(wǎng)頁中用link標(biāo)簽引用
<link href="CSS/index.css" rel="styleSheet">
5,CSS的選擇器
- CSS總選擇器有很多種類,它們的作用主要是在編程HTML5的過程中可以快速的去找到對應(yīng)的標(biāo)簽,以下是主要用到的選擇器種類
- 1, 標(biāo)簽選擇器: 即根據(jù)標(biāo)簽名快速找到對應(yīng)標(biāo)簽的設(shè)置樣式
// 標(biāo)簽
<div>我是一個標(biāo)簽</div>
// 標(biāo)簽選擇器
div{
color : red;
}
// 結(jié)果 : 只要是div標(biāo)簽,標(biāo)簽內(nèi)部的所有文字都會是紅色
- 2,類選擇器 : 即根據(jù)類名找到對應(yīng)標(biāo)簽的設(shè)置樣式
// 標(biāo)簽
<div class = "Alex">我是一個標(biāo)簽</div>
// 類選擇器
.Alex{
color : red;
}
// 注意前面有一個圓點
// 結(jié)果: 只要是標(biāo)記了Alex的標(biāo)簽中的所有文字都會是紅色的
- 3,id選擇器 : 即根據(jù)id名找到標(biāo)簽設(shè)置樣式
//標(biāo)簽
<p id = "Alex">我是一個標(biāo)簽</p>
// id選擇器
#Alex{
color : red;
}
// 結(jié)果 : 只要是id名是Alex的,內(nèi)部所有的文字都是紅色
- 4,并列標(biāo)簽 :多個標(biāo)簽擁有相同的樣式,以逗號隔開
// 標(biāo)簽
<p class="Alex">我是一個類標(biāo)簽</p>
<p>我是一個段落標(biāo)簽</p>
<div class="Alex">我也是一個類標(biāo)簽</div>
<div>我是一個普通的標(biāo)簽</div>
// 選擇器
div, .Alex{
color : red;
}
// 結(jié)果 :
我是一個類標(biāo)簽 : 文字為紅色
我也是一個類標(biāo)簽: 文字為紅色
我是一個普通的標(biāo)簽: 文字為紅色
其他的都是默認(rèn)顏色(黑色)
- 5, 復(fù)合標(biāo)簽 : 相當(dāng)于邏輯與,必須所有條件都符合,之間沒有了逗號
// 標(biāo)簽
<p class="Alex">我是一個類標(biāo)簽</p>
<p>我是一個段落標(biāo)簽</p>
<div class="Alex">我也是一個類標(biāo)簽</div>
<div>我是一個普通的標(biāo)簽</div>
// 選擇器
div.Alex{
color : red;
}
// 結(jié)果 :我也是一個類標(biāo)簽 : 文字為紅色
其余的全為默認(rèn)顏色(黑色)
注意:必須同時成立,要是div標(biāo)簽,還需是class類標(biāo)簽
- 后代標(biāo)簽:用于更加精準(zhǔn)的定位,比如:div a p{}它們之間以空格隔開
// 標(biāo)簽
<div>
<p>div的兒子p</p>
<span>
<p>div的孫子span,span的兒子p<p/>
</span>
</div>
<p>div的兄弟p</p>
// 注釋 : 第一個p是div的兒子. 第二個p是span的兒子,div的孫子. 第三個p是div的兄弟. span是div的兒子
// 選擇器
div span p{
color :red;
}
// 結(jié)果 : 只有div的孫子span,span的兒子這句話是紅色,其余的全為黑色.
- 注意:CSS中還有很多選擇器,但是不是很常用,需要深究可以去WC3官網(wǎng).
6,CSS中選擇器的優(yōu)先級以及兩個原則
important > 內(nèi)聯(lián) > id > 類 > 標(biāo)簽 | 偽類 | 屬性選擇 > 偽元素 > 通配符 > 繼承
優(yōu)先級 :
通配選擇符(*):0
標(biāo)簽 : 1
類 : 10
屬性 : 10
偽類 : 10
偽元素 : 1
id : 100
important : 100
原則：選擇器的權(quán)值加到一起，大的優(yōu)先；如果權(quán)值相同，后定義的優(yōu)先
- 兩個原則
- 1, 就近原則 : 相等級別的選擇器,誰后定義執(zhí)行誰
- 2, 疊加原則 : 屬性值的疊加,只要是上一個級別沒有的屬性,就會疊加,有的就會執(zhí)行級別較高的,級別相同的就執(zhí)行后定義的.
7, HTML標(biāo)簽的類型
HTML標(biāo)簽的類型分為下面3種:
塊級標(biāo)簽 :比如: div ul p li...
行內(nèi)標(biāo)簽 : span a
行內(nèi)-塊級標(biāo)簽 : button input
1, 塊級標(biāo)簽 : 獨占一行,可以隨時設(shè)置寬度和高度
2, 行內(nèi)標(biāo)簽 : 多個標(biāo)簽可以顯示在同一行,但是不能隨時設(shè)置寬度和高度,寬高是由內(nèi)容的大小來決定的
行內(nèi)-塊級(內(nèi)聯(lián)-塊級)標(biāo)簽:多個標(biāo)簽?zāi)芡瑫r顯示在同一行,并且能隨時設(shè)置寬度和高度
8, 如何修改標(biāo)簽的顯示類型
- CSS中提供了一個屬性display,這個屬性有4個屬性值,分別代表不同的功能
- 1, display.none : 隱藏標(biāo)簽(全部隱藏)
- 2, display.block : 將標(biāo)簽設(shè)置為塊級標(biāo)簽(標(biāo)簽是獨占一行的,可以隨時設(shè)置寬度和高度)
- 3, display.line :將標(biāo)簽設(shè)置為行內(nèi)標(biāo)簽(多個標(biāo)簽?zāi)芡瑫r顯示在同一行,但是不能設(shè)置寬度和高度)
- 4, display.line-block : 將標(biāo)簽設(shè)置為行內(nèi)-塊級標(biāo)簽(多個標(biāo)簽?zāi)芡瑫r顯示在同一行,并且可以隨時設(shè)置寬度和高度)
- 補(bǔ)充知識點 : 注意visibility和display.none的區(qū)別,它們都有吟唱標(biāo)簽的功能,但是他們之間的區(qū)別在于visibility隱藏標(biāo)簽后,寬度和高度仍然存在,也就是說即使隱藏了,它還是一直占位著,而display.none隱藏標(biāo)簽后,全部隱藏,包括寬度和高度,沒有占位.
9, CSS屬性中的繼承問題
- 可繼承的屬性
- 父標(biāo)簽的屬性值會傳遞給子標(biāo)簽,一般是文字控制屬性可以繼承
- 不可繼承屬性
- 父標(biāo)簽的的屬性值不能傳遞給子標(biāo)簽,一般是區(qū)塊控制屬性.
10, CSS中常見的屬性
- background 設(shè)置背景
- display 修改顯示類型（none、block、inline、inline-block
- padding 內(nèi)邊距（四種方式）
- margin 外邊距（四種方式) // 具體見官網(wǎng)
- border 設(shè)置邊框（border-width、border-style、border-color)
- overflow 設(shè)置超出元素邊界內(nèi)容的顯示
- line-height 垂直居中
- cursor 設(shè)置光標(biāo)的類型 (手指 十字架)(在偽類hover中使用)
- text-decoration 設(shè)置a標(biāo)簽的下劃線
- text-align 水平居中
- ist-style 設(shè)置列表左邊編號的類型,經(jīng)常用 none
11, 計算盒子模型的四個屬性
- 我們完全可以將網(wǎng)頁上的每一個標(biāo)簽都看成一個盒子,詳情見官網(wǎng)提供的圖片和解釋.每個盒子都有4個屬性.
- 內(nèi)容（content）
- 填充（padding，內(nèi)邊距）
- 邊框（border)
- 邊界（margin，外邊距)
12, CSS3 新增的特性
- C3中新增了很多屬性,在實際開發(fā)過程中使用率非常高,下面我們來舉幾個例子,不全,想要深究的朋友可以去官網(wǎng).
- RGBA(透明度) :用于設(shè)置透明度,是在原有的RGB基礎(chǔ)上添加了透明度屬性.
- 陰影
- 塊陰影:box-shadow
- 圓角陰影:text-shadow
- 注意它們是如何取值的,詳情見關(guān)網(wǎng)
- 設(shè)置圓角 : boder-radius
- 設(shè)置邊框圖片 : border-image
- 形變:transform(用到時直接去官網(wǎng),例子:mac桌面的dock)
13, CSS布局
- 在默認(rèn)的情況下,所有的網(wǎng)頁標(biāo)簽都是從左往右,從上到下的,并且是都在"標(biāo)準(zhǔn)流"布局中
- 在網(wǎng)頁中還存在一種標(biāo)簽就是不管你怎么滾動頁面,它會在指定的位置不動.這樣的標(biāo)簽脫離了"標(biāo)準(zhǔn)流"的布局.C3中提供了兩種方法來設(shè)置脫離標(biāo)準(zhǔn)流布局.
- 1, float屬性
- float屬性有兩個屬性值:left和right.
- left : 脫離標(biāo)準(zhǔn)流布局,浮動在父標(biāo)簽的最左邊
- right : 脫離標(biāo)準(zhǔn)流布局,浮動在父標(biāo)簽的最右邊
- position屬性
- position屬性常見的5個屬性值
- absolute
- relative
- fixed
- static
- inhert
