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

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

2、量#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)識文檔中的標(biāo)題和副標(biāo)題，其中 n 是1至6的數(shù)字；H1表示最大的標(biāo)題，H6表示最小的標(biāo)題。使用標(biāo)題樣式時，必須使用結(jié)束標(biāo)記符。注意：使用標(biāo)題時應(yīng)按照其邏輯含義，而不是按照其顯示效果！eg：有h4 前面一定有h1/h2/h3 與字體大小無關(guān)塊元素和行內(nèi)元素塊元素(自動換行）行內(nèi)元素inline在行內(nèi)嵌入相當(dāng)于一個字塊（換行）：h1-h6, p, ul, li行內(nèi)(字符)：a， img， strong（塊元素

3、）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 fonthr核心文檔結(jié)構(gòu)標(biāo)記 h1h4 p ul, ol, li div ，span有序無序p32-34有序列表定義有序列表需要使用有序列表標(biāo)記符和列表項（List item）標(biāo)記符/（結(jié)束標(biāo)記符可省略），語法如下： List item 1 List

4、 item 2無序列表無序列表（Unordered list）也稱強調(diào)式列表，它是一種在表的各項前顯示有特殊項目符號的縮排列表。p36-38使用超鏈接（必會）超鏈接基礎(chǔ) URL（Universal Resources Locator）用于定位Web上的文檔信息。 一個 URL 包括 3 部分：協(xié)議、計算機地址、文件路徑。 協(xié)議：/計算機/文件路徑超鏈接基礎(chǔ)絕對URL 絕對URL是指資源的完整地址，包括URL的所有3個部分，即： 協(xié)議：/計算機/文檔名超鏈接基礎(chǔ)相對URL 相對URL是指Internet上資源相對于當(dāng)前頁面的地址，它包含從當(dāng)前頁面指向目標(biāo)頁面位置的路徑。 使用相對URL的好處：易

5、于維護(hù)超鏈接基礎(chǔ)相對URL 使用相對URL時，經(jīng)常使用兩個與DOS類似的符號：句點（.）表示當(dāng)前目錄 ./image.gif雙重句點（.）表示當(dāng)前目錄的上一級目錄./public/index.htm超鏈接基礎(chǔ)相對URL必考類型：p47-6、p62-6不同類型的超鏈接 根據(jù)超鏈接的目標(biāo)文件不同，分為：網(wǎng)頁之間的超鏈接頁面內(nèi)的超鏈接文件下載超鏈接Email超鏈接空超鏈接創(chuàng)建超鏈接 A 標(biāo)記符用于創(chuàng)建超鏈接（結(jié)束標(biāo)記符不能省略），href 屬性用于指定超鏈接的目標(biāo)文件。內(nèi)部網(wǎng)頁超鏈接：單擊 此處 獲取關(guān)于魔獸世界的更多信息(相對URL)外部網(wǎng)頁超鏈接：link(絕對URL)創(chuàng)建超鏈接錨點鏈接使用頁面

6、內(nèi)的超鏈接，首先需要定義錨點，然后在超鏈接中指向該錨點。 定義錨點應(yīng)使用目錄指向錨點的超鏈接為：返回目錄大題制作矢量格式圖像的軟件有 Freehand、Illustrator、CorelDraw、AutoCAD 常用的位圖編輯軟件有 Fireworks、Photoshop、ImageReady、PhotoImpact 圖像文件常用Web圖像格式常用的Web網(wǎng)頁圖像格式包括： GIF JPEG PNGGIFGIF（Graphics Interchange Format，圖形交換格式）格式的特點： 無損壓縮 最多256色 能夠使用透明色 交錯式Gif（interlaced gif） 動畫Gif30

7、/60JPEGJPEG（Joint Photographic Expert Group，聯(lián)合圖形專家組）格式的特點： 有損壓縮 沒有顏色限制 可以控制壓縮比 漸進(jìn)式JPEG（progressive JPEG）31/60PNGPNG（Portable Network Graphics，可移植的網(wǎng)絡(luò)圖形）格式的特點： 無損壓縮 沒有顏色限制 支持透明度在網(wǎng)頁中插入圖像IMG 標(biāo)記符WIDTH 和 HEIGHT 屬性指定圖像的顯示大小BORDER 屬性指定圖像的邊框align屬性設(shè)置對齊方式hspace屬性設(shè)置水平方向的空白vspace屬性設(shè)置垂直方向的空白使用css樣式三種方法直接在標(biāo)記符中嵌套p

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

9、CSS 2.1 用的1點= 1/72英寸 pc: 皮卡 1 皮卡= 12 點常用選擇器類型 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 表示任

10、何class屬性為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 活動超鏈接所有超鏈接去下劃線：atext-decoration:none懸停變色a:hovercolor:r

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

12、，取值為字體名稱 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-indentCSS屬性顏色與背景屬性 background-image background-attachment(scroll/fixed（

13、靜止）) background-repeat(no-repeat/repeat/repeat_x)CSS屬性定位屬性position (static/relative/absolute)Absolute：相對于根元素或第一個非靜態(tài)布局(position:absolute:right:10pxRelative：相對于自身Fix:相對于視口（view point）top和leftwidth和heightz-index布局填充padding-邊框border-邊界margin上右下左float：left表格的組成l 表格標(biāo)記符tablel 表格標(biāo)題 captionl 表格行 tr （table row）l 表格數(shù)據(jù) td （table data）l 表格表頭 th （table heading）表格的構(gòu)造p65l 在 TH 或 TD 標(biāo)記符中使用 rowspan 屬性進(jìn)行行合并l 在 TH 或 TD 標(biāo)記符中使用 colspan 屬性進(jìn)行列合并文本框 單行文本框 口令框 Javascripta+aA=i+; a=i; i=i+1;A=+i; i =i+1 ;a=ieg:a=3;b=3;+a*+b 16+a*b+ 12控制語句條件語句(p165):if ( 2 1 ) alert(something is wrong);if ( 2