HTML靜態(tài)網(wǎng)頁(yè)知識(shí)點(diǎn)

千里之行，始于足下。第2頁(yè)/共2頁(yè)精品文檔推薦HTML靜態(tài)網(wǎng)頁(yè)知識(shí)點(diǎn)文中的XXX“黃群”標(biāo)記為易錯(cuò)的，重要的

第一章網(wǎng)頁(yè)編程基礎(chǔ)

1、互聯(lián)網(wǎng)？

2、分不解釋tcp/ip;http;ftp;html;bbs;;url;php；css

3、url的5種形式？

4、服務(wù)器、服務(wù)端？客戶端？

5、超文本？超？

6、網(wǎng)頁(yè)的3種基本類型？

7、一具完整的hml文件結(jié)構(gòu)有多少個(gè)標(biāo)記？分不是？

8、文字的屬性代碼？

9、注釋標(biāo)記？標(biāo)題標(biāo)記？換行？空格？段降？加粗？加歪？

10、meta標(biāo)記常用的刷新/語(yǔ)言編碼代碼？

增加的：關(guān)鍵字、主題容、強(qiáng)行的調(diào)用網(wǎng)上最新版本、文檔作者

11、link標(biāo)記？（）

12、base標(biāo)記？（文檔原始地址）

13、常見(jiàn)的html編輯器？

答案：

1、Internet

2、tcp/ip:傳輸操縱協(xié)議

http:超文本傳輸協(xié)議

ftp:文件傳輸協(xié)議

html:超文本標(biāo)記語(yǔ)言

bbs:電子公告板服務(wù)

:（worldwideweb）網(wǎng)維網(wǎng)或全球圍網(wǎng)

url:統(tǒng)一資源定位符

php:一種用來(lái)制作動(dòng)態(tài)網(wǎng)頁(yè)的服務(wù)器端的足本語(yǔ)言

css:層疊樣式表（樣式表）一種設(shè)計(jì)網(wǎng)頁(yè)樣式的標(biāo)準(zhǔn)

3、①file://文件地址（最終以單個(gè)文件結(jié)尾）

②./default.html[default：缺省的意思]

③23

④news://地址

⑤telnet://地址

4、server；client【B-B;C-C;B-C;模式B代表企業(yè)；C

5、HT(hypertxet),HL(hyperlink)

6、①靜態(tài)網(wǎng)頁(yè)html；css

②動(dòng)態(tài)網(wǎng)頁(yè)*.jsp,*.php*.asp(以do?開(kāi)始的是Java平臺(tái)編寫(xiě)的)

③交互式網(wǎng)頁(yè)JavaScript

7、4個(gè)；分不是

8、文字

9、注釋；標(biāo)題：x為1~6，其中h1最大；換行：

或空格： 段降

;加粗;加歪

10、刷新：

文字編碼：(簡(jiǎn)體中文：gb2312，utf-8是英語(yǔ)編碼，繁體字編碼：BIG5)

關(guān)鍵字：

主題容：

強(qiáng)行調(diào)用網(wǎng)上的最新版本：

或

文檔作者：

11、

12、(注意XX與address之間是空格。)

13、常見(jiàn)的html編輯器：Dreamweaver、Notepad++、firstpage2006、webuilder2006

（往常的Dreamweaver是macromedia公司的，如今隸屬于adobe公司）

第二章認(rèn)識(shí)Dreamweaver

1、？分支？xhtml前的x表示啥？

在Dreamweaver中啥鍵可實(shí)現(xiàn)預(yù)覽功能？

2、重做的快捷鍵？撤銷的快捷鍵？打開(kāi)時(shí)刻軸的快捷鍵？目標(biāo)地址？

3、在XXX這個(gè)地方中的#表示啥？

4、在表格中，填充的含義是啥？間距指的是啥？

答案：

1、link，subject，x表示此網(wǎng)頁(yè)符合web2.0的標(biāo)準(zhǔn)，F(xiàn)12

2、ctrl+Y，Ctrl+Z，Alt+F9，target

3、表示空（或者的地址）

