第1章 HTML頁面及表格_第1頁
第1章 HTML頁面及表格_第2頁
第1章 HTML頁面及表格_第3頁
第1章 HTML頁面及表格_第4頁
第1章 HTML頁面及表格_第5頁
已閱讀5頁，還剩32頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

HTML網(wǎng)頁設(shè)計本課程目標(biāo)頁面與表格的設(shè)計文字布局和文字效果圖像、CSS樣式定義與應(yīng)用、浮動窗口框架、頁面版式控制與多媒體效果表單與頁面控件第一章HTML頁面與表格本章目標(biāo)掌握HTML文件的結(jié)構(gòu)理解HTML文件的背景色及文本色掌握頁面上添加超鏈接掌握在頁面設(shè)置表格本章任務(wù)用表格完成個人簡歷網(wǎng)頁基礎(chǔ)知識互聯(lián)網(wǎng)是世界上最大的計算機(jī)網(wǎng)絡(luò)互聯(lián)網(wǎng)被稱為網(wǎng)絡(luò)的網(wǎng)絡(luò)萬維網(wǎng)是互聯(lián)網(wǎng)中的一個子網(wǎng)WWW包含分散在世界范圍內(nèi)的眾多Web服務(wù)器（WorldWideWeb）超文本傳送協(xié)議——HTTP(HyperTextTransferProtocol)HTTP協(xié)議用經(jīng)常用在傳送WEB頁網(wǎng)站是由若干個文件組成網(wǎng)頁基礎(chǔ)知識統(tǒng)一資源定位器——URL（UniformResourceLocator）URL包括傳送協(xié)議，服務(wù)器名稱、文件的完整路徑例如：/index.html其中http://是傳送協(xié)議是服務(wù)器名稱

index.html是文件的完整路徑服務(wù)器名稱還有其他的叫法，主機(jī)名、域名。一般大眾叫法叫域名.等等代表服務(wù)類型。網(wǎng)頁基礎(chǔ)知識-HTML（超級文本標(biāo)記語言）HTML是HypertextMarkupLanguage（超文本標(biāo)記語言）的縮寫，它是構(gòu)成Web頁面（Page）的主要工具，是用來表示網(wǎng)上信息的符號標(biāo)記語言。HTML文檔由文本和HTML標(biāo)記組成，通常以.html或者.htm為文本的擴(kuò)展名（如index.htm）。網(wǎng)頁瀏覽器負(fù)責(zé)解釋HTML文檔中的標(biāo)記，并將HTML文檔顯示為網(wǎng)頁.不同的瀏覽器中網(wǎng)頁的顯示效果可能不同。大多數(shù)瀏覽器不完全支持HTML的所有特性，每一種瀏覽器都可能會有一些特有的HTML標(biāo)記和屬性，這些標(biāo)記和屬性可能不會被其他的瀏覽器識別。這些有軟件公司開發(fā)的標(biāo)記和屬性被稱為HTML擴(kuò)展，而不是標(biāo)記的一部分。HTML和網(wǎng)頁瀏覽器的關(guān)系HTML和網(wǎng)頁瀏覽器的關(guān)系：不同的瀏覽器中網(wǎng)頁的顯示效果可能不同。大多數(shù)瀏覽器不完全支持HTML的所有特性，每一種瀏覽器都可能會有一些特有的HTML標(biāo)記和屬性，這些標(biāo)記和屬性可能不會被其他的瀏覽器識別。這些有軟件公司開發(fā)的標(biāo)記和屬性被稱為HTML擴(kuò)展，而不是標(biāo)記的一部分。小結(jié)www表示什么？URL表示什么？HTML表示什么意思？HTML文檔通常以什么格式保存？超文本標(biāo)記語言——HTMLHTML標(biāo)記基本格式標(biāo)記內(nèi)可以包含一些屬性

<標(biāo)記>文件內(nèi)容</標(biāo)記>

<標(biāo)記名稱屬性1屬性2屬性3……>HTML中的注釋：<!--內(nèi)容-->HTML頁面的基本結(jié)構(gòu)

起始標(biāo)記網(wǎng)頁標(biāo)題文件主體

<Html><Head> 網(wǎng)頁的標(biāo)題和屬性</Head><Body> 文件主體</Body></Html> 基本結(jié)構(gòu)起始標(biāo)記

<Html>標(biāo)記符號<Html>標(biāo)記用于HTML文檔的最前面，用來標(biāo)記HTML文檔的開始</Html>則是放在HTML文檔的最后面，用來表示HTML文檔的結(jié)束兩個標(biāo)記必須一起使用</Html>文件頭

<Head></Head>結(jié)構(gòu)文件頭標(biāo)記對構(gòu)成HTML文檔的開頭部分用來描述HTML文檔相關(guān)信息文件頭<Head></Head>標(biāo)記對構(gòu)成HTML文檔的開頭部分

1．Title標(biāo)記<Title></Title>文件標(biāo)題

2．Base標(biāo)記<Basehref=”URL”>

//base標(biāo)記是一個基鏈接標(biāo)記，是一個單標(biāo)記。3．Link標(biāo)記<Linkrev=”RELATIONSHIP”rel=”RELATIONSHIP”href=”URL”>定義文檔關(guān)聯(lián)的文件，用于鏈接CSS樣式表文件或Javascript程序文件等。4．Meta標(biāo)記< Metahttp-equiv=”Content-Type”content=”text/html;charset=gb2312”>頁面主體格式和頁面效果 <Body></Body>標(biāo)記對之間的內(nèi)容是HTML文檔的主要部分，在此標(biāo)記對之間可包含眾多的標(biāo)記和信息

<Body>標(biāo)記中還可以設(shè)置一些屬性

