第2章html基礎(chǔ)

1、第2章,HTML 基礎(chǔ),本課教學(xué)內(nèi)容,靜態(tài)網(wǎng)頁(yè)制作HTML中的常見標(biāo)簽表格標(biāo)簽鏈接和圖片標(biāo)簽表單標(biāo)簽框架,靜態(tài)網(wǎng)頁(yè)制作,HTML 簡(jiǎn)介 HTML（HyperText Mark-up Language，超文本標(biāo)記語(yǔ)言），是構(gòu)成網(wǎng)頁(yè)文檔的主要語(yǔ)言。一般情況下，網(wǎng)頁(yè)上看到的文字、圖形、動(dòng)畫、聲音、表格、鏈接等元素大部分都是由 HTML語(yǔ)言描述的,靜態(tài)網(wǎng)頁(yè)制作,HTML 簡(jiǎn)介 HTML 語(yǔ)言的基本組成部分是各種標(biāo)簽，一張生動(dòng)的網(wǎng)

2、頁(yè)往往含有大量的標(biāo)簽。使用標(biāo)簽，實(shí)際上就是采用一系列指令符號(hào)來(lái)控制輸出的效果，如：，是最常使用的控制格式的標(biāo)簽，它表示在網(wǎng)頁(yè)上換行,靜態(tài)網(wǎng)頁(yè)制作,HTML 簡(jiǎn)介HTML 有兩種類型的標(biāo)簽，一類是單標(biāo)簽，就是一種單標(biāo)簽，它只需要單獨(dú)一組符號(hào)就可以表示完整的功能。另一種是雙標(biāo)簽，形如內(nèi)容，表示將"內(nèi)容"顯示為粗體，這種標(biāo)簽所圍繞的內(nèi)容就是標(biāo)簽作用的作用域,靜態(tài)網(wǎng)頁(yè)制作,HTML 簡(jiǎn)介HTML 語(yǔ)言對(duì)于大小寫不敏感，

3、比如馬上將要學(xué)習(xí)的表示 HTML 文檔的標(biāo)簽：，也可寫做，甚至可以寫為，但是一般推薦，自始至終使用同一種書寫方式,HTML 文檔的基本結(jié)構(gòu),HTML 文檔的基本結(jié)構(gòu)如下： 頭部信息 主體 ,firstPage.html,HTML 中的常見標(biāo)簽,文字布局及字體標(biāo)簽 標(biāo)題、換行、段落標(biāo)簽是水平線段標(biāo)簽，此標(biāo)簽較為常用的屬性有： size：水平線的寬度，單位為像素 width：水

4、平線的長(zhǎng)，如不設(shè)置則默認(rèn)為頁(yè)面長(zhǎng)度，單位默認(rèn)為像素，但也可以使用百分制，如 width=50%表示長(zhǎng)度為頁(yè)面長(zhǎng)度的 50%,HTML 中的常見標(biāo)簽,文字布局及字體標(biāo)簽 標(biāo)題、換行、段落標(biāo)簽是水平線段標(biāo)簽，此標(biāo)簽較為常用的屬性有： align：水平線的對(duì)齊方式，常用的有 left，center，right。 noshade：線段無(wú)陰影屬性，沒有屬性值，若設(shè)置，則線段為實(shí)心線段 color：線段內(nèi)部的顏色,hr.html,HTML

5、 中的常見標(biāo)簽,文字布局及字體標(biāo)簽 文字設(shè)計(jì)標(biāo)簽size：用來(lái)設(shè)置字體大小，它的屬性值有兩種寫法：一種為 size=X，其中 X 為從 1 到 7，值越大，字體越大，屬性值為 3 是客戶端網(wǎng)頁(yè)的默認(rèn)字體大小；另一種方法是 size=+X 或-X，X 同樣為從 1 到 7 的值，意思是以基準(zhǔn)字體大小為標(biāo)準(zhǔn)大 X 號(hào)字體或者小 X 號(hào)字體,HTML 中的常見標(biāo)簽,文字布局及字體標(biāo)簽 文字設(shè)計(jì)標(biāo)簽face：用來(lái)設(shè)置字體類型，默認(rèn)為宋體

6、。如，即設(shè)置該內(nèi)容的輸出的字體為楷體但是需要注意的是，只有電腦中安裝的字體才可以在瀏覽器中出現(xiàn)相應(yīng)風(fēng)格，如果用戶沒有安裝該字體，則會(huì)顯示默認(rèn)字體的風(fēng)格 color：用于設(shè)置字體顏色,font.html,HTML 中的常見標(biāo)簽,文字布局及字體標(biāo)簽 文字設(shè)計(jì)標(biāo)簽常見的設(shè)置文字風(fēng)格的標(biāo)簽有： 內(nèi)容：將內(nèi)容設(shè)置為粗體。 內(nèi)容：將內(nèi)容設(shè)置下劃線。 內(nèi)容：將內(nèi)容設(shè)置為斜體。 內(nèi)容：將內(nèi)容設(shè)置為上標(biāo)。 內(nèi)容：將內(nèi)容設(shè)置為下標(biāo),styl

