網(wǎng)頁設(shè)計(jì)考點(diǎn)復(fù)習(xí)

1、1 網(wǎng)頁設(shè)計(jì)基礎(chǔ) 考點(diǎn)復(fù)習(xí) 2 基本語法+標(biāo)記符基礎(chǔ) p7-14 在 HTML 中，所有的標(biāo)記符都用尖括號(hào)括 起來。例如，、。 HTML 標(biāo)記符是不區(qū)分大小寫的。、 和沒有區(qū)別。 注意：XHTML要求標(biāo)記符區(qū)分大小寫 3 標(biāo)記符基礎(chǔ) 絕大多數(shù)標(biāo)記符都是成對(duì)出現(xiàn)的，包括開 始標(biāo)記符和結(jié)束標(biāo)記符。某些標(biāo)記符，例如 ，只要求單一標(biāo)記符號(hào)。 開始標(biāo)記符與結(jié)束標(biāo)記符的區(qū)別在于：結(jié) 束標(biāo)記符多一個(gè)斜杠“/”（不是反斜杠 “”！） 4 背景圖案 使用 BODY 標(biāo)記符的 BACKGROUND 屬 性可以設(shè)置背景圖案。HTML語句為： 注意：html中沒有，所有設(shè)定在css中 5 小節(jié) HTTP超文本傳輸協(xié)議

2、 三種顏色表示方法：顏色名稱、 #RRGGBB、含量#FF0000（p11-12） 創(chuàng)建網(wǎng)頁的步驟： 標(biāo)記符 常用物理字符樣式標(biāo)記符有： 黑體標(biāo)記 斜體標(biāo)記 下劃線標(biāo)記等。 （必考標(biāo)記符，之前講 eg：加粗） 在 HTML 中，用戶可以通過 Hn 標(biāo)記符 來標(biāo)識(shí)文檔中的標(biāo)題和副標(biāo)題，其中 n 是1至6的數(shù)字；H1表示最大的標(biāo)題， H6表示最小的標(biāo)題。使用標(biāo)題樣式時(shí)， 必須使用結(jié)束標(biāo)記符。 注意：使用標(biāo)題時(shí)應(yīng)按照其邏輯含義， 而不是按照其顯示效果！ eg：有h4 前面一定有h1/h2/h3 與字體大小無關(guān) 塊元素和行內(nèi)元素 塊元素(自動(dòng)換行） 行內(nèi)元素inline在行內(nèi)嵌入相當(dāng)于一個(gè)字 塊（換行

3、）：h1-h6, p, ul, li 行內(nèi)(字符)：a， img， strong （塊元素） aah（行內(nèi)元素） 文本元素總結(jié) 塊元素 h# (heading) p (paragraph) pre (preformatted text) address blockquote (lengthy quotation) 行內(nèi)元素 em strong sub sup 換行 br 通用元素通用元素 div span 列表 ul ol li b big i u font hr 核心文檔結(jié)構(gòu)標(biāo)記 h1h4 p ul, ol, li div ，span 有序無序p32-34 有序列表 定義有序列表需要使用有序

4、列表標(biāo)記符 和列表項(xiàng)（List item）標(biāo)記 符/（結(jié)束標(biāo)記符可省略）， 語法如下： List item 1 List item 2 無序列表 無序列表（Unordered list）也稱強(qiáng)調(diào)式列表， 它是一種在表的各項(xiàng)前顯示有特殊項(xiàng)目符號(hào) 的縮排列表。 p36-38 使用超鏈接（必會(huì)） 超鏈接基礎(chǔ) URL（Universal Resources Locator）用 于定位Web上的文檔信息。 一個(gè) URL 包括 3 部分：協(xié)議、計(jì)算機(jī)地址、 文件路徑。 協(xié)議：/計(jì)算機(jī)/文件路徑 超鏈接基礎(chǔ)絕對(duì)URL 絕對(duì)URL是指資源的完整地址，包括URL 的所有3個(gè)部分，即： 協(xié)議：/計(jì)算機(jī)/文檔名 超

