HTML文檔的編寫方法_第1頁
HTML文檔的編寫方法_第2頁
HTML文檔的編寫方法_第3頁
HTML文檔的編寫方法_第4頁
HTML文檔的編寫方法_第5頁
已閱讀5頁，還剩14頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

HTML文檔的編寫方法手工直接編寫記事本等，存成.htm或.html格式使用可視化HTML編輯器Frontpage、Dreamweaver等由Web服務器（或稱HTTP服務器）一方實時動態(tài)地生成<html><head> <title>myfirstpage</title></head><body> 歡迎學習HTML語言!</body></html>HTML基本標記1頭部標記<head><head>元素出現(xiàn)在文檔的開頭部分。<head>與</head>之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。包含當前文檔的相關信息例如，標題<title>、元信息<meta>等2標題標記<title>語法：<title>……</title><title>元素定義HTML文檔的標題。一般用來說明頁面的內(nèi)容、用途等。<title>與</title>之間的內(nèi)容將顯示在瀏覽器窗口的標題欄。3元信息標記<meta>說明：<META>標記是用來指定HTML文件的相關信息，如作者、搜索引擎關鍵字、版權聲明、瀏覽器、編輯器、有效日期等。它不顯示在頁面中，不需要設置結束標記?？梢杂卸鄠€meta元素。HTML元素可以有自己的相關屬性，每一個屬性還可以由我們網(wǎng)頁編制者賦一定的值。元素屬性出現(xiàn)在元素的<>內(nèi)，并且和元素名之間有一個空格分隔；屬性值用“”引起來。舉例<meta>元素下面可以插入很多很有用的元素屬性。下面介紹四種：(1)設置頁面關鍵字向搜索引擎說明這一網(wǎng)頁的關鍵詞，從而幫助搜索引擎對該網(wǎng)頁進行查找和分類，提高被搜索到的幾率。<metaname=“keywords”content=“招聘求職">(2)設置作者信息<metaname=“author”content=“張三">用來標記文檔的作者。(3)設置網(wǎng)頁文字及語言使瀏覽器正確選擇語言<metahttp-equiv=“Content-Type”content=“text/html;charset=gb_2312”><metahttp-equiv=“Content-Language”content=“zh_CN”>英文為ISO-8859-1韓文為euc-kr用來標記你的頁面的解碼方式。(4)設置網(wǎng)頁的定時跳轉有時候我們會看到一些歡迎信息的界面，在經(jīng)過一段時間后，這一頁面會自動跳轉到其它頁面中，即頁面的跳轉。<metahttp-equiv=“refresh”content=“跳轉時間;URL=鏈接地址”>用來自動刷新網(wǎng)頁4頁面的主體標記<body><body>元素表明是HTML文檔的主體部分。在<body>與</body>之間，通常都會有很多其它元素，包括頁面的背景設置、文字屬性設置、鏈接設置、邊距設置等，這些元素和元素屬性構成HTML文檔的主體部分。下面介紹這些頁面主體標記的5個基本屬性。(1)頁面背景色bgcolorbgcolor屬性標志HTML文檔的背景顏色。如：bgcolor=“#??????"。<BODYbgcolor="#ccffcc"> 改變HTML文件的背景顏色 </BODY>HTML對顏色的控制也有自己的語法。HTML使用16進制的RGB顏色值對顏色進行控制。16進制的數(shù)碼有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.(2)背景圖片backgroundbackground屬性標志HTML文檔的背景圖片。恰當?shù)膱D片背景可以使頁面看上去更加生動美觀background=“圖片鏈接地址"。舉例：bgproperties=fixedbgproperties=fixed使背景圖片成水印效果，即圖片不隨著滾動條的滾動而滾動。(3)設置文字顏色texttext屬性標志HTML文檔的正文文字顏色。如：text=“#??????”。Text元素定義的顏色將應用于整篇文檔。(4)超級鏈接顏色超鏈接中以文字鏈接最多，默認情況下以藍色作為超鏈接文字的顏色，訪問過的鏈接文字則變?yōu)榘导t色。在創(chuàng)作網(wǎng)頁時可以通過link參數(shù)修改鏈接文字的顏色、vlink修改訪問過的鏈接文字的顏色、alink修改正在訪問的鏈接的文字的顏色(5)設置邊距marginleftmargin和topmargin設置網(wǎng)頁主體內(nèi)容距離網(wǎng)頁頂端和左端的距離,默認情況下以像素為單位。如：leftmargin=“20”topmargin=”30”<BODYleftmargin=100topmargin=100>HTML文檔可以插入注釋。注釋內(nèi)容不會在瀏覽器窗口顯示。適當?shù)淖⑨尶梢詭椭脩舾玫牧私饩W(wǎng)頁中各個模塊的劃分，也有助于以后對代碼的檢查與維護，是一種很好的編程習慣。HTML注釋的格式為：

