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

下載本文檔

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

文檔簡介

目錄TOC\o"1-5"\h\z\o"CurrentDocument"1HTML基本結(jié)構(gòu) 1\o"CurrentDocument"2列表控制標記 4\o"CurrentDocument"3表格 6\o"CurrentDocument"4圖像 9\o"CurrentDocument"5超鏈接 10\o"CurrentDocument"6表單 12\o"CurrentDocument"7框架 13\o"CurrentDocument"8多媒體 15\o"CurrentDocument"9其他標記 161HTML的基本結(jié)構(gòu)<html><head><title>1HTML的基本結(jié)構(gòu)<html><head><title>標題</title></head><body> 根控制標記 頭控制標記 標題標記 頭控制標記(尾) 網(wǎng)頁顯示區(qū)域</body> 根控制標記(尾)</html> 根控制標記(尾).<html>...</html>根控制標記開頭和結(jié)尾成對出現(xiàn)，雙標簽.<head>...</head>頭控制標記.<title>很單純的文件標題聲明.<meta>控制標記的動態(tài)文件轉(zhuǎn)換聲明.<base>超鏈接網(wǎng)址基準參考點.Javascript和VBScript程序5.stylesheet可用來設置排版來的聲明.<link>可引用外部文件，如CSS排版樣本第1頁共17頁HTML標記.<title>…</title>設置瀏覽器的視窗標題.<body>...</body>頁面可見內(nèi)容2HTML控制標記的格式.〈標記名稱〉單一型，無設置值的。如：<br>.〈標記名稱屬性二“屬性值”〉單一型，有設置值的。如：<hrwidth=”80%”>.(標記名稱>...</標記名稱〉對稱型，無設置值。如：<title>...</title>.〈標記名稱屬性二"屬性值”>...</標記名稱〉對稱型，有設置值。如：<bodybgcolor=”red”>…</body><fontsize=”7”>...</font>3最常用的控制標記(1).跳行<br>格式：<br>無屬性設置(2).段落<p>格式：<palign="排列方式”〉...</p>屬性名稱屬性值說明alignleft往左靠(默認)center往中靠right往右靠(3).水平直線<hr>格式：<hr>屬性名稱屬性值說明size像素絕對設置，以數(shù)字表示，屬性值越大，線越粗百分比相對設置，以%表示，屬性值越大，線越粗width像素絕對設置，長度不會應視窗的改變而改變百分比相對設置，長度會隨著視窗寬度而改變noshade實體線(4).向中對齊<center>(被廢棄的標簽)格式：<center>…</center>第2頁共17頁HTML標記(5).背景色與文字設置格式：<bodybgcolor-"背景色“text-"文字顏色”〉整體頁面的邊距，行距<bodyleftmargin-”像素”topmargin-”像素”>.標題文字設置格式：<h1>...</h1><h2>…</h2><h3>…</h3><h4>…</h4><h5>…</h5><h6>…</h6>屬性名稱 屬性值 說明align left 靠左center 靠中right 靠右.特殊字符設置格式：< lt;> gt;& amp;“ quot;.在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>...</big>大字3.<del>…</del>刪除4.<ins>…</ins>修改5.<samll>…</small>小字6.<strong>…</strong>加強語氣(加粗)7.<em>…</em>加強語氣(傾斜).<font>字體控制(被廢棄的標簽)第3頁共17頁HTML標記格式：<font>...</font>屬性名稱 屬性值 說明size 0-7 字體大小color 英文或十六顏色face 字體 字體.格式化格式：<pre>...</pre>讓書寫的文字格式化！.引用文本格式：<blockquote>...</blockquote>屬性名稱屬性值說明cite url被引用的地址2列表控制標記1無序號條例式清單<皿>與<血>格式：<ul><li>...</li><li>...</li><li>...</li><li>...</li></ul>功能:<皿>無序條列清單的開始.</ul>表示結(jié)束.<li>...</li>表示一個項目.<li>的屬性屬性名稱屬性值說明typedise實心圓(默認值)circle空心圓square實心方塊2有序號條例式清單<01>與<1》格式：<ol><li>...</li><li>...</li><li>...</li><li>...</li></ol>功能:<0卜有序條列清單的開始.</ol>表示結(jié)束.第4頁共17頁HTML標記<ol>的屬性屬性名稱屬性值說明type1表示以1,2,3,4來表示a表示以a,b,c,d來表示A表示以A,B,C,D來表示i表示以i,ii,iii來表示I表示以I,II,III來表示3無序列表和有序列表的結(jié)合應用格式:<ul><li><ol><li>...</li><li>...</li><li>...</li></ol></li><li><ol><li>...</li><li>...</li><li>...</li></ol></li></ul>4敘述式清單（定義列表）格式：<dl><dt=..</dt><dd=..</dd><dd=..</dd><dd=..</dd><dt=..</dt><dd=..</dd><dd=..</dd><dd=..</dd></dl>功能:<用>敘述清單的開始<dt>表示一個項目<dd>表示一個項目下的更詳細的內(nèi)容第5頁共17頁HTML標記3表格在網(wǎng)頁中表格是一種經(jīng)常使用到得設計結(jié)構(gòu)，就像表格的內(nèi)容中可以包含任何的數(shù)據(jù)，如文字、圖像、表單、超鏈接、表格等等，所有9tml中可以使用的數(shù)據(jù)，都可以被設置在表格中，所以有關(guān)表格設置的標記與屬性頁特別多。1表格的基本格式格式：<table><tr>…<th>…</th><th>…</th><th>…</th></tr><tr><td>…</td><td>…</td><td>…</td></tr></table>功能:<table>...</table>用來聲明表格開始與結(jié)束.<tr>...</tr>用來設置表格的行.<th>...</th>用來設置標題欄位.<td>...</td>用來設置數(shù)據(jù)欄位.2<table>標簽下的屬性屬性名稱屬性值說明border像素設置表格的邊線cellspacing像素絕對設置，存儲格框線寬度百分比相對設置，存儲格框線寬度cellpadding像素絕對設置,數(shù)據(jù)與框線的距離百分比相對設置,數(shù)據(jù)與框線的距離width像素絕對設置,像素表示表格寬度百分比相對設置,百分比表表格寬度height像素絕對設置，像素表示表格寬度百分比絕對設置,百分比表表格寬度alignleft表格往左靠（默認）center表格往中靠right表格網(wǎng)右靠bgcolor英文/十六表格的背景顏色backgroundURL表格的背景圖片summary字符串用來描述表格數(shù)據(jù)說明第6頁共17頁HTML標記

bordercolor英文/十六邊框的顏色bordercolorlight同上邊框的亮色bordercolordark同上邊框的暗色3<table>標簽下的邊框設置屬性名稱屬性值說明framevoid不要顯現(xiàn)表格的邊線above只要顯現(xiàn)出表格的上邊線該屬性必須在borderbelow只顯現(xiàn)出表格的下邊線的屬性值不為0的狀hsides只顯示表格的上下邊線態(tài)下！vsides只顯現(xiàn)表格的左右邊線lhs只顯現(xiàn)表格的左邊線rhs只顯現(xiàn)表格的右邊線border/box會顯現(xiàn)出表格的所有邊線rulesrows只顯示出橫行的格框線cols只顯示出直行的格框線all顯示全部格框線groups表示列組合水平部分none不顯示任何格框線4<tr><th><td>標簽下的常用屬性屬性名稱屬性值說明width像素絕對設置，以像素值設置寬百分比相對設置，以百分比設置寬height像素絕對設置，以像素值設置高百分比相對設置，以百分比設置寬bgcolor英文/十六數(shù)據(jù)欄的顏色設置align（水平方|明left數(shù)據(jù)靠左center數(shù)據(jù)靠中right數(shù)據(jù)靠右丫己電口（垂直方向）top數(shù)據(jù)靠上middle數(shù)據(jù)靠中bottom數(shù)據(jù)靠下nowrap無在單元格中換行5拆分與合并單元格屬性名稱屬性值說明colspan數(shù)字向兩邊擴展欄位rowspan數(shù)字向下擴展欄位第7頁共17頁HTML標記

6表格的結(jié)構(gòu)化、直列化、標題.結(jié)構(gòu)化格式:<table><thead> </thead> 表頭區(qū)<tbody> </tbody> 表體區(qū)<tfoot> </tfoot> 表尾區(qū)</table>.直歹ij化格式：<colgroup>….</colgroup>屬性名稱屬性值說明alignleft靠左center靠中right靠右valigntop靠上middle靠中bottom靠下span數(shù)字直列數(shù)目width像素/百分比寬度個別直列設置格式:＜col＞功能完全和＜colgroup＞一樣.第2章表格的標題：<table><caption></caption></table>＜caption＞＞的屬性值有：屬性名稱屬性值說明aligntop標題在表格上方bottom標題在表格下方第8頁共17頁HTML標記

7嵌套表格的應用：看實例.4圖像1背景圖案的設置格式：<bodybackground="URL”>2將圖片插入到網(wǎng)頁中去格式：<imgsrc="URL”>功能:將圖片插入到網(wǎng)頁中去，單一標簽<img>下的屬性屬性名稱屬性值說明srcURL圖片的路徑圖片的注解屬性名稱屬性值說明alt 字符串圖象大小的設置屬性名稱 屬性值width 像素百分比height 像素百分比圖象邊框的設置屬性名稱 屬性值border 數(shù)字給圖片做注解說明絕對設置,寬相對設置,寬絕對設置,高相對設置,高說明圖象邊框第9頁共17頁HTML標記文字圖象的排列屬性名稱屬性值說明alignleft圖象靠左，文字靠右right圖片靠右，文字靠左top文字往上靠middle文字靠中bottom文字靠下空隙的設置屬性名稱屬性值說明vspace像素垂直上下兩端與物件的距離hspace像素水平左右兩段與物件的距離3用圖像作為超鏈接格式：<ahref="URL"><imgsrc="URL"></a>注意點:邊框的問題.4地圖索引格式：<mapname="圖象名稱〃id=〃圖象名稱〃》<areashape="選取區(qū)塊的形狀〃coords="坐標〃href=〃URL〃alt="文字說明〃》</map><imgsrc="URL"USEMAP="#圖象名稱〃》<map>聲明整張圖使用地圖鏈接方式進行連接.name,id指此圖的名稱.<area>表示我們所要鏈接其中一點的區(qū)快shape表示我們所選擇的形狀，如：rect矩形circle圓poly多邊形coords表示地圖的坐標位置??！5切片索引使用Firework來進行?。∮帽砀襁M行定位?。?為網(wǎng)站添加圖標<linkrel="shortcuticon"href="favicon.ico"type="image/x-icon”>5超鏈接超鏈接也叫URL中文翻譯為資源定址器.這個定址器的功能主要告訴瀏覽器根據(jù)URL的地址找到所需的資源。1超鏈接的基本格式第10頁共17頁HTML標記格式：scheme://host[:post]/path/filenamescheme指的是http,ftp,file,mailto,news,gopher,telnet七種host指的是IP地址或計算機名稱post指的是服務器端口path指的是文件路徑filename指的是文件名<ahref=scheme://host[:post]/path/filename>..</a>2超鏈接的種類一般常用的分為四種：http聲明<ahref=/images/logo.htm>|^^logo</a>file聲明 <ahref=file:〃/e/images/pic.jpg>圖片</a>ftp聲明 <ahref=ftp:〃1/>進入<友>mailto<ahref=mailto:bnbbs@163.com>E-MAIL</a>3相對鏈接和絕對鏈接index.htmpage/index.htmpage/top/index.htm../index.htm../../index.htm../page/index.htm4書簽的鏈接<a>下的屬性屬性名稱 屬性值 說明name 字符串 設置超鏈接的標記基本格式：瞄點<aname="音樂”>...</a>鏈接點<ahref=”#音樂”>...</a>鏈接到別的網(wǎng)頁的書簽項目：第11頁共17頁HTML標記

基本格式:基本格式:瞄點<aname="音樂”>...</a>鏈接點<ahref="index.htm#音樂”>...</a>5超鏈接事件LINK顏色的設置vlink=”顏色”〉基本格式：＜bodylink=”顏色"alink=vlink=”顏色”〉link超鏈接尚被選中的文字alink超鏈接點選但未被放開的顏色vlink超鏈接已被點選過的顏色6表單表單是提供讓讀者在網(wǎng)頁上輸入，勾選和選取數(shù)據(jù)，以便提交給服務器數(shù)據(jù)庫的工具。1表單的功能結(jié)構(gòu)：主標記結(jié)構(gòu)：＜from＞...</from>屬性 值說明name 字符串給這個表單起個名字method get/post表單的傳輸方式action url傳輸目標2文本欄、密碼欄、隱藏欄文本欄：<inputtype=”text”name=”欄位名稱“value=”欄位內(nèi)定值“size=”欄位顯示寬度”maxlength=”欄位數(shù)據(jù)輸入最大長度”readonly=”readonly”>密碼欄：<inputtype=”password”name=”欄位名稱”value=”欄位內(nèi)定值”size=”欄位顯示寬度”maxlength=”欄位數(shù)據(jù)輸入最大長度”readonly=”readonly”>隱藏性欄位：<inputtype=”hidden”name="欄位名稱”value="欄位值"〉3復選欄、單選欄多重勾選欄位：<inputtype=”checkbox”name=”欄位名稱”value=”內(nèi)定值”checked=”checked”disabled=”disabled”>單選欄位:<inputtype=”radio”name=”欄位名稱“value=”內(nèi)定值”checked=”checked”disabled=”disabled”>4窗體欄位、區(qū)塊欄位第12頁共17頁HTML標記窗體選項欄位設置:<selectname="欄位名稱“size="數(shù)字”><optionvalue=”選項值”selected=”selected”>...<optionvalue="選項值”〉…<optionvalue="選項值”〉…</select>//分組<optgrouplabel="分組名稱"></optgroup>〃多選multiple文字區(qū)塊的設置:<textareacols="設置長度"rows="設置寬度”〉</textarea>5按鈕、圖像按鈕按鈕設置:<inputtype=”submit”value=”按鈕中顯示的文字”〉<inputtype=”reset”value=”按鈕中顯示的文字”〉按鈕圖像:<buttonname=”欄位名稱“type=”圖象形態(tài)”〉<imgsrc=”URL”></button>圖像按鈕:<inputtype="image"src="url"2"="文本”>6允許上傳文件上傳欄位:<inputtype="file"name="file">7表單加上外框和標題外邊框:<fieldset>...</fieldset>標題:<legend>...</legend>7框架瀏覽器視窗本身就是一個框架，網(wǎng)頁就是顯示在該單一的框架內(nèi)，本章將介紹另一種網(wǎng)頁呈現(xiàn)的方式，那就是可將原先單一的框架分割成多個框架，且每個框架中可以分別顯示出指定的網(wǎng)頁，當然這種框架仍然是結(jié)構(gòu)于單一的視窗中。1多窗框的基本結(jié)構(gòu)格式：<frameset><frame><frame><frame>第13頁共17頁HTML標記</frameset>功能說明:<frameset>用來設置多窗框結(jié)構(gòu)的聲明<frameset>下的屬性：屬性名稱屬性值說明cols像素設置直排的多窗框環(huán)境百分比同上rows像素設置橫排的多窗框環(huán)境百分比同上border像素邊框的寬度framespacing像素頁面與頁面的邊距屬性格式：<framesetcols=”120,80,120”><framesetcols="20%,40%,20%”><framesetcols=”40%,*,*”><framesetrows=”120,80,120”><framesetrows=”20%,40%,20%”><framesetrows=”20%,*,*”><frame>下的屬性：屬性名稱屬性值說明srcURL鏈接的頁面noresizetrue允許瀏覽器自行改變框架大小false不允許scrollingyes不管網(wǎng)頁內(nèi)容的大小，都出現(xiàn)滾動條no不管網(wǎng)頁內(nèi)容的大小，都不現(xiàn)滾動條auto瀏覽器自動判斷，是否需要滾動條marginheight像素設置垂直方,向，窗體內(nèi)容與邊界的距離marginwidth像素設置水平方向，窗體內(nèi)容與邊界的距離frameborder0\1不出現(xiàn)框體邊/出現(xiàn)窗體邊線屬性格式：<framesrc=”URL”><framenoresize>2嵌套多窗體設置：格式：<framesetrows="20%,80%”><framesrc="URL"><framesetcols="20%,80%”><framesrc="URL"><framesrc="URL">第14頁共17頁HTML標記

</frameset></frameset>3多框架與超鏈接框架式網(wǎng)站的好處就是在同一張頁面可以顯示多個頁面，而且可以跟方便的進行鏈接。相關(guān)屬性說明：<frame>的命名屬性：格式：<fTamename=”窗體名稱”><a>超鏈接 <ahref=”URL”target三窗體名稱”〉多窗體鏈接的屬性：說明打開一個新建的頁面說明打開一個新建的頁面target _blank4懸浮窗體的設置格式:<iframe>..</iframe>功能:設置懸浮窗框?qū)傩悦Q 屬性值說明height像素/%絕對/相對高度width像素/%絕對/相對寬度其余屬性除了noresize外，其他都和frameset一樣.8多媒體使用Web如此流行的原因之一是可以再網(wǎng)頁上加入圖像、聲音、動畫和電影文件。雖然過去對這些文件大小的限制局限了它們的作用，但是新技術(shù)（比如流技術(shù)及寬帶）已經(jīng)使多媒體網(wǎng)頁成為了可能。1FLASH動畫的插入使用<embed>...</embed>標記插入FLASH動畫屬性值說明srcurlflash路徑width像素/百分比flash寬度height像素/百分比flash高度wmodewindow使flash自身的矩形窗口來播放opaque使flash隱藏頁面上位于它后面transparent使flash某一部分透明使用<object>...</object>標記插入flash動畫第15頁共17頁HTML標記

屬性值說明typeapplication/x-shockwave-flashflash類型dataurlflash路徑width像素/百分比flash寬度height像素/百分比flash高度注意：必須再使用子標簽＜param＞完成flash插入屬性 值 說明name 屬性 flash屬性value 值 flash值3MP3音頻及WMV視頻的插入使用＜embed＞...＜/embed＞標記插入FLASH動畫屬性autostartloop值屬性autostartloop值true/false數(shù)字說明自動/非自動播放音樂循環(huán)的次數(shù)它的前身是＜bgsoundsrc=”URL”100P=”次數(shù)”〉使用＜object＞...＜/object＞標記插入MP3音樂屬性 值 說明name src(路徑) 音樂路徑autoplay(true/false) 是否自動播放9其他標記1自動展示網(wǎng)頁內(nèi)容：格式：＜

溫馨提示

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

評論

0/150

提交評論