4、填充的含義是：容到邊框的值，間距（cellspacing）：指單元格間的距離。

第三章文字超圖片10.22Wednesday,October28,2009

1、單行顯示、強(qiáng)制別換行標(biāo)記？

2、居中顯示標(biāo)記？段降縮進(jìn)標(biāo)記？原版顯示標(biāo)記？

3、段降位置，段降居中，居左，居右？

4、水平分隔線的所有屬性？

5、文字格式標(biāo)記，屬性？

文字的附加屬性：常用的有：加粗、加歪、

加下劃線、加刪除線

只需了解的有：縮小、加大一點(diǎn)、

加強(qiáng)強(qiáng)調(diào)、強(qiáng)調(diào)、

顯示網(wǎng)址、、顯示代碼指令

6、滾動(dòng)字幕、圖片的所有屬性代碼？

答案：

1、

2、居中：段降縮進(jìn)：

原版顯示標(biāo)記：或

可解析代碼地徹底顯示

區(qū)不：

別可解析代碼，絕對(duì)地原版顯示

3、

4、

為單標(biāo)簽，若該屬性中別設(shè)noshade,則默以為有陰影。

5、容

6、①滾動(dòng)字幕：

滾動(dòng)字幕

②滾動(dòng)圖片(與滾動(dòng)字幕類似)

滾動(dòng)圖片

Friday容

1、寫(xiě)出背景的所有屬性：

（顏XXX、圖片：平鋪xy，x、y、居中、居右、居左，txet，link，alink，vlink）

2、在滾動(dòng)字幕中，設(shè)置鼠標(biāo)移上去停止，移開(kāi)后開(kāi)始的命令。

3、常用特別符號(hào)：千分號(hào),,&,",空格，鈔票幣符號(hào)，平方，立方m3。

4、上標(biāo)，下標(biāo)

5、超格式。（包括在新窗口打開(kāi)/在上一級(jí)打開(kāi)/在自身打開(kāi)覆蓋原來(lái)的網(wǎng)頁(yè)/在整個(gè)窗口打開(kāi)）。

6、在相對(duì)路徑中當(dāng)前名目和上級(jí)名目分不用啥表示？

7、外部（設(shè)置一具打開(kāi)學(xué)校的服務(wù)器）（考慮：若要拜訪：開(kāi)辟15班公用/參考頁(yè)面/07.jpg直截了當(dāng)編代碼，

如何編？）

8、錨點(diǎn)的語(yǔ)法代碼？

9、常用的網(wǎng)頁(yè)圖片的格式？分不支持？種XXX彩，分不解釋

10、插入圖片的代碼？

（包括圖像寬高，邊框，水平/垂直空白，文字相關(guān)于圖片基線的位置）

（知識(shí)點(diǎn)：基線：baseline；寬，高只設(shè)一具，默認(rèn)等比例放大，縮?。蝗舨⑶以O(shè)置寬高，圖片就會(huì)變形。）

11、圖片的超級(jí)代碼？

12、熱點(diǎn)區(qū)域(:shape.{rectc/cricle/poly}roods,href)徹底的格式

13、圖片的優(yōu)化：①低分辨率顯示：lowsrc

②文字替代圖片：alt/tilte

14、外部超級(jí)（www型，ftp型，telnet型，news型mailto型）

答案：1、

2、在命令里面增加：

oXXXouseover="stop()"oXXXouseout="start()"

3、千分號(hào)‰；‰左尖括號(hào)：>

地址符&：&引號(hào)"："空格： 

鈔票幣符號(hào)￥：¥平方M2：²m3：³

4、上標(biāo)：下標(biāo)：

5、

6、當(dāng)前名目：./上級(jí)名目：../

7、XXX到學(xué)校服務(wù)器

（考慮題：XXX這個(gè)地方打開(kāi)07.jpg）

8、錨點(diǎn)

XXX錨點(diǎn)后顯示的容

9、gif：圖像交換格式，無(wú)損壓縮圖片格式，支持256種群，

jpg：聯(lián)合照片專家組，有損壓縮圖片格式，支持1670萬(wàn)種XXX

10、

11、