<!--注釋內(nèi)容-->

<!--多行注釋內(nèi)容-->HTML文字與段落標記1標題文字標記h標題文字共含6種標記，表示6各級別的標題，從1到6依次減小。語法：<h#>...</h#>#=1,2,3,4,5,6默認情況下左對齊Align=對齊方式屬性值含義Left左對齊Center居中對齊right右對齊2文字格式標記font文字屬性標記(1)文字顏色（回顧body的bgcolor,text）指定顏色<fontcolor=#>...</font>#=RRGGBB16進制數(shù)碼(2)文字字體<fontface=“#,#,...,#”>...</font>

#=客戶端可獲得的（瀏覽器支持的）字體默認情況下使用第一個，如果不存在，使用第二個代替，類推。(3)文字大小<fontsize=#>...</font>#=1,2,3,4,5,6,7默認文字大小是3<strong>粗體的文字</strong><b>粗體的文字</b><em>斜體的文字</em><i>斜體的文字</i><cite>斜體的文字</cite><u>帶下劃線的文字</u><sup>上標</sup><sub>下標</sub><s>刪除線</s>等寬文字標記常用于英文效果<code>文字</code><samp>文字</samp>瀏覽器將句子中的所以半角空白僅當作一個看待。若要保留空白效果需要用全角空格，或者通過空格碼來代替?？崭?nbspWord中……(1)行的控制HTML想換行的話，要用到一個元素，即<br>元素。<br>元素可以使所在的位置出現(xiàn)換行。這種換行和瀏覽器的自動換行的效果類似。<br>元素不是成對出現(xiàn)的。換行<br>不換行<nobr>(2)段落標記段(Paragraph)(可以看作是空行)<p>居中<center>元素<center>元素是一個獨立的使所標記的字符居中的元素。它的作用與使用<p>元素里的align=“center”類似。例如：<center>居中段落</center>保留原始排版方式標記——pre<pre>……</pre>保留原始排版方式標記——blockquote<blockquote>文字</blockquote>4水平線標記hr語法：<hr>使用<hr>添加一條默認樣式的水平線 <hrsize=#>：設定線寬 <hrwidth=#>：設定線長 <hralign=#>：設定對齊方式#=left,right <hrcolor=#>：設定線的顏色 <hrnoshade>：去掉水平線陰影5其他標記文字標注標記——ruby<ruby>被說明的文字<rt>文字的標注</rt></ruby>聲明變量標記——var<var>文字</var>忽視HTML標簽標記——plaintext、xmp<plaintext>或<xmp>列表1無序列表(UnorderedLists)無序列表的特征在于提供一種不編號的列表方式。無序列表是由<ul>和<li>元素定義的:<ul><li>第一項<li>第二項<li>第三項……</ul>例1：無序列表元素無序列表的默認符號是圓點。

<ul>元素有type屬性，通過定義不同的type屬性可以改變列表的項目符號。目前，type屬性的屬性值有：

<ultype=?>?=disc(圓)、circle（空心圓圈）、square（方塊）例2：例3：2有序列表(OrderedLists)有序列表元素用數(shù)字或字母作為順序號。有序列表由<ol>定義:<ol><li>sports</li> <li>drink</li> <li>friends</li></ol>例4：有序列表元素<ol>也有自己的type屬性，type屬性的屬性值有1、A、a、I、i等。例如，我們以A、B、C……作為列表的編號

