零基礎(chǔ)學(xué)編程：零基礎(chǔ)學(xué)HTML+CSS

前言
第一篇 HTML基礎(chǔ)知識(shí)
第1章 認(rèn)識(shí)HTML語(yǔ)言
1.1 HTML與網(wǎng)頁(yè)
1.1.1 認(rèn)識(shí)HTML語(yǔ)言
1.1.2 靜態(tài)網(wǎng)頁(yè)
1.1.3 動(dòng)態(tài)網(wǎng)頁(yè)
1.2 HTML標(biāo)記的組成
1.2.1 單標(biāo)記
1.2.2 雙標(biāo)記
1.3 創(chuàng)建第一張網(wǎng)頁(yè)
1.4 瀏覽HTML的瀏覽器兼容
1.5 編寫HTML的工具
1.5.1 Aptana代碼提示工具
1.5.2 Dreamweaver網(wǎng)頁(yè)開發(fā)工具
1.6 小結(jié)
1.7 習(xí)題
第2章 常用HTML標(biāo)記和格式
2.1 設(shè)置正文的標(biāo)題
2.1.1 標(biāo)題設(shè)置的語(yǔ)法
2.1.2 標(biāo)題設(shè)置經(jīng)典案例--字號(hào)由大到小
2.2 設(shè)置段落
2.2.1 段落標(biāo)記
2.2.2 段落中的空格
2.2.3 強(qiáng)制換行
2.3 給代碼添加注釋
2.4 文字的修飾
2.4.1 粗體與斜體
2.4.2 下劃線與刪除線
2.4.3 上標(biāo)與下標(biāo)
2.5 HTML標(biāo)記和格式實(shí)例
2.5.1 標(biāo)題用h1
2.5.2 設(shè)置每一行為一段落
2.5.3 粗體和刪除線
2.5.4 加上化學(xué)元素和數(shù)學(xué)平方根
2.6 小結(jié)
2.7 習(xí)題
第3章 字體標(biāo)記
3.1 設(shè)置字體大小
3.2 設(shè)置字體顏色
3.3 設(shè)置標(biāo)題字體樣式
3.3.1 設(shè)置標(biāo)題的字體大小
3.3.2 設(shè)置字體的大小和顏色
3.4 物理字體和邏輯字體
3.4.1 物理字體
3.4.2 邏輯字體
3.5 字體標(biāo)記實(shí)例
3.5.1 插入字體
3.5.2 將字體顏色設(shè)置為紅色
3.5.3 將文字設(shè)置為標(biāo)題h1
3.5.4 將文字設(shè)置為斜體并加刪除線
3.5.5 設(shè)置字體為
3.6 小結(jié)
3.7 習(xí)題
第4章 文字布局
4.1 行的控制
4.1.1 換行控制
4.1.2 不換行控制
4.2 文字對(duì)齊
4.3 段落設(shè)置
4.4 列表
4.4.1 無(wú)序列表
4.4.2 有序列表
4.5 用其他方式修飾文本
4.5.1 欲格式化文本
4.5.2 計(jì)算機(jī)輸出格式
4.6 文字布局實(shí)例
4.6.1 設(shè)置文字換行與不換行
4.6.2 設(shè)置文字對(duì)齊
4.6.3 顯示列表
4.6.4 在網(wǎng)頁(yè)中顯示源代碼
4.7 制作滾動(dòng)文字
4.7.1 設(shè)置文字滾動(dòng)
4.7.2 設(shè)置文字滾動(dòng)的方向
4.7.3 設(shè)置文字滾動(dòng)的速度和形式
4.8 小結(jié)
4.9 習(xí)題
第5章 圖像和鏈接
5.1 圖像的基本語(yǔ)法
5.1.1 在網(wǎng)頁(yè)中插入圖像
5.1.2 圖像無(wú)法顯示時(shí)的提示信息
5.1.3 控制圖像的大小
5.2 圖像和文字對(duì)齊
5.3 圖像的邊框
5.4 圖像映射圖
5.5 圖像的應(yīng)用實(shí)例
5.5.1 在網(wǎng)頁(yè)上引入圖像標(biāo)記
5.5.2 設(shè)置圖像參數(shù)alt
5.5.3 給圖像設(shè)置超鏈接
5.5.4 設(shè)置圖像的邊框
5.5.5 設(shè)置文本與圖像對(duì)齊
5.5.6 設(shè)置圖像的映射圖
5.6 文字鏈接
5.6.1 最簡(jiǎn)單的文字鏈接
5.6.2 超鏈接網(wǎng)頁(yè)的打開方式
5.6.3 鏈接的注釋
5.7 圖片鏈接
5.8 錨點(diǎn)鏈接
5.9 郵箱地址鏈接
5.10 相對(duì)路徑與絕對(duì)路徑
5.10.1 相對(duì)路徑
5.10.2 絕對(duì)路徑
5.11 鏈接應(yīng)用實(shí)例
5.11.1 在網(wǎng)頁(yè)中做文字鏈接
5.11.2 給圖片設(shè)置超鏈接
5.11.3 設(shè)置錨點(diǎn)鏈接
5.11.4 郵箱鏈接
5.12 小結(jié)
5.13 習(xí)題
第6章 表單
6.1 表單概述
6.1.1 表單的用途
6.1.2 表單的結(jié)構(gòu)
6.1.3 表單的基本語(yǔ)法
6.1.4 表單的數(shù)據(jù)傳遞方式
6.2 文本框和密碼框
6.2.1 文本框
6.2.2 密碼框
6.3 單選框和復(fù)選框
6.3.1 單選框
6.3.2 復(fù)選框
6.4 下拉列表與文本域
6.4.1 下拉列表
6.4.2 文本域
6.5 按鈕
6.6 圖像域、文件域和隱藏域
6.7 表單實(shí)例
6.7.1 插入表單
6.7.2 添加文本框和密碼框
6.7.3 添加單選框和復(fù)選框
6.7.4 添加下拉列表和文本域
6.7.5 在表單中添加提交按鈕
6.8 小結(jié)
6.9 習(xí)題
第7章 表格
7.1 頁(yè)面中的表格
7.1.1 表格的外觀
7.1.2 表格的基本語(yǔ)法
7.2 跨多行、多列表元
7.2.1 跨多行表元
7.2.2 跨多列表元
7.3 設(shè)置表格大小
7.3.1 設(shè)置表格邊框
7.3.2 設(shè)置表格高度和寬度
7.4 表格內(nèi)文字對(duì)齊
7.5 表格在網(wǎng)頁(yè)中對(duì)齊
7.6 表格實(shí)例
7.6.1 表格中嵌入表格
7.6.2 設(shè)置跨行和跨列
7.7 小結(jié)
7.8 習(xí)題
第8章 框架
8.1 用框架靈活地組織網(wǎng)頁(yè)
8.1.1 框架在網(wǎng)站中的作用
8.1.2 框架的結(jié)構(gòu)分析
8.1.3 框架的基本語(yǔ)法
8.2 框架分欄
8.2.1 框架垂直分欄
8.2.2 框架水平分欄
8.3 框架的常用屬性
8.3.1 設(shè)置不可調(diào)節(jié)框架大小
8.3.2 瀏覽器不支持框架
8.3.3 設(shè)置框架邊框
8.3.4 設(shè)置滾動(dòng)條
8.4 框架鏈接
8.4.1 導(dǎo)航框架
8.4.2 內(nèi)聯(lián)框架
8.5 框架實(shí)例
8.5.1 在網(wǎng)頁(yè)中插入框架
8.5.2 設(shè)置框架的滾動(dòng)條和邊框
8.5.3 設(shè)置不支持框架文字
8.5.4 設(shè)置框架導(dǎo)航鏈接
8.6 小結(jié)
8.7 習(xí)題
第9章 網(wǎng)頁(yè)中的動(dòng)態(tài)圖文和多媒體
9.1 移動(dòng)屬性的基本語(yǔ)法
9.2 文字的移動(dòng)
9.3 圖片的移動(dòng)
9.4 設(shè)置對(duì)象的移動(dòng)
9.4.1 文本移動(dòng)的方向
9.4.2 文本的滾動(dòng)循環(huán)
9.4.3 文本的移動(dòng)速度
9.4.4 應(yīng)用文本的全部移動(dòng)標(biāo)記
9.5 移動(dòng)實(shí)例--電影結(jié)束效果
9.6 網(wǎng)頁(yè)多媒體
9.6.1 網(wǎng)頁(yè)多媒體的基本語(yǔ)法
9.6.2 設(shè)置自動(dòng)播放
9.6.3 設(shè)置多媒體循環(huán)播放
9.6.4 設(shè)置面板的隱藏
9.6.5 設(shè)置面板的大小
9.6.6 設(shè)置對(duì)齊方式
9.7 網(wǎng)頁(yè)多媒體實(shí)例--在網(wǎng)頁(yè)中播放視頻
9.7.1 引入視頻文件
9.7.2 設(shè)置多媒體為非自動(dòng)播放
9.7.3 設(shè)置多媒體無(wú)循環(huán)播放
9.7.4 設(shè)置控制面板的大小
9.8 小結(jié)
9.9 習(xí)題
第二篇 DIV＋CSS布局
第10章 用DIV布局
10.1 DIV與TABLE布局比較
10.1.1 DIV簡(jiǎn)介
10.1.2 DIV與TABLE的區(qū)別
10.2 如何用DIV布局
10.2.1 設(shè)置DIV選擇符
10.2.2 設(shè)置CSS修飾DIV效果
10.2.3 設(shè)置DIV的背景顏色
10.3 使用DIV注意事項(xiàng)
10.4 認(rèn)識(shí)SPAN
10.4.1 設(shè)置DIV選擇符
10.4.2 何時(shí)用SPAN
10.5 DIV與SPAN的區(qū)別
10.5.1 默認(rèn)寬度不同
10.5.2 塊元素與行內(nèi)元素
10.6 DIV與SPAN實(shí)例--多層布局
10.7 小結(jié)
10.8 習(xí)題
第11章 DIV與CSS結(jié)合
11.1 用CSS控制DIV
11.2 CSS文件鏈接
11.2.1 內(nèi)聯(lián)定義
11.2.2 鏈接內(nèi)部CSS
11.2.3 鏈接外部CSS
11.3 DIV+CSS布局實(shí)例
11.3.1 確定布局
11.3.2 定義body樣式
11.3.3 定義主要的DIV
11.3.4 設(shè)置層居中
11.4 小結(jié)
11.5 習(xí)題
第三篇 CSS部分
第12章 CSS的基礎(chǔ)知識(shí)
12.1 CSS簡(jiǎn)介
12.2 CSS文件鏈接方式
12.3 選擇符
12.4 偽類
12.5 注解
12.6 單位
12.7 編寫CSS的工具
12.7.1 打開CSS工具軟件
12.7.2 新建CSS文件
12.7.3 另存為CSS文件
12.7.4 打開Aptana工具
12.7.5 在菜單欄中新建CSS文件
12.8 CSS與瀏覽器的兼容性
12.9 CSS基礎(chǔ)實(shí)例
12.9.1 在Aptana中新建網(wǎng)頁(yè)
12.9.2 在Aptana中新建CSS文件
12.9.3 鏈接CSS文件到HTML頁(yè)面中
12.9.4 用不同的瀏覽器測(cè)試頁(yè)面
12.10 小結(jié)
12.11 習(xí)題
第13章 字體設(shè)置和文本設(shè)置
13.1 文字的字體
13.1.1 字體的復(fù)合屬性
13.1.2 字體顏色
13.1.3 字體大小
13.1.4 字體重量
13.1.5 字體類型
13.2 行距
13.3 設(shè)置文本間距與間隔
13.3.1 文本間距
13.3.2 文本間隔
13.4 字體實(shí)例--字體花樣
13.4.1 加入字體名字
13.4.2 加入CSS控制字體
13.4.3 設(shè)置行距
13.4.4 設(shè)置文本間隔
13.5 字母大小寫轉(zhuǎn)換
13.6 文本修飾
13.7 空格處理方式
13.8 設(shè)置文本垂直與水平對(duì)齊
13.8.1 文本垂直對(duì)齊
13.8.2 文本水平對(duì)齊
13.9 文本縮進(jìn)
13.10 文本設(shè)置--給段落設(shè)置縮進(jìn)
13.10.1 對(duì)DIV布局
13.10.2 設(shè)置文本首行縮進(jìn)
13.11 小結(jié)
13.12 習(xí)題
第14章 設(shè)置背景和尺寸
14.1 背景的基本語(yǔ)法
14.2 設(shè)置背景顏色
14.3 設(shè)置背景圖像
14.3.1 設(shè)置背景圖像滾動(dòng)
14.3.2 設(shè)置背景圖像的位置
14.3.3 設(shè)置背景圖像的鋪排
14.4 背景實(shí)例
14.4.1 設(shè)置層背景為綠色
14.4.2 設(shè)置層背景圖像
14.4.3 設(shè)置背景為不鋪排
14.4.4 設(shè)置背景圖像位置
14.5 設(shè)置尺寸
14.5.1 設(shè)置寬度
14.5.2 設(shè)置高度
14.6 尺寸實(shí)例--設(shè)置層居中
14.6.1 尺寸實(shí)例手把手
14.6.2 設(shè)置層居中
14.7 小結(jié)
14.8 習(xí)題
第15章 設(shè)置外邊距和內(nèi)邊距
15.1 外邊距的基本語(yǔ)法
15.2 外邊距的四邊設(shè)置
15.2.1 頂端外邊距的用法
15.2.2 右端外邊距的用法
15.2.3 底端外邊距的用法
15.2.4 左端外邊距的用法
15.3 外邊距實(shí)例--設(shè)置層與層的距離
15.3.1 層與層的距離效果
15.3.2 對(duì)層布局
15.3.3 設(shè)置層的尺寸
15.3.4 設(shè)置層漂移
15.3.5 設(shè)置層與層之間的間隔
15.4 內(nèi)邊距的基本語(yǔ)法
15.5 內(nèi)邊距的四邊屬性
15.5.1 頂端內(nèi)邊距的用法
15.5.2 右端內(nèi)邊距的用法
15.5.3 底端內(nèi)邊距的用法
15.5.4 左端內(nèi)邊距的用法
15.6 內(nèi)邊距實(shí)例
15.6.1 設(shè)置頂部?jī)?nèi)邊距
15.6.2 設(shè)置其他位置的內(nèi)邊距
15.6.3 用復(fù)合屬性padding設(shè)置內(nèi)邊距
15.7 小結(jié)
15.8 習(xí)題
第16章 設(shè)置對(duì)象邊框
16.1 邊框的基本語(yǔ)法
16.2 邊框顏色
16.3 邊框樣式
16.4 邊框?qū)挾?br />16.5 對(duì)象的四個(gè)邊框
16.5.1 設(shè)置頂端邊框的屬性
16.5.2 設(shè)置右端邊框的屬性
16.5.3 設(shè)置底端邊框的屬性
16.5.4 設(shè)置左端邊框的屬性
16.6 邊框?qū)嵗?-多層邊框
16.6.1 設(shè)置單層邊框
16.6.2 設(shè)置多層邊框
16.7 小結(jié)
16.8 習(xí)題
第17章 定位
17.1 定位的基本語(yǔ)法
17.2 設(shè)置對(duì)象的層疊順序
17.3 設(shè)置對(duì)象的邊框位置
17.4 定位實(shí)例--圓角制作
17.4.1 相對(duì)定位實(shí)例
17.4.2 絕對(duì)定位實(shí)例
17.4.3 實(shí)例--圓角制作
17.5 小結(jié)
17.6 習(xí)題
第18章 用CSS控制列表和表格
18.1 列表的基本語(yǔ)法
18.2 設(shè)置列表的圖像
18.3 設(shè)置列表的文本排列
18.4 列表的預(yù)設(shè)標(biāo)記
18.5 列表實(shí)例
18.5.1 設(shè)置列表圖像文字內(nèi)顯示
18.5.2 設(shè)置列表樣式為空心圓
18.5.3 設(shè)置文本外自定義列表圖像
18.6 控制表格的基本語(yǔ)法
18.7 設(shè)置表格邊框獨(dú)立或合并
18.8 設(shè)置表格布局的算法
18.9 CSS控制表格實(shí)例
18.9.1 布局好表格
18.9.2 表格邊框獨(dú)立和合并
18.9.3 設(shè)置表格算法為自動(dòng)和固定
18.10 小結(jié)
18.11 習(xí)題
第19章 滾動(dòng)條和布局
19.1 滾動(dòng)條
19.1.1 滾動(dòng)條的基本語(yǔ)法
19.1.2 設(shè)置滾動(dòng)條亮邊框顏色
19.1.3 設(shè)置3D界面亮邊顏色和表面顏色
19.1.4 設(shè)置滾動(dòng)條方向箭頭顏色
19.1.5 設(shè)置滾動(dòng)條3D界面暗邊顏色和暗邊框顏色
19.1.6 設(shè)置滾動(dòng)條基準(zhǔn)顏色和拖動(dòng)區(qū)域顏色
19.2 層的漂移
19.2.1 設(shè)置層的漂移
19.2.2 清除層的漂移范圍
19.3 設(shè)置層的可視區(qū)域
19.4 內(nèi)容超過(guò)層大小時(shí)
19.5 鼠標(biāo)指針的不同表示
19.6 設(shè)置對(duì)象可見(jiàn)性
19.6.1 設(shè)置對(duì)象是否隱藏
19.6.2 設(shè)置對(duì)象是否顯示
19.7 小結(jié)
19.8 習(xí)題
第20章 選擇符
20.1 通配選擇符
20.2 類型選擇符
20.3 包含選擇符
20.4 布局常用選擇符
20.4.1 ID選擇符
20.4.2 類選擇符
20.5 分組選擇符
20.6 偽類
20.7 偽類的四種狀態(tài)
20.7.1 訪問(wèn)鏈接的狀態(tài)
20.7.2 鼠標(biāo)光標(biāo)置于其上的狀態(tài)
20.7.3 獲得焦點(diǎn)的狀態(tài)
20.7.4 訪問(wèn)過(guò)后的狀態(tài)
20.8 CSS中的單位
20.8.1 長(zhǎng)度單位
20.8.2 顏色單位
20.9 小結(jié)
20.10 習(xí)題
第四篇 實(shí)踐部分
第21章 游戲網(wǎng)站布局
21.1 網(wǎng)站主頁(yè)規(guī)劃
21.2 用DIV+CSS布局
21.2.1 實(shí)現(xiàn)頁(yè)面頭部
21.2.2 實(shí)現(xiàn)中間部分
21.2.3 實(shí)現(xiàn)頁(yè)面底部
21.3 加入文字
21.4 調(diào)整全頁(yè)面的兼容性
21.5 小結(jié)
第22章 企業(yè)網(wǎng)站布局
22.1 企業(yè)主頁(yè)規(guī)劃
22.2 對(duì)網(wǎng)頁(yè)布局
22.2.1 將頁(yè)面用DIV布局出框圖
22.2.2 用CSS實(shí)現(xiàn)頁(yè)面頭部
22.2.3 用CSS實(shí)現(xiàn)頁(yè)面體
22.3 添加文本等信息
22.4 調(diào)整全頁(yè)面和瀏覽器兼容
22.5 其他二級(jí)頁(yè)面模塊制作
22.6 小結(jié)
第23章 博客主要頁(yè)面布局
23.1 博客網(wǎng)站主頁(yè)規(guī)劃
23.1.1 分析主頁(yè)需求
23.1.2 確定內(nèi)容模塊
23.1.3 畫出效果圖
23.2 用DIV布局框圖
23.2.1 頁(yè)眉
23.2.2 實(shí)現(xiàn)內(nèi)容模塊
23.2.3 頁(yè)腳
23.3 CSS實(shí)現(xiàn)框圖
23.3.1 實(shí)現(xiàn)內(nèi)容模塊
23.3.2 實(shí)現(xiàn)整頁(yè)效果
23.4 添加圖片
23.5 加入文字
23.6 調(diào)整全頁(yè)面
23.7 其他頁(yè)面布局
23.8 小結(jié)
第24章 面試題
面試題1 DIV與SPAN的區(qū)別
面試題2 HTML的框架是什么
面試題3 CSS引入的方式有哪些
面試題4 前端頁(yè)面有哪三層構(gòu)成，各層的作用是什么
面試題5 常見(jiàn)的瀏覽器的內(nèi)核有哪些
面試題6 img元素的alt text屬性和title屬性有什么不同
面試題7 document.body和document.documentElement有什么不同
面試題8 XHTML和DHTML有什么區(qū)別
面試題9 寫出實(shí)現(xiàn)效果所需的CSS代碼
面試題10 寫出一段左邊固定、右邊隨電腦屏幕浮動(dòng)而變動(dòng)的HTML+CSS代碼
面試題11 寫一段兩個(gè)DIV交叉重疊的CSS樣式
面試題12 怎樣使一個(gè)層垂直居中位于瀏覽器中
面試題13 Firefox嵌套DIV標(biāo)簽居中問(wèn)題的處理方法
面試題14 用純CSS實(shí)現(xiàn)帶下拉菜單的二級(jí)橫向?qū)Ш讲藛?br />面試題15 在網(wǎng)頁(yè)制作中為什么要使用CSS技術(shù)
面試題16 CSS+DIV開發(fā)Web頁(yè)面的優(yōu)勢(shì)有哪些
面試題17 實(shí)現(xiàn)兩列高度自適應(yīng)的CSS代碼