5、鏈接基礎(chǔ)相對(duì)URL 相對(duì)URL是指Internet上資源相對(duì)于當(dāng)前頁 面的地址，它包含從當(dāng)前頁面指向目標(biāo)頁 面位置的路徑。 使用相對(duì)URL的好處：易于維護(hù) 超鏈接基礎(chǔ)相對(duì)URL 使 用 相 對(duì) U R L 時(shí)， 經(jīng) 常 使 用 兩 個(gè) 與 D O S 類 似 的 符 號(hào)： 句 點(diǎn) （. ） 表 示 當(dāng) 前 目 錄 . / i m a g e. g i f 雙 重 句 點(diǎn) （. .） 表 示 當(dāng) 前 目 錄 的 上 一 級(jí) 目 錄 . / p u b l i c / i n d e x. h t m 超鏈接基礎(chǔ)相對(duì)URL 必考類型：p47-6、p62-6 不同類型的超鏈接 根據(jù)超鏈接的目標(biāo)文件不

6、同，分為： 網(wǎng)頁之間的超鏈接 頁面內(nèi)的超鏈接 文件下載超鏈接 Email超鏈接 空超鏈接 創(chuàng)建超鏈接 A 標(biāo)記符用于創(chuàng)建超鏈接（結(jié)束標(biāo)記符不能省 略），href 屬性用于指定超鏈接的目標(biāo)文件。 內(nèi)部網(wǎng)頁超鏈接： 單擊 此處 獲取關(guān)于魔獸 世界的更多信息 (相對(duì)URL) 外部網(wǎng)頁超鏈接：link (絕對(duì)URL) 創(chuàng)建超鏈接錨點(diǎn)鏈接 使用頁面內(nèi)的超鏈接，首先需要定義錨點(diǎn)，然 后在超鏈接中指向該錨點(diǎn)。 定義錨點(diǎn)應(yīng)使用目錄 指向錨點(diǎn)的超鏈接為：返回目 錄 大題 制作矢量格式圖像的軟件有 Freehand、Illustrator、 CorelDraw、AutoCAD 常用的位圖編輯軟件有 Firewor

7、ks、Photoshop、 ImageReady、PhotoImpact 圖像文件 常用Web圖像格式 常用的Web網(wǎng)頁圖像格式包括： GIF JPEG PNG GIF GIF（Graphics Interchange Format， 圖形交換格式）格式的特點(diǎn)： 無損壓縮 最多256色 能夠使用透明色 交錯(cuò)式Gif（interlaced gif） 動(dòng)畫Gif 30/60 JPEG JPEG（Joint Photographic Expert Group，聯(lián)合圖形專家組）格式的特點(diǎn)： 有損壓縮 沒有顏色限制 可以控制壓縮比 漸進(jìn)式JPEG（progressive JPEG） 31/60 PNG

8、PNG（Portable Network Graphics，可移植 的網(wǎng)絡(luò)圖形）格式的特點(diǎn)： 無損壓縮 沒有顏色限制 支持透明度 在網(wǎng)頁中插入圖像 I M G 標(biāo) 記 符 W I D T H 和 H E I G H T 屬 性 指 定 圖 像 的 顯 示 大 小 B O R D E R 屬 性 指 定 圖 像 的 邊 框 a l i g n 屬 性 設(shè) 置 對(duì) 齊 方 式 h s p a c e 屬 性 設(shè) 置 水 平 方 向 的 空 白 v s p a c e 屬 性 設(shè) 置 垂 直 方 向 的 空 白 使用css樣式三種方法 直接在標(biāo)記符中嵌套p133 HTML 標(biāo)記符的 style 屬性

9、 例如： 其中，style屬性的取值形式為： “CSS屬性:CSS屬性值” 多個(gè)屬性用分號(hào)分隔 在STYLE 標(biāo)記符定義樣式 中 樣式定義 樣式定義的方式為 Selectorproperty1:value1;property2:value2; property3:value3; 鏈接外部樣式表文件 LINK 標(biāo)記符 正文內(nèi)容 CSS屬性單位（長(zhǎng)度、顏色、其他） 相對(duì)值 em: 相關(guān)字體的font-size值 ex: 相關(guān)字體的x-height值 px: 像素值, 與設(shè)備相關(guān) 絕對(duì)值 in: 英寸 1 英寸= 2.54 厘米 cm: 厘米 mm: 毫米 pt: 點(diǎn) CSS 2.1 用的1點(diǎn)= 1