7、e.html,列表標(biāo)簽,列表標(biāo)簽分為兩種，一種是有序的，一種是無(wú)序的。內(nèi)容，表示它所包圍的內(nèi)容是無(wú)序列表標(biāo)簽，即列表中每一項(xiàng)目前不會(huì)加上序號(hào)，而是會(huì)加上●、○、■等符號(hào)。內(nèi)容表示有序標(biāo)簽，意義與使用方法和無(wú)序列表標(biāo)簽大致相同，不同點(diǎn)為它會(huì)在每個(gè)列表項(xiàng)前加上數(shù)字用 列表項(xiàng) 標(biāo)示。,list.html,表格標(biāo)簽,表格基本設(shè)計(jì)編寫表格所用到的標(biāo)簽如下： ：定義表格，表格的所有內(nèi)容都寫在這個(gè)標(biāo)簽之內(nèi) ：定義標(biāo)題，標(biāo)題會(huì)自動(dòng)出現(xiàn)在整

8、張表格的上方：定義表行 ：定義表頭，包含在之間，表頭中的文字會(huì)自動(dòng)變成粗體 ：定義表元(表格的具體數(shù)據(jù))，包含在之間,table1.html,表格標(biāo)簽,以下為制作表格的標(biāo)簽中大多擁有的公共屬性： align：水平布局方式，常用屬性值有 left，right，center，表示左對(duì)齊，右對(duì)齊和居中對(duì)齊，的該屬性表示表格在頁(yè)面的布局方式，、的該屬性表示該行和該表元內(nèi)的內(nèi)容的布局方式。默認(rèn)布局方式為左對(duì)齊 bgcolor：設(shè)置背景顏

9、色 border：設(shè)置邊框的寬度，屬性值為整數(shù)，為 0 時(shí)表格沒有邊框，默認(rèn)值為 0 width：寬度，默認(rèn)單位為像素，也可以使用百分制單位 height：高度，默認(rèn)單位為像素；也可以使用百分制單位,table2.html,表格標(biāo)簽,對(duì)于整張表格，標(biāo)簽常用的屬性有以下幾個(gè)： bordercolor：表格邊框的顏色，默認(rèn)為黑色 cellpadding：表元邊框的寬度 cellspacing：表元的邊框與表格邊框之間的寬度,ta

10、ble3.html,合并單元格,合并單元格必須對(duì)標(biāo)簽中的 rowspan、colspan 進(jìn)行設(shè)置，屬性值都為整數(shù)，默認(rèn)為 1，表示沒有合并。這兩個(gè)屬性的意思分別為：從該表元起，該表元在行或者列上占有的單 元格數(shù)，比如設(shè)置某個(gè)標(biāo)簽rowspan=2，表示該表元及其下面的表元合并成一個(gè),table4.html,鏈接和圖片標(biāo)簽,鏈接標(biāo)簽可以使用戶鏈接到另一個(gè)頁(yè)面，它的寫法是內(nèi)容，標(biāo)簽內(nèi)的內(nèi)容為鏈接所顯示的內(nèi)容，可以是文字、空格占位符、圖片等

11、，此標(biāo)簽的一個(gè)重要屬性是：href，它的值表示鏈接所指向的資源地址,href1.html,鏈接和圖片標(biāo)簽,圖片標(biāo)簽比較重要和常用的標(biāo)簽有以下幾個(gè)： src：表示圖片儲(chǔ)存的位置 width，height，border，align：作用與前文所提到屬性相同 alt：當(dāng)圖片未載入或者載入失敗時(shí)提供的替代性的文字說(shuō)明,img.html,表單標(biāo)簽,type 可以為以下的值： text：文本框，text 也為 type 的默認(rèn)屬性pass

12、word：密碼框 radio：?jiǎn)芜x按鈕，可以將多個(gè)單選按鈕的 name 屬性設(shè)置相同，使其成為一組。checked屬性可設(shè)置默認(rèn)被選 checkbox：復(fù)選框，checked 屬性可設(shè)置默認(rèn)被選,表單標(biāo)簽,reset：重置按鈕，按下之后，所有的表單元素內(nèi)容變?yōu)槟J(rèn)值 button：普通按鈕 submit：提交按鈕，按下之后，網(wǎng)頁(yè)會(huì)將表單的內(nèi)容提交給 action 設(shè)定的網(wǎng)頁(yè)，action的值為空時(shí)提交給本頁(yè) image：圖