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

1、./default.htmldefault :缺省的意思Browser瀏覽器；Client客戶端；Server服務(wù)器文中的XXX “黃色”標(biāo)記為易錯的，重要的第一章網(wǎng)頁編程基礎(chǔ)1、互聯(lián)網(wǎng)？2、分別解釋 tcp/ip; ;ftp;html;bbs;url;php ; css3、url的5種形式？4、服務(wù)器、服務(wù)端？客戶端？5、超文本？超？6、網(wǎng)頁的3種基本類型？7、一個完整的hml文件結(jié)構(gòu)有多少個標(biāo)記？分別是？8、文字的屬性代碼？9、注釋標(biāo)記？標(biāo)題標(biāo)記？換行？空格？段落？加粗？加斜？10、meta標(biāo)記常用的刷新/語言編碼代碼？增加的：關(guān)鍵字、主題容、強行的調(diào)用網(wǎng)上最新版本、文檔作者11、link

2、 標(biāo)記？（）12、base標(biāo)記？（文檔原始地址）13、常見的html編輯器？答案：1、Internet2、tcp/ip:傳輸控制協(xié)議:超文本傳輸協(xié)議ftp:文件傳輸協(xié)議html:超文本標(biāo)記語言bbs:電子公告板服務(wù):W world wide web ）網(wǎng)維網(wǎng)或全球圍網(wǎng)url:統(tǒng)一資源定位符php:一種用來制作動態(tài)網(wǎng)頁的服務(wù)器端的腳本語言css層疊樣式表（樣式表）一種設(shè)計網(wǎng)頁樣式的標(biāo)準3、file:文件地址（最后以單個文件結(jié)尾） ,4、server； client【B-B;C-C;B-C模式 B代表企業(yè)；C代表個人；B/S; C/S5、HT(hyper txet) , HL( hyper lin

3、k)6、靜態(tài)網(wǎng)頁 html ; css 動態(tài)網(wǎng)頁 *.jsp, *.php *.asp(以do?開始的是Java平臺編寫的) 交互式網(wǎng)頁 JavaScript7、4 個；分別是 8、文字 9、注釋 ;標(biāo)題：x 為 16,其中 h1 最大;換行：或 空格：段落;力口粗 ;力口斜 10、刷新：meta-equiv= refresh content=時間；網(wǎng)頁地址文字編碼：(簡體中文：gb2312, utf-8是英語編碼，繁體字編碼：BIG5)關(guān)鍵字： 主題容： 強行調(diào)用網(wǎng)上的最新版本：mata-equiv= pragma content= no-cache”或文檔11、12、（注意 XX 與 ad

4、dress 之間是空格。）13、常見的 html 編輯器：Dreamweaver、 Notepad+、 first page 2006、 we builder 2006（以前的 Dreamweaver 是 macromedia 公司的，現(xiàn)在隸屬于 adobe 公司）第二章認識Dreamweaver1、?分支？ xhtml前的x表示什么？在Dreamweaver中什么鍵可實現(xiàn)預(yù)覽功能？2、重做的快捷鍵？撤銷的快捷鍵？打開時間軸的快捷鍵？目標(biāo)地址？3、在a href=#點擊這里/a中的#表示什么？4、在表格中，填充的含義是什么？間距指的是什么？答案：1、link, subject, x表示此網(wǎng)頁符

5、合 web2.0的標(biāo)準，F(xiàn)122、ctrl+Y, Ctrl+Z, Alt+F9, target3、表示空(或者的地址)4、填充的含義是：容到邊框的值，間距(cellspacing):指單元格間的距離。第二章 文字 超 圖片 10.22 Wednesday, October 28, 20091、單行顯示、強制不換行標(biāo)記？2、居中顯示標(biāo)記？段落縮進標(biāo)記？原版顯示標(biāo)記？3、段落位置，段落居中，居左，居右？4、水平分隔線的所有屬性？5、文字格式標(biāo)記，屬性？文字的附加屬性：常用的有：b加粗/b、i加斜/i、u加下劃線/u、s加刪除線/s 只需了解的有：small縮小/small、big加大一點/big、