12、

容

13、①低分辨率：lowsrc

②文字替代圖片：

&body=主題”

第四章列表與表格（所有容）

1、有序列表（orderedlist）標(biāo)記？改變序號(hào)標(biāo)記？有多少種類？指定序號(hào)標(biāo)記？

列表項(xiàng)（listitem）標(biāo)記？

詳解：有序列表,改變序號(hào)標(biāo)記：type

有5種（1/a/A/i/Ⅰ）、指定序號(hào)標(biāo)記：strat=””

列表項(xiàng)：

完整的格式為：

2、無(wú)序列表（unorderedlist）標(biāo)記？更改標(biāo)記樣式？其他無(wú)序列表？

詳解：無(wú)序列表，更改標(biāo)記樣式：type，

其他無(wú)序列表：;前兩者已經(jīng)，靠左

完整的格式：……

3、定義列表（definitionlist）標(biāo)記？定義術(shù)語(yǔ)（definitionterm）即標(biāo)題？

定義講明（definitionDescription）即容

詳解：定義列表：，定義術(shù)語(yǔ)：，定義容：

4、表格的3個(gè)標(biāo)記？表格的所有屬性{表格邊框的屬性：（外/邊框粗細(xì)，文字到邊框的距離）？邊框顏

XXX？表格邊框的顯示狀態(tài)（上、下、左、右、上下、左右、顯示整個(gè)、整個(gè)別顯示）表格寬、高（單位為像素px和百分比%）表格顏群？表格的水平位置（左、中、右）分隔線的顯示狀態(tài)（顯示所有、組與組、行與行、列與列、別顯示所有）}

詳解：3個(gè)標(biāo)記是：表格行列

表格的所有屬性代碼：

XXX

XXX

5、表格行的屬性（單行高度、邊框顏XXX、背景顏XXX、單行文字的水平對(duì)齊方式{左、中、右}、單行的垂

直位置{上、中、下}）

詳解：表格行的屬性代碼：

XXXX

6、單元格屬性（單元格的寬、邊框顏群、背景顏XXX、單元格文字的水平位置(左、中、右)/垂直位置(上、

中、下)）

詳解：?jiǎn)卧窦?列)屬性代碼：

文字7、標(biāo)題標(biāo)記及屬性，表標(biāo)題標(biāo)記

詳解：標(biāo)題標(biāo)記：

表標(biāo)題標(biāo)記：

8、單元格的合并（合并行/列）

詳解：合并行/列:rowspan/colspan均用在標(biāo)簽中。

英語(yǔ)角：

Menu：菜單，column：列，row：行cell：?jiǎn)卧?，layout：布局

※第五章表單與框架（重點(diǎn)）

1、表單標(biāo)記？要緊有幾個(gè)屬性？完整的格式？

2、輸入元素有？包含的所有？共9個(gè)屬性全部寫(xiě)出來(lái)。

3、多行文本標(biāo)記？解釋wrap？

4、下拉選框的所有屬性？

答案：

1、;要緊有3個(gè)屬性：action，method，name和別常見(jiàn)的onsubmit

完整的格式為：………..

2、輸入元素：

input標(biāo)記包含10個(gè)屬性：

①本框：

②密碼：

③單選按鈕，單選框：

④提交:

⑤重置:

⑥多選按鈕，復(fù)選框：

⑦按鈕:

⑧圖片按鈕:

⑨躲藏域:

10、打開(kāi)、上傳文件

實(shí)例：制作如下按鈕：要求如圖：解答：

完整的代碼如下：

請(qǐng)先在第一具框中輸入字符,XXX輸入，然后點(diǎn)輸出，輸出框就會(huì)顯示你剛剛輸?shù)淖址?/p>

3、多行文本標(biāo)記：textarea其屬性為：name,cols,rows,wrap，value

其完整的格式為：

默認(rèn)時(shí)顯示的字

詳解：wrap:容超出文本右邊界時(shí)的顯示方式。wrap的值有3種：off（永遠(yuǎn)別換行）/virtual(自動(dòng)換行，在提交數(shù)據(jù)的時(shí)候自動(dòng)換行的地點(diǎn)沒(méi)有換行符)/physical（自動(dòng)換行在提交數(shù)據(jù)時(shí)，換行符一起提交）4、下拉選框

