屬性 屬性值 說明 src 圖片路徑 必須屬性 alt 文本 替換文本，圖像不能顯示的時候，出現(xiàn)的文字 title 文本 提示文本，鼠標放到圖片上，顯示的文字 width 像素 設(shè)置圖像的寬度 height 像素 設(shè)置圖像的高度 border 像素 設(shè)置圖像的邊框粗細

2、路徑

符號 說明 圖片路徑和html文件在同一級路徑 / 圖片路徑在html文件的下一級 ../ 圖片路徑在html文件的上一級 系統(tǒng)盤:\目錄\圖片名（絕對路徑 ） html文件使用計算機磁盤的圖片

6、超鏈接標簽 1、鏈接的語法格式：

文本或圖像

href和target屬性的作用：

屬性 作用 href 用于指定鏈接目標的url地址，當為標簽應(yīng)用href屬性時，它就具有了超鏈接的功能。 target 用于指定鏈接頁面的打開方式，其中_self為默認值，_blank為在新窗口中打開方式。

2、鏈接分類 外部鏈接： 在href后面添加url地址，跳轉(zhuǎn)到其他網(wǎng)頁 內(nèi)部鏈接： 在href后面添加html文件，跳轉(zhuǎn)到與自身html文件同級的html文件

空鏈接： 在沒有確定鏈接目標時，在href后面添加# 下載鏈接： 如果href后面地址是一個文件或者壓縮包，會下載這個文件。 網(wǎng)頁元素鏈接： 在網(wǎng)頁中的各種網(wǎng)頁元素，如文本、圖像、表格、音頻、視頻等都可以添加超鏈接 錨點鏈接： 我們點擊鏈接，可以快速定位到頁面中的某個位置 在鏈接文本的href屬性中，設(shè)置屬性值為#名字的形式，如第二集 找到目標位置標簽，里面添加一個id屬性=剛才的名字，如

第二集介紹

html5+css3（第三天學習）

一、html中的注釋和特殊字符 1、注釋 html中的注釋： 快捷鍵：Ctrl+/ 2、特殊字符 1、空格：  ； 2、<： < 3、>: > 3、表格標簽 1.4表格屬性

1.5表格結(jié)構(gòu)屬性

1.6合并單元格

1.7表格總結(jié)

4、列表標簽 1.無序列表

2.有序列表

3.自定義列表

4.列表總結(jié)

5、表單標簽 1.表單域

2.input表單元素

type屬性的屬性值：

input的除type的其他屬性

3.label標簽

4.select表單元素

5.textarea表單元素

html5+css3(第四天學習)

1、css簡介

css寫在head中，使用，寫在style標簽中 1.css語法規(guī)范

2.css選擇器的使用

1.選擇器分類

1.標簽選擇器

2-1.類選擇器

2-2.類選擇器-多類名

3.id選擇器

4.通配符選擇器

5.基礎(chǔ)選擇器總結(jié)

3、css字體屬性 1.字體系列

2.字體大小

3.字體粗細

4.文字樣式

5.字體復(fù)合屬性

6.字體屬性總結(jié)

4、css文本屬性 1.文本顏色

2.對齊文本

3.裝飾文本

4.文本縮進

5.行間距

6.文本屬性總結(jié)

5、css的引入方式 1.css的三種樣式表

2.內(nèi)部樣式表

3、行內(nèi)樣式表

4.外部樣式表

5.css引入方式總結(jié)

html5+css3(第五天學習)

1、Emment語法 1.1快速生成HTML結(jié)構(gòu)語法

1.2快速生成HTML標簽和樣式

1.3快速格式化代碼

2、css的復(fù)合選擇器 2.1什么是復(fù)合選擇器

2.2后代選擇器（重要）

2.3子元素選擇器

2.4并集選擇器

2.5鏈接偽類選擇器

2.6:focus偽類選擇器

2.7復(fù)合選擇器總結(jié)

3、css的元素顯示模式 3.1什么是元素顯示模式

3.2塊元素

3.3行內(nèi)元素

3.4行內(nèi)塊元素