6、strong 力口強強調(diào) /strong、em 強調(diào) /em、；address顯示網(wǎng)址、/address、code顯示代碼指令 /code6、滾動字幕、圖片的所有屬性代碼？答案：1、nobr/nobr2、居中：center/center 段落縮進：blockquote/blockquote 原版顯示標(biāo)記：pre/pre 或 xmp/xmppre/pre可解析代碼地完全顯示區(qū)別：1xmp/xmp不可解析代碼，絕對地原版顯示3、p align=center/left/right /p4、 hr color= width= size= align=left/right/center “ noshad

7、e=noshade hr為單標(biāo)簽，若該屬性中不設(shè)noshade,則默認為有陰影。5、容 6、滾動字幕：滾動字幕滾動圖片（與滾動字幕類似）滾動圖片地址：Friday 容1、寫出背景的所有屬性：（顏色、圖片 ：平鋪xy, x、v、居中、居右、居左，txet, link, alink, vlink）2、在滾動字幕中，設(shè)置鼠標(biāo)移上去停止，移開后開始的命令。3、常用特殊符號：千分號，,&,空格，錢幣符號，平方，立方 m3。4、上標(biāo)，下標(biāo)5、超格式。（包括在新窗口打開/在上一級打開/在自身打開覆蓋原來的網(wǎng)頁 /在整個窗口打開）。6、在相對路徑中當(dāng)前目錄和上級目錄分別用什么表示？7、外部（設(shè)置一個打開學(xué)校的

8、服務(wù)器）（思考：若要訪問：開發(fā) 15班公用/參考頁面/07.jpg直接編代碼，怎么編？）8、錨點的語法代碼？9、常用的網(wǎng)頁圖片的格式？分別支持？種色彩，分別解釋10、插入圖片的代碼？（包括圖像寬高，邊框，水平/垂直空白，文字相對于圖片基線的位置）（知識點：基線：baseline;寬，高只設(shè)一個，默認等比例放大，縮小；若同時設(shè)置寬高，圖片就會變形。） 11、圖片的超級代碼？12、熱點區(qū)域 （:shape.rectc/cricle/polyroods,href） 完全的格式13、圖片的優(yōu)化：低分辨率顯示：lowsrc 文字替代圖片：alt/tilte 14、外部超級（www 型，ftp 型，tel

9、net 型，news 型 mailto 型）答案：1、2、在命令里面增加：onmouseover=stop（） onmouseout=start（）3、千分號o；左尖括號:地址符 &: & 引號： 空格：錢幣符號 ： 平方 M2： m3: 4、上標(biāo)：下標(biāo)：5、6、當(dāng)前目錄：./ 上級目錄：./7、點擊到學(xué)校服務(wù)器 （思考題：點擊這里打開 07.jpg ）8、錨點 點擊錨點后顯示的容9、gif:圖像交換格式，無損壓縮圖片格式，支持 256種色，jpg:聯(lián)合照片專家組，有損壓縮圖片格式，支持 1670萬種色10、11、12、 , ”一，一容 13、低分辨率：lowsrc 文字替代圖片：14、.Si

10、na.（網(wǎng)址）ftp:/192. HYPERLINK ftp:/wish ftp:/wish mailto:XXX163.?subject=主題&*=抄送地址&bcc=暗送收件人&body=主題”單標(biāo)簽總結(jié):水平分隔線：、插入圖片標(biāo)記：、換行標(biāo)記或不換行標(biāo)記：居中：center、區(qū)域：下劃線：underline簡稱u圖像文件夾：image10.22作業(yè)：1、建立站點，管理站點。2、制作AP-DIV,漂浮的圖片或flash o其他資訊考試在人事局考試計算機職稱，程序員中級，高級對工作有保障 第四章列表與表格 (所有容)1、有序列表(ordered list)標(biāo)記？改變序號標(biāo)記？有多少種類？指定序

11、號標(biāo)記？列表項(list item)標(biāo)記？詳解：有序列表,改變序號標(biāo)記：type有5種(1/a/A/i / I)、指定序號標(biāo)記：strat=列表項：完整的格式為：2、無序列表(unordered list )標(biāo)記？更改標(biāo)記樣式？其他無序列表？詳解：無序列表 ,更改標(biāo)記樣式：type,其他無序列表：;前兩者差不多，靠左完整的格式：- - 3、定義列表(definition list )標(biāo)記？定義術(shù)語(definition term )即標(biāo)題？定義說明(definition Description )即容詳解：定義列表：,定義術(shù)語： ,定義容：4、表格的3個標(biāo)記？表格的所有屬性表格邊框的屬性：（外

