html 詳細(xì)學(xué)習(xí)資料==

1、html 詳細(xì)學(xué)習(xí)資料= 一、頁(yè)面標(biāo)記 1. html結(jié)構(gòu) html./html head./head body./body html head title, base, link, isindex, meta /head body html 文件的正文寫在這里. . /body /html head/head標(biāo)記對(duì)構(gòu)成html文檔的開(kāi)頭部分，頭部?jī)?nèi)容不直接在網(wǎng)頁(yè)上顯示。 title標(biāo)記 title設(shè)置網(wǎng)頁(yè)標(biāo)題，請(qǐng)?jiān)诖溯斎霕?biāo)題名/title 只要在網(wǎng)頁(yè)中設(shè)置網(wǎng)頁(yè)標(biāo)題，就可以在掃瞄器上顯示出來(lái)。 base標(biāo)記 base href=”url”設(shè)置基底網(wǎng)址：當(dāng)網(wǎng)頁(yè)代碼運(yùn)行后，把鼠標(biāo)放到設(shè)置好的鏈接到

2、設(shè)置好的基底網(wǎng)址的鏈接上時(shí)，在狀態(tài)欄就會(huì)顯示出 基底網(wǎng)址。 link標(biāo)記 link rev=”relationship” rel=”relationship” href=”url” 用 link 標(biāo)記連接外部樣式表文件，這種方法適合在同一網(wǎng)站的不同網(wǎng)頁(yè)重復(fù)使用樣式，這樣就可以通過(guò)只修改一個(gè)樣式表文件而轉(zhuǎn)變整個(gè)網(wǎng)站的多個(gè)網(wǎng)頁(yè)的外觀。 link 標(biāo)記有三個(gè)用來(lái)表示如何連接文件的屬性， rel屬性和type屬性表明要連接的外部文件的種類，假如連接的是css樣式表文件則rel=stylesheet type=text/css href屬性指定想要連接的外部文件的地址，此處不做詳解，我們會(huì)在以后的課程中

3、接觸樣式表的基本用法。 2. 字符集信息 meta http-equiv=content-type content=text/html;charset=# #= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5 可在 html 文件中設(shè)置 mime 字符集信息。 meta標(biāo)記 定義文件的信息：信息、網(wǎng)頁(yè)過(guò)

4、期時(shí)間、關(guān)鍵字等 meta http-equiv=”content-type” content=”text/html; charset=gb2312” 比如：meta name=”keywords” content=”計(jì)算機(jī)、英語(yǔ)”當(dāng)利用搜尋引擎搜尋計(jì)算機(jī)或英語(yǔ)的圖書時(shí)，輸入任何關(guān)鍵字都可以搜尋到該網(wǎng)頁(yè)。 您在掃瞄主頁(yè)時(shí)，最好自己在掃瞄器的選項(xiàng)菜單內(nèi)選擇相應(yīng)的語(yǔ)言(language encoding)。 但是假如 html 文件里寫明白設(shè)置，掃瞄器就會(huì)自動(dòng)設(shè)置語(yǔ)言選項(xiàng)。 尤其是主頁(yè)里用到了字符實(shí)體(entities)，則該主頁(yè)就應(yīng)當(dāng)寫明字符集信息。 否則，您在掃瞄該主頁(yè)時(shí)，若未正確設(shè)置語(yǔ)言選項(xiàng)

5、，顯示將可能混亂。 3. 頁(yè)面顏色 body bgcolor=# text=# link=# alink=# vlink=# bgcolor - 背景顏色 text - 非可鏈接文字的顏色 link - 可鏈接文字的顏色 alink - 正被點(diǎn)擊的可鏈接文字的顏色 vlink - 已經(jīng)點(diǎn)擊(訪問(wèn))過(guò)的可鏈接文字的顏色 #=rrggbb 顏色是用 16 進(jìn)制的 紅綠藍(lán)(red-green-blue, rgb) 值來(lái)表示。 16 進(jìn)制的數(shù)碼有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. 背景圖象 body background=image-url non scrolling

6、 background body bgproperties=fixed 4. 頁(yè)面空白(ie only) 頁(yè)面左邊的空白： body leftmargin=# 頁(yè)面上方的空白(天頭)： body topmargin=# 說(shuō)明： #=margin amount 網(wǎng)頁(yè)鏈接 網(wǎng)頁(yè)鏈接的概述：鏈接在網(wǎng)頁(yè)制作中是一個(gè)必不行少的部分，在掃瞄網(wǎng)頁(yè)時(shí)，單擊一張圖片或者一段文字就可以彈出一個(gè)新的網(wǎng)頁(yè)，這些功能都是通過(guò)超鏈接來(lái)實(shí)現(xiàn)的。 鏈接的分類： 外部鏈接、內(nèi)部鏈接、郵件鏈接。 超鏈接的路徑 肯定路徑：肯定路徑是指完整的描述文件位置的路徑 相對(duì)路徑：所謂相對(duì)路徑，顧名思義就是自己相對(duì)與目標(biāo)位置 ,它包含了從當(dāng)前