3.5元素顯示模式總結(jié)

3.6元素顯示模式轉(zhuǎn)換

3.7一個小技巧 單行文字垂直居中

3.8單行文字垂直居中的原理

4、css的背景 4.1背景顏色

4.2背景圖片

4.3背景平鋪

4.4背景圖片位置

4.5背景圖像固定(背景附著)

4.6背景復(fù)合寫法

4.7背景色半透明

4.8背景總結(jié)

5、css三大特性 5.1層疊性

5.2繼承性

行高的繼承：

5.3優(yōu)先級

html5+css3(第六天學習)

1、盒子模型 1.1看透網(wǎng)頁布局的本質(zhì)

1.2盒子模型(Box Model)組成

1.3邊框(boder)

復(fù)合寫法：

1.4表格細線邊框

1.5邊框會影響盒子實際大小

1.6內(nèi)邊距(padding)

1.7外邊距(margin)

外邊距典型應(yīng)用：

1.8外邊距合并

1.9清除內(nèi)外邊距

2、PS基本操作

3、圓角邊框

4、盒子陰影

5、文字陰影

6、css浮動 6.1傳統(tǒng)網(wǎng)頁布局的三種方式

6.2標準流(普通流/文檔流)

6.3為什么需要浮動？

6.4什么是浮動？

6.5浮動特性

6.6浮動元素經(jīng)常和標準流流父級搭配使用

7、常見的網(wǎng)頁布局 7.1常見網(wǎng)頁布局

7.2浮動布局注意點

7.3為什么清除浮動

7.4清除浮動本質(zhì)以及額外標簽法

7.5清除浮動方法-額外標簽法

7.6清除浮動方法-父級添加overflow

7.7清除浮動方法-:after偽元素法

7.8清除浮動-雙偽元素清除浮動

7.9清除浮動總結(jié)

8、PS切圖 8.1常見的圖片格式

8.2圖層切圖

8.3切片切圖

8.4PS插件切圖

html5+css3學習(第七天)

1、定位 1.1為什么需要定位

1.2定位組成

1.3靜態(tài)定位static（了解）

1.4相對定位relative（重要）

1.5絕對定位absolute（重要）

1.6子絕父相的由來

1.7固定定位fixed（重要）

1.8粘性定位sticky（了解）

1.9定位總結(jié)

1.10定位疊放次序z-index

1.11定位的拓展

2、網(wǎng)頁布局總結(jié)

3、元素的顯示和隱藏 3.1display屬性

3.2visibility 可見性

3.3overflow 溢出

4、精靈圖 4.1為什么需要精靈圖？

4.2精靈圖（sprites）的使用

5、字體圖標 5.1字體圖標的產(chǎn)生

5.2字體圖標的優(yōu)點

5.3字體圖標的下載

5.4字體圖標的引入

5.5字體圖標的追加

6、css三角

7、css用戶界面樣式 7.1什么是界面樣式

7.2鼠標樣式cursor

7.2輪廓線outline

7.3防止拖拽文本域resize

8、vertical-align屬性應(yīng)用

8.1圖片、表單和文字對齊

8.2解決圖片底部默認空白縫隙問題

9、溢出的文字用省略號顯示

9.1單行文本溢出顯示省略號--必須滿足三個條件

9.2多行文本溢出顯示省略號

10、常見布局技巧

10.1margin負值運用

10.2文字圍繞浮動元素

10.3行內(nèi)塊巧妙運用

10.4css三角強化

html5+css3學習(第八天)

1、css初始化

2、html5的新特性

2.1html5新增的語義化標簽

2.2html5新增的多媒體標簽 1.視頻

兼容：

2.音頻

總結(jié)

2.3html5新增的input類型

2.4html5新增的表單屬性

3、css3的新特性 3.1css3的現(xiàn)狀

css3新增選擇器

3.2屬性選擇器

3.3結(jié)構(gòu)偽類選擇器

3.4偽元素選擇器

3.5css盒子模型

3.6css3其他特性（了解）

3.7css過渡（重點）

4、廣義的html5