12、/邊框粗細，文字到邊框的距離）？邊框顏色？表格邊框的顯示狀態(tài)（上、下、左、右、上下、左右、顯示整個、整個不顯示）表格寬、高（單 位為像素px和百分比）表格顏色？表格的水平位置（左、中、右）分隔線的顯示狀態(tài)（顯示所有、 組與組、行與行、列與列、不顯示所有）詳解：3個標(biāo)記是：表格 行 列表格的所有屬性代碼：XXXXXX5、表格行的屬性（單行高度、邊框顏色、背景顏色、單行文字的水平對齊方式左、中、右卜單行的垂直位置上、中、下） 詳解：表格行的屬性代碼：XXXX6、單元格屬性（單元格的寬、邊框顏色、背景顏色、單元格文字的水平位置（左、中、右）/垂直位置（上、中、下）詳解：單元格即（列）屬性代碼：文字

13、7、標(biāo)題標(biāo)記與屬性，表標(biāo)題標(biāo)記詳解： 標(biāo)題標(biāo)記： 表標(biāo)題標(biāo)記：8、單元格的合并（合并行/列）詳解：合并行/歹U:rowspan/colspan均用在標(biāo)簽中。英語角：Menu :菜單， column :歹U,row ：行 cell：單元格，layout:布局第五章表單與框架（重點）1、表單標(biāo)記？主要有幾個屬性？完整的格式？2、輸入元素有？包含的所有？共9個屬性全部寫出來。3、多行文本標(biāo)記？解釋 wrap ?4、下拉選框的所有屬性？答案：;主要有 3 個屬性：action , method , name 和不常見的 onsubmit 完整的格式為：.：2、輸入元素：input標(biāo)記包含10個屬性：

14、本框：密碼： 單選按鈕，單選框：提交：重置：多選按鈕，復(fù)選框：按鈕：圖片按鈕：隱藏域：10、打開、上傳文件 實例：制作如下按鈕：要求如圖：解答:請先在第一個框中輸入字符點擊輸入，然后點輸出，輸出框就會顯示你剛才輸?shù)淖址斎胪暾拇a如下:請先在第一個框中輸入字符，點擊輸入，然后點輸出，輸出框就會顯示你剛才輸?shù)淖址?3、多行文本標(biāo)記：textarea 其屬性為： name,cols,rows,wrap , value其完整的格式為： 默認時顯示的字詳解：wrap:容超出文本右邊界日的顯示方式。wrap的值有3種：off （永久不換行）/virtual（自動換行，在提交數(shù)據(jù)的時候自動換彳T的地方?jīng)]

15、有換行符physical （自動換行在提交數(shù)據(jù)時，換行符一起提交）4、下拉選框 select name=：框名字size=xmultiple= y詳解：x為要顯示的項目數(shù)，y為允許選擇多行、允許列表項目被多選的項數(shù)：取值圍為：（0, +8）框架frame框架集，框式支架：framesetFrameset標(biāo)記的屬性：f frameborder邊框的顯示：0:無，1:有border邊框粗細：默認為 5px,單位：px （像素）bordercolor邊框顏色：cols:rows： J均用“像素”和“百分比”分割，用“ *”表示剩下的。framespacing ：框架與框架間的間距I noresize

16、：設(shè)定框架不能調(diào)節(jié)，只要設(shè)定了前面，后面將繼承。【考過】詳解：窗口框架： 不能與 body 混用。水平分割：rows, eg:frameset rows= 30%,*“ 其中單位為 px或百分比（即占總窗口的百分比）垂直分害 U: cols, eg:i框架邊框：border=x, x只能以px為單位，邊框隱藏：frameborder= 0,可設(shè)置為：0,1 0為無，1 為有，不設(shè)則默認為有。它也可以用在 中，對單個框架有效，F(xiàn)rame標(biāo)記的屬性：Src： frame其作用是顯示網(wǎng)頁，用 src設(shè)置。，Scrolling=yes/no”有/無滾動條。若不設(shè)，則默認為“ auto自動”。I Nam