例5：<ol>元素還可以定義列表的起始編號，如我們希望列表的第一個編號為5，而不是1，則需要定義<ol>元素的start屬性例6：3定義列表標記(DefinitionLists)主要用于名詞解釋，第一層是需要解釋的詞，第二層是具體的解釋。<dl><dt>名詞1<dd>解釋1 <dt>名詞2<dd>解釋2 <dt>名詞3<dd>解釋3</dl>例7：4菜單列表標記(menu)主要用于設計單列的菜單列表。在瀏覽器中的顯示和無序列表示相同的。<menu><li>第一項<li>第二項<li>第三項……</menu>例8：5目錄列表(dir)主要用于創(chuàng)建多列的目錄列表。在瀏覽器中的顯示和無序列表示相同的。<dir><li>第一項<li>第二項<li>第三項……</dir>例9：6列表的高級應用列表的簡化<dlcompact></dl>例10：設置列表文字的顏色<li><fontcolor=“顏色代碼”>列表項內(nèi)容</font></li>五超級鏈接1超級鏈接的作用所謂超級鏈接就是單擊某些文字或某個圖片時，就可以打開另外的一個畫面。如果沒有它，那便只能在每打開一個頁面時就要在地址欄內(nèi)輸入一次地址了。文字、圖片是軀體，則超級鏈接是網(wǎng)站的神經(jīng)細胞，把整個網(wǎng)站信息有序結合。超級鏈接是整個WWW應用的核心和基礎。如果沒有超級鏈接的概念，那么，我們現(xiàn)在所有的WWW的應用將不復存在。所以，對超級鏈接的掌握具有特殊重要的意義。2超級鏈接語法：<ahref=“文件名”>鏈接元素</a>或<ahref=“URL”>鏈接元素</a>3超級鏈接—文本鏈接<ahref=“鏈接地址”>鏈接文字</a>如：<ahref=“23.htm">普通超級鏈接</a>如：<ahref=“”>指向baidu的超級鏈接</a>例first.htmnext.htm設置鏈接的目標窗口語法：<ahref=“鏈接地址”target=目標窗口的打開方式>鏈接元素</a>Target值目標窗口的打開方式_parent在上一級窗口打開（框架頁面）_blank新建一個窗口打開_self在同一窗口打開，默認設置_top在瀏覽器的整個窗口打開（忽略框架）5超級鏈接——錨點(書簽)內(nèi)容特多書簽方便讀者進行內(nèi)容的跳轉可以同一頁面也可以不同的頁面建立書簽語法：<aname=“書簽名稱”>文字</a><aname=“aa"><ahref="#aa">指向本頁面錨點aa的超級鏈接</a>6超級鏈接——外部鏈接網(wǎng)站外部資源，這種鏈接一般使用絕對地址，最常使用的是URL統(tǒng)一資源定位浮http://，此外還有其他的一些格式：格式表示的含義http://采用WWW服務進入萬維網(wǎng)站點ftp://通過FTP訪問文件傳輸服務器telnet://啟動Telnetmailto://直接啟動郵件系統(tǒng)Email7超級鏈接—httpE-mail超級鏈接超級鏈接可以指向E-mail地址如：<ahref=“mailto:電子郵件地址">指向E-mail地址的超級鏈接</a>8超級鏈接—FTPFTP:文件傳輸協(xié)議在很多的FTP地址中，可以獲得許多有用的軟件和共享文件（例如……）有些需要從服務器管理員處獲得權限語法：<ahref=“ftp://……”>鏈接文字</a>9超級鏈接—TelnetTelnet常用來登錄一些BBS網(wǎng)址，也是一種遠程登錄方式。10超級鏈接—去除下劃線去掉超級連接的下劃線：style=“text-decoration:none”<ahref=“23.htm"style="text-decoration:none">鏈接下面沒有下劃線</a>超級鏈接—下載文件在瀏覽網(wǎng)頁時下載一些文件也是常有的事情，在某些網(wǎng)站中，只要單擊一個鏈接就可以自動下載文件，非常方便，這也可以使用文本鏈接來實現(xiàn)。語法：<ahref=“文件所在地址”>鏈接文字</a>例：六使用圖像1圖像格式每天在網(wǎng)上交流的計算機多不勝數(shù)，因此使用的圖像格式一定要能夠被每一個操作平臺所接受。Gif商標、新聞標題等只能處理256色Jpg圖片web的標準文件格式Jpeg照片JPEG在遠程傳送有優(yōu)勢PngPortableNetworkGraphics2添加圖像——img語法：<imgsrc=“圖像文件的地址”>絕對路徑：主頁上的文件或目錄在硬盤上的真正路徑。缺點（路徑長、改動麻煩）相對路徑：解決圖片不能正常顯示的問題“..\”上一級目錄“..\..\”上兩級目錄類推3設置圖像屬性寬、高圖像高度——height圖像寬度——width網(wǎng)頁中直接插入圖片時，大小和原圖相同語法：<imgsrc=“圖像文件的地址”height=圖像高度><imgsrc=“圖像文件的地址”width=圖像寬度>只設置高度或寬度，另一個參數(shù)會隨之改變圖像高、寬度單位是像素4設置圖像邊框默認沒有邊框，通過border屬性設置語法：<imgsrc=“圖像文件的地址”border=“邊框寬度”><!--不設置圖片的邊框--><imgsrc="pic.jpg">   <!--設置圖片的邊框為5像素--><imgsrc="pic.jpg"border="5">5圖像間距——hspacevspace語法：<imgsrc=“圖像文件的地址”hspace=“水平間距”><imgsrc=“圖像文件的地址”vspace=“垂直間距”>6設置圖像與文字的相對位置——align圖像的絕對對齊方式有：左對齊、右對齊、居中相對文字的對齊方式指圖像與一行文字的相對位置語法：<imgsrc=“圖像文件的地址”align=“相對文字的對齊方式”>Align取值表示的含義Top圖像頂部和同行的最高部分對齊Middle圖像中部和行的中部對齊Bottom圖像底部和同行文本的底部對齊Texttop圖像頂部和同行中最高文本頂部對齊Absmiddle圖像中部和同行中最大項的中部對齊Baseline圖像底部和文本的基線對齊Absbottom圖像底部和同行中的最低項對齊Left使圖像和左邊界對齊（文本環(huán)繞圖像）Right使圖像和右邊界對齊（文本環(huán)繞圖像）7圖像的提示文字——alt如果網(wǎng)絡上觀看Web站點的人使用非圖像化瀏覽器，或者為了加快瀏覽器速度關掉了圖像顯示，這時候提示文字就起作用了。當圖像沒有裝載到瀏覽器上時，就會按時添加的提示文字，下載圖像之后，當鼠標停留在圖像上方時也會顯示出提示文字。語法：<imgsrc=“圖像文件的地址”alt=“提示文字的內(nèi)容”>8圖像超鏈接<ahref=“鏈接地址”>鏈接文字</a>語法：<ahref=“鏈接地址”><imgsrc=“圖像文件的地址”></a>9圖像熱區(qū)鏈接一幅圖像可以切分成不同的區(qū)域設置鏈接，這些區(qū)域稱為熱區(qū)。因此一幅圖像可以設置多個連接地址。包含熱區(qū)的圖像也稱為映射圖像。七添加多媒體元素多媒體是一個網(wǎng)站的必備元素，使用它可以豐富網(wǎng)站效果，體現(xiàn)設計者的個性，吸引用戶的注意，突出重點。動態(tài)的文字和圖像、聲音以及動畫1設置動態(tài)文字1.1滾動文字——marquee語法：<marquee>滾動文字</marquee>可以在標記中間設置文字的字體、顏色等1.2滾動方向——direction語法：<marqueedirection=“滾動方向”>滾動文字</marquee>Up(公告欄)downleftright滾動方式——behavior語法：<marqueebehavior=“滾動方式”>滾動文字</marquee>Scroll循環(huán)滾動（默認）Slide一次Alternate來回交替1.4循環(huán)次數(shù)設置——loop語法：<marqueeloop=“循環(huán)次數(shù)”>滾動文字</marquee>滾動方式behavior=Alternate時1.5滾動速度——scrollamount語法：<marqueescrollamount=“滾動速度”>滾動文字</marquee>滾動文字每次移動的長度（像素）滾動延遲——scrolldelay語法：<marqueescrolldelay=“時間間隔”>滾動文字</marquee>1.7滾動文字的背景設置——bgcolor語法：<marqueebgcolor=“顏色代碼”>滾動文字</marquee>網(wǎng)頁中為了突出某部分內(nèi)容，常使用不同背景色來顯示。滾動文字可單獨設置背景色。1.8 滾動背景的面積——width、height語法：<marqueewidth=背景寬度height=背景高度>滾動文字</marquee>1.9設置空白空間——hspace、vspace語法：<marqueehspace=水平范圍vspace=垂直范圍>滾動文字</marquee>1.10設置背景音樂語法：<bgsoundsrc=背景音樂地址>作為背景音樂的可以是音樂文件，聲音文件等，最常用的是midi文件1.11設置播放次數(shù)語法：<bgsoundsrc=背景音樂地址loop=循環(huán)次數(shù)>如果希望無限制的循環(huán)，loop=true2添加多媒體文件2.1網(wǎng)頁中加入音頻、視頻文件，使網(wǎng)頁變得生動，但是如果要正確瀏覽嵌入了這些文件的網(wǎng)頁，就需要客戶端的計算機中安裝相應的播放軟件。語法：<embedsrc=“多媒體文件地址”width=播放界面的寬度height=播放界面的高度></embed>設置自動運行——autostart語法：<embedsrc=“多媒體文件地址”autostart=是否自動運行></embed>Truefalse2.3設置是否循環(huán)播放語法：<embedsrc=“多媒體文件地址”loop=是否循環(huán)播放></embed>Truefalse2.4將多媒體文件的聲音保留而隱藏圖像，相當于設置了背景音樂。語法：<embedsrc=“多媒體文件地址“hidden=是否隱藏></embed>Truefalse除avi媒體文件外，其它類型的媒體文件，如flash、mpeg等，方法相同。八表格的應用表格是HTML的一項非常重要的功能，利用其多種屬性能夠設計出多樣化的表格，可以說表格是網(wǎng)頁排版的靈魂。1.1建立表格添加表格(table、tr、td)語法：<table><tr><td>單元格內(nèi)容</td><td>單元格內(nèi)容</td>……</tr><tr><td>單元格內(nèi)容</td><td>單元格內(nèi)容</td>……</tr>……</table>1.2建立表格設置表格標題(caption)語法：<caption>表格的標題</caption>特殊的單元格標題單元格對表格的各種操作都要在<table></table>內(nèi)進行1.3建立表格設置表格的表頭(th)<th>表頭</th>與<td>用法類似，但是內(nèi)容是粗體顯示的2.1設置表格基本屬性

