第2章HTML網(wǎng)頁設(shè)計(jì)新教案資料_第1頁
第2章HTML網(wǎng)頁設(shè)計(jì)新教案資料_第2頁
第2章HTML網(wǎng)頁設(shè)計(jì)新教案資料_第3頁
第2章HTML網(wǎng)頁設(shè)計(jì)新教案資料_第4頁
第2章HTML網(wǎng)頁設(shè)計(jì)新教案資料_第5頁
已閱讀5頁，還剩17頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

ASP

網(wǎng)絡(luò)應(yīng)用程序設(shè)計(jì)

（第2版）

人民郵電出版社第2章HTML網(wǎng)頁設(shè)計(jì)2.1HTML概述2.1.1什么是HTML HTML（HyperTextMarkupLanguage）即超文本標(biāo)記語言，是構(gòu)成網(wǎng)頁最基本的要素，使用各種不同的標(biāo)記符號(hào)來分別標(biāo)識(shí)和設(shè)定不同的網(wǎng)頁元素。每個(gè)網(wǎng)頁元素通常由開始標(biāo)記和結(jié)束標(biāo)記，以及夾在這兩個(gè)標(biāo)記中的內(nèi)容所組成。在HTML元素的開始標(biāo)記中一般還允許加入相關(guān)的若干個(gè)屬性，以進(jìn)一步對(duì)該元素的特征進(jìn)行限定或說明。 總之，一個(gè)HTML元素的形式可表示為： <標(biāo)記名屬性名稱=屬性值…>內(nèi)容</標(biāo)記名>2.1HTML概述2.1.2HTML文檔基本架構(gòu) <html> <head> <title> 網(wǎng)頁標(biāo)題 </title> </head> <body> <p>這是主體部分！</p> </body> </html>2.2HTML常用標(biāo)記2.2.2主體標(biāo)記

<BODY>和</BODY>標(biāo)記是HTML文檔的主體標(biāo)記，其內(nèi)可包括將在網(wǎng)頁中顯示的文字、圖片、表格、鏈接、表單等所有標(biāo)記和內(nèi)容。2.2.3文字段落標(biāo)記 1．標(biāo)題文字標(biāo)記 <h1>、<h2>、<h3>等 2．分段標(biāo)記 <p> 3．換行標(biāo)記 <br> 4．橫線標(biāo)記 <hr>2.2HTML常用標(biāo)記2.2.4文字格式標(biāo)記 1．字體標(biāo)記

<FONTsize=大小face=字體名稱color=顏色> 文字</FONT> 2．文字修飾標(biāo)記 <b>、<i>、<u>2.2.5特殊字符標(biāo)記 在HTML文檔中，<、>、&、空格等特殊字符需要用特定字符串來表示。2.2HTML常用標(biāo)記2.2.6列表標(biāo)記1．有序列表標(biāo)記 <OLtype=序號(hào)類型start=開始序號(hào)>

<LI>列表項(xiàng)1

<LI>列表項(xiàng)2

……

</OL>2．無序列表標(biāo)記 <ULtype=標(biāo)志符類型>

<LI>列表項(xiàng)1

……

</UL>2.2HTML常用標(biāo)記2.2.7圖像標(biāo)記 <IMGscr=圖片文件的URLalign=對(duì)齊方式 border=邊框?qū)挾萢lt=替代文字 height=圖像高度width=圖像寬度 hspace=水平邊距vspace=垂直邊距> 注意：<IMG>標(biāo)記沒有對(duì)應(yīng)的結(jié)束標(biāo)記。2.2.8超鏈接標(biāo)記

<Ahref=URL>用作鏈接的文字或圖像</A>說明：href屬性指定此錨點(diǎn)被觸發(fā)后所鏈接到的URL。2.3HTML表格標(biāo)記2.3.1表格定義格式

<TABLEalign=對(duì)齊方式bgcolor=背景顏色 background=背景圖像width=表格寬度height=高度 border=邊框粗細(xì)bordercolor=邊框顏色 cellspacing=單元格間距cellpadding=單元格邊距> <TR><TH>…</TH><TH>…</TH>……</TR>

<TR><TD>…</TD><TD>…</TD>……</TR>

<TR><TD>…</TD><TD>…</TD>……</TR>