17、e:窗口名稱。Iframe標(biāo)記屬性：N Name:名字Width :寬度Height:高度-Bgcolor：浮動窗口的背景顏色Align : （left/right/ middle ）水平對齊方式Valign： （top/middle/bottom）垂直對齊方式、Scrolling：（滾動條）在這里也可以用英語角動作：action 水平的：horizontal表單，形狀：form垂直的：vertical方法：method框架（集）：frame （set）css樣式表 （重點）文中“ _”表示空格Css概念：全稱：Cascading style sheet （層疊樣式表）所謂樣式，就是網(wǎng)頁里顯示

18、圖片文字的方式（文 字的顏色、背景等）；層疊指當(dāng)cs定義的樣式發(fā)生沖突時，將據(jù)層的先后來處理網(wǎng)頁的容。獨立網(wǎng)頁的樣式，方便批量管理。Cs樣式用于控制頁面的顯示、頁面的布局。二、 調(diào)用css的4種方式：嵌入式：寫在應(yīng)用樣式（即HTML標(biāo)記中）的標(biāo)簽中， 格式為： 文字 或這是 span 標(biāo)t己 外聯(lián)（外部樣式表）：調(diào)一個外部的cs文檔，其外部寫在里面。格式為： 聯(lián)式：把寫在標(biāo)記的， eg：* margin:。;Padding:。； Pbgcolor:red;font-size:20px; 導(dǎo)入式： import url（XX.css）;區(qū)別：y卜聯(lián)（瀏覽時它是與網(wǎng)頁同步運行，常用）1導(dǎo)入式（與頁

19、面一起加載，當(dāng)網(wǎng)速較慢時，可能顯示不完全 HTML代碼，導(dǎo)致白屏。） 外聯(lián)的優(yōu)點： 獨立于html文件，便于修改。I 多個html文件可以引用一個樣式表，保持了頁面外觀的一致性。1 樣式表文件只需下載一次，就可以讓其他到本樣式表的頁面使用。l 瀏覽器會先顯示html的容，然后再根據(jù)樣式表文件進行渲染，讓訪問者更快的 看到網(wǎng)頁的容。選擇符：（符合就近原則）HTML選擇符（標(biāo)簽選擇器）：eg: p, a, img, tr, td, table, body 等，其格式為：p, a, img, tr, td, table, body。類選擇器：以“.”開頭的，用class=調(diào)用，class可以在標(biāo)簽里

20、可寫屬性的任何地方使用。Eg： .a .b .tr .td等ID選擇器：以#開頭的，用id=調(diào)用。包含選擇器：（其優(yōu)先級高于 HTML選擇符）eg： XX,XX在td里面，則為td p分組選擇器：eg： p, hx, tr, td, .xx 則為：p,hx,tr,td,.xx通配符選擇器：*【多個對象的通用樣式】單位：相對：px , em絕對：pt（點數(shù)，是反基本的顯示單位 ），in（不是國際標(biāo)準單位，少用），（cm, mm）國際標(biāo)準單位 pc:印刷（1pc=12pt）顏色:命名顏色，在此定義下，只有16種顏色能被瀏覽器識別。eg： pcolor:blue;RGB顏色每種單色的取值圍為：025

21、5 eg： Pcolor:rgb（0,0,0）; 16 進制顏色：eg: pcolor:#ff0000;文本屬性：文字字體：font-family （1到多種字體名稱，用，隔開）首行縮進：text-indent（后跟數(shù)值，單位：px/em）水平對齊方式：text-align （left、right、center、justify 分散對齊）垂直對齊方式： vertical-align （基線： baseline、上：top、中： middle、下：bottom、上標(biāo)： super、下標(biāo)： sub）字符間距常指字母間距：letter-spacing （跟數(shù)值；為加寬，”-“為縮緊） 文字間品巨：w

22、ord-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 :標(biāo)準,large, x-large, xx-large） （11）文字裝飾效果，none（正常顯示），underline（下劃線），overlin

