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

　　

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