HTML靜態(tài)網頁知識點

千里之行，始于足下。第2頁/共2頁精品文檔推薦HTML靜態(tài)網頁知識點文中的XXX“黃群”標記為易錯的，重要的

第一章網頁編程基礎

1、互聯(lián)網？

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

3、url的5種形式？

4、服務器、服務端？客戶端？

5、超文本？超？

6、網頁的3種基本類型？

7、一具完整的hml文件結構有多少個標記？分不是？

8、文字的屬性代碼？

9、注釋標記？標題標記？換行？空格？段降？加粗？加歪？

10、meta標記常用的刷新/語言編碼代碼？

增加的：關鍵字、主題容、強行的調用網上最新版本、文檔作者

11、link標記？（）

12、base標記？（文檔原始地址）

13、常見的html編輯器？

答案：

1、Internet

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

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

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

html:超文本標記語言

bbs:電子公告板服務

:（worldwideweb）網維網或全球圍網

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

php:一種用來制作動態(tài)網頁的服務器端的足本語言

css:層疊樣式表（樣式表）一種設計網頁樣式的標準

3、①file://文件地址（最終以單個文件結尾）

②./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)網頁html；css

②動態(tài)網頁*.jsp,*.php*.asp(以do?開始的是Java平臺編寫的)

③交互式網頁JavaScript

7、4個；分不是

8、文字

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

或空格： 段降

;加粗;加歪

10、刷新：

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

關鍵字：

主題容：

強行調用網上的最新版本：

或

文檔作者：

11、

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

13、常見的html編輯器：Dreamweaver、Notepad++、firstpage2006、webuilder2006

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

第二章認識Dreamweaver

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

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

2、重做的快捷鍵？撤銷的快捷鍵？打開時刻軸的快捷鍵？目標地址？

3、在XXX這個地方中的#表示啥？

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

答案：

1、link，subject，x表示此網頁符合web2.0的標準，F(xiàn)12

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

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

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

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

1、單行顯示、強制別換行標記？

2、居中顯示標記？段降縮進標記？原版顯示標記？

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

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

5、文字格式標記，屬性？

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

加下劃線、加刪除線

只需了解的有：縮小、加大一點、

加強強調、強調、

顯示網址、、顯示代碼指令

6、滾動字幕、圖片的所有屬性代碼？

答案：

1、

2、居中：段降縮進：

原版顯示標記：或

可解析代碼地徹底顯示

區(qū)不：

別可解析代碼，絕對地原版顯示

3、

4、

為單標簽，若該屬性中別設noshade,則默以為有陰影。

5、容

6、①滾動字幕：

滾動字幕

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

滾動圖片

Friday容

1、寫出背景的所有屬性：

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

2、在滾動字幕中，設置鼠標移上去停止，移開后開始的命令。

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

4、上標，下標

5、超格式。（包括在新窗口打開/在上一級打開/在自身打開覆蓋原來的網頁/在整個窗口打開）。

6、在相對路徑中當前名目和上級名目分不用啥表示？

7、外部（設置一具打開學校的服務器）（考慮：若要拜訪：開辟15班公用/參考頁面/07.jpg直截了當編代碼，

如何編？）

8、錨點的語法代碼？

9、常用的網頁圖片的格式？分不支持？種XXX彩，分不解釋

10、插入圖片的代碼？

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

（知識點：基線：baseline；寬，高只設一具，默認等比例放大，縮??；若并且設置寬高，圖片就會變形。）

11、圖片的超級代碼？

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

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

②文字替代圖片：alt/tilte

14、外部超級（www型，ftp型，telnet型，news型mailto型）

答案：1、

2、在命令里面增加：

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

3、千分號‰；‰左尖括號：>

地址符&：&引號"："空格： 

鈔票幣符號￥：¥平方M2：²m3：³

4、上標：下標：

5、

6、當前名目：./上級名目：../

7、XXX到學校服務器

（考慮題：XXX這個地方打開07.jpg）

8、錨點

XXX錨點后顯示的容

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

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

10、

11、

12、

容

13、①低分辨率：lowsrc

②文字替代圖片：

&body=主題”

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

1、有序列表（orderedlist）標記？改變序號標記？有多少種類？指定序號標記？

列表項（listitem）標記？

詳解：有序列表,改變序號標記：type

有5種（1/a/A/i/Ⅰ）、指定序號標記：strat=””

列表項：

完整的格式為：

2、無序列表（unorderedlist）標記？更改標記樣式？其他無序列表？

詳解：無序列表，更改標記樣式：type，

其他無序列表：;前兩者已經，靠左

完整的格式：……

3、定義列表（definitionlist）標記？定義術語（definitionterm）即標題？

定義講明（definitionDescription）即容

詳解：定義列表：，定義術語：，定義容：

4、表格的3個標記？表格的所有屬性{表格邊框的屬性：（外/邊框粗細，文字到邊框的距離）？邊框顏

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

詳解：3個標記是：表格行列

表格的所有屬性代碼：

XXX

XXX

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

直位置{上、中、下}）

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

XXXX

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

中、下)）

詳解：單元格即(列)屬性代碼：