23、e（上劃線），linethrough（刪除線），blink（文字閃爍） 英文大小寫轉(zhuǎn)換;text-transform【none/capitalize（每個單詞首寫字母轉(zhuǎn)換為大寫）/uppercase（全部轉(zhuǎn)換為大寫）/lowercase（全部轉(zhuǎn)換為小寫）】關(guān)于文本屬性的具體代碼：bodyfont-family:宋體”,X,XX,XX,sans-self;注意你要選擇的字體為宋體，所以要引到起）.atext-indent:XXpx;text-align:left/center/left/justify;color:#XXX; .btext-decoration:none/underline/ov

24、erline/linethrough/blink（閃爍）;text-transform:none/capitalize/uppercase/lowercase;.cvertical-align:baseline/top/middle/bottom/supper/sub;.dletter-spacing:+XX/-XX;line-height:XXpx;.efont-style:normal（正常）/italic（斜）/oblique（歪斜）;font-weight:normal/bold/bolder/lighter/（100900 九級 力font-size:數(shù)值 /xx-small/x-s

25、mall/small/medium（ 標(biāo)準）/large/x-large/xx-large 世界你好 八、 列表屬性：有3個（圖像image、類型style、位置position ）統(tǒng)一或者混合設(shè)置： list-style:XX_XX_XX列表圖像符號/標(biāo)記：list-style-image:（url）或none 列表符號類型：list-style-type: （decimal ：阿拉伯?dāng)?shù)字、小寫羅馬字：lower-roman、大寫羅馬字：upper-roman, 小寫英文：lower-alpha,大寫英文： upper-alpha）列表符號位置：list-style-position;（in

26、side/outside）列表屬性cs代碼具體是：/*直接就是組合的寫法*/#alist-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-width Bord

27、er-bottom-width:其中 border-width 后面可跟（邊框的寬） Border-left-width:數(shù)值/thin（細）/medium（中等）/thick（粗） Borderborder-top-color:（邊框?qū)挾龋?（邊框顏色）border-right-color:border-color border-bottom-color:border-left-color:I（邊框線型）b border-top-style:其中邊框線型有：none/實線:solid /border-style border-bottom-style:小點虛線：dotted/ 大點虛線：da

28、shed/雙直線：doubleborder-left-style:3D 凹線:grve/3D 凸線：ridge/border-right-style:3D 陷入線：inset/ 3D 突出線：outsete.g1.: #1border-width:50px;border-color:red;boeder-style:none;e.g2.： 按 border-width, border-color,border-style的順序，設(shè)置屬性，中間用 _隔開:#2border:5px_red_solid;若要加其他屬性則用“；”隔開。 margin后面跟數(shù)值（px）,表示模塊與其他組件間的空白距離m

29、argin（外邊界）后面跟pxD Padding盒子模型：廠 margin-top:上* margin-right:右 margin-bottom:下 margin-left:左p padding-top: padding-bottom:padding-left:i padding-right:l 統(tǒng)一設(shè)： margin:XXpx;margin:apx_bpx_cpx_dpx;貝順序為：上、右、下、左 j margin:mpx_auto;則為上下均為 mpx, 左右 自動。設(shè)置與margin類似:統(tǒng)一設(shè)上右下左1上下，左右content:容 padding:容和邊框之間的距離（上、右、下、左）

30、border:邊框（border-width:邊框粗細、border-color:邊框顏色、border-style:邊框樣式）margin:盒子與盒子之間的距離（兩個相鄰的盒子都設(shè)置了該屬性的時候，取較大的）十、 背景屬性：背景顏色：background-color 其格式為：background-color:#00000 或顏色名稱；背景圖片：background-image 其格式為：background-image:url（路徑）；背景圖片并排設(shè)置：repeat（repeat /repeat-y/ no-repeat/repeat）背景圖片位置定位：position :X,Y對應(yīng)英文或

31、百分比。格式為： background -position : XX_XX; background-attachment:背景圖片是否固定（屬性值為fixed的時候，背景圖片固定不動）其坐標(biāo)為：左上中上 0%A 50%0%L +x右上*100%左中 no/ZH 1 | 0%上 cnoz+yFJ_L十 50%七I T 100%左卜0 0%中1石卜5 50% 100%0%top-left0%0%/u規(guī) 律規(guī)律.top-center top-right50%3“l(fā)eft-center050%0center-center50%503right-center100%10050bottom-left100% 】3“bottom-center100%bottom-right偽類和span行標(biāo)記偽類有 a:link;/a:visited;/a