【正文】 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 1 第 3章 HTML語言 陳 巖 信息與計算機工程學院 東北林業(yè)大學 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 2 超文本置標語言 （ 英文： HyperText Markup Language， 簡稱為 HTML） 是為 「 網(wǎng)頁創(chuàng)建和其它可在網(wǎng)頁瀏覽器中看到的信息 」 設(shè)計的一種置標語言 。 HTML被用來結(jié)構(gòu)化信息 ——例如標題 、 段落和列表等等 ， 也可用來在一定程度上描述文檔的外觀和語義 。 由 蒂姆 伯納斯 李 給出原始定義 ， 由 IETF用簡化的 SGML（ 標準通用置標語言 ） 語法進行進一步發(fā)展的 HTML， 后來成為國際標準 ， 由 萬維網(wǎng)聯(lián)盟（ W3C） 維護 。 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 3 HTML概述 HTML的發(fā)展歷程 1． HTML的發(fā)展歷史 ?1982 年 ， Tim BernersLee 為使世界各地的物理學家能夠方便的進行合作研究 ， 建立了使用于其系統(tǒng)的 HTML。 ?Tim BernersLee 設(shè)計的 HTML 以純文字格式為基礎(chǔ) ，可以使用任何文字編輯器處理 ， 最初僅有少量標記（ TAG） 而易于掌握運用 。 ? 隨著 HTML 使用率的增加 ， 人們不 滿 足只能看到文字 。 ? 1993 年 ， 還是大學生的 Marc Andreessen 在他的 Mosaic 瀏覽器加入 img 標記 ， 從此可以在 Web 頁面上瀏覽圖片 。 但人們認為僅有圖片還是不夠 ， 希望可將任何形式的媒體加到網(wǎng)頁上 。 因此 HTML 不斷地擴充和發(fā)展 。 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 4 2. HTML的版本發(fā)展 – 超文本置標語言 (第一版 )—在 1993年 6月作為互聯(lián)網(wǎng)工程工作小組 (IETF)工作草案發(fā)布（并非標準） . HTML —1995年 11月作為 RFC 1866發(fā)布 HTML —1996年 1月 14日， W3C推薦標準 HTML —1997年 12月 18日， W3C推薦標準 HTML —1999年 12月 24日， W3C推薦標準 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 5 3. HTML的未來 – 美國麻省理工學院計算機科學實驗室的 WWW標準化組織 W3C，其英特網(wǎng)地址為： 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 6 4. 學習 HTML的意義 – 手工編寫 HTML文件 ， 所建立的網(wǎng)頁具有以下優(yōu)點： （ 1） 瀏覽器解釋效率高； （ 2） 格式漂亮； （ 3） 無任何垃圾代碼產(chǎn)生 ， 加快了網(wǎng)頁的傳輸 速度 。 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 7 一個簡單的 HTML實例 【 例 31】 用 HTML 制作一個簡單的網(wǎng)頁。 1） 用任何文本編輯器 （ Windows 的記事本 、 寫字板 ， Microsoft Word， 專業(yè)的文本編輯器等 ） 輸入下列文本： HTML HEAD TITLE一個簡單的 HTML示例 /TITLE /HEAD BODY P align=―CENTER‖F(xiàn)ONT size=―7‖ color=―0000FF‖楓橋夜泊 /FONT/P P align=―CENTER‖F(xiàn)ONT size=―5‖ color=―0000FF‖張繼 /FONT/P P align=―CENTER‖F(xiàn)ONT size=―6‖ color=―0000FF‖月落烏啼 霜滿天 /FONT/P 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 8 P align=CENTERFONT size=6 color=0000FF江楓漁火對愁眠 /FONT/P P align=CENTERFONT size=6 color=0000FF姑蘇城外寒山寺 /FONT/P P align=CENTERFONT size=6 color=0000FF夜半鐘聲到客船 /FONT/P /BODY /HTML （ 2） 以純文本格式保存為 。 （ 3） 啟動瀏覽器 ， 打開該文件或在地址欄中直接輸入存放該文件的地址如 E： \網(wǎng)頁設(shè)計與制作教程 \EXAMPLES\， 就會看到如圖 31所示的畫面 。 其中 E： \網(wǎng)頁設(shè)計與制作教程 \EXAMPLES\為文件所在的路徑 ， HTML編寫的網(wǎng)頁文件名 。 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 9 圖 31 一個簡單的網(wǎng)頁 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 10 HTML的基本概念 1．標記 在 HTML中用于描述功能的符號稱為 “標記”， 它是用來控制文字、圖像等顯示方式的符號。標記在使用時必須用“ ‖ 括起來，標記有 單標記 和 雙標記 之分。 1）單標記 所謂“單標記”是指只需單獨使用就能完整地表達意思的標記。 這類標記的語法是： 標記名稱 。 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 11 2）雙標記 所謂 “ 雙標記 ” 是指由 “ 始標記 ” 和 “ 尾標記 ”兩部分構(gòu)成 ， 必須成對使用的標記 。 其中始標記告訴 Web瀏覽器從此處開始執(zhí)行該標記所表示的功能 ，而尾標記告訴 Web瀏覽器到這里結(jié)束該功能 。 始標記前加一個斜杠 （ /） 即成為尾標記 。 雙標記的語法是： 標記 內(nèi)容 /標記 其中 “ 內(nèi)容 ” 是指要被這對標記施加作用的部分 。 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 12 2．標記屬性 許多單標記和雙標記的始標記內(nèi)可以包含一些屬性 ， 其語法是： 標記名稱 屬性 1 屬性 2 屬性3 … ， 各屬性之間無先后次序 ， 屬性也可省略（ 即取默認值 ） 。 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 13 ?例如 : – 單標記 HR表示在文檔當前位置畫一條水平線 ， 一般是從窗口中當前行的最左端一直畫到最右端 ， 它可以帶這么 一 些 屬 性 ： HR size=―3‖ align=―LEFT‖ width=―75%‖。 – 其中 ， size屬性定義線的粗細 ， 屬性值取整數(shù) ， 缺省值為1； align屬性表示對齊方式 ， 可取 LEFT（ 左對齊 ， 默認值 ） ， CENTER（ 居中 ） ， RIGHT（ 右對齊 ） ； width屬性定義線的長度 ， 可取相對值 （ 由一對 號括起來的百分數(shù) ， 表示相對于整個窗口的百分比 ） ， 也可取絕對值 （ 用整數(shù)表示的屏幕像素點的個數(shù) ， 如 width=300） ，默認值是 100%。 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 14 3. 注釋語句 – 注釋語句的格式為： ！ 注釋文 ， “ ！ ‖表示注釋開始 ， “ ‖表示注釋結(jié)束 ， 中間的所有內(nèi)容表示注釋文 。 注釋語句可以放在任何地方 ， 注釋內(nèi)容不在瀏覽器中顯示出來 ， 僅供設(shè)計人員閱讀方便 。 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 15 HTML的基本結(jié)構(gòu) HTML網(wǎng)頁文件主要由文件頭和文件體兩部分內(nèi)容構(gòu)成。其中，文件頭是對文件進行一些必要的定義，文件體是 HTML網(wǎng)頁的主要部分，它包括文件所有的實際內(nèi)容。下面是 HTML網(wǎng)頁的基本結(jié)構(gòu)。 HTML HTML文件開始 HEAD 文件頭開始 文件頭 /HEAD 文件頭結(jié)束 BODY 文件體開始 文件體 /BODY 文體結(jié)束 /HTML HTML文件結(jié)束 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 16 1. HTML文件標記 – HTML和 /HTML標記放在網(wǎng)頁文檔的最外層 ， 表示這對標記間的內(nèi)容是 HTML文檔 。 – HTML放在文件開頭 ， /HTML 放在文件結(jié)尾 ， 中間嵌套其他標記 。 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 17 2. HEAD文件頭部標記 – 文件頭用 HEAD和 /HEAD標記 ， 該標記出現(xiàn)在文件的起始部分 ， 標記內(nèi)的內(nèi)容不在瀏覽器中顯示 ， 主要用來說明文件的有關(guān)信息 ， 如文件標題 、 作者 、 編寫時間 、 搜索引擎可用的關(guān)鍵詞等 。 – 在 HEAD標記內(nèi)最常用的標記是網(wǎng)頁主題標記 ——TITLE 標記 ， 它的格式為： TITLE 網(wǎng)頁標題/TITLE。 網(wǎng)頁標題是提示網(wǎng)頁內(nèi)容和功能的文字 ，它將出現(xiàn)在瀏覽器的標題欄中 ， 一個網(wǎng)頁只能有一個標題 ， 并且只能出現(xiàn)在文件的頭部 。 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 18 3. BODY文件主體標記 – 文件主體用 BODY和 /BODY標記 ， 它是 HTML文檔的主體部分 ， 網(wǎng)頁正文中的所有內(nèi)容包括文字 、 表格 、圖像 、 聲音和動畫等都包含在這對標記對之間 。 – 它的格式為： BODY background=―imageURL‖ bgcolor=―color‖ text=―color‖ link=―color‖ alink=―color‖ vlink=―color‖ leftmargin=―value‖ topmargin=―value‖… /BODY。 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 19 HTML的語法規(guī)則 HTML語言應(yīng)遵循以下的語法規(guī)則 。 （ 1） HTML文件以純文本形式存放 ， 擴展名為 “ *.HTM‖或 “ *.HTML‖。 （ 2） HTML標記不區(qū)分大小寫 。 （ 3） 多數(shù) HTML標記可以嵌套 ， 但不可以交叉 。 （ 4） HTML文件一行可以寫多個標記 ， 一個標記也可以分多行書寫 ， 不用任何續(xù)行符號 。 但 HTML標記中的一個單詞不能分兩行書寫 。 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 20 （ 5） HTML源文件中的換行、回車符和空格在顯示 效果中是無效的。 – 顯示內(nèi)容如果要換行必須用 BR標記 ， 換段用 P標記 ， P表示段落開始 ， /P表示段落結(jié)束 。 頁面中的空格是通過代碼控制的 ， 一個半角空格使用一個 表示 ， 多個空格只需使用多次即可 。 – 與空格的表示方法有些相似 ， 一些特殊符號是憑借特殊的符號碼來表現(xiàn) 。 通常由 “ amp?！熬Y ， 加上字符對應(yīng)的名稱 ， 再加上后綴 “ ； ” 而組成 。 表 31所示列出了一些常見的 HTML特殊符號的表示方法 。 《 網(wǎng)頁設(shè)計與制作 》 《 網(wǎng)頁設(shè)計與制作 》 21 表 31 HTML中一些特殊符號的表示方法 特殊符號 符號碼 特殊符號 符號碼 ＞ 169。 169。 a