HTML基本結構與標記_第1頁
HTML基本結構與標記_第2頁
HTML基本結構與標記_第3頁
HTML基本結構與標記_第4頁
HTML基本結構與標記_第5頁
已閱讀5頁，還剩12頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、目錄1 HTML基本結構12 列表控制標記43 表格64 圖像95 超鏈接106 表單127 框架138 多媒體159 其他標記161 HTML基本結構1 HTML的基本結構<html> -根控制標記<head>-頭控制標記<title>標題</title>-標題標記</head>-頭控制標記（尾）<body>-網(wǎng)頁顯示區(qū)域</body></html>-根控制標記(尾)(1).<html></html>根控制標記開頭和結尾成對出現(xiàn)，雙標簽(2).<head><

2、;/head>頭控制標記1.<title>很單純的文件標題聲明2.<meta>控制標記的動態(tài)文件轉換聲明3.<base>超鏈接網(wǎng)址基準參考點4.Javascript和VBScript程序5.stylesheet 可用來設置排版來的聲明6.<link>可引用外部文件，如CSS排版樣本(3).<title></title>設置瀏覽器的視窗標題(4).<body></body>頁面可見內容2 HTML控制標記的格式(1).<標記名稱>單一型,無設置值的。如：<br>(2).&

3、lt;標記名稱 屬性=”屬性值”>單一型，有設置值的。如：<hr width=”80%”>(3).<標記名稱></標記名稱>對稱型，無設置值。如：<title></title>(4).<標記名稱 屬性=”屬性值”></標記名稱>對稱型，有設置值。如：<body bgcolor=”red”></body><font size=”7”></font>3 最常用的控制標記(1).跳行 <br>格式：<br>無屬性設置(2).段落 <p

4、>格式：<p align=”排列方式”></p>屬性名稱屬性值說明 align left往左靠（默認） center往中靠 right 往右靠(3).水平直線 <hr>格式：<hr>屬性名稱屬性值說明 size 像素絕對設置，以數(shù)字表示，屬性值越大，線越粗百分比相對設置，以%表示，屬性值越大，線越粗 width 像素絕對設置，長度不會應視窗的改變而改變百分比相對設置，長度會隨著視窗寬度而改變noshade 實體線(4).向中對齊 <center> (被廢棄的標簽)格式：<center></center>(

5、5).背景色與文字設置格式：<body bgcolor=”背景色” text=”文字顏色”> 整體頁面的邊距，行距 <body leftmargin=”像素” topmargin=”像素”>(6).標題文字設置格式：<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>屬性名稱屬性值說明 align left靠左 center靠中 right靠右(7).特殊字符設置

6、格式：< lt;> gt;& amp;“ quot;(8).在HTML備注格式：<!->(9).實體字符控制標記1.<b></b>粗2.<i></i>斜3.<s></s>刪4.<u></u>下劃5.<tt></tt>電報6.<sub></sub>下標7.<sup></sup>上標(10).語意字符控制1.<address></address> 地址2.<big>

7、</big>大字3.<del></del>刪除4.<ins>.</ins> 修改 5.<samll></small>小字6. <strong></strong>加強語氣(加粗)7. <em>.</em> 加強語氣(傾斜)(11).<font>字體控制 (被廢棄的標簽)格式：<font></font>屬性名稱屬性值說明 size 0-7字體大小 color英文或十六顏色 face 字體字體(12).格式化格式：<pre>

8、;</pre>讓書寫的文字格式化！(13) .引用文本格式：<blockquote>.</blockquote>屬性名稱屬性值說明 cite url 被引用的地址2 列表控制標記1 無序號條例式清單<ul>與<li>格式: <ul><li></li><li></li><li></li><li></li></ul>功能: <ul>無序條列清單的開始. </ul>表示結束. <li>&

9、lt;/li>表示一個項目. <li>的屬性屬性名稱屬性值說明 type dise 實心圓(默認值) circle空心圓 square 實心方塊2 有序號條例式清單<ol>與<li>格式:<ol><li></li><li></li><li></li><li></li></ol>功能: <ol>有序條列清單的開始. </ol>表示結束. <li></li>表示一個項目.<ol>

10、的屬性屬性名稱屬性值說明 type 1 表示以1,2,3,4來表示 a 表示以a,b,c,d來表示 A 表示以A,B,C,D來表示 i表示以i,ii ,iii來表示 I 表示以 I,II,III來表示3 無序列表和有序列表的結合應用格式:<ul><li>.<ol><li></li><li></li><li></li></ol></li><li> .<ol><li></li><li></li>&

