HTML入門及高級應(yīng)用-1

1、Html網(wǎng)頁編輯語言簡介Html的發(fā)展史超文本標(biāo)記 HYPERLINK /view/9793.htm t _blank 語言（第一版）在1993年6月作為 HYPERLINK /view/6825.htm t _blank 互聯(lián)網(wǎng)工程工作小組（ HYPERLINK /view/155093.htm t _blank IETF）工作草案發(fā)布（并非 HYPERLINK /view/8079.htm t _blank 標(biāo)準(zhǔn)）：HTML 2.01995年11月作為RFC 1866發(fā)布，在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過時HTML 3.21997年1月14日， HYPERLINK /

2、view/7913.htm t _blank W3C推薦標(biāo)準(zhǔn)HTML 4.01997年12月18日，W3C推薦標(biāo)準(zhǔn)1.動態(tài)與靜態(tài)網(wǎng)站的區(qū)別動態(tài)網(wǎng)站由服務(wù)器動態(tài)的生成HTML文檔，與數(shù)據(jù)庫相連時，可實現(xiàn)網(wǎng)頁信息的動態(tài)更新。靜態(tài)網(wǎng)站網(wǎng)頁的代碼在制作網(wǎng)頁時就已經(jīng)完成。2.應(yīng)用程序開發(fā)體系3.HTML概念HTML（Hyper Text Markup Language 超文本標(biāo)識語言）是一種用來制作超文本文檔的簡單標(biāo)記語言。當(dāng)前的HTML版本是HTML4.0 用HTML編寫的超文本文檔稱為HTML文檔。4.網(wǎng)頁文件命名*.htm或*.html無空格無特殊符號（例如&符號），只可以有下劃線_，只可以為英文

3、、數(shù)字區(qū)分大小寫首頁文件名默認(rèn)為：index.htm 或 index.html，（default） 5.HTML 文件結(jié)構(gòu). 元素：是HTML語言的基本部分。6.HTML 文件結(jié)構(gòu)(網(wǎng)頁框架) HTML 文件的正文 7.HTML基本結(jié)構(gòu)的有關(guān)元素和元素屬性HEAD元素1 元素出現(xiàn)在文檔的開頭部分。與之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是，其間的元素有特殊重要的意義。 元素定義HTML文檔的標(biāo)題。與之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄。HTML基本結(jié)構(gòu)的有關(guān)元素和元素屬性HEAD元素2元素 元素下面可以插入很多很有用的元素屬性。下面介紹幾種： 用來標(biāo)記搜索引擎在搜索你的頁面時所取出的關(guān)鍵詞。

4、是網(wǎng)頁的描述信息； 8.HTML基本結(jié)構(gòu)的有關(guān)元素和元素屬性HEAD元素3元素 用來標(biāo)記文檔的作者。9.HTML基本結(jié)構(gòu)的有關(guān)元素和元素屬性HEAD元素4元素 用來標(biāo)記你的頁面的解碼方式。這就試寫一個HTML文件吧！打開一款你喜歡的編輯工具，新建一個文件，然后拷貝以下代碼到這個新文件，然后將這個文件存成first.html。 Title of page This is my first homepage. This text is bold 要瀏覽這個first.html文件，雙擊它。 10.HTML注釋 在HTML文件里，你可以寫代碼注釋，解釋說明你的代碼，這樣有助于你和他人日后能夠更好地理

5、解你的代碼。注釋可以寫在之間。瀏覽器是忽略注釋的，你不會在HTML正文中看到你的注釋。 11.HTML基本結(jié)構(gòu)的有關(guān)元素和元素屬性 HEAD元素5元素 用來自動刷新網(wǎng)頁12.元素及元素屬性元素表明是HTML文檔的主體部分。在與之間，通常都會有很多其它元素；這些元素和元素屬性構(gòu)成HTML文檔的主體部分。元素中有下列元素屬性： (1)bgcolorbgcolor屬性標(biāo)志HTML文檔的背景顏色。如：bgcolor=#CCFFCC。(2)backgroundbackground屬性標(biāo)志HTML文檔的背景圖片。如：background=images/bg.gif?？梢允褂玫膱D片格式為GIF，JPG(3)