文字7、標題標記及屬性，表標題標記

詳解：標題標記：

表標題標記：

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

詳解：合并行/列:rowspan/colspan均用在標簽中。

英語角：

Menu：菜單，column：列，row：行cell：單元格，layout：布局

※第五章表單與框架（重點）

1、表單標記？要緊有幾個屬性？完整的格式？

2、輸入元素有？包含的所有？共9個屬性全部寫出來。

3、多行文本標記？解釋wrap？

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

答案：

1、;要緊有3個屬性：action，method，name和別常見的onsubmit

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

2、輸入元素：

input標記包含10個屬性：

①本框：

②密碼：

③單選按鈕，單選框：

④提交:

⑤重置:

⑥多選按鈕，復選框：

⑦按鈕:

⑧圖片按鈕:

⑨躲藏域:

10、打開、上傳文件

實例：制作如下按鈕：要求如圖：解答：

完整的代碼如下：

請先在第一具框中輸入字符,XXX輸入，然后點輸出，輸出框就會顯示你剛剛輸?shù)淖址?/p>

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

其完整的格式為：

默認時顯示的字

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

……

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

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

Frameset標記的屬性：

frameborder邊框的顯示：0：無，1：有

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

bordercolor邊框顏群：

cols：

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

framespacing：框架與框架間的間距

noresize：設定框架別能調節(jié)，只要設定了前面，后面將繼承?！究歼^】

詳解：

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

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

垂直分割：cols，eg:

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

為有，別設則默以為有。它也能夠用在中，對單個框架有效，

Frame標記的屬性：

Src：frame其作用是顯示網頁，用src設置。

Scrolling=”yes/no”有/無滾動條。若別設，則默以為“auto自動”。

Name：窗口名稱。

Iframe標記屬性：

Name：名字

Width：寬度

Height：高度

BXXXolor：浮動窗口的背景顏群

Align：（left/right/middle）水平對齊方式

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

Scrolling：（滾動條）在這個地方也能夠用

英語角

動作：action表單，形狀：form辦法：method

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

一、Css概念:

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

字的顏XXX、背景等）；層疊指當cs定義的樣式發(fā)生沖突時，將據層的先后來處理網頁的容。

②獨立網頁的樣式，方便批量治理。

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

二、調用css的4種方式：

①嵌入式：寫在應用樣式(即HTML標記中)的標簽中,

格式為：文字

或

這是span標記

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

格式為：

③聯(lián)式：把寫在標記的，

eg：

*{

margin:0;

Padding:0;

}

P{

bXXXolor:red;font-size:20px;

}

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

區(qū)不：外聯(lián)（掃瞄時它是與網頁同步運行，常用）

導入式（與頁面一起加載，當網速較慢時，也許顯示別徹底HTML代碼，導致白屏。）

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

①獨立于html文件，便于修改。

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

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

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

看到網頁的容。

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

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

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

②類挑選器：以“.”開頭的，用class=””調用，class能夠在標簽里可寫屬性的任何地點使用。

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

③ID挑選器：以#開頭的，用id=””調用。

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

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

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

四、通配符挑選器：*{}【多個對象的通用樣式】

五、單位：相對：px，em

絕對：pt(點數(shù)，是最基本的顯示單位)，in(別是國際標準單位，少用)，(cm，mm)國際標準單位pc:

印刷（1pc=12pt）

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

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

③16進制顏群：eg：p{color:#ff0000;}

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

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

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

⑤垂直對齊方式：vertical-align（基線：baseline、上：top、中：middle、下：bottom、上標：super、下標：sub）

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

文字間距：word-spacing;

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

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

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

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

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

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

⑿英文大小寫轉換;text-transform【none/capitalize(每個單詞首寫字母轉換為大寫)

/uppercase(全部轉換為大寫)/lowercase(全部轉換為小寫)】

對于文本屬性的具體代碼：

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

九級);font-size:數(shù)值/xx-small/x-small/small/medium(標準)/large/x-large/xx-large}

世界你好

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

list-style:XX_XX_XX]

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

②列表符號類型：list-style-type:(decimal：阿拉伯數(shù)字、小寫羅馬字：lower-roman、大寫羅馬字：upper-roman,

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

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

列表屬性cs代碼具體是：

/*直截了當算是組合的寫法*/

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

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

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

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

Border-top-width:

Border-right-width:

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

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

①Borderborder-top-color:（邊框寬度）（邊框顏群）border-right-color:

border-colorborder-bottom-color:

border-left-color:

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

border-styleborder-bottom-style:小點虛線:dotted/大點虛線: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的順序，設置屬性，中間用_隔開：

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

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

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

②marginmargin-right:右margin:apx_bpx_cpx_dpx;則順序為：上、右、下、左

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

margin-left:左

padding-top:設置與margin類似：

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

③Paddingpadding-left:②上右下左

padding-right:③上下，左右

盒子模型：

content:容

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

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

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

十、背景屬性：

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

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

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

④背景圖片位置定位：position:X,Y對應英文或百分比。

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

⑤background-attachment:背景圖片是否固定（屬性值為fixed的時候，背景圖片固定別動）

其坐標為：左上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行標記

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