11、lt;li></li></ol></li> </ul>4 敘述式清單(定義列表)格式:<dl><dt></dt><dd></dd><dd></dd><dd></dd><dt></dt><dd></dd><dd></dd><dd></dd></dl>功能: <dl>敘述清單的開始 <dt>表示一個項目 &l

12、t;dd>表示一個項目下的更詳細的內容3 表格在網(wǎng)頁中表格是一種經(jīng)常使用到得設計結構，就像表格的內容中可以包含任何的數(shù)據(jù)，如文字、圖像、表單、超鏈接、表格等等，所有在HTML中可以使用的數(shù)據(jù)，都可以被設置在表格中，所以有關表格設置的標記與屬性頁特別多。1 表格的基本格式格式:<table><tr><th> </th><th> </th><th> </th></tr><tr><td> </td><td> </td><t

13、d> </td></tr></table>功能: <table></table>用來聲明表格開始與結束. <tr></tr>用來設置表格的行. <th></th>用來設置標題欄位. <td></td>用來設置數(shù)據(jù)欄位.2 <table>標簽下的屬性屬性名稱屬性值說明 border 像素 設置表格的邊線 cellspacing 像素 絕對設置,存儲格框線寬度 百分比 相對設置,存儲格框線寬度 cellpadding 像素 絕對設置,數(shù)據(jù)與框線的距離

14、百分比 相對設置,數(shù)據(jù)與框線的距離 width 像素 絕對設置,像素表示表格寬度百分比 相對設置,百分比表表格寬度 height 像素 絕對設置,像素表示表格寬度百分比 絕對設置,百分比表表格寬度 align left 表格往左靠(默認)center 表格往中靠right 表格網(wǎng)右靠 bgcolor英文/十六 表格的背景顏色 background URL 表格的背景圖片 summary字符串 用來描述表格數(shù)據(jù)說明 bordercolor英文/十六 邊框的顏色 bordercolorlight同上 邊框的亮色 bordercolordark 同上 邊框的暗色3 <table>標簽下的

15、邊框設置 屬性名稱屬性值說明 frame void不要顯現(xiàn)表格的邊線該屬性必須在border的屬性值不為0的狀態(tài)下! above只要顯現(xiàn)出表格的上邊線 below只顯現(xiàn)出表格的下邊線 hsides只顯示表格的上下邊線 vsides只顯現(xiàn)表格的左右邊線 lhs只顯現(xiàn)表格的左邊線 rhs只顯現(xiàn)表格的右邊線 border/box 會顯現(xiàn)出表格的所有邊線 rules rows 只顯示出橫行的格框線 cols只顯示出直行的格框線 all顯示全部格框線 groups 表示列組合水平部分 none不顯示任何格框線4 <tr><th><td>標簽下的常用屬性屬性名稱屬性值說

16、明 width像素絕對設置,以像素值設置寬百分比相對設置,以百分比設置寬 height像素絕對設置,以像素值設置高百分比相對設置,以百分比設置寬 bgcolor英文/十六數(shù)據(jù)欄的顏色設置 align(水平方向)left數(shù)據(jù)靠左center數(shù)據(jù)靠中right 數(shù)據(jù)靠右 valign(垂直方向) top數(shù)據(jù)靠上middle數(shù)據(jù)靠中bottom數(shù)據(jù)靠下 nowrap無在單元格中換行5 拆分與合并單元格屬性名稱屬性值說明 colspan 數(shù)字向兩邊擴展欄位 rowspan 數(shù)字向下擴展欄位6 表格的結構化、直列化、標題(1).結構化格式：<table><thead></t

17、head> -表頭區(qū)<tbody></tbody> -表體區(qū)<tfoot></tfoot> -表尾區(qū)</table>(2).直列化格式：<colgroup>.</colgroup>屬性名稱屬性值說明 alignleft 靠左 center靠中right 靠右 valigntop靠上middle靠中bottom靠下 span數(shù)字直列數(shù)目 width像素/百分比寬度個別直列設置格式:<col>功能完全和<colgroup>一樣.第2章 .表格的標題：<table><c

18、aption>.</caption></table><caption>下的屬性值有:屬性名稱屬性值說明 align top標題在表格上方 bottom 標題在表格下方7 嵌套表格的應用: 看實例.4 圖像1 背景圖案的設置格式：<body background=”URL”>2 將圖片插入到網(wǎng)頁中去格式:<img src="URL">功能:將圖片插入到網(wǎng)頁中去,單一標簽<img>下的屬性屬性名稱屬性值說明 src URL圖片的路徑圖片的注解屬性名稱屬性值說明 alt 字符串 給圖片做注解圖象大小的設