…… </TABLE>2.3HTML表格標(biāo)記2.3.2表格應(yīng)用舉例<tableborder="0"width="260"bgcolor="skyblue"> <tr> <thwidth="112"align="left">商品名稱</th> <thwidth="72">單位</th> <thwidth="87"align="right">單價(jià)</th></tr> <tr> <tdwidth="112">平板電視機(jī)</td> <tdalign="center"width="72">臺(tái)</td> <tdalign="right"width="87">$12,699</td></tr> ……</table>2.4HTML框架標(biāo)記2.4.1框架定義格式<FRAMESETcols=框架列數(shù)及各列寬度 rows=框架行數(shù)及各行高度bordercolor=邊框顏色 frameborder=框架邊框framespacing=框架間距>

<FRAMEname=框架名target=目標(biāo)框架 scrolling=滾動(dòng)否scr=URLborder=邊框?qū)挾?bordercolor=邊框顏色scrolling=有是否滾動(dòng)條>

<FRAME……>

……</FRAMESET>2.4HTML框架標(biāo)記2.4.2框架應(yīng)用舉例 <html> <head><title>框架范例1</title></head> <framesetcols="32%,*"> <framename="contents"target="main" src="left.htm"> <framename="main"src="right.htm"> </frameset> </html>2.4.3框架嵌套舉例2.5HTML表單標(biāo)記2.5.1表單定義格式<FORMname=表單名action=程序名method=傳送方式>

……

<INPUTtype=表單域類型name=表單域名稱…>

……</FORM> 其中，action：指定提交后用來處理此表單的程序； method：信息提交方式，可為POST或GET。 說明：<FORM>標(biāo)記中可以包含多種表單域，如：文本框、單選按鈕、命令按鈕、復(fù)選框、列表框等。2.5HTML表單標(biāo)記2.5.2常用表單域標(biāo)記 1．<INPUT>標(biāo)記 <INPUTtype=表單域類型name=表單域名稱 value=字符串size=大小> 其中Type屬性值可以是： text（文本框） password（密碼框） button（普通按鈕） image（圖片按鈕） file（文件框） radio（單選按鈕） checkbox（復(fù)選框） submit（提交按鈕） reset（重置按鈕） hidden（隱藏）2.5HTML表單標(biāo)記 2．<SELECT>標(biāo)記 <SELECTname=名稱size=大小multiple=選項(xiàng)數(shù)> <OPTION>文字</OPTION>

<OPTION>文字</OPTION>

……

</SELECT> 3．<TEXTAREA>標(biāo)記 <TEXTAREAname=名稱value=字符串 rows=行數(shù)cols=列數(shù)>文本 </TEXTAREA>2.5HTML表單標(biāo)記2.5.3表單應(yīng)用舉例2.6HTML其他標(biāo)記2.6.1動(dòng)態(tài)文字標(biāo)記 <MARQUEEbgcolor=背景顏色behavior=移動(dòng)方式 direction=移動(dòng)方向align=對(duì)齊方式 scrollamount=移動(dòng)速度scrolldelay=停頓時(shí)間 height=高度width=寬度hspace=水平邊距 vspace=垂直邊距> </MARQUEE>2.6.2層標(biāo)記<DIV><SPAN>2.7HTML文檔樣式2.7.1CSS簡(jiǎn)介 “樣式”是預(yù)先定義的一組格式。在HTML文檔中除了可用各種標(biāo)記對(duì)網(wǎng)頁元素分別設(shè)置格式外，還可采用CSS技術(shù)對(duì)網(wǎng)頁元素設(shè)置豐富的格式。 CSS樣式表由一系列格式設(shè)置語句組成，每一條這樣的語句都用來告訴瀏覽器如何顯示HTML文檔中的某種元素。 CSS語句的基本格式： 選擇器{屬性1:屬性值1[;屬性2:屬性值2…]}2.7HTML文檔樣式2.7.2在文檔頭部定義樣式 <head> <style> h2{font-size:18pt;color:#008080;font-style:italic} td{color:#000080;font-size:14px;line-height:18px} A:link{color:#cc0000;text-decoration:underline} A:visited{color:#ccff00;text-decoration:none} A:hover{color:#ff6600;text-decoration:none} </style> </head>2.7HTML文檔樣式2.7.3為單個(gè)元素定義樣式 在網(wǎng)頁主體（<BODY>標(biāo)記）中，可通過在個(gè)別元素的開始標(biāo)記中設(shè)置style屬性來對(duì)該元素單獨(dú)定義專門樣式。例如：<pstyle="colort:#ff0000;font-weight:bold"> 這是一段紅色粗體文字</p><h2style="font-family:宋體;Color:brown"> 這是一個(gè)棕色宋體字標(biāo)題</h2><ahref="" style="text-decoration:none">163網(wǎng)站</a>2.7HTML文檔樣式2.7.4定義與引用外部樣式表

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論