【導(dǎo)讀】記等知識(shí)與應(yīng)用。1具備表格結(jié)構(gòu)網(wǎng)站規(guī)劃設(shè)計(jì)的基本能力。言常用標(biāo)記制作簡單網(wǎng)頁。1掌握HTML語言組成與特點(diǎn)等基本知識(shí)。接標(biāo)記、表格標(biāo)記、表單標(biāo)記、多媒體及其他常用標(biāo)記等相關(guān)知識(shí)。本網(wǎng)站主要采用表格進(jìn)行布局，這是大多數(shù)網(wǎng)站的布局方。網(wǎng)站的主題欄目有校園新聞、文體活動(dòng)、情感天地、就業(yè)。交流、校園掠影、讀書園地。選擇1024&#215;768規(guī)格,實(shí)際尺寸為：。收集的素材包括：。網(wǎng)站色彩風(fēng)格選擇清新淡雅色，如灰色、藍(lán)色、綠色，適當(dāng)滲入紅色，體現(xiàn)校園的青春激情。在“我的電腦”窗口中雙擊打開用于存儲(chǔ)站點(diǎn)的硬盤驅(qū)動(dòng)器；使用→新建→文件夾命令，在硬盤中建立一個(gè)新文件夾。在新文件夾上單擊右鍵，選擇“重命名”選項(xiàng)，在英文輸入法狀態(tài)下輸入站點(diǎn)名稱。例如輸入“School”，然后在空白處單擊確定，如圖2-2所示。同樣方法建立子文件夾“web”。啟動(dòng)記事本或其它文本編輯工具。表格標(biāo)記主要有：<table><tr><td></td></tr></table>

　　