19、置屬性名稱屬性值說明 width 像素絕對設置,寬百分比相對設置,寬 height 像素絕對設置,高百分比相對設置,高圖象邊框的設置屬性名稱屬性值說明 border 數(shù)字圖象邊框文字圖象的排列屬性名稱屬性值說明 align left圖象靠左,文字靠右 right 圖片靠右,文字靠左 top 文字往上靠 middle 文字靠中 bottom 文字靠下空隙的設置屬性名稱屬性值說明 vspace 像素垂直上下兩端與物件的距離 hspace 像素水平左右兩段與物件的距離3 用圖像作為超鏈接格式:<a href="URL"><img src="URL&qu

20、ot;></a>注意點:邊框的問題.4 地圖索引格式:<map name="圖象名稱" id="圖象名稱"> <area shape="選取區(qū)塊的形狀" coords="坐標" href="URL" alt="文字說明"> </map> <img src="URL" USEMAP="#圖象名稱"> <map>聲明整張圖使用地圖鏈接方式進行連接. name,id

21、指此圖的名稱. <area>表示我們所要鏈接其中一點的區(qū)快 shape表示我們所選擇的形狀,如:rect矩形 circle圓 poly多邊形 coords 表示地圖的坐標位置!5 切片索引使用Firework來進行!用表格進行定位!6 為網(wǎng)站添加圖標<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">5 超鏈接超鏈接也叫URL中文翻譯為資源定址器.這個定址器的功能主要告訴瀏覽器根據(jù)URL的地址找到所需的資源。1 超鏈接的基本格式格式:

22、scheme:/host:post/path/filenamescheme指的是http,ftp,file,mailto,news,gopher,telnet七種host指的是IP地址或計算機名稱post指的是服務器端口path指的是文件路徑filename指的是文件名<a href=scheme:/host:post/path/filename ></a>2 超鏈接的種類一般常用的分為四種:1. http聲明 <a href=2. file聲明<a href=file:/e/images/pic.jpg>圖片</a>3. ftp聲明 &l

23、t;a href=1/>進入</a>4.mailto<a href=mailto:bnbbs>E-MAIL</a>3 相對鏈接和絕對鏈接1. index.htm2. page/index.htm3. page/top/index.htm4. ./index.htm5. ././index.htm6. ./page/index.htm4 書簽的鏈接<a>下的屬性屬性名稱屬性值說明 name字符串設置超鏈接的標記基本格式： 瞄點<a name=”音樂”></a> 鏈接點<a href

24、=”#音樂”></a>鏈接到別的網(wǎng)頁的書簽項目：基本格式： 瞄點<a name=”音樂”></a> 鏈接點<a href=”index.htm#音樂”></a>5 超鏈接事件LINK 顏色的設置基本格式：<body link=”顏色” alink=”顏色” vlink=”顏色”>link 超鏈接尚被選中的文字alink 超鏈接點選但未被放開的顏色vlink 超鏈接已被點選過的顏色6 表單表單是提供讓讀者在網(wǎng)頁上輸入，勾選和選取數(shù)據(jù)，以便提交給服務器數(shù)據(jù)庫的工具。1 表單的功能結構：主標記結構：<from>

25、</from>屬性值說明name字符串給這個表單起個名字methodget/post表單的傳輸方式actionurl傳輸目標2 文本欄、密碼欄、隱藏欄文本欄：<input type=”text” name=”欄位名稱” value=”欄位內定值” size=”欄位顯示寬度” maxlength=”欄位數(shù)據(jù)輸入最大長度” readonly=”readonly”>密碼欄：<input type=”password” name=”欄位名稱” value=”欄位內定值” size=”欄位顯示寬度” maxlength=”欄位數(shù)據(jù)輸入最大長度” readonly=”read

26、only”>隱藏性欄位：<input type=”hidden” name=”欄位名稱” value=”欄位值”>3 復選欄、單選欄多重勾選欄位：<input type=”checkbox” name=”欄位名稱” value=”內定值” checked=”checked” disabled=”disabled”>單選欄位:<input type=”radio” name=”欄位名稱” value=”內定值” checked=”checked” disabled=”disabled”>4 窗體欄位、區(qū)塊欄位窗體選項欄位設置:<select nam

27、e=”欄位名稱” size=”數(shù)字” > <option value=”選項值” selected=”selected”> <option value=”選項值”> <option value=”選項值”> </select>/分組<optgroup label="分組名稱"></optgroup>/多選multiple文字區(qū)塊的設置:<textarea cols=”設置長度” rows=”設置寬度”> </textarea>5 按鈕、圖像按鈕按鈕設置: <input