6、bgproperties=fixed bgproperties=fixed使背景圖片成水印效果，即圖片不隨著滾動條的滾動而滾動。(4)texttext屬性標(biāo)志HTML文檔的正文文字顏色。如：text=#FF6666。Text元素定義的顏色將應(yīng)用于整篇文檔。13.基本組成部分HTML對顏色的控制HTML對顏色的控制也有自己的語法。HTML使用16進制的RGB顏色值對顏色進行控制。16 進制的數(shù)碼有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.14.常見顏色的代碼15.文字標(biāo)簽屬性1字體標(biāo)記 1.字體顏色 指定顏色 . #RRGGBB 16 進制數(shù)碼2.字體大小 . #=1,

7、 2, 3, 4, 5, 6, 7 or +#, -#3.標(biāo)題字體 . #=1, 2, 3, 4, 5, 6 16.文字標(biāo)簽屬性2字體標(biāo)記 4. 下劃線 刪除線 刪除線 刪除線5 . 上標(biāo) 下標(biāo) 17.HTML對圖片的控制-1基本語法:引用圖片必須用元素標(biāo)志。元素下的基本元素屬性是src屬性，src的屬性值為所引用的圖片的URL地址。src屬性是必須的。Src的URL一般是相對地址18.HTML對圖片的控制-2圖片的顯示大小 我們可以指定一幅圖片在瀏覽器窗口里的顯示大小。定義圖片的顯示大小的方法是：width指定圖片的寬度，height指定高度。它們的屬性值可以是像素，也可以是%。 19.HT

8、ML對圖片的控制-3圖片的邊框 我們可以為一幅圖片加一個邊框以突出顯示： border的屬性值為象素數(shù)20.超級鏈接普通超級鏈接 超級鏈接是整個網(wǎng)站應(yīng)用的核心和基礎(chǔ)。如果沒有超級鏈接的概念，那么，我們現(xiàn)在所有的網(wǎng)站的應(yīng)用將不復(fù)存在。所以，對超級鏈接的掌握具有特殊重要的意義。超級鏈接是用錨元素定義的 在元素下，有元素屬性href, href的屬性值為一個URL地址如：指向sina的超級鏈接 如：普通超級鏈接超級鏈接E-mail超級鏈接 超級鏈接可以指向E-mail地址如：指向E-mail地址的超級鏈接21.超級鏈接新開鏈接窗口 開一個新的(瀏覽器)窗口 (Target Window) . 去掉超

9、級連接的下劃線：style= text-decoration: none 22.超級鏈接錨點(書簽) 指向本頁面錨點aa的超級鏈接23.有序列表 有序列表的基本的語法如下:行一行二行三行四type 類 型描 述type=1 表示列表項目用數(shù)字標(biāo)號（1,2,3.）type=A 表示列表項目用大寫字母標(biāo)號（A,B,C.）type=a 表示列表項目用小寫字母標(biāo)號（a,b,c.）type=I 表示列表項目用大寫羅馬數(shù)字標(biāo)號（,.）type=i 表示列表項目用小寫羅馬數(shù)字標(biāo)號（i,ii,iii.）24.無序列表 無序列表基本語法如下: 行一 行一 行一 行一type的取值范圍disc實心圓circle空

10、心圓square小方塊25.HTML常用格式 HTML定義了一些文本格式的Tag，比如利用Tag，可以將字體變成粗體或者斜體。從下面的示例，你可以了解各種文本格式Tag如何改變HTML文本的顯示。 常用文本格式Tag26.示例粗體用b表示。斜體用i表示。芙蓉姐姐這個詞當(dāng)中劃線表示刪除。想唱就唱這個詞下劃線插入。X2其中的2是下標(biāo)X2其中的2是上標(biāo)好好學(xué)習(xí)，天天向上。這句話縮進表示引用這是預(yù)設(shè)(preformatted)文本.在pre這個tag里的文本 保留空格和分行。call getOrders用code顯示計算機代碼，code里顯示的字符是等寬字符。 27.滾動文字Marquee在HTML頁

