第2章HTML網頁設計新教案資料_第1頁
第2章HTML網頁設計新教案資料_第2頁
第2章HTML網頁設計新教案資料_第3頁
第2章HTML網頁設計新教案資料_第4頁
第2章HTML網頁設計新教案資料_第5頁
已閱讀5頁，還剩17頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

ASP

網絡應用程序設計

（第2版）

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

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

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

<LI>列表項1

<LI>列表項2

……

</OL>2．無序列表標記 <ULtype=標志符類型>

<LI>列表項1

……

</UL>2.2HTML常用標記2.2.7圖像標記 <IMGscr=圖片文件的URLalign=對齊方式 border=邊框寬度alt=替代文字 height=圖像高度width=圖像寬度 hspace=水平邊距vspace=垂直邊距> 注意：<IMG>標記沒有對應的結束標記。2.2.8超鏈接標記

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

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

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

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

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

<FRAMEname=框架名target=目標框架 scrolling=滾動否scr=URLborder=邊框寬度 bordercolor=邊框顏色scrolling=有是否滾動條>

<FRAME……>

……</FRAMESET>2.4HTML框架標記2.4.2框架應用舉例 <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表單標記2.5.1表單定義格式<FORMname=表單名action=程序名method=傳送方式>

……

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

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

<OPTION>文字</OPTION>

……

</SELECT> 3．<TEXTAREA>標記 <TEXTAREAname=名稱value=字符串 rows=行數(shù)cols=列數(shù)>文本 </TEXTAREA>2.5HTML表單標記2.5.3表單應用舉例2.6HTML其他標記2.6.1動態(tài)文字標記 <MARQUEEbgcolor=背景顏色behavior=移動方式 direction=移動方向align=對齊方式 scrollamount=移動速度scrolldelay=停頓時間 height=高度width=寬度hspace=水平邊距 vspace=垂直邊距> </MARQUEE>2.6.2層標記<DIV><SPAN>2.7HTML文檔樣式2.7.1CSS簡介 “樣式”是預先定義的一組格式。在HTML文檔中除了可用各種標記對網頁元素分別設置格式外，還可采用CSS技術對網頁元素設置豐富的格式。 CSS樣式表由一系列格式設置語句組成，每一條這樣的語句都用來告訴瀏覽器如何顯示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為單個元素定義樣式 在網頁主體（<BODY>標記）中，可通過在個別元素的開始標記中設置style屬性來對該元素單獨定義專門樣式。例如：<pstyle="colort:#ff0000;font-weight:bold"> 這是一段紅色粗體文字</p><h2style="font-family:宋體;Color:brown"> 這是一個棕色宋體字標題</h2><ahref="" style="text-decoration:none">163網站</a>2.7HTML文檔樣式2.7.4定義與引用外部樣式表

溫馨提示

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

最新文檔

評論

0/150

提交評論