……

詳解：x為要顯示的項(xiàng)目數(shù)，y為允許挑選多行、允許列表項(xiàng)目被多選的項(xiàng)數(shù)：取值圍為：（0，+∞）

框架frame框架集，框式支架：frameset

Frameset標(biāo)記的屬性：

frameborder邊框的顯示：0：無(wú)，1：有

border邊框粗細(xì)：默以為5px，單位：px（像素）

bordercolor邊框顏群：

cols：

rows：均用“像素”和“百分比”分割，用“*”表示剩下的。

framespacing：框架與框架間的間距

noresize：設(shè)定框架別能調(diào)節(jié)，只要設(shè)定了前面，后面將繼承。【考過(guò)】

詳解：

窗口框架:別能與body混用。

水平分割：rows，eg：其中單位為px或百分比（即占總窗口的百分比）

垂直分割：cols，eg:

框架邊框：border=”x”，x只能以px為單位，邊框躲藏：frameborder=”0”，可設(shè)置為：”0”,”1””0”為無(wú)，”1”

為有，別設(shè)則默以為有。它也能夠用在中，對(duì)單個(gè)框架有效，

Frame標(biāo)記的屬性：

Src：frame其作用是顯示網(wǎng)頁(yè)，用src設(shè)置。

Scrolling=”yes/no”有/無(wú)滾動(dòng)條。若別設(shè)，則默以為“auto自動(dòng)”。

Name：窗口名稱。

Iframe標(biāo)記屬性：

Name：名字

Width：寬度

Height：高度

BXXXolor：浮動(dòng)窗口的背景顏群

Align：（left/right/middle）水平對(duì)齊方式

Valign：(top/middle/bottom)垂直對(duì)齊方式

Scrolling：（滾動(dòng)條）在這個(gè)地方也能夠用

英語(yǔ)角

動(dòng)作：action表單，形狀：form辦法：method

水平的：horizontal垂直的：vertical框架（集）：frame（set）※※第六章※※css樣式表（重點(diǎn)）文中“_”表示空格

一、Css概念:

①全稱：Cascadingstylesheet（層疊樣式表）所謂樣式，算是網(wǎng)頁(yè)里顯示圖片文字的方式（文

字的顏XXX、背景等）；層疊指當(dāng)cs定義的樣式發(fā)生沖突時(shí)，將據(jù)層的先后來(lái)處理網(wǎng)頁(yè)的容。

②獨(dú)立網(wǎng)頁(yè)的樣式，方便批量治理。

③Cs樣式用于操縱頁(yè)面的顯示、頁(yè)面的布局。

二、調(diào)用css的4種方式：

①嵌入式：寫(xiě)在應(yīng)用樣式(即HTML標(biāo)記中)的標(biāo)簽中,

格式為：文字

或

這是span標(biāo)記

②外聯(lián)（外部樣式表）：調(diào)一具外部的cs文檔，其外部寫(xiě)在里面。

格式為：

③聯(lián)式：把寫(xiě)在標(biāo)記的，

eg：

*{

margin:0;

Padding:0;

}

P{

bXXXolor:red;font-size:20px;

}

④導(dǎo)入式：importurl(XX.css);

區(qū)不：外聯(lián)（掃瞄時(shí)它是與網(wǎng)頁(yè)同步運(yùn)行，常用）

導(dǎo)入式（與頁(yè)面一起加載，當(dāng)網(wǎng)速較慢時(shí)，也許顯示別徹底HTML代碼，導(dǎo)致白屏。）

外聯(lián)的優(yōu)點(diǎn)：

①獨(dú)立于html文件，便于修改。

②多個(gè)html文件能夠引用一具樣式表，保持了頁(yè)面外觀的一致性。

③樣式表文件只需下載一次，就能夠讓其他到本樣式表的頁(yè)面使用。

④掃瞄器會(huì)先顯示html的容，然后再依照樣式表文件舉行渲染，讓拜訪者更快的