11、面中，可以實現(xiàn)如字幕一般的滾動文字效果，在一個排版整齊的頁面中，添加適當(dāng)?shù)臐L動文字可以使頁面更有動感基本語法：滾動文字顯示的效果：是xx就會從屏幕一邊跑到另外一邊28.滾動方向?qū)傩訢irection 我們可以設(shè)定文字滾動的方向，分別為向左、向右、向上、向下，使?jié)L動的文字具有更多的變化?；菊Z法：滾動文字 語法解釋：Value: 值可為left/right/up/down 29.滾動方式Behavior通過這個屬性能夠設(shè)定不同方式的滾動文字效果，如滾動的循環(huán)往復(fù)、單次滾動、交替滾動等?；菊Z法：滾動文字語法解釋：value: 值可為scroll/slide/alternatescroll表示滾動

12、播出，slibe表示滾動到一方后停止，alternate表示滾動到一方后向相反方向滾動。 30.滾動速度屬性Scrollamount通過這個屬性能夠調(diào)整文字滾動的速度。 數(shù)值越大速度越快基本語法：滾動文字31.滾動延遲屬性Scrolldelay通過這個屬性，可以在每一次滾動時產(chǎn)生一段時間的延遲?；菊Z法：滾動文字Value單位為毫秒！范圍：0-50032.滾動循環(huán)屬性Loop設(shè)置滾動文字循環(huán)滾動的次數(shù)。 其值可以是正整數(shù)或 infinite表示無限次 默認(rèn)為無限循環(huán)基本語法：滾動文字33.滾動范圍屬性width height對于不同方式的滾動，可以設(shè)置文字滾動的區(qū)域?；菊Z法：滾動文字34.滾

13、動背景顏色屬性Bgcolor在滾動文字的后面，可以添加背景顏色?；菊Z法：滾動文字35.如何看HTML的源代碼 在瀏覽器看到的HTML網(wǎng)頁，是瀏覽器解釋HTML源代碼后產(chǎn)生的結(jié)果。要查看這個HTML的源代碼，有兩種方法。一是點擊鼠標(biāo)右鍵，點擊View Source(查看源文件)命令；二是選擇瀏覽器菜單View(查看)中的Source(源文件)命令。利用View Source得到網(wǎng)頁的源代碼，你可以由此借鑒一下別人寫得好的地方。不過在你對HTML知識尚少的情況下，看別人復(fù)雜的HTML源代碼，只會讓你頭暈。建議你還是再等等，先掌握一些基礎(chǔ)再說。練習(xí)1 1.用 Tag在頁面上顯示出如下的內(nèi)容？ 練習(xí)

14、2 2.用Tag在頁面上顯示出如下的內(nèi)容？ 這是1號標(biāo)題這是2號標(biāo)題這是3號標(biāo)題這是4號標(biāo)題這是5號標(biāo)題這是6號標(biāo)題 練習(xí)3 3.用Tag在頁面上顯示出如下的內(nèi)容？ 練習(xí)4 改變html文件的背景色？ 36.HTML相對路徑(Relative Path)和絕對路徑(Absolute Path) HTML初學(xué)者會經(jīng)常遇到這樣一個問題，如何正確引用一個文件。比如，怎樣在一個HTML網(wǎng)頁中引用另外一個HTML網(wǎng)頁作為超鏈接(hyperlink)？怎樣在一個網(wǎng)頁中插入一張圖片？ 如果你在引用文件時(如加入超鏈接，或者插入圖片等)，使用了錯誤的文件路徑，就會導(dǎo)致引用失效(無法瀏覽鏈接文件，或無法顯示插入

15、的圖片等)。為了避免這些錯誤，正確地引用文件，我們需要學(xué)習(xí)一下HTML路徑。HTML有2種路徑的寫法：相對路徑和絕對路徑。37.如何表示上級目錄 ./ 表示源文件所在目錄的上一級目錄，././表示源文件所在目錄的上上級目錄，以此類推。假設(shè)info.html路徑是：c:abcdinfo.html假設(shè)index.html路徑是：c:abcindex.html在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫 index.html 假設(shè)info.html路徑是：c:abcdinfo.html假設(shè)index.html路徑是：c:abindex.html在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫： index.html 假設(shè)info.html路徑是：c:abcdinfo.html假設(shè)index.html路徑是：c:abcfindex.html在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫： index.html 38.如何表示下級目錄引用下級目錄的文件，直接寫下級目錄文件的路徑即可。假設(shè)info.html路徑是：c:abcdinfo.html假設(shè)index.html路徑是：c:abcdeindex.html在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫： index.html 假設(shè)info.html路徑是