28、 type=”submit” value=”按鈕中顯示的文字”> <input type=”reset” value=”按鈕中顯示的文字”>按鈕圖像:<button name=”欄位名稱” type=”圖象形態(tài)”> <img src=”URL”> </button> 圖像按鈕:<input type="image" src="url" alt="文本">6 允許上傳文件上傳欄位:<input type="file" name="fil

29、e">7 表單加上外框和標題外 邊 框:<fieldset>.</fieldset> 標題:<legend>.</legend>7 框架瀏覽器視窗本身就是一個框架，網(wǎng)頁就是顯示在該單一的框架內，本章將介紹另一種網(wǎng)頁呈現(xiàn)的方式，那就是可將原先單一的框架分割成多個框架，且每個框架中可以分別顯示出指定的網(wǎng)頁，當然這種框架仍然是結構于單一的視窗中。1 多窗框的基本結構格式：<frameset><frame><frame><frame></frameset>功能說明:<fra

30、meset>用來設置多窗框結構的聲明<frameset>下的屬性：屬性名稱屬性值說明 cols像素設置直排的多窗框環(huán)境百分比同上 rows像素設置橫排的多窗框環(huán)境百分比同上 border像素邊框的寬度 framespacing 像素頁面與頁面的邊距屬性格式：<frameset cols=”120,80,120”><frameset cols=”20%,40%,20%”><frameset cols=”40%,*,*”><frameset rows=”120,80,120”><frameset rows=”20%,40%,2

31、0%”><frameset rows=”20%,*,*”><frame>下的屬性：屬性名稱屬性值說明 srcURL鏈接的頁面 noresizetrue允許瀏覽器自行改變框架大小false不允許 scrolling yes不管網(wǎng)頁內容的大小，都出現(xiàn)滾動條no不管網(wǎng)頁內容的大小，都不現(xiàn)滾動條auto瀏覽器自動判斷，是否需要滾動條 marginheight 像素設置垂直方向，窗體內容與邊界的距離 marginwidth 像素設置水平方向，窗體內容與邊界的距離 frameborder01不出現(xiàn)框體邊/出現(xiàn)窗體邊線屬性格式：<frame src=”URL”>&l

32、t;frame noresize> 2 嵌套多窗體設置： 格式：<frameset rows="20%,80%"><frame src="URL"><frameset cols="20%,80%"><frame src="URL"><frame src="URL"></frameset></frameset>3 多框架與超鏈接框架式網(wǎng)站的好處就是在同一張頁面可以顯示多個頁面，而且可以跟方便的進行鏈接。相關屬

33、性說明：<frame>的命名屬性：格式：<frame name=”窗體名稱”><a>超鏈接 <a href=”URL” target=”窗體名稱”>多窗體鏈接的屬性：屬性名稱屬性值說明 target _blank打開一個新建的頁面4 懸浮窗體的設置格式:<iframe></iframe>功能:設置懸浮窗框屬性名稱屬性值說明 height像素/%絕對/相對 高度 width像素/%絕對/相對 寬度其余屬性除了noresize外,其他都和frameset 一樣.8 多媒體使用Web如此流行的原因之一是可以再網(wǎng)頁上加入圖像、聲音

34、、動畫和電影文件。雖然過去對這些文件大小的限制局限了它們的作用，但是新技術（比如流技術及寬帶）已經(jīng)使多媒體網(wǎng)頁成為了可能。1 FLASH動畫的插入使用<embed>.</embed>標記插入FLASH動畫屬性值說明 srcurlflash路徑width像素/百分比flash寬度height像素/百分比flash高度wmode window使flash自身的矩形窗口來播放opaque使flash隱藏頁面上位于它后面transparent 使flash某一部分透明使用<object>.</object>標記插入flash動畫屬性值說明typeappl

35、ication/x-shockwave-flashflash類型dataurlflash路徑width像素/百分比flash寬度height像素/百分比flash高度注意：必須再使用子標簽<param>完成flash插入屬性值說明name屬性flash屬性value值flash值3 MP3音頻及WMV視頻的插入使用<embed>.</embed>標記插入FLASH動畫屬性值說明 autostarttrue/false自動/非自動播放loop數(shù)字音樂循環(huán)的次數(shù)它的前身是<bgsound src=”URL” loop=”次數(shù)”>使用<object>.</object>標記插入MP3音樂屬性值說明 namesrc(路徑)音樂路徑autoplay(true

溫馨提示

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

評論

0/150

提交評論