10、/72英寸 pc: 皮卡 1 皮卡= 12 點(diǎn) 常用選擇器類型 HTML標(biāo)記符 具有上下文關(guān)系的選擇器 用戶定義的類 用戶定義的ID 虛類 HTML標(biāo)記符 HTML標(biāo)記符是最常用的selector，它重新 定義了HTML標(biāo)記符的顯示效果。例如： H1text-align:center;color:red 使所有用H1標(biāo)記符修飾的內(nèi)容都居中和用紅色 顯示。 具有上下文關(guān)系的選擇器 如果選擇器之間用空格分開，就表示 具有上下文關(guān)系的選擇器。 例如 p b color:red 表示位于p標(biāo)記符中的b標(biāo)記符采用相 應(yīng)格式。 用戶定義類 .classnameproperty:value 表示任何clas

11、s屬性為classname的標(biāo)記符都 采用所定義的樣式。 eg：H1.color_redcolor:red 用戶定義ID #IDname property:value; 表示id屬性為 Idname的標(biāo)記符采用 所定義的樣式。 eg: #container width: 46em; margin: 0 auto; border: 1px solid #000000; 虛類選擇器 a:link 未訪問過的超鏈接 a:visited 訪問過的超鏈接 a:hover 懸停狀態(tài)的超鏈接 a:active 活動(dòng)超鏈接 所有超鏈接去下劃線：atext- decoration:none 懸停變色a:hove

12、rcolor:red 樣式優(yōu)先級(jí) （1）外部樣式表-站點(diǎn)樣式表 （形成站點(diǎn)風(fēng)格css） (2)頁內(nèi)樣式表 (形成單獨(dú)頁面的風(fēng)格) （3）行內(nèi)樣式表 font-weight:bold (僅在測(cè)試時(shí)用) 樣式的優(yōu)先級(jí)（基本） 樣式的優(yōu)先級(jí)遵循“就近優(yōu)先”的原則， 也就是說，距離所修飾對(duì)象越近的樣式， 其優(yōu)先級(jí)越高。 樣式如果沖突，則采用高優(yōu)先級(jí)樣式；如 果不沖突，則采用疊加的樣式效果。 P color: red 正文內(nèi)容 其中，test.css 的內(nèi)容如下： P color: green 紅色 P color: red 正文內(nèi)容 其中，test.css 的內(nèi)容如下： P color: green

13、綠色 CSS屬性字體屬性 font-family，取值為字體名稱 font-style (normal/italic斜體/oblique斜體) font-weight (normal/bold/bolder/lighter/100/) font-size (絕對(duì)大小/相對(duì)大小/長(zhǎng)度值/百分 比) CSS屬性文本屬性 line-height text-align(left/right/center/justify) text- decoration(none/underline/overline) text-indent CSS屬性顏色與背景屬性 background-image backgro

14、und-attachment(scroll/fixed（靜 止）) background-repeat(no- repeat/repeat/repeat_x) CSS屬性定位屬性 position (static/relative/absolute) Absolute：相對(duì)于根元素或第一個(gè)非靜態(tài)布局 (position:absolute:right:10px Relative：相對(duì)于自身 Fix:相對(duì)于視口（view point） top和left width和height z-index 布局 填充padding-邊框border-邊界margin上右 下左 float：left 表格的組成

15、 l 表格標(biāo)記符table l 表格標(biāo)題 caption l 表格行 tr （table row） l 表格數(shù)據(jù) td （table data） l 表格表頭 th （table heading） 表格的構(gòu)造p65 l 在 TH 或 TD 標(biāo)記符中使用 rowspan 屬性 進(jìn)行行合并 l 在 TH 或 TD 標(biāo)記符中使用 colspan 屬性 進(jìn)行列合并 文本框 單行文本框 口令框 Javascript a+ +a A=i+; a=i; i=i+1; A=+i; i =i+1 ;a=i eg: a=3; b=3; +a*+b 16 +a*b+ 12 控制語句 條件語句(p165): if ( 2 1 ) alert(something is w