設置表格寬、高度(width、height)語法：<tablewidth=表格寬度>語法：<tableheight=表格高度>寬度：像素瀏覽器的百分比2.2設置表格基本屬性表格對齊方式(align)設置整個表格在網(wǎng)頁中的位置語法：<tablealign=“對齊方式”>Leftcenterright2.3表格邊框設置表格邊框寬度(border)默認情況下表格不顯示邊框(border=0)。清晰。語法:<tableborder=邊框寬度>2.4表格邊框設置表格邊框顏色(bordercolor)默認情況灰色。鮮明。語法：<tableborder=邊框寬度bordercolor=“邊框顏色”>2.5表格邊框設置表格內(nèi)框寬度(cellspacing)表格內(nèi)部各個單元格之間的寬度語法：<tablecellspacing=內(nèi)框寬度>2.6表格邊框

設置表格內(nèi)文字與邊框的距離(cellpadding)默認情況，表格內(nèi)文字緊貼著表格邊框，看上去非常擁擠。語法：<tablecellpadding=文字與邊框的距離值>上下左右2.7表格背景

設置表格背景顏色、圖像(bgcolor、background)語法：<tablebgcolor=“顏色代碼”>語法：<tablebackgound=“背景圖片地址”>2.8表格每行的屬性行高度<trheight=表格中某行的高度>Eg13邊框顏色<trbordercolor=顏色代碼>Eg14行背景(顏色)<trbgcolor=顏色代碼>Eg15行文字水平對齊方式<tralign=對齊方式>Eg16行文字垂直對齊方式<trvalign=對齊方式>Eg17表格標題的垂直對齊方式<trvalign=對齊方式>Eg18表格標題是特殊的行，沒有邊框。水平(align)垂直(top/bottom)2.9調整單元格的屬性單元格大小<tdwidth=單元格寬度height=單元格高度>Eg19水平跨度<tdcolspan=跨的列數(shù)>Eg20垂直跨度<tdrowspan=跨的行數(shù)>Eg21對齊方式<tdalign=水平對齊方式valign=垂直對齊方式>Eg22背景色<tdbgcolor=顏色代碼>Eg23單元格的邊框顏色<tdbordercolor=顏色代碼>Eg24單元格的亮邊框<tdbordercolorlight=顏色代碼>Eg25單元格的暗邊框<tdbordercolordark=顏色代碼>Eg26單元格的背景圖像<tdbackground=背景圖片地址>Eg27文字內(nèi)容不換行<thnowrap><tdnowrap>當表格沒有設置寬度時，整個表格的寬度會根據(jù)表格內(nèi)容進行調整，表格寬度不超過瀏覽器的寬度。當單元格內(nèi)容過長時會自動換行。Eg28。如果不希望某個單元格中的內(nèi)容自動換行，可以通過nowrap設置，超出瀏覽器寬度的內(nèi)容通過瀏覽器的滾動條來顯示。Eg293表格的結構設計表頭樣式——thead語法：<theadbgcolor=顏色代碼align=對齊方式valign=垂直對齊方式……>……</thead>一個表元素中只能有一個<thead>標記設計表主體樣式——tbody語法：<tbodybgcolor=顏色代碼align=對齊方式valign=垂直對齊方式……>……</tbody>一個表元素中只能有一個<tbody>標記設計表尾樣式——tfoot語法：<tfootbgcolor=顏色代碼align=對齊方式valign=垂直對齊方式……>……</tfoot>一個表元素中只能有一個<tfoot>標記4表格的嵌套實際應用中表格并不是單一出現(xiàn)的，往往需要在表格中嵌套其他的表格來實現(xiàn)頁面的整體布局。一般情況下使用可視化軟件實現(xiàn)布局，這樣看起來直觀，容易達到預期的目的。5層標記——div網(wǎng)頁排版的標記。與表格有相似的功能，但層能夠完成更加復雜、更加靈活的排版效果。它能將字、畫、表格等多種元素組成一個區(qū)域進行樣式的統(tǒng)一設置。語法：<divid=值align=對齊方式style=樣式class=應用的樣式類>內(nèi)容</div>Id標識層style設置層的屬性，包括層的大小范圍和起始位置class定義層使用的CSS樣式九添加表單1表單標記(1)處理程序——action真正處理表單的數(shù)據(jù)腳本或程序在action屬性里，這個值可以是程序或腳本的一個完整URL。語法：<formaction=“表單處理程序”>……</form>表單處理程序定義的是表單要提交的地址，即表單收集到的資料將要傳遞的程序地址。(2)表單名稱——name為了防止表單信息在提交到后臺處理程序時出現(xiàn)混亂，一般需要設置一個與表單功能相符的名稱，例如注冊頁面的表單可以命名為register。不同的表單盡量使用不同的名稱，以避免混亂。語法：<formname=“表單名稱”>……</form>表單名稱中不能包含特殊符號和空格。(3)傳送方法——method定義處理程序從表單中獲得信息的方式，可取值為get(默認)或post，決定表單中收集的數(shù)據(jù)用什么方式發(fā)送到服務器。語法：<formmethod=“傳送方法”>……</form>表單名稱中不能包含特殊符號和空格。Get：表單數(shù)據(jù)附加在URL之后，由用戶端直接發(fā)送到服務器，速度快，但數(shù)據(jù)不能太長。Post:表單數(shù)據(jù)與URL分開發(fā)送，用戶端計算機通知服務器來讀取數(shù)據(jù)。(4)編碼方式——enctype定義表單數(shù)據(jù)信息提交的編碼方式。語法：<formenctype=“編碼方式”>……</form>Enctype取值取值的含義Text/plain以純文本的形式傳送Application/x-www-form-urlnecoded默認的編碼形式Multipart/form-dataMIME編碼，上傳表單必須選擇該項(5)目標顯示方式——target指定目標窗口的打開方式。表單的目標窗口往往用來顯示表單的返回信息，例如是否成功提交了表單的內(nèi)容、是否出錯等。語法：<formtarget=“目標窗口的打開方式”>……</form>表單名稱中不能包含特殊符號和空格。取值：_blank、_parent、_self、_top。2添加控件 按照控件的填寫方式可以分為輸入類和菜單列表類。輸入類控件一般以input標記開始，說明這一控件需要用戶的輸入；而菜單列表類則以select開始，表示用戶需要選擇。按照控件的形式則可以將空間分為文本類、選項按鈕、菜單等幾種。在html中input參數(shù)是最常用的控件標記，包括最常見的文本域、按鈕都是采用這個標記。這個標記的語法是：<form><inputname=“控件名稱”type=“控件類型”></form>控件名稱是為了便于程序對不同控件的區(qū)分，而type參數(shù)則是確定這一個控件域的類型。Type取值取值的含義Text文字字段Password密碼域，用戶在頁面中輸入時不顯示具體的內(nèi)容，以*代替Radio單選按鈕Checkbox復選按鈕Button普通按鈕Submit提交按鈕Reset重置按鈕Image圖形域，也稱為圖像提交按鈕Hidden隱藏域，隱藏域將不顯示在頁面上，只將內(nèi)容傳遞到服務器中File文件域3輸入類的控件(1)文字字段——text網(wǎng)頁中最常見的就是文本字段的提交，例如網(wǎng)頁的用戶登錄區(qū)。Type=text,在網(wǎng)頁中一單行文本框的形式出現(xiàn)。語法：<inputtype=“text”name=“控件名稱”size=“控件長度”maxlength=最長字符數(shù)value=“文字字段的默認取值”>Size：文本框在頁面中顯示的長度Maxlength:在文本框中最多可輸入的字符數(shù)(2)密碼域——password網(wǎng)頁中有一種特殊的文本字段，他在頁面中的效果和文本字段相同，但是當用戶輸入文字時，這些文字只顯示*，這種控件即密碼域。語法：<inputtype=“password”name=“控件名稱”size=“控件長度”maxlength=最長字符數(shù)value=“文字字段的默認取值”>(3)單選按鈕——radio語法：<inputtype=“radio”name=“單選按鈕的名稱”value=“單選按鈕的取值”checked>Checked表示當前單選按鈕默認被選中，在一個單選按鈕組中只能有一個設置為選中。單選按鈕組中各個按鈕用同一個name。Value設置用戶選中該項后，傳送到處理程序中的值。(4)復選框——checkbox語法：<inputtype=“checkbox”name=“復選框的名稱”value=“復選框的值”checked>Checked表示當前復選框默認被選中，在一個選擇中可以有多個復選框為選中。(5)普通按鈕——button在提交頁面、恢復選項時常常用到按鈕。普通按鈕一般要配合腳本來進行表單的處理。語法：<inputtype=“button”name=“按鈕名稱”value=“按鈕取值”onclick=“處理程序”>Value的取值就是顯示在按鈕上面的文字，而在button中可以通過添加onclick參數(shù)來實現(xiàn)一些特殊的功能，設置當鼠標按下按鈕時所進行的處理。(6)提交按鈕——submit特殊的按鈕，不需要設置onclick參數(shù)，在單擊該類按鈕時可以實現(xiàn)表單內(nèi)容的提交。語法：<inputtype=“submit”name=“按鈕名稱”value=“按鈕取值”>Value的取值也是顯示在按鈕上面的文字，例11(7)重置按鈕——reset用來清除用戶在頁面中輸入的信息。語法：<inputtype=“reset”name=“按鈕名稱”value=“按鈕取值”>(8)圖像域——image常用在創(chuàng)建特殊效果的按鈕中，因此也常常被稱為圖像提交按鈕。語法：<inputtype=“image”src=“圖像地址”name=“圖像域名稱”>(9)隱藏域——hidden用來傳遞一些不需要在頁面中顯示的參數(shù)。當瀏覽者提交表單時，隱藏域的內(nèi)容會一起提交給處理程序。語法：<inputtype=“hidden”name=“隱藏域名稱”value=“提交的值”>(10)文件域——file在上傳文件時常常用到，它用于查找硬盤中的文件路徑，然后通過表單將選中的文件上傳。在設置電子郵件的附件、上傳頭像、發(fā)送文件時常會看到這一控件。語法：<inputtype=“file”name=“文件域名稱”>4菜單列表類的控件 (1)下拉菜單語法：<selectname=“下拉菜單的名稱”><optionvalue=“選項值”selected>選項顯示內(nèi)容<optionvalue=“選項值”>選項顯示內(nèi)容……</select>選項值是提交表單時的值。(2)列表項與下拉列表不同之處是列表項在頁面中可以顯示出幾條信息，一旦超出這個信息數(shù)量，在列表右側會出現(xiàn)滾動條，拖動滾動條可以看到所有的選項。語法：<selectname=“列表項名稱”size=“顯示的列表項數(shù)”multiple><optionvalue=“選項值”selected>選項顯示內(nèi)容<optionvalue=“選項值”>選項顯示內(nèi)容……</select>multiple表示這一列表可以進行多項選擇。5文本域標記——textarea 與文字字段的區(qū)別在于可以添加多行文字，從而可以輸入更多的文本。這類控件在一些留言板中最為常見。語法：<textareaname=“文本域名稱”value=“文本域默認值”rows=行數(shù)cols=列數(shù)></textarea>當輸入內(nèi)容超出文本框定義的高度時出現(xiàn)垂直滾動條。6id標記主要用于表示一個唯一的元素，這個元素可以是文字字段，可以是密碼域，也可以是其他的表單元素，甚至也可以定義一幅圖像、一個表格。實際應用中，表單是使用id標記最多的一類元素?；菊Z法：<id=“元素的標記名”>在運行程序時，頁面中并不顯示該id，只是將信息傳送到服務器時會同時被提交。十框架結構1窗口框架簡介框架的基本結構：框架集+具體的框架文件<html><head><title>框架頁面的標題</title><frameset><frame><frame>……</frameset></html>2設置框架集的基本屬性2.1水平分割窗口——rows將頁面沿水平方向切割，分成上下排列的多個窗口。語法：<framesetrows=“框架窗口的高度，框架窗口的高度，……”> <frame> <frame> ……</frameset>2.2垂直分割窗口——cols將頁面沿垂直方向切割，分成左右排列的多個窗口。語法：<framesetcols=“框架窗口的寬度，框架窗口的寬度，……”><frame><frame>……</frameset>2.3嵌套分割窗口在一個頁面里既有水平分割又有垂直分割的框架。<framesetrows=“框架窗口的高度，……”><frame><framesetcols=“框架窗口的寬度，……”><frame>……</frameset><frame>……</frameset>2.4設置邊框——frameborder語法：<framesetframeborder=“是否顯示”>或<frameframeborder=“是否顯示”>取值：0（隱藏）或1（顯示）2.5邊框的邊框寬度——framespacing語法：<framesetframespacing=“邊框寬度”>只能對框架集使用，對單個框架無效。2.6邊框的邊框顏色——framecolor語法：<framesetframecolor=“顏色代碼”>只能對框架集使用，對單個框架無效。3設置窗口屬性在框架結構的頁面中，每一個框架窗口都有一個顯示頁面，這個頁面稱為框架頁面。框架頁面的屬性設置都在<frame>標記里進行。3.1頁面源文件——src框架結構的各個頁面都是一個單獨的文件，而這些文件是通過src參數(shù)進行設置的。3.1頁面源文件——src語法：<framesrc=“頁面源文件的地址”>頁面的原文件可以是正常的HTML文件，也可以是一個圖片或者其他的文件。例src01.html例73.2頁面名稱——name為了便于頁面的查找和鏈接所提供的一個屬性。名稱中不允許包含特殊字符、連字符、空格等，必須使單個的單詞或字母

溫馨提示

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

評論

0/150

提交評論