7、文件指向目的文件的路徑。采納相對(duì)路徑是建立兩個(gè)文件之間的相互關(guān)系，可以不受站點(diǎn)和所處服務(wù)器的影響。 （此處不做祥解） 外部鏈接 內(nèi)部鏈接 有時(shí)候，當(dāng)某頁(yè)的內(nèi)容許多時(shí)，我們可以利用網(wǎng)頁(yè)的內(nèi)部鏈接，以便使用者快速的找到資料。 內(nèi)部鏈接就是網(wǎng)頁(yè)中的書簽 ：a name=”書簽名稱”書簽內(nèi)容/a a name=”標(biāo)簽a”美容方法：保證睡眠/a a href=”#標(biāo)簽a”想知道美容方法嗎？/a 演示例子： 郵件鏈接：郵件鏈接可使訪問(wèn)者在掃瞄頁(yè)面時(shí)，只需單擊電子郵件鏈接就能打開(kāi)默認(rèn)的郵件編輯軟件，向指定的地址發(fā)送郵件 。a href=”mail to:wangfang224120999”王方的郵箱/a 5

8、. 鏈接 基本語(yǔ)法 a href=url . /a 代碼： 這是一個(gè) a href=index.html鏈接的例子/a, 點(diǎn)一下帶下劃線的文字! 跳轉(zhuǎn)到頁(yè)面的另外一個(gè)地方: a href=#name . /a a name=name . /a 代碼： a href=#jump-test跳轉(zhuǎn)到下一個(gè)鏈接點(diǎn)/ap a name=jumptest1下一個(gè)鏈接點(diǎn)/a 下一個(gè)鏈接點(diǎn) 跳轉(zhuǎn)到另一個(gè)頁(yè)面的某個(gè)地方 a href=url#name . /a a name=name . /a 代碼：跳轉(zhuǎn)到另一個(gè)頁(yè)面的a href=index.html#jumptest首頁(yè)某個(gè)地方/a。 目標(biāo)窗口 開(kāi)一個(gè)新的(掃

9、瞄器)窗口(target window) 語(yǔ)法：a href=url target=window_name . /a 代碼： a href=samp/window.html target=window_name 打開(kāi)首頁(yè)! /a 標(biāo)尺線 語(yǔ)法：hr 代碼：hr 效果： - 語(yǔ)法：hr size=# 代碼：hr size=10 效果： - 語(yǔ)法：hr width=# 代碼：hr width=50 hr width=50% 效果： - - 語(yǔ)法：hr align=# #=left, right 代碼：hr width=50% align=left hr width=50% align=right

10、效果： - - 語(yǔ)法：hr noshade 代碼：hr noshade 效果： - 語(yǔ)法：hr color=# 說(shuō)明：#=rrggbb 16 進(jìn)制 rgb 數(shù)碼，或者是下列預(yù)定義顏色： 名稱：black, olive, teal, red, blue, maroon, navy, gray, lime, fuchsia, green, purple, silver, yellow, aqua 代碼：hr color=red 效果： - 字體標(biāo)記 標(biāo)題字體 h# . /h# #=1, 2, 3, 4, 5, 6 h1今日天氣真好！/h1 今日天氣真好！ h2今日天氣真好！/h2 今日天氣真好！

11、h3今日天氣真好！/h3 今日天氣真好！ h4今日天氣真好！/h4 今日天氣真好！ h5今日天氣真好！/h5 今日天氣真好！ h6今日天氣真好！/h6 今日天氣真好！ hn-/hn 這些標(biāo)記顯示黑體字。 hn-/hn 這些標(biāo)記自動(dòng)插入一個(gè)空行，不必用 p 標(biāo)記再加空行。 因此在一行中無(wú)法使用不同大小的字體。 字體大小 font size=# . /font #=1, 2, 3, 4, 5, 6, 7 or +#, -# basefont size=# #=1, 2, 3, 4, 5, 6, 7 font size=7今日天氣真好！/font 今日天氣真好！ font size=6今日天氣真好！

12、/font 今日天氣真好！ font size=5今日天氣真好！/font 今日天氣真好！ font size=4今日天氣真好！/font 今日天氣真好！ font size=3今日天氣真好！/font 今日天氣真好！ font size=2今日天氣真好！/font 今日天氣真好！ font size=1今日天氣真好！/font 今日天氣真好！ 物理字體 b今日天氣真好！/b 今日天氣真好！ i今日天氣真好！/i 今日天氣真好！ u今日天氣真好！/u tt今日天氣真好！/tt 今日天氣真好！ sup今日天氣真好！/sup 今日天氣真好！ sub今日天氣真好！/sub 今日天氣真好！ s今日天氣

13、真好！/s strike今日天氣真好！/strike 字體顏色 指定顏色 font color=# . /font #=rrggbb 16 進(jìn)制數(shù)碼，或者是下列預(yù)定義顏色： black, olive, teal, red, blue, maroon, navy, gray, lime, fuchsia, white, green, purple, silver, yellow, aqua font color=ffffffwhite/font font color=whitewhite/font 客戶端字體 font face=#, #, ., # . /font #=客戶端可獲得的字體 fo