兩個標(biāo)記必須一起使用 index.html

小結(jié)HTML由哪幾部分組成？HTML中設(shè)置標(biāo)題用那個標(biāo)簽？HTML中body標(biāo)簽有什么作用？頁面鏈接頁面鏈接的基本概念外部鏈接內(nèi)部鏈接郵件鏈接了解路徑絕對路徑

相對路徑

絕對路徑是指完整的描述文件位置的路徑所謂相對路徑，顧名思義就是自己相對與目標(biāo)位置C:\internet\index.htmlservice/index.html

外部鏈接 鏈接到外面去，可以擴(kuò)充您網(wǎng)站的實(shí)用性及充實(shí)性，也正因這功能，才造就了www五彩繽紛的世界。

一個超鏈接通常由以下3個部分構(gòu)成：

超鏈接標(biāo)記<a></a>屬性href及其值超鏈接中顯示頁面上顯示鏈接的文字<aHref=””>新浪網(wǎng)</a>內(nèi)部鏈接

有時候，當(dāng)某頁的內(nèi)容很多時，我們可以利用網(wǎng)頁的內(nèi)部鏈接，以便使用者快速的找到資料. 原理：在欲鏈接處做個記號

鏈接時就尋找個這記號內(nèi)部鏈接就是網(wǎng)頁中的書簽格式

<aName=”書簽名稱”>書簽內(nèi)容</a><aname=”標(biāo)簽a”>書簽內(nèi)容</a><aHref=”#標(biāo)簽a”>單擊此處監(jiān)視瀏覽器調(diào)到“標(biāo)簽a”處</a>郵件鏈接郵件鏈接可使訪問者在瀏覽頁面時，只需單擊電子郵件鏈接就能打開默認(rèn)的郵件編輯軟件，向指定的地址發(fā)送郵件

格式<aHref=”mailto:it@”>清華IT在線</a> 訪問者單擊電子郵件鏈接時，將打開默認(rèn)的電子郵件編輯軟件

小結(jié)頁面鏈接的分類？各在什么情況下使用？表格一般的表格由那些部分組成？表格的基本形式表格的作用一個表格由<table>標(biāo)記開始，</table>結(jié)束表的內(nèi)容由<tr>,<th>和<td>定義

單元行單元格<th>標(biāo)記所標(biāo)記的單元格的文字以粗體出現(xiàn)，通常用于表格的標(biāo)題欄一般用于對網(wǎng)頁的內(nèi)容進(jìn)行排版

表格的例子

<Body><TableBorder=1align="center"><Tr><Th>編號</Th><Th>名稱</Th><Th>價格(元)</Th></Tr><Tr><Td>001</Td><Td>語文教材</Td><Td>20.00</Td></Tr></table></Body>simpleTable.html有通欄的表格1．有橫向通欄的表格用<tdcolspan=#>屬性說明2．有縱向通欄的表格用<tdrowspan=#>屬性說明#代表通欄占據(jù)的網(wǎng)格數(shù)以像素為單位橫向通欄示例

<TableBorder=1align="center"><Tr><Tdcolspan="3"align="center">圖書信息</Td></Tr><Tr><Th>編號</Th><Th>名稱</Th><Th>價格(元)</Th></Tr></table>表的大小，邊框?qū)挾龋砀耖g距

1．表的大小用width=#和height=#屬性說明2．邊框?qū)挾扔蒪order=#說明3．表格間距即劃分表格的線的粗細(xì)用cellspacing=#表示寬

高

#是以像素為單位的整數(shù)表格的粗細(xì)

<TableBorder=5

width="150"height="100"cellspacing="5"align="center"><Tr><Th>編號</Th><Th>名稱</Th><Th>價格(元)</Th></Tr><Tr><Td>001</Td><Td>語文教材</Td><Td>20.00</Td></Tr></table>表格中文本的輸出1．文本與表框的距離用cellpadding=#設(shè)置2．表格的寬度大于其中的文本寬度時，文本在其中的輸出位置用“align=#”定義3．表格的高度大于其中文本的高度時，可以用valign=#說明文本在其中的位置。#是left，center和right三者之一，分別表示左對齊，居中和右對齊#是top，middle，bottom，baseline四者之一。分別表示頂端對齊、居中對齊、底部對齊、基線對齊#是以像素為單位的整數(shù)<Tdalign="left">001</Td>文本與表框的距離

<Html><Head><Title> 表格中文本的輸出</Title></Head><Body><TableBorder=1Cellpadding="10"align="center"> <Tr> <Th>編號</Th><Th>名稱</Th><Th>價格(元)</Th> </Tr> <Tr> <Td>001</Td><Td>語文教材</Td><Td>20.00</Td> </Tr> </table></Body></Html>表格的高度大于其中文本的高度

<Body><TableBorder=1height="200"align="center"> <Tr> <Th>編號</Th> <Th>名稱</Th> <Th>價格(元)</Th> </Tr> <Tr> <Tdvalign="top">001</Td> <Tdvalign="middle">語文教材</Td> <Tdvalign="bottom">20.00</Td> </Tr></table></Body>表格在文件中的位置定義 表格與文件中內(nèi)容對齊時，若在現(xiàn)在位置上不能滿足其對齊方式，可定義其位置，以滿足對齊要求 屬性一般由align=left、right或center指定<TableBorder=1align="center"><Tr><Th>編號</Th><Th>名稱</Th><Th>價格(元)</Th></Tr><Tr><Td>001</Td><Td>語文教材</Td><Td>20.00</Td></Tr></table>表格顏色表格的顏色用bgcolor=#指定#是16進(jìn)制的6位數(shù)，格式為rrggbb紅

綠藍(lán)<TableBorder=1align="center"><Trbgcolor="lime">

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論