看到網(wǎng)頁(yè)的容。

三、挑選符：（符合就近原則）

①HTML挑選符（標(biāo)簽挑選器）：eg：p，a，img，tr，td，table，body等，其格式為：p{}，a{}，img{}，

tr{}，td{}，table{}，body{}。

②類挑選器：以“.”開(kāi)頭的，用class=””調(diào)用，class能夠在標(biāo)簽里可寫(xiě)屬性的任何地點(diǎn)使用。

Eg：.a{}.b{}.tr{}.td{}等

③ID挑選器：以#開(kāi)頭的，用id=””調(diào)用。

④包含挑選器：（其優(yōu)先級(jí)高于HTML挑選符）eg：XX

,XX在td里面，則為tdp{}

⑤分組挑選器：eg：p，hx，tr，td，.xx則為：p,hx,tr,td,.xx{}

四、通配符挑選器：*{}【多個(gè)對(duì)象的通用樣式】

五、單位：相對(duì)：px，em

絕對(duì)：pt(點(diǎn)數(shù)，是最基本的顯示單位)，in(別是國(guó)際標(biāo)準(zhǔn)單位，少用)，(cm，mm)國(guó)際標(biāo)準(zhǔn)單位pc:

印刷（1pc=12pt）

六、顏群:①命名顏群，在此定義下，惟獨(dú)16種顏群能被掃瞄器識(shí)不。eg：p{color:blue;}

②RGB顏群每種單群的取值圍為：0~255eg：P{color:rgb(0,0,0);}

③16進(jìn)制顏群：eg：p{color:#ff0000;}

七、文本屬性：①文字字體：font-family（1到多種字體名稱，用，隔開(kāi)）

②首行縮進(jìn)：text-indent(后跟數(shù)值，單位:px/em)

③水平對(duì)齊方式：text-align（left、right、center、justify分散對(duì)齊）

⑤垂直對(duì)齊方式：vertical-align（基線：baseline、上：top、中：middle、下：bottom、上標(biāo)：super、下標(biāo)：sub）

⑥字符間距[常指字母間距]：letter-spacing（跟數(shù)值；”+”為加寬，”-“為縮緊）

文字間距：word-spacing;

⑦段降行距：line-height（跟數(shù)值，px）

⑧字體效果：font-style（正常：normal，歪體：Italic，斜歪體：oblique）

⑨字體粗細(xì)：font-weight（正常：normal，粗：bold，更粗：bolder，更細(xì)：lighter，

100-900px（100，200，300…….900，數(shù)字越大字體越粗））

⑩字體大?。篺ont-size（數(shù)值，xx-small，small，medium：標(biāo)準(zhǔn)，large，x-large，xx-large）

⑾文字裝飾效果，none(正常顯示)，underline(下劃線)，overline(上劃線)，linethrough(刪除線)，blink(文字閃耀)

⑿英文大小寫(xiě)轉(zhuǎn)換;text-transform【none/capitalize(每個(gè)單詞首寫(xiě)字母轉(zhuǎn)換為大寫(xiě))

/uppercase(全部轉(zhuǎn)換為大寫(xiě))/lowercase(全部轉(zhuǎn)換為小寫(xiě))】

對(duì)于文本屬性的具體代碼：

body{font-family:”宋體”,X,XX,XX,sans-self;}(注意你要挑選的字體為宋體，因此要引到起)

.a{text-indent:XXpx;text-align:left/center/left/justify;color:#XXX;}

.b{text-decoration:none/underline/overline/linethrough/blink（閃耀）;

text-transform:none/capitalize/uppercase/lowercase;}

.c{vertical-align:baseline/top/middle/bottom/supper/sub;}

.d{letter-spacing:+XX/-XX;line-height:XXpx;}

.e{font-style:normal(正常)/italic(歪)/oblique(斜歪);font-weight:normal/bold/bolder/lighter/(100~900

九級(jí));font-size:數(shù)值/xx-small/x-small/small/medium(標(biāo)準(zhǔn))/large/x-large/xx-large}

世界你好

八、列表屬性：有3個(gè)（圖像image、類型style、位置position）[統(tǒng)一或者混合設(shè)置：

list-style:XX_XX_XX]

①列表圖像符號(hào)/標(biāo)記：list-style-image:(url)或none

②列表符號(hào)類型：list-style-type:(decimal：阿拉伯?dāng)?shù)字、小寫(xiě)羅馬字：lower-roman、大寫(xiě)羅馬字：upper-roman,

小寫(xiě)英文：lower-alpha,大寫(xiě)英文：upper-alpha)