14、nt face=arial, helvetica hellow world!/font hellow world! 特別字符 #; #=字符實(shí)體名稱 或者 ascii 值 amp; lt; gt; quot; 字體布局標(biāo)記行掌握 段(paragraph) (可以看作是空行) p 代碼： 你好嗎？p很好。 效果： 你好嗎？ 很好。 換行 br 代碼： 你好嗎？br很好。 效果： 你好嗎？ 很好。 不換行nobr 代碼： nobr 請(qǐng)轉(zhuǎn)變您掃瞄器窗口的寬度， 使之小于這一行的寬度， /nobr 文字對(duì)齊 hn align=#./hn p align=#./p #=left, center, rig

15、ht 代碼： h3 align=centerhelloh3 h3 align=righthelloh3 center./center 代碼： 看看這個(gè)標(biāo)記的作用！ centerhello/center 文字分區(qū)顯示 div align=left . /div 代碼： div align=left can you feel happiness without unpleasant? br please show me your smile. /div 效果： can you feel happiness without unpleasant? please show me your smile.

16、 div align=center . /div 效果： can you feel happiness without unpleasant? please show me your smile. div align=right . /div 效果： can you feel happiness without unpleasant? please show me your smile. 列表 無(wú)序列表 ulli./ul 代碼： ul litoday litommorow /ul 效果： today tommorow 有序列表 olli./ol 代碼： ol litoday litommoro

17、w /ol 效果： 1. today 2. tommorow 定義列表(definition lists) dldt.dd./dl 代碼： dl dttoday ddtoday is yesterday. dttomorrow ddtomorrow is today. /dl 效果： today today will be yesterday. tomorrow tomorrow will be today. 定制列表元素 定制表中的標(biāo)記 li type=# #=disk, circle, square 代碼： ul li type=discone li type=circletwo li t

18、ype=squarethree /ul 效果： one o two three 定制有序列表表中的序號(hào) li type=# #=a, a, i, i, 1 代碼： olli type=aone-one lione-two/ol 效果： a. one-one b. one-two 代碼： olli type=aone-one lione-two/ol 效果： a. one-one b. one-two 代碼： olli type=ione-one lione-two/ol 效果： i. one-one ii. one-two 代碼： olli type=ione-one lione-two/ol

19、 效果： i. ii. one-one one-two 代碼： olli type=1one-one lione-two/ol 效果： 1. one-one 2. one-two 定制有序列表表中的序號(hào)的起始值 ol start=# #=number ol start=5 li type=aone-one lione-two ol start=10 litwo-one li type=itwo-two /ol/ol e. one-one f. one-two 10. two-one x. two-two 預(yù)定義文本 pre./pre 代碼： pre please use your card.

20、visa master bhere is an order form./b ullifax liair mail/ul /pre 效果： please use your card visa master here is an order form. fax air mail listing./listing 代碼： listing please use your card. visa master bhere is an order form./b ullifax liair mail/ul /listing 效果： please use your card. visa master here

21、 is order form. fax air mail xmp./xmp 代碼： xmp please use your card. visa master bhere is an order form./b ullifax liair mail/ul /xmp 效果： please use your card. visa master bhere is order form./b ullifax liair mail/ul 空白 spacer type=horizontal size=# #=水平空白寬度 spacer type=vertical size=# #=豎直空白高度 yeste

22、rday spacer type=horizontal size=50 today spacer type=vertical size=50 tomorrow yesterday today tomorrow spacer type=block width=# height=# align=# #=空白的尺寸 #=top, middle, bottom, left, right spacer type=block width=150 height=50 align=left yesterdaybr todaybr tomorrow yesterday today tomorrow 多列文本 m

23、ulticol cols=# . /multicol #=列的數(shù)目 multicol cols=2 text text text. /multicol multicol gutter=# . /multicol #=列間的空白 multicol cols=2 gutter=100 text text text. /multicol multicol width=# . /multicol #=列的寬度 multicol cols=2 width=400 text text text. /multicol 其他 塊引用(blockquote) blockquote./blockquote her

24、 song: blockquote when i was young, i listened to the radio waiting for my favorite songs. /blockquote 圖像標(biāo)記 鏈接圖像 img src=# #=圖象的 url img alt=# #=在掃瞄器尚未完全讀入圖象時(shí)，在圖象位置顯示的文字。 img src=images/01.jpg alt=雪花 :-) width=64 height=64 圖像文字對(duì)齊 img align=# #=top, middle, bottom img src=url align=top 雪花! img src=ur

25、l align=middle 雪花! img src=url align=bottom 雪花! 只有一行文字才可以放在圖象的兩邊。 圖像頁(yè)面布局 img align=left img src=url align=leftmy face!br it is alwaysbr smiling.br hahaha.br my face! it is always smiling. hahaha. img align=right my face! it is always smiling. hahaha. br clear=all img src=url align=leftmy face!br it is always br clear=all smiling.br hahaha.br my face! it is always smiling. hahaha. img vspace=# hspace=# #=value img src=url align=left vspace=10 hspace=20my f