5、web服務(wù)器 5.1什么是web服務(wù)器

5.2本地服務(wù)器

5.3遠程服務(wù)器

5.4將自己的網(wǎng)站上傳到遠程服務(wù)器

6、2D轉(zhuǎn)換

6.1二維坐標系

6.2 2D轉(zhuǎn)換之移動

6.3 2D轉(zhuǎn)換之旋轉(zhuǎn)

6.4 2D轉(zhuǎn)換中心點transform-origin

6.5 2D轉(zhuǎn)換之縮放scale

6.6 2D轉(zhuǎn)換綜合寫法

6.7 2D轉(zhuǎn)換總結(jié)

7、動畫

7.1動畫的基本使用

7.2動畫常用屬性

7.3動畫簡寫屬性

7.4速度曲線細節(jié)

8、3D轉(zhuǎn)換

8.1三維坐標系

8.2 3D移動translate3d

8.3透視perspective

8.4translateZ

8.5 3D旋轉(zhuǎn) rotate3d

8.6 3D呈現(xiàn)transform-style

8、瀏覽器私有前綴

html5+css3學習(第九天)

1、移動端開發(fā) 1.1瀏覽器現(xiàn)狀

1.2手機屏幕現(xiàn)狀

1.3常見移動端屏幕尺寸

1.4移動端調(diào)試方法

1.5總結(jié)

2、視口 2.1布局視口layout viewport

2.2視覺視口visual viewport

2.3理想視口ideal viewport

2.4總結(jié)

2.5meta視口標簽

2.6標準的viewport設(shè)置

3、二倍圖 3.1物理像素&物理像素比

3.2多倍圖

3.3背景縮放background-size

3.4多倍圖切圖cutterman

4、移動端開發(fā)選擇 4.1移動端主流方案

4.2單獨移動端頁面(主流)

4.3響應(yīng)式兼容PC移動端

4.4總結(jié)

5、移動端技術(shù)解決方案 5.1移動端瀏覽器

5.2css初始化 normalize.css

5.3css3盒子模型box-sizing

5.4特殊樣式

6、移動端常見布局

單獨制作移動端頁面 6.1流式布局（百分比布局）

6.2flex布局 1.傳統(tǒng)布局與flex布局

2.布局原理

3.常見父項屬性

1.主軸與側(cè)軸

2.flex-direction設(shè)置主軸的方向

3.justify-content 設(shè)置主軸上的子元素排列方式

4.flex-wrap 設(shè)置子元素是否換行

5.align-items 設(shè)置側(cè)軸上的子元素排列方式（單行）

6.align-content 設(shè)置側(cè)軸上的子元素的排列方式（多行）

7.flex-flow

4.flex布局子項常見屬性

1.flex屬性

2.align-self 控制子項自己在側(cè)軸上的排列方式

3.order屬性定義項目的排列順序

6.3rem適配布局 1.rem基礎(chǔ)

2.1什么是媒體查詢

2.2語法規(guī)范

2.3媒體查詢+rem實現(xiàn)元素動態(tài)大小改變

2.4引入資源（理解）

3.less基礎(chǔ) 1.維護css的弊端

2.less介紹

3.less使用

4.less變量

5.less編譯

6.less嵌套

7.less運算

4.rem適配方案

1.rem實際開發(fā)適配方案

2.rem適配方案技術(shù)使用（市場主流）

3.rem實際開發(fā)適配方案1

4.rem實際適配方案2

6.4移動端web開發(fā)之響應(yīng)式布局 1.響應(yīng)式開發(fā)原理

2.響應(yīng)式布局容器

3.Bootstrap前端開發(fā)框架

3.1Bootstrap簡介

3.2Bootstrap使用

3.3布局容器

4.1柵格系統(tǒng)簡介

4.2柵格選項參數(shù)

4.3列嵌套

4.4列偏移

4.5列排序

4.6響應(yīng)式工具

6.5移動端布局總結(jié) 1.移動端主流方案

2.移動端技術(shù)選型

柚子快報激活碼778899分享：前端 html5+css3

http://yzkb.51969.com/

文章來源