【正文】 p標(biāo)記中在顯示效果上都是另起一行書寫。它們的不同之處是 p標(biāo)記的行距較大， br標(biāo)記的行距較小。另外 br換行后的文本與前面的文本仍屬同一段落，因此換行后字符和段落格式不會(huì)改變，這也與 p標(biāo)記不同。 ? (3) 為保證某一單詞的完整性，有時(shí)需要禁止在某處換行，此時(shí)可使用 nobr標(biāo)記來實(shí)現(xiàn)。其用法為：nobr文本 /nobr該標(biāo)記符作用的文本將在同一行顯示，若一行顯示不下，則超出部分將被裁剪掉。 知識(shí)點(diǎn) 23 版面控制標(biāo)記 ? 4. 文本對(duì)齊方式標(biāo)記 ? 格式： div align=對(duì)齊方式 文本 /div ? 功能：設(shè)置多個(gè)段落的文本居中、居左、或者居右。 ? 屬性： align是水平對(duì)齊方式，取值為 center、 left、或right。 ? 說明： ? (1) 對(duì)齊方式可以在多個(gè)標(biāo)記中實(shí)現(xiàn)，如 p、 Hn等。如果多個(gè)段落有相同的對(duì)齊方式，則可以將這些段落嵌套進(jìn) div、 /div之中。 ? (2) 如果多個(gè)段落居中，還可以使用 center標(biāo)記，格式為： ? center多個(gè)段落文本 /center 知識(shí)點(diǎn) 23 版面控制標(biāo)記 ? 5. 畫線標(biāo)記 ? 格式： ? hr width=寬度值 size=線的高度 align=對(duì)齊方式 color=顏色 noshade ? 功能：在頁面上畫橫線。 ? 屬性： ? (1) width用于指定橫線的寬度，寬度值的指定方式有兩種，一種是用像素點(diǎn)來指定，如 50、 100、 200、 500等，這種方式當(dāng)窗口大小改變時(shí)，橫線寬度不變。 ? 例如： hr width=500 ? 另一種方式是用相對(duì)窗口的百分比來表示，如 50%、 75%、 100%，默認(rèn)是 100%。 ? 例如： hr width=75% ? (2) size用于指定橫線的高度，其值可以是絕對(duì)點(diǎn)數(shù)或相對(duì)百分比。默認(rèn)高度為 1。 ? (3) align用于指定橫線水平位置，取值為 left、 right或 center，默認(rèn)是 center。 ? (4) color用于指定橫線的顏色。 ? (5) noshade用于指定橫線是否有陰影。若帶有此參數(shù)則橫線無陰影。 ? 說明： ? (1) hr標(biāo)記一般用于產(chǎn)生水平分隔線，若要產(chǎn)生豎線，可將 width設(shè)置為 1,size設(shè)置為豎直線的高度值。例如： hr width=1 size=500 noshade ? (2) 當(dāng) width與 size值都較大時(shí)，可以產(chǎn)生長方形或正方形圖形。 ? 例如： hr width=500 size=300 color=red noshade ? (3) 產(chǎn)生的橫線在預(yù)覽輸出后才能完全看到效果。 知識(shí)點(diǎn) 24 圖像標(biāo)記 ? 在網(wǎng)頁中插入圖像使用 img標(biāo)記來實(shí)現(xiàn)，沒有對(duì)應(yīng)的結(jié)束標(biāo)記。 ? 格式： img src=圖像文件名 alt=提示文本 longdesc=詳細(xì)說明 width=x height=y border=邊框?qū)挾? hspace=x vspace=y align=對(duì)齊方式 ? 功能：在當(dāng)前位置插入圖像。 ? 屬性： ? (1) src 要插入的圖像文件的 URL地址，通常圖像的格式為 jpg或 gif。 ? (2) alt 當(dāng)圖像無法顯示時(shí)所給出的提示文本。 ? (3) longdesc關(guān)于圖像的詳細(xì)說明。 ? (4) width 圖像的寬度，可以為點(diǎn)數(shù)或相對(duì)窗口寬度的百分比。 ? (5) height 圖像的高度，可以為點(diǎn)數(shù)或相對(duì)窗口寬度的百分比。 ? (6) boder 圖像的邊框?qū)挾?，其值為非?fù)整數(shù)。 ? (7) hspace 水平方向空白（圖像左右留多少空白）。 ? (8) vspace 垂直方向空白（圖像上下留多少空白）。 知識(shí)點(diǎn) 24 圖像標(biāo)記 ? (9) align用于設(shè)置圖像的對(duì)齊與布局?？稍O(shè)置為 left、 right或 center等，使圖像向頁面窗口的左邊、右邊或中間對(duì)齊，圖像附近的文本在圖像右或左側(cè)環(huán)繞。 align還可以是其他取值，則指定圖像與文本在垂直方向上的相對(duì)對(duì)齊方式，取值與對(duì)應(yīng)的含義為： ? Top 將文本行中的最高字符的頂端與圖像的頂端對(duì)齊 ? Texttop 該項(xiàng)的功能與 top相同 ? Middle 使當(dāng)前行的基準(zhǔn)線與圖像的中線對(duì)齊 ? Absmiddle 使當(dāng)前行的中線與圖像的中線對(duì)齊 ? Baseline 使圖像的基準(zhǔn)線與當(dāng)前的基準(zhǔn)線對(duì)齊 ? Bottom 使圖像的底部與當(dāng)前基準(zhǔn)線對(duì)齊 ? Absbottom 使圖像的底部與當(dāng)前的底部對(duì)齊 ? 說明：圖像的寬度與高度指圖像顯示時(shí)的大小，與圖像的真實(shí)大小無關(guān)。 ? 例如： ? 在網(wǎng)頁的當(dāng)前位置插入 images/，寬度為 300，高度為 200，邊框?qū)挾仍O(shè)置為 1，圖像放在頁面的右邊，則實(shí)現(xiàn)的代碼為： ? img src=images/ width=300 height=200 border=1 align=right 知識(shí)點(diǎn) 25 超鏈接標(biāo)記 具備超鏈接能力是 HTML的最大優(yōu)勢(shì)，利用超鏈接可實(shí)現(xiàn)由一個(gè)網(wǎng)頁切換到另一個(gè)網(wǎng)頁，或跳轉(zhuǎn)到同一網(wǎng)頁的某一個(gè)指定地方，也可由一個(gè)網(wǎng)頁跳到另一個(gè)網(wǎng)站，可以說，利用超鏈接能鏈接到世界的任何一個(gè)地方。 1. 超鏈接的定義 格式： a href=url target=window_name文本或圖像 /a 屬性： (1) href 要鏈接到目標(biāo)的 url地址。 (2) url 要鏈接到的網(wǎng)站、網(wǎng)頁（包括同一站點(diǎn)內(nèi)的網(wǎng)頁文件、圖像文件等）或電子郵件，可以是絕對(duì)地址（用于外部鏈接），也可以是相對(duì)地址（用于內(nèi)部鏈接），如m等。 (3) target 指出要顯示超鏈接內(nèi)容的窗口名，默認(rèn)時(shí)在當(dāng)前窗口中顯示。 window_name 顯示超鏈接內(nèi)容的窗口名，如果該窗口不存在，則打開一個(gè)新窗口。 知識(shí)點(diǎn) 25 超鏈接標(biāo)記 說明： (1) 建立超鏈接時(shí)，標(biāo)記中間可以嵌套其他標(biāo)記，如圖像標(biāo)記、文本格式標(biāo)記等。 (2) 超鏈接標(biāo)志一般呈藍(lán)色顯示，當(dāng)鼠標(biāo)停在上面時(shí)，會(huì)顯示為手形鼠標(biāo)指針，表示它是一個(gè)鏈接，當(dāng)用戶單擊時(shí)，就會(huì)跳轉(zhuǎn)到 url指定的目標(biāo)。 例如： a href= target=baidu百度搜索 /a 單擊 百度搜索 ，打開一個(gè)名為 baidu的新窗口，在其中顯示百度主頁。 a href=關(guān)于本站 /a 單擊 關(guān)于本站 時(shí)，將在當(dāng)前窗口顯示當(dāng)前目錄下的 文件。 a href=images/中國地圖 /a 單擊 中國地圖 時(shí)，將在當(dāng)前窗口中顯示 images目錄下的 。 a href=mailto:聯(lián)系我們 /a 單擊 聯(lián)系我們 時(shí)，將打開電子郵件軟件，收件人地址為 ，可以給他寫信了。 a href= src=images//a 用圖像鏈接到清華大學(xué)網(wǎng)站 知識(shí)點(diǎn) 25 超鏈接標(biāo)記 ? 2. 定義錨點(diǎn) ? 若要跳轉(zhuǎn)到網(wǎng)頁的某一指定位置，則必須事先在該位置定義一個(gè)錨點(diǎn) (anchor)，錨點(diǎn)主要起位置標(biāo)識(shí)的作用。定義錨點(diǎn)用 a標(biāo)記的 name屬性來實(shí)現(xiàn)。 ? 定義格式： a name=錨名 /a ? 定義好后，若要鏈接到網(wǎng)頁的某一錨點(diǎn)，則要用 a標(biāo)記鏈接。 ? 鏈接格式： a href=網(wǎng)頁文件名 錨名 文本 /a ? 比如：要鏈接到 vbkey1錨點(diǎn)，則鏈接的方法為： ? a href= vbkey1文本 /a ? 若要鏈接到當(dāng)前網(wǎng)頁的某一個(gè)錨點(diǎn)，則網(wǎng)頁名可以缺省，而直接用錨點(diǎn)名來鏈接，其格式為： a href=錨名 文本 /a ? 注意：在需要定義錨的地方，加上 a name=錨名 /a代碼即可，錨名要唯一，不要重復(fù)。 知識(shí)點(diǎn) 26 表格標(biāo)記 ? 表格是 HTML網(wǎng)頁的一個(gè)非常重要的元素，除了規(guī)范數(shù)據(jù)的輸出外，在網(wǎng)頁設(shè)計(jì)中，常常用來進(jìn)行版面布局的設(shè)計(jì)和定位。 ? 1. 定義表格 ? 表格是由多個(gè)部分構(gòu)成的，因此定義表格時(shí)，將用到多種標(biāo)記符，這些標(biāo)記符是： ? （ 1） table/table 定義表格的開始和結(jié)束。 ? （ 2） caption/caption 定義表格標(biāo)題的開始和結(jié)束。 ? （ 3） tr/tr 定義表格行的開始與結(jié)束，一組 tr和 /tr產(chǎn)生一個(gè)表格行。 ? （ 4） td/td 定義單元格的開始與結(jié)束，一組 td和 /td產(chǎn)生一個(gè)單元格。在 td和 /td之間的部分，即為該單元格顯示的數(shù)據(jù)，若該單元格無數(shù)據(jù)，顯示為空，則應(yīng)表達(dá)為tdamp。nbsp/td。 ? （ 5） th/th 定義表頭 (表格第一行 )單元格的開始與結(jié)束，一組 th和 /th產(chǎn)生一個(gè)表頭單元格。 th和 /th之間的部分，即為單元格所顯示的數(shù)據(jù)，該數(shù)據(jù)以加粗居中方式顯示。表頭也可不用 th標(biāo)記產(chǎn)生，而直接用 td標(biāo)記來產(chǎn)生。 知識(shí)點(diǎn) 26 表格標(biāo)記 ? 2. 表格標(biāo)記的屬性 ? 對(duì)表格的更詳細(xì)控制，可通過表格標(biāo)記符的相關(guān)屬性來實(shí)現(xiàn)。 ? (1) table標(biāo)記的屬性 ? table標(biāo)記的屬性用于從整體上控制表格的外觀和形狀，常用的主要有： ? ① width、 height屬性：該組屬性用于設(shè)置表格的寬度和高度。其寬度或高度值可用像素值表示，也可用百分?jǐn)?shù)表示。 ? 例如，若要產(chǎn)生寬度為 800，高度為 400像素的表格，則定義方法為： ? table width=800 height=400 ? 若要產(chǎn)生一個(gè)寬度是網(wǎng)頁寬度的 85%的表格，則定義的方法為： ? table width=85% ? ② border屬性 :定義表格邊框的邊線的寬度。若設(shè)置為 0或不設(shè)置，則為無邊框的表格。若要產(chǎn)生一個(gè)寬度為 800，邊線寬度為 1的表格，則定義方法為： ? table width=800 border=1 ? ③ bgcolor、 bordercolor屬性： bgcolor用于設(shè)置整個(gè)表格的背景顏色； bgcolor屬性對(duì)于 tr和 td標(biāo)記也有效，作用于 tr標(biāo)記時(shí)，用于設(shè)置該行的背景顏色；作用于 td標(biāo)記，則設(shè)置該單元格的背景顏色。 bordercolor用于設(shè)置表格的邊框顏色，只有在 border屬性設(shè)置為非 0時(shí)有效。 ? ④ background屬性：用于設(shè)置表格的背景圖像。設(shè)置表格的背景圖像后，表格的背景顏色失效。 ? 例如：若要設(shè)置表格的背景圖像為 images/，則設(shè)置方法為： ? table width=800 background=images/ ? ⑤ cellpadding、 cellspacing屬性： cellpadding屬性用于設(shè)置單元格中的文本與表格邊線的間距；cellspacing屬性用于設(shè)置表格的各單元格之間的間距。 ? 例如：若要設(shè)置單元格間距為 1，單元格文本與表格邊線的間距為 2，則設(shè)置方法為： table cellpadding=2 cellspacing=1 ? ⑥ align屬性：用于設(shè)置表格在網(wǎng)頁中的對(duì)齊方式，取值有 left、 center和 right。 ? 例如：若要設(shè)置表格在網(wǎng)頁中居中，則設(shè)置方法為： ? table width=800 align=center 知識(shí)點(diǎn) 26 表格標(biāo)記 ? (2) tr標(biāo)記的屬性 ? tr標(biāo)記常用的屬性主要有 bgcolor和 align，分別用于設(shè)置該行的背景顏色和文本的對(duì)齊方式，利用 tr的 bgcolor屬性，可以實(shí)現(xiàn)不同行顯示不同的背景顏色。 ? (3) td標(biāo)記的屬性 ? td標(biāo)記常用的屬性主要有 bgcolor、bordercolor、 width、 height、 align和 valign,分別用于設(shè)置該單元格的背景顏色、單元格的邊框顏色、寬度、高度、單元格文本在水平方向的對(duì)齊方式和在垂直方向的對(duì)齊方式。 知識(shí)點(diǎn) 26 表格標(biāo)記 ? 【 實(shí)例 23】 試用 HTML標(biāo)記產(chǎn)生圖 219所示的表格。 ? 表格寬度為 400，各行的行高為 24， ? 表格在網(wǎng)頁中居中對(duì)齊； ? 表頭背景顏色為 0000CC， ? 表頭文本顏色為 FFFFFF， ? 表格邊框?qū)挾葹?1， ? 邊框顏色為 0099CC； ? 各數(shù)據(jù)項(xiàng)均居中對(duì)齊， ? 第 1列的寬度為 53，第 2列的寬度