③列表符號(hào)位置：list-style-position;(inside/outside)

列表屬性cs代碼具體是：

/*直截了當(dāng)算是組合的寫(xiě)法*/

#a{list-style:none/url(XX.jpg)_outside_upper-roman;color:#XXXX;}

/*代碼中的”;””_”分不表示別同類的屬性隔開(kāi)，和相同類的隔開(kāi)*/

九、模塊邊框的屬性：分為3大類：margin外邊界、border邊框、padding邊界（邊框到容的距離）

Border-collapse:相鄰的邊框線是否合并顯示。（separate：獨(dú)立顯示、collapse：合并顯示）

Border-top-width:

Border-right-width:

Boder-widthBorder-bottom-width:其中border-width后面可跟

（邊框的寬）Border-left-width:數(shù)值/thin(細(xì))/medium(中等)/thick(粗)

①Borderborder-top-color:（邊框?qū)挾龋ㄟ吙蝾伻海゜order-right-color:

border-colorborder-bottom-color:

border-left-color:

（邊框線型）border-top-style:其中邊框線型有：none/實(shí)線:solid/

border-styleborder-bottom-style:小點(diǎn)虛線:dotted/大點(diǎn)虛線:dashed/雙直線:doubleborder-left-style:3D凹線:groove/3D凸線:ridge/

border-right-style:3D陷入線:inset/3D突出線:outsete.g1.：#1{border-width:50px;border-color:red;boeder-style:none;}

e.g2.：按border-width,border-color,border-style的順序，設(shè)置屬性，中間用_隔開(kāi)：

#2{border:5px_red_solid;}若要加其他屬性則用“；”隔開(kāi)。

◎margin后面跟數(shù)值（px），表示模塊與其他組件間的空白距離

margin-top:上統(tǒng)一設(shè)：margin:XXpx;

②marginmargin-right:右margin:apx_bpx_cpx_dpx;則順序?yàn)椋荷稀⒂?、下、?/p>

（外邊界）margin-bottom:下margin:mpx_auto;則為上下均為mpx，左右自動(dòng)。

margin-left:左

padding-top:設(shè)置與margin類似：

后面跟pxpadding-bottom:①統(tǒng)一設(shè)

③Paddingpadding-left:②上右下左

padding-right:③上下，左右

盒子模型：

content:容

padding:容和邊框之間的距離(上、右、下、左)

border:邊框（border-width:邊框粗細(xì)、border-color:邊框顏群、border-style:邊框樣式）

margin:盒子與盒子之間的距離(兩個(gè)相鄰的盒子都設(shè)置了該屬性的時(shí)候，取較大的)

十、背景屬性：

①背景顏XXX：background-color其格式為：{background-color:#00000或顏群名稱；}

②背景圖片：background-image其格式為：{background-image:url(路徑)；}

③背景圖片并排設(shè)置：repeat(repeat–x/repeat-y/no-repeat/repeat)

④背景圖片位置定位：position:X,Y對(duì)應(yīng)英文或百分比。

格式為：{background–position：XX_XX；}

⑤background-attachment:背景圖片是否固定（屬性值為fixed的時(shí)候，背景圖片固定別動(dòng)）

其坐標(biāo)為：左上0%0%top-left0%+x中上50%0%top-center右上100%0%top-right左中0%50%left-center正中50%50%center-center+y右中100%50%right-center左下0%100%bottom-left中下50%100%bottom-center

右下100%100%bottom-right

十一、偽類和span行標(biāo)記

①偽類有a:link;/a:visited;/a:hover;/a:active;