html標簽及標簽屬性大全(網頁制作必備知識)
總類(所有html文件都有的)
--------------------------------------------------------------------------------
文件類型 <html></html> (放在檔案的開頭與結尾)
文件主題 <title></title> (必須放在「文頭」區塊內)
文頭 <head></head> (描述性資料,像是「主題」)
文體 <body></body> (文件本體)
結構性定義(由瀏覽器控制的顯示風格)
--------------------------------------------------------------------------------
標題 <h?></h?> (?表示從1到6,有六層選擇) 數值越高字越小
標題對齊 <h? align=left|center|right></h?> 左對齊、居中對齊、右對齊
區分 <div></div>
區分對齊 <div align=left|right|center|justify></div> 左對齊、右對齊、居中對齊、兩端對齊
引文區塊 <blockquote></blockquote> (通常會內縮)
斜體 <em></em>
加粗 <strong></strong>
引文 <cite></cite> (通常會以斜體顯示)
碼 <code></code> (顯示原始碼之用)
樣本 <samp></samp>
表示一段用戶應該對其沒有什么其他解釋的文本。要從正常的上下文抽取這些字符時,通常要用到這個標簽。
并不經常使用,只在要從正常上下文中將某些短字符序列提取出來,對其加以強調,才使用這個標簽
鍵盤輸入 <kbd></kbd>
變數 <var></var>
定義 <dfn></dfn> (有些瀏覽器不提供)
地址 <address></address>
3.0 大字 <big></big>
3.0 小字 <small></small>
與外觀相關的標簽(作者自訂的表現方式)
--------------------------------------------------------------------------------
加粗 <b></b>
斜體 <i></i>
3.0 底線 <u></u> (尚有些瀏覽器不提供)
3.0 刪除線 <s></s> (尚有些瀏覽器不提供)
3.0 下標 <sub></sub>
3.0 上標 <sup></sup>
打字機體 <tt></tt> (用單空格字型顯示)
預定格式 <pre></pre> (保留文件中空格的大小)
預定格式的寬度 <pre width=?></pre>(以字元計算)
n1.0+ 向中看齊 <center></center> (文字與圖片都可以)
n1.0 閃耀 <blink></blink> (有史以來最被嘲弄的標簽)
n1.0 字體大小 <font size=?></font>(從1到7)
n1.0 改變字體大小 <font size=+|-?></font>
n1.0 基本字體大小 <basefont size=?> (從1到7; 內定為3)
n2.0 字體顏色 <font color="#
$$"></font>
連結與圖形
--------------------------------------------------------------------------------
鏈接 <a href="url"></a>
連結到錨點 <a href="url#***"></a>(如果錨點在另一個檔案)
<a href="#***"></a> (如果錨點目前的檔案)
n2.0 連結到目的視框 <a href="url" target="***"></a>
設定錨點 <a name="***"></a>
圖形 <img src="url">
圖形看齊方式 <img src="url" align=top|bottom|middle>
n1.0 圖形看齊方式 <img src="url" align=left|right|texttop|absmiddle|baseline|absbottom>
取代文字 <img src="url" alt="***"> (如果沒有辦法顯示圖形則顯示此文字)
點選圖 <img src="url" ismap> (需要cgi程式)
n2.0 點選圖 <img src="url" usemap="url">
n2.0 地圖 <map name="***"></map>(描述地圖)
n2.0 段落 <area shape="rect" coords=",,," href="url"|nohref>
3.0 大小 <img src="url" width="?" height="?">(以pixels為單位:px)
n1.0 圖形邊緣 <img src="url" border=?> (以pixels為單位)
n1.0 圖形邊緣空間 <img src="url" hspace=? vspace=?> (以pixels為單位)
n1.0 低解析度圖形 <img src="url" lowsrc="url">
n1.1 用戶端拉 <meta http-equiv="refresh" content="?; url=url">(使用端自動更新 )
n2.0 內嵌物件 <embed src="url"> (將物件插入頁面)
n2.0 內嵌物件大小 <embed src="url" width="?" height="?">
分隔
--------------------------------------------------------------------------------
段落 <p> (通常是兩個return)
3.0 段落 <p></p> (新定義成容器型標簽)
3.0 文字看齊方式 <p align=left|center|right></p>
換行 <br> (一個return)
n1.0 文字部份看齊方式<br clear=left|right|all>(與圖形合用時)
橫線 <hr>
n1.0 橫線對齊 <hr align=left|right|center>
n1.0 橫線厚度 <hr size=?> (以pixels為單位)
n1.0 橫線寬度 <hr width=?> (以pixels為單位)
n1.0 橫線比率寬度 <hr width=%> (以頁寬為100%)
n1.0 實線 <hr noshade> (沒有立體效果)
n1.0 不可換行 <nobr></nobr> (不換行)
n1.0 可換行處 <wbr> (如果需要,可在此斷行)
列舉 (可以巢狀列舉)
--------------------------------------------------------------------------------
無次序式列舉 <ul><li></ul> (<li> 放在每一項前)
n1.0 公布式列舉 <ul type=disc|circle|square>(定義全部的列舉項)
<li type=disc|circle|square>(定義這個及其後的列舉項)
有次序式列舉 <ol><li></ol> (<li> 放在每一項前)
n1.0 數標型態 <ol type=a|a|i|i|1> (定義全部的列舉項)
<li type=a|a|i|i|1> (定義這個及其後的列舉項)
n1.0 起始數字 <ol value=?> (定義全部的列舉項)
<li value=?> (定義這個及其後的列舉項)
定義式列舉 <dl><dt><dd></dl>(<dt>項目, <dd>定義)
表單式列舉 <menu><li></menu>(<li> 放在每一項前)
目錄式列舉 <dir><li></dir> (<li> 放在每一項前)
背景與顏色
--------------------------------------------------------------------------------
3.0 重復排列的背景 <body background="url">
n1.1+ 背景顏色 <body bgcolor="#
$$"> (依序為紅、綠、藍)
n1.1+ 文字顏色 <body text="#
$$">
n1.1+ 連結顏色 <body link="#
$$">
n1.1+ 看過的連結 <body vlink="#
$$">
n1.1 使用中的連結 <body alink="#
$$">
特殊字元(以下標簽需用小寫)
--------------------------------------------------------------------------------
特別符號 &#?; (其中 ? 代表 iso 8859-1 的編碼)
< < > > & & " "
注冊商標tm ?
n1.0+ 注冊商標tm ®
著作權符號 ?
n1.0+ 著作權符號 ©
表單 (通常需要與cgi程式配合)
--------------------------------------------------------------------------------
定義表單 <form action="url" method=get|post></form>
n2.0 上傳檔案 <form enctype="multipart/form-data></form>
輸入欄位 <input type="text|password|checkbox|radio|image|hidden|submit|reset">
欄位名稱 <input name="***">
欄位內定值 <input value="***">
已選定 <input checked> (適用於checkboxes與 radio boxes)
欄位寬度 <input size=?> (以字元數為單位)
最長字數 <input maxlength=?> (以字元數為單位)
下拉式選單 <select></select>
下拉式選單名稱 <select name="***"></select>
選單項目數量 <select size=?></select>
多選式選單 <select multiple> (多選)
選項 <option>
內定選項 <option selected>
文字輸入區 <textarea rows=? cols=?></textarea>
輸入區名稱 <textarea name="***"></textarea>
n2.0 輸入區換行方式 <textarea wrap=off|virtual|physical></textarea>
表格
--------------------------------------------------------------------------------
3.0 定義表格 <table></table>
3.0 表格框線 <table border></table> (有或沒有)
n1.1 表格框線 <table border=?></table>(可以設定數值)
n1.1 儲存格左右留白 <table cellspacing=?>
n1.1 儲存格上下留白 <table cellpadding=?>
n1.1 表格寬度 <table width=?> (以pixels為單位)
n1.1 寬度比率 <table width=%> (頁寬為100%)
3.0 表格列 <tr></tr>
3.0 表格列內容看齊 <tr align=left|right|center valign=top|middle|bottom>
3.0 儲存格 <td></td> (須與列并用)
3.0 儲存格內容看齊 <td align=left|right|center valign=top|middle|bottom>
3.0 不換行 <td nowrap>
n3.0 儲存格背景顏色 <td bgcolor=#
$$>
3.0 儲存格橫向連接 <td colspan=?>
3.0 儲存格縱向連接 <td rowspan=?>
n1.1 儲存格寬度 <td width=?> (以pixels為單位)
n1.1 儲存格寬度比率 <td width=%> (頁寬為100%)
3.0 表格標題 <th></th> (跟<td>一樣,不過會對中并加粗)
3.0 表格標題對齊 <th align=left|right|center valign=top|middle|bottom>
3.0 表格標題不換行 <th nowrap>
3.0 表格標題占幾欄 <th colspan=?>
3.0 表格標題占幾列 <th rowspan=?>
n1.1 表格標題寬度 <th width=?> (以pixels為單位)
n1.1 表格標題比率寬度<th width=%> (頁寬為100%)
3.0 表格抬頭 <caption></caption>
3.0 表格抬頭看齊 <caption align=top|bottom>(在表格之上/之下)
視框 (定義與控制螢幕上的特定區域)
--------------------------------------------------------------------------------
n2.0 視框格式總定義 <frameset></frameset> (取代<body>)
n2.0 視框行長度分配 <frameset rows=,,,></frameset>(pixels 或 %)
n2.0 視框行長度分配 <frameset rows=*></frameset> (* = 相對大小)
n2.0 視框欄寬度分配 <frameset cols=,,,></frameset>(pixels 或 %)
n2.0 視框欄寬度分配 <frameset cols=*></frameset> (* =相對大小)
n2.0 定義個別視框 <frame> (定義個別視框)
n2.0 個別視框內容 <frame src="url">
n2.0 個別視框名稱 <frame name="***"|_blank|_self|_parent|_top>
n2.0 邊緣寬度 <frame marginwidth=?> (「左」與「右」邊界)
n2.0 邊緣高度 <frame marginheight=?> (「天頂」與「地底」邊界)
n2.0 卷動條 <frame scrolling="yes|no|auto">
n2.0 不可改變大小 <frame noresize>
n2.0 無視框時的內容 <noframes></noframes>(如果瀏覽器不提供視框功能的話)
雜項
--------------------------------------------------------------------------------
說明 <!-- *** --> (瀏覽器不會顯示)
檔案型態聲明 <!doctype html public "-//ietf//dtd html 2.0//en">
3.0 檔案型態聲明 <!doctype html public "-//w3o//dtd w3 html 3.0//en">
可搜尋 <isindex> (指示可搜尋的索引項)
n1.0 提示 <isindex prompt="***"> (要求輸入的提示文字)
送出搜尋條件 <a href="url?***"></a> (其中的問號不是數字,而是「問號」)
基本檔案的url <base href="url"> (必須放在「文頭」區段內)
n2.0 基本視窗名稱 <base target="***"> (必須放在「文頭」區段內)
相關性 <link rev="***" rel="***" href="url"> (必須放在「文頭」區段內)
背景資訊 <meta> (必須放在「文頭」區段內)
html標簽
html標簽通常是英文詞匯的全稱(如塊引用:blockquote)或縮略語(如“p”代表paragragh),但它們的與一般文本有區別,因為它們放在單書名號里。故paragragh標簽是<p>,塊引用標簽是<blockquote>。有些標簽說明頁面如何被格式化(例如,<p>開始一個新段落),其他則說明這些詞如何顯示(<b>使文字變粗)還有一些其他標簽提供在頁面上不顯示的信息--例如標題。
關于標簽,需要記住的是,它們是成雙出現的。每當使用一個標簽--如<blockquote>,則必須以另一個標簽</blockquote>將它關閉。注意“blockquote”前的斜杠,那就是關閉標簽與打開標簽的區別。
基本html頁面以<html>標簽開始,以</html>結束。在它們之間,整個頁面有兩部分--標題和正文。
標題詞--夾在<head>和</head>標簽之間--這個詞語在打開頁面時出現在屏幕底部最小化的窗口。正文則夾在<body>和</body>之間--即所有頁面的內容所在。頁面上顯示的任何東西都包含在這兩個標簽之中。
那么讓我們建立一個簡單的范例吧,非常容易的。第一步,當然是要建立一個新的文本文件(記住,如果你在使用比較復雜的文字處理器,就應該用“純文本”或“普通文本”來保存),將它命名為“xxxx.html”。(隨便你起一個什么名字,但記住,要用英文)
然后你可以用瀏覽器將它打開,你會看見最簡單的自己做的頁面。
.<html></html>
2.<head></head>
3.<body></body>
4.<title></title>
html是英文 hypertext markup language 的縮寫,中文意思是“超文本標志語言”,用它編寫的文件(文檔)的擴展名是.html或.htm,它們是可供瀏覽器解釋瀏覽的文件格式。您可以使用記事本、寫字板或 frontpage editor 等編輯工具來編寫html文件。html語言使用標志對的方法編寫文件,既簡單又方便,它通常使用<標志名></標志名>來表示標志的開始和結束(例如<html></html>標志對),因此在html文檔中這樣的標志對都必須是成對使用的。在此教程中,我先講一下html的基本標志:
1.<html></html>
<html>標志用于html文檔的最前邊,用來標識html文檔的開始。而</html>標志恰恰相反,它放在html文檔的最后邊,用來標識html文檔的結束,兩個標志必須一塊使用。
2.<head></head>
<head>和</head>構成html文檔的開頭部分,在此標志對之間可以使用<title></title>、<script></script>等等標志對,這些標志對都是描述html文檔相關信息的標志對,<head></head>標志對之間的內容是不會在瀏覽器的框內顯示出來的。兩個標志必須一塊使用。
3.<body></body>
<body></body>是html文檔的主體部分,在此標志對之間可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等等眾多的標志,它們所定義的文本、圖像等將會在瀏覽器的框內顯示出來。兩個標志必須一塊使用。<body>標志中還可以有以下屬性:屬性
用途
示例
<body bgcolor="#rrggbb"> 設置背景顏色。 <body bgcolor="red">紅色背景
<body text="#rrggbb"> 設置文本顏色。 <body text="#0000ff">藍色文本
<body link="#rrggbb"> 設置鏈接顏色。 <body link="blue">鏈接為藍色
<body vlink="#rrggbb"> 設置已使用的鏈接的顏色。 <body vlink="#ff0000">
<body alink="#rrggbb"> 設置正在被擊中的鏈接的顏色。 <body alink="yellow">
說明:以上各個屬性可以結合使用,如<body bgcolor="red" text="#0000ff">。引號內的rrggbb是用六個十六進制數表示的rgb(即紅、綠、藍三色的組合)顏色,如#ff0000對應的是紅色。此外,還可以使用html語言所給定的常量名來表示顏色:black、white、green、maroon、olive、navy、purple、gray、yellow、lime、agua、fuchsia、silver、red、blue和teal,如<body text="blue">表示<body></body>標志對中的文本使用藍色顯示在瀏覽器的框內。
4.<title></title>
使用過瀏覽器的人可能都會注意到瀏覽器窗口最上邊藍色部分顯示的文本信息,那些信息一般是網頁的“主題”,要將您的網頁的主題顯示到瀏覽器的頂部其實很簡單,只要在<title></title>標志對之間加入您要顯示的文本即可。注意:<title></title>標志對只能放在<head></head>標志對之間。
下面是一個綜合的例子,仔細閱讀,您便可以了解以上各個標志對在一個html文檔中的布局或所使用的位置。
例1 html文檔中基本標志的使用
<html>
<head>
<title>顯示在瀏覽器最上邊藍色條中的文本</title>
</head>
<body bgcolor="red" text="blue">
<p>紅色背景、藍色文本</p>
</body>
</html>
1.<p></p>
2.<br>
3.<blockquote></blockquote>
4.<dl></dl><dt></dt><dd></dd>
5.<ol></ol><ul></ul><li></li>
6.<div></div>
上一個教程中我們講了html文檔的基本標志,但我們還不知道怎樣在瀏覽器中顯示文本之類的東西,這正是我們在教程二中將要談到的。在學習之前,必須強調一下,我們這個教程中所講的格式標志統統都是用于<body></body>標志對之間的。
1.<p></p>
<p></p>標志對是用來創建一個段落,在此標志對之間加入的文本將按照段落的格式顯示在瀏覽器上。另外,<p>標志還可以使用align屬性,它用來說明對齊方式,語法是:<p align=""></p>。align可以是left(左對齊)、center(居中)和right(右對齊)三個值中的任何一個。如<p align="center"></p>表示標志對中的文本使用居中的對齊方式。
2.<br>
<br>是一個很簡單的標志,它沒有結束標志,因為它用來創建一個回車換行,這么一說我想您該會使用了吧。在<br>的使用上還有一定的技巧,如果您把<br>加在<p></p>標志對的外邊,將創建一個大的回車換行,即<br>前邊和后邊的文本的行與行之間的距離比較大,若放在<p></p>的里邊則<br>前邊和后邊的文本的行與行之間的距離將比較小,您不妨試試看。
3.<blockquote></blockquote>
在<blockquote></blockquote>標志對之間加入的文本將會在瀏覽器中按兩邊縮進的方式顯示出來。
4.<dl></dl><dt></dt><dd></dd>
<dl></dl>用來創建一個普通的列表,<dt></dt>用來創建列表中的上層項目,<dd></dd>用來創建列表中最下層項目,<dt></dt>和<dd></dd>都必須放在<dl></dl>標志對之間。看一下下邊的例子您就會明白了:
例2 創建一個普通列表
<html>
<head>
<title>一個普通列表</title>
</head>
<body text="blue">
<dl>
<dt>中國城市</dt>
<dd>北京 </dd>
<dd>上海 </dd>
<dd>廣州 </dd>
<dt>美國城市</dt>
<dd>華盛頓 </dd>
<dd>芝加哥 </dd>
<dd>紐約 </dd>
</dl>
</body>
</html>
此例在瀏覽器中的顯示如下:
中國城市
北京
上海
廣州
美國城市
華盛頓
芝加哥
紐約
5.<ol></ol><ul></ul><li></li>
<ol></ol>標志對用來創建一個標有數字的列表;<ul></ul>標志對用來創建一個標有圓點的列表;<li></li>標志對只能在<ol></ol>或<ul></ul>標志對之間使用,此標志對用來創建一個列表項,若<li></li>放在<ol></ol>之間則每個列表項加上一個數字,若在<ul></ul>之間則每個列表項加上一個圓點。請看下邊的例子:
例3 標有數字或圓點的列表
<html>
<head>
<title></title>
</head>
<body text="blue">
<ol>
<p>中國城市 </p>
<li>北京 </li>
<li>上海 </li>
<li>廣州 </li>
</ol>
<ul>
<p>美國城市 </p>
<li>華盛頓 </li>
<li>芝加哥 </li>
<li>紐約 </li>
</ul>
</body>
</html>
此例在瀏覽器中的顯示如下:
中國城市
北京
上海
廣州
美國城市
華盛頓
芝加哥
紐約
6.<div></div>
<div></div>標志對用來排版大塊html段落,也用于格式化表,此標志對的用法與<p></p>標志對非常相似,同樣有align對齊方式屬性,讀者可以自己試試看。
html標簽的用法=======================================================================================
一、基本概念:
網頁、網站、瀏覽器、ie/netscape
html:超文本標記語言,什么是超文本、什么是標記語言。
html的內容怎樣顯示出來。
二、html語法:
<html></html>
<head></head>
<title></title>
<body></body>
三、<body>的一些屬性:
什么是屬性:
text:設定整個網頁中文字的色彩
link:用于設定一般超鏈接文本的顯示色彩
alink:用于設定鼠標移動到超鏈接上并按下鼠標是超文本的顯示色彩
vlink:設置訪問過的超鏈接的色彩
background:設定背景圖片,可以是絕對路徑也可以是相對路徑。
bgcolor:用戶設定背景色,當已設定background時這個屬性會失去作用
leftmargin:左邊距
topmargin:上邊距
四、注釋與特殊字符:
<!--.........-->
注釋的內容不會被顯示出來
注釋不能被嵌套。
< <
> >
& &
" '
注冊符號
版權符號
" tm
空格
五、格式標簽
<p></p>:用來創建一個段落,可以用align屬生來設置段落的對齊方式
<br />:單標記直接在“>“前加一個“/ ”表示結束標記,顯示一個換行
<center></center>:對之間的圖形或文本在水平方向居中顯示
<marquee></marquee>:移動圖片或文本。direction屬性:內容的移動方向(left,right,down,up);behavior:指定內容的移動行為(scroll,alternate,slide)
<dl></dl><dt></dt><dd></dd>:用來創建一個普通列表。
<ol></ol><ul></ul><li></li>:<ol></ol>創建一個標有數字的列表;<ul></ul>對創建的列表標有一個圓點;<li></li>只能在<ol></ol>或<ul></ul>之間使用,表示列表項
<pre></pre>:對文本進行預格式處理
六、文本標簽:
<h1></h1>......<h6></h6>:把文本以標題方式顯示。
<b></b><i></i><u></u>:分別對應粗體,斜體,下劃線
<sub></sub><sup></sup>:分別對應下上標的顯示
<cite></cite>:引用方式的字體,通常是斜體
<em></em>:顯示需要強調的文本,通常是斜體加粗
<strong></strong>:用來顯示加重文本,通常是加粗顯示
<font></font>:對字體、字號、顏色進行改變。face屬性:字體;size屬生:大小; color屬生:色彩
七、圖像標簽:
<img />
src屬性:必不可少,用來設置圖像文件所在位置。
alt屬性:當鼠標移到圖像上顯示的提示文本,當圖像無法顯示時,所顯示的代替文字
align屬性:設置圖像與周圍文本的對齊方式。top,bottom,left,right
border屬性:設置圖像的邊框寬度
width和height:設置圖像的長寬高
<hr />:在html文檔中加入一條水平線。
size:線的粗細
color:線的色彩
width:線的長度
noshade:陰影顯示
八、超鏈接標簽:
通一資源定位符:url;
如:http://www.sina.com
http:所使用的協議;www.baidu.com:要訪問的主機名;80:端口號
<a href=""></a>:把中間標記的內容作為超鏈接顯示,href的內容作為超連接點擊后轉向的頁面。
如: <a href="http://www.baidu.com">新浪網</a>
<a href="http://www.sina.com<img src="image/hy.gif"></a>
href屬性是不可少的;
target屬性:指明在瀏覽器的哪個窗口打開新頁面。
<a name="">:錨點標記,在同一網頁中設置多個錨點便于超鏈接的瀏覽。
如: <a href="#標記1">跳轉到第一個標記上</a>
mailto:打開電子郵件:
<a href="mailto:ldc_5588@163.com subject=hello&body=您好">聯系我們</a>
九、<map name=""></map>:圖像地圖將一個圖像分成多個部分,各部分分別指向不同的鏈接。
<area shape="形狀" coords="坐標" href="url">:給圖像分塊
shape屬性可以是以下幾種形狀:
rect:矩形,此時的coords為矩形的左上角個右下角的坐標
poly:多邊形,此時的coords為多邊形的各個頂點
circle:圓,此時coords為圓習坐標及半徑
如:
<img src="chinagif" usemap="mymap" />
<map name=mymap>
<area shape="rect" href="a.html" coords="140,20,280,60">
<area shape="poly" href="b.html" coords="100,100,180,80,200,400">
<area shape="circle" href="c.html" coords="10,100,60">
</map>
十、表格標簽:<table></table><tr></tr><td></td>
這三個標簽的層次結構:
<table></table>:定義一個表格的開始和結束
<tr></tr>:定義一行的開始和結束
<td></td>:定義一個單元格的開始和結束
<table></table>的屬性:
bgcolor:設置表格的背景色彩
border:設置表格的邊框的寬度
bordercolor:設置表格邊框色彩
bordercolorlight:設置表格邊框明亮部分的色彩
bordercolordark:設置表格邊框昏暗部分的色彩
cellspacing:設置單元格之間的間隔
cellpadding:設置單元格內部的內容與邊框的間隔
width:表格的寬度
height:表格的高度
<tr></tr>
align:整行單元格的內容水平對齊方式left,center,right。
valign:整行單元格的內容豎直對齊方式top middle,bottom
bgcolor:設置這一行的色彩
<td></td>
width:單元格的寬度(大小)
height:單元格的高度
align:單元格內部內容的水平對齊方式
valign:單元格內部內容的豎直對齊方式
colspan:設置一個單元格跨占的列數
rowspan:設置一個單元格跨占的行數
nowrap:禁止單元格內的內容自動換行
<th></th>與<td></td>類似只不過里面顯示的內容是黑體居中的
十一、框架標簽<frameset></frameset><frame></frame>:
什么是框架:將一個窗口分割成多部分,每一部分顯示一個獨立的頁面。
框架只是分割窗口。
<frameset></frameset>定義一個框架集:
rows:將窗口豎直拆分時窗口的大小比例
cols:將窗口水平拆分窗口的大小比例
<frame></frame>定義一個具體的框架窗口:
src:要顯示網頁的url
name:框架窗口的名子
taget:該框架中的超鏈接默認的打開窗口_blank,_parent,_self,_top。
scrolling:是否在框架邊上出現滾動條yes,no,auto
noresize:禁止用戶拖動分隔線來調整框架的大小,直接將該屬生放入就可以了。
<iframe></iframe>在一個網上插入一個簡單的框架窗口,這個窗口用來顯示另一個文件。
name:框架窗口的名子
src:框架窗口中所顯示的新的網頁
十二、表單標簽:
什么時表單?
<form></form>:定義表單的開始和結束位置<略講>
action:處理表單內容的服務器程序的url
method:提交給服務器處理表單信息的方式
get:將表單信息以url參數的形式附在action的url后面
set:將表單信息以http消息實體發送給web服務器
target:設置服務器返回結果顯示的窗口
title:當鼠標放在表單上的時候以黃色的泡泡進行提示
<input type="submit">:定義一個提交按鈕
action:指定url所指定的服務器程序
value:按鈕上的文字
<input type="reset">:定義一個重新填寫的按鈕。
value:按鈕上的文字
<input type="text">:定義一個單行文本框
size:輸入區域的寬度,以字符個數為單位
value:文本框的內容
maxlength:用戶能夠輸入的最大字符串長度
readonly:屬性存在時,文本框可以獲得焦點,但用戶不能更改里面的內容。
disable:屬性存在時,文本框不能獲得焦點,也不能更改里面的內容。
<input type="checkbox">:定義一個復選框
name:復選框的名,同一組復選框用同一個名子
checked:該復選框是否被選中
value:指定復選框被選中時,這個復選框的后臺值
<input type="radio">:定義一個單選按鈕
name:單選按鈕的名,同一組單選按鈕用同一個名子
value:指定單選按鈕被選中時,這個單選按鈕的后臺值
<input type="hidden">:在表單上添加一個隱式的字段的元素,瀏覽器不會顯示這個字段
name:名子
value:值
當表單提交的時候會以name=value的形式提交到服務器上去。
<input type="button">:在表單上定義一個普通的按鈕,這個按鈕通常與某個腳本代碼下關聯
<input type="password">:在表單上定義一個密碼輸入區域.
<input type="file">:用來從本機向服務器傳文件
<input type="image">:在表單上創建一個圖像元素。
圖像的源文件由src屬性來指定,它沒有value屬性。
圖像元素在某些情況下可以代替submit按鈕來使用
單擊圖像元時就會將表單信息和單擊處的x,y值一起發送到服務器
<select></select>創建一個下拉列表框或可以復選的列表框。
size:設置列表框中可見選項的數目。默認值是1,這時顯示的是下拉列表框。
mutiple屬性:這是一個不且賦值的屬性,定義列表框是否可以多選。
在列表框中定義各項是用<option></option>來實現的。
<option></option>為列表框中添加項目
value:項目的后臺值
selected:指定項目是否被選定
<textarea></textarea>創建一個可輸入多行文本的文本框
cols:文本框的列數
rows:文本框的列數
十三、分區標簽:
<div></div>:區域標簽,層
<span></span>:區域標簽
十四、頭元素:
<base>標簽:用于指定網頁中超鏈接的基準地址。網頁中所有超鏈接的相對地址都以該地址為基準地址。
該標簽只能放在<head></head>標簽之間。
如:<base href="http://www.sina.com/image" target="_blank">
<meta>標簽:通常用于文件的<head></head>之間。主要有兩種類型的<meta>,它們用不同的屬性名(name,http-equiv)來劃分。
name屬性主要用于在網頁中加入一些關于網頁的描述信息,例如,網頁的關鍵字,網頁的描述信息等
http-equiv屬性主要用于在html文檔中模擬http頭。
什么是http頭?
通過訪問網頁時,服務器除了返回網頁文件本身的內容(也就是在瀏覽器中用查看源文件能看到的東西)之外,它還在返回網頁文件內容之前,傳送一部分被稱為http頭的內容給瀏覽器,這部分肉容是在瀏覽器的查看源文件中看不到的。http頭的內容相當于服務器發送給瀏覽器的一些暗號指令,通知瀏覽器查看該網頁時應使用的字符編碼、是否本地緩存、網頁的到期時間、是否間隔一定時間以后刷新頁面或跳到其它頁面等。
name屬性的設置:
keywords:網頁的關鍵字,以便于在搜索引擎中進行收集信息。
<meta name="keywords" content="軟件工程師培訓,清華it,華育國際">
description:網頁描述信,以便于搜索。
generator:用于編輯此頁所用的工具名,content中填入所用的網頁編輯軟件。
author:用于說明網頁的作者,content中填入作者的姓名。
copyright:用于版權聲明,content中填入你的版權聲明。
http-equiv屬性設置:
content-type:用于說明網頁內容的類型以及文本內容所使用的字符集編碼。
<meta http-equiv="content-type" content="text/html;charset=gb2312">
refresh:告訴瀏覽器定時自動刷新網頁
<meta http-equiv="content-type" content="1;url=http://www.baidu.com">
通知瀏覽器過一秒后跳轉到新浪網上去。
expires:用于設定網頁的到期時間。為了提高效率,瀏覽器可以被設置成緩存以前訪問的頁面,當再次訪問該頁面時,瀏覽器不會再去服務器上訪問,而是直接在本地緩存中讀到。如果將其content設為0則禁止瀏覽器使用緩存頁面。
<meta http_equiv="expires" content=""mon,12,may,2007 00:00:00 gmt>
windows-target:強制頁面在某個窗口顯示。例如要防止別人把你的網頁作為frame頁面調用:
<meta http-equiv="windows-target" content="_top">