網頁設計考點復習

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

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

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

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

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

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

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

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

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

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

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

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

13、綠色 CSS屬性字體屬性 font-family，取值為字體名稱 font-style (normal/italic斜體/oblique斜體) font-weight (normal/bold/bolder/lighter/100/) font-size (絕對大小/相對大小/長度值/百分 比) 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：相對于根元素或第一個非靜態(tài)布局 (position:absolute:right:10px Relative：相對于自身 Fix:相對于視口（view point） top和left width和height z-index 布局 填充padding-邊框border-邊界margin上右 下左 float：left 表格的組成

15、 l 表格標記符table l 表格標題 caption l 表格行 tr （table row） l 表格數據 td （table data） l 表格表頭 th （table heading） 表格的構造p65 l 在 TH 或 TD 標記符中使用 rowspan 屬性 進行行合并 l 在 TH 或 TD 標記符中使用 colspan 屬性 進行列合并 文本框 單行文本框 口令框 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