性為 HTML 元素提供附加信息。
HTML 屬性
HTML 標簽可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。
屬性總是以名稱/值對的形式出現,比如:name="value"。
屬性總是在 HTML 元素的開始標簽中規定。
屬性實例
HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定:
<a >This is a link</a>
更多 HTML 屬性實例
屬性例子 1:
<h1> 定義標題的開始。
<h1 align="center"> 擁有關于對齊方式的附加信息。
屬性例子 2:
<body> 定義 HTML 文檔的主體。
<body bgcolor="yellow"> 擁有關于背景顏色的附加信息。
屬性例子 3:
<table> 定義 HTML 表格。(您將在稍后的章節學習到更多有關 HTML 表格的內容)
<table border="1"> 擁有關于表格邊框的附加信息。
HTML 提示:使用小寫屬性
屬性和屬性值對大小寫不敏感。
不過,萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。
而新版本的 (X)HTML 要求使用小寫屬性。
始終為屬性值加引號
屬性值應該始終被包括在引號內。雙引號是最常用的,不過使用單引號也沒有問題。
在某些個別的情況下,比如屬性值本身就含有雙引號,那么您必須使用單引號,例如:
name='Bill "HelloWorld" Gates'
HTML 屬性參考手冊
我們的完整的 HTML 參考手冊提供了每個 HTML 元素可使用的合法屬性的完整列表:
下面列出了適用于大多數 HTML 元素的屬性:
TML 是網絡的基石。 了解這種標記語言的一些鮮為人知但有用的部分可以讓您的前端工作更輕松。 HTML 屬性提供了多種功能,可以幫助您充分利用 HTML。 它定義了 HTML 元素的附加特征或屬性。在本文中,小編將帶您了解 11 個您可能還沒有聽說過的 HTML 屬性。
此屬性允許用戶輸入多個值。 您可以將 multiple 屬性與 <input> 標簽和 <select> 標簽一起使用。 此布爾屬性僅對電子郵件或文件輸入類型有效。
在 <select> 標簽中使用 multiple 屬性
<label for="language">Select languages:</label>
<select name="language" id="language" multiple>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
<option value="Java">Java</option>
</select>
使用 multiple 屬性進行文件輸入
通過對文件輸入使用 multiple 屬性,您可以選擇多個文件(通過按住 Shift 或 Ctrl 鍵)。
<input type="file" multiple>
使用 multiple 屬性進行電子郵件輸入
通過對電子郵件輸入使用 multiple 屬性,您可以輸入以逗號分隔的電子郵件地址列表。 將從列表中的每個地址中刪除所有空格。
<input type="email" multiple>
您可以使用 contenteditable 屬性使網頁上的 HTML 內容可編輯。 這是一個全局屬性,即它對所有 HTML 元素都是通用的。
<p contenteditable="true">
在這里您可以編輯您想輸入的內容
</p>
spellcheck 屬性指定是否可以檢查元素的拼寫錯誤。 您可以對 <textarea> 元素中的文本、可編輯元素中的文本或輸入元素中的文本(密碼除外)中的文本進行拼寫檢查。
<p contenteditable="true" spellcheck="true">
在這里輸入您想拼寫檢查的內容
</p>
您可以使用下載屬性下載資源。 download 屬性告訴瀏覽器下載指定的 URL 而不是導航到它。 您可以將下載屬性與 <a> 標簽和 <area> 標簽一起使用。
注意:下載屬性僅適用于同源 URL。 它遵循同源策略的規則。
<a href="xyz.png" download="myImage">下載</a>
<input> 標簽的 accept 屬性指定用戶可以上傳的文件類型。 您可以指定一個或多個文件類型的逗號分隔列表作為其值。
接受音頻文件
<input type="file" id="audioFile" accept="audio/*">
接受視頻文件
<input type="file" id="videoFile" accept="video/*">
接受圖像文件
<input type="file" id="imageFile" accept="image/*">
接受 Microsoft Word 文件
<input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
接受 PNG 或 JPEG 文件
<input type="file" id="imageFile" accept=".png, .jpg, .jpeg">
接受 PDF 文件
<input type="file" id="pdfFile" accept=".pdf">
translate 屬性告訴瀏覽器在頁面本地化時該元素是否應該被翻譯。 它可以有 2 個值:“是”或“否”。
<p translate="no">
輸入您想翻譯或者不需要翻譯的內容
</p>
poster 屬性用于在視頻下載或用戶播放視頻之前顯示圖像。
注意:如果您不指定任何內容,則在第一幀可用之前不會顯示任何內容。 當第一幀可用時,它顯示為海報幀。
<video controls
src="http://www.示例.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>
inputmode 屬性指示瀏覽器在用戶選擇任何 input 或 textarea 元素時顯示哪個鍵盤。 此屬性接受各種值:
None
<input type="text" inputmode="none" />
Numeric
<input type="text" inputmode="numeric" />
Tel
<input type="text" inputmode="tel" />
Decimal
<input type="text" inputmode="decimal" />
<input type="text" inputmode="email" />
URL
<input type="text" inputmode="url" />
Search
<input type="text" inputmode="search" />
<input> 元素的模式屬性允許您指定一個正則表達式,元素的值將根據該正則表達式進行驗證。 您可以將模式屬性與多種輸入類型一起使用,例如文本、日期、搜索、URL、電話、電子郵件和密碼。
<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+">
</form>
autocomplete 屬性指定瀏覽器是否應根據用戶輸入自動完成輸入。 您可以將 autocomplete 屬性用于多種輸入類型,例如文本、搜索、URL、電話、電子郵件、密碼、日期選擇器、范圍和顏色。 您可以將此屬性與 <input> 元素或 <form> 元素一起使用。
<input name="credit-card-number" id="credit-card-number" autocomplete="off">
autofocus 屬性是一個布爾屬性,指示元素應該專注于頁面加載。 您可以將此屬性與 <button>、<input>、<keygen>、<select> 或 <textarea> 元素一起使用。
在 input 元素中使用 autofocus 屬性
<input type="text" autofocus>
在 select 元素中使用 autofocus 屬性
select name="languages" id="languages">
<option value="C++">
C++
</option>
<option value="Python">
Python
</option>
<option value="JavaScript">
JavaScript
</option>
<option value="Java">
Java
</option>
</select>
在 textarea 元素中使用 autofocus 屬性
<textarea autofocus>
輸入您想要顯示的內容
</textarea>
單行代碼有助于以更少的代碼實現更多的目標。 您可以像專業人士一樣使用多個 JavaScript 單行代碼來編寫代碼。
只需一行代碼,您就可以對數組進行混合、求數組的平均值、檢查數組是否為空、生成隨機十六進制顏色、生成隨機 UUID 等等。
<metahttp-equiv="Windows-Target"content="_top">
<NOBR> 取消換行 和<br>相反
總類(所有HTML文件都有的
--------------------------------------------------------------------------------
文件類型 <HTML></HTML> 放在檔案的開頭與結尾)
文件主題 <TITLE></TITLE> 必須放在「文頭」區塊內)
文頭 <HEA D></HEA D> 描述性資料,像是「主題」)
文體 <BODY></BODY> 文件本體)
結構性定義(由瀏覽器控制的顯示風格)
--------------------------------------------------------------------------------
標題<H?></H?>表示從16有六層選擇)數值越高字越小
標題對齊 <H?ALIGN=LEFT|CENTER|RIGHT></H?>左對齊、居中對齊、右對齊
區分<P></P>
區分對齊<PALIGN=LEFT|RIGHT|CENTER|JUSTIFY></P>左對齊、右對齊、居中對齊、兩端對齊
引文區塊<BLOCKQUOTE></BLOCKQUOTE>通常會內縮)
斜體 <EM></EM>
加粗 <SPONG></SPONG>
引文 <CITE></CITE>通常會以斜體顯示)
碼<CODE></CODE>顯示原始碼之用)
樣本<SA MP></SA MP>
表示一段用戶應該對其沒有什么其他解釋的文本。要從正常的上下文抽取這些字符時,通常要用到這個標簽。
并不經常使用,只在要從正常上下文中將某些短字符序列提取出來,對其加以強調,才使用這個標簽
鍵盤輸入<KBD></KBD>
變數<VA R></VA R>
定義<DFN></DFN>有些瀏覽器不提供)
地址<A DDRESS></A DDRESS>
3.0大字<BIG></BIG>
3.0小字<SMA LL></SMA LL>
與外觀相關的標簽(作者自訂的表現方式)
--------------------------------------------------------------------------------
加粗<B></B>
斜體<I></I>
3.0底線<U></U>尚有些瀏覽器不提供)
3.0刪除線 <S></S>尚有些瀏覽器不提供)
3.0下標 <SUB></SUB>
3.0上標 <SUP></SUP>
打字機體<TT></TT>用單空格字型顯示)
預定格式<PRE></PRE>保留文件中空格的大小)
預定格式的寬度<PREWIDTH=?></PRE>以字元計算)
N1.0+向中看齊<CENTER></CENTER>文字與圖片都可以)
N1.0閃耀<BLINK></BLINK>有史以來最被嘲弄的標簽)
N1.0字體大小<FONTSIZE=?></FONT>從17
N1.0改變字體大小<FONTSIZE=+|-?></FONT>
N1.0基本字體大小<BA SEFONTSIZE=?>從17;內定為3
N2.0字體顏色<FONTCOLOR="#$$$$$$"></FONT>
連結與圖形
--------------------------------------------------------------------------------
鏈接 <A HREF="URL"></A >
連結到錨點<A HREF="URL#***"></A >如果錨點在另一個檔案)
<A HREF="#***"></A >如果錨點目前的檔案)
N2.0連結到目的視框<A HREF="URL"TA RGET="***"></A >
設定錨點<A NA ME="***"></A >
圖形 <IMGSRC="URL">
圖形看齊方式<IMGSRC="URL"ALIGN=TOP|BOTTOM|MIDDLE>
N1.0圖形看齊方式<IMGSRC="URL"ALIGN=LEFT|RIGHT|TEXTTOP|A BSMIDDLE|BA SELINE|A BSBOTTOM>
取代文字 <IMGSRC="URL"ALT="***">如果沒有辦法顯示圖形則顯示此文字)
點選圖<IMGSRC="URL"ISMA P>需要CGI程式)
N2.0點選圖 <IMGSRC="URL"USEMA P="URL">
N2.0地圖 <MA PNA ME="***"></MA P>描述地圖)
N2.0段落 <A REA SHA PE="RECT"COORDS=",,,"HREF="URL"|NOHREF>
3.0大小 <IMGSRC="URL"WIDTH="?"HEIGHT="?">以pixel為單位:px
N1.0圖形邊緣 <IMGSRC="URL"BORDER=?>以pixel為單位)
N1.0圖形邊緣空間 <IMGSRC="URL"HSPA CE=?VSPA CE=?>以pixel為單位)
N1.0低解析度圖形 <IMGSRC="URL"LOWSRC="URL">
N1.1用戶端拉 <META HTTP-EQUIV="Refresh"CONTENT="?;URL=URL">使用端自動更新
N2.0內嵌物件 <EMBEDSRC="URL">將物件插入頁面)
N2.0內嵌物件大小 <EMBEDSRC="URL"WIDTH="?"HEIGHT="?">
分隔
--------------------------------------------------------------------------------
段落 <P>通常是兩個return
3.0段落 <P></P>新定義成容器型標簽)
3.0文字看齊方式 <PALIGN=LEFT|CENTER|RIGHT></P>
換行 <BR>一個return
N1.0文字部份看齊方式<BRCLEA R=LEFT|RIGHT|A LL>與圖形合用時)
橫線 <HR>
N1.0橫線對齊 <HRALIGN=LEFT|RIGHT|CENTER>
N1.0橫線厚度 <HRSIZE=?>以pixel為單位)
N1.0橫線寬度 <HRWIDTH=?>以pixel為單位)
N1.0橫線比率寬度 <HRWIDTH=%>以頁寬為100%
N1.0實線 <HRNOSHA DE>沒有立體效果)
N1.0不可換行 <NOBR></NOBR>不換行)
N1.0可換行處 <WBR>如果需要,可在此斷行)
列舉(可以巢狀列舉)
--------------------------------------------------------------------------------
無次序式列舉<UL><LI></UL><LI>放在每一項前)
N1.0公布式列舉 <ULTYPE=DISC|CIRCLE|SQUA RE>定義全部的列舉項)
<LITYPE=DISC|CIRCLE|SQUA RE>定義這個及其後的列舉項)
有次序式列舉<OL><LI></OL><LI>放在每一項前)
N1.0數標型態 <OLTYPE=A |a|I|i|1>定義全部的列舉項)
<LITYPE=A |a|I|i|1>定義這個及其後的列舉項)
N1.0起始數字 <OLVA LUE=?>定義全部的列舉項)
<LIVA LUE=?>定義這個及其後的列舉項)
定義式列舉 <DL><DT><DD></DL><DT>項目,<DD>定義)
表單式列舉 <MENU><LI></MENU><LI>放在每一項前)
目錄式列舉 <DIR><LI></DIR><LI>放在每一項前)
背景與顏色
--------------------------------------------------------------------------------
3.0重復排列的背景 <BODYBA CKGROUND="URL">
N1.1+背景顏色 <BODYBGCOLOR="#$$$$$$">依序為紅、綠、藍)
N1.1+文字顏色 <BODYTEXT="#$$$$$$">
N1.1+連結顏色 <BODYLINK="#$$$$$$">
N1.1+看過的連結 <BODYVLINK="#$$$$$$">
N1.1使用中的連結 <BODYALINK="#$$$$$$">
特殊字元(以下標簽需用小寫)
--------------------------------------------------------------------------------
特別符號 &#?;其中 ?代表 ISO8859-1編碼)
<<>>&&""
注冊商標TM?
N1.0+注冊商標TM®
著作權符號 ?
N1.0+著作權符號 ©
表單(通常需要與CGI程式配合)
--------------------------------------------------------------------------------
定義表單 <FORMACTION="URL"METHOD=GET|POST></FORM>
N2.0上傳檔案 <FORMENCTYPE="multipart/form-data></FORM>
輸入欄位 <INPUTTYPE="TEXT|PA SSWORD|CHECKBOX|RA DIO|IMA GE|HIDDEN|SUBMIT|RESET">
欄位名稱 <INPUTNA ME="***">
欄位內定值 <INPUTVA LUE="***">
已選定 <INPUTCHECKED>適用於checkbox與 radiobox
欄位寬度 <INPUTSIZE=?>以字元數為單位)
最長字數 <INPUTMA XLENGTH=?>以字元數為單位)
下拉式選單 <SELECT></SELECT>
下拉式選單名稱 <SELECTNA ME="***"></SELECT>
選單項目數量 <SELECTSIZE=?></SELECT>
多選式選單 <SELECTMULTIPLE>多選)
選項 <OPTION>
內定選項 <OPTIONSELECTED>
文字輸入區 <TEXTA REA ROWS=?COLS=?></TEXTA REA >
輸入區名稱 <TEXTA REA NA ME="***"></TEXTA REA >
N2.0輸入區換行方式 <TEXTA REA WRA P=OFF|VIRTUA L|PHYSICA L></TEXTA REA >
表格
--------------------------------------------------------------------------------
3.0定義表格 <TA BLE></TA BLE>
3.0表格框線 <TA BLEBORDER></TA BLE>有或沒有)
N1.1表格框線 <TA BLEBORDER=?></TA BLE>可以設定數值)
N1.1儲存格左右留白 <TA BLECELLSPA CING=?>
N1.1儲存格上下留白 <TA BLECELLPA DDING=?>
N1.1表格寬度 <TA BLEWIDTH=?>以pixel為單位)
N1.1寬度比率 <TA BLEWIDTH=%>頁寬為100%
3.0表格列<P></P>
3.0表格列內容看齊 <PALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>
3.0儲存格<TD></TD>須與列并用)
3.0儲存格內容看齊 <TDALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>
3.0不換行 <TDNOWRA P>
N3.0儲存格背景顏色 <TDBGCOLOR=#$$$$$$>
3.0儲存格橫向連接 <TDCOLSPA N=?>
3.0儲存格縱向連接 <TDROWSPA N=?>
N1.1儲存格寬度 <TDWIDTH=?>以pixel為單位)
N1.1儲存格寬度比率 <TDWIDTH=%>頁寬為100%
3.0表格標題 <TH></TH>跟<TD>一樣,不過會對中并加粗)
3.0表格標題對齊 <THALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>
3.0表格標題不換行 <THNOWRA P>
3.0表格標題占幾欄 <THCOLSPA N=?>
3.0表格標題占幾列 <THROWSPA N=?>
N1.1表格標題寬度 <THWIDTH=?>以pixel為單位)
N1.1表格標題比率寬度<THWIDTH=%>頁寬為100%
3.0表格抬頭 <CA PTION></CA PTION>
3.0表格抬頭看齊 <CA PTIONALIGN=TOP|BOTTOM>表格之上/之下)
視框(定義與控制螢幕上的特定區域)
--------------------------------------------------------------------------------
N2.0視框格式總定義 <FRA MESET></FRA MESET>取代<BODY>
N2.0視框行長度分配 <FRA MESETROWS=,,,></FRA MESET>pixel或 %
N2.0視框行長度分配 <FRA MESETROWS=*></FRA MESET>*=相對大小)
N2.0視框欄寬度分配 <FRA MESETCOLS=,,,></FRA MESET>pixel或 %
N2.0視框欄寬度分配 <FRA MESETCOLS=*></FRA MESET>*=相對大小)
N2.0定義個別視框 <FRA ME>定義個別視框)
N2.0個別視框內容 <FRA MESRC="URL">
N2.0個別視框名稱 <FRA MENA ME="***"|_blank|_self|_parent|_top>
N2.0邊緣寬度 <FRA MEMA RGINWIDTH=?>「左」與「右」邊界)
N2.0邊緣高度 <FRA MEMA RGINHEIGHT=?>「天頂」與「地底」邊界)
N2.0卷動條 <FRA MESCROLLING="YES|NO|A UTO">
N2.0不可改變大小 <FRA MENORESIZE>
N2.0無視框時的內容 <NOFRA MES></NOFRA MES>如果瀏覽器不提供視框功能的話)
雜項
--------------------------------------------------------------------------------
說明 <!--***-->瀏覽器不會顯示)
檔案型態聲明 <!DOCTYPEHTMLPUBLIC"-//IETF//DTDHTML2.0//EN">
3.0檔案型態聲明 <!DOCTYPEHTMLPUBLIC"-//W3O//DTDW3HTML3.0//EN">
可搜尋 <ISINDEX>指示可搜尋的索引項)
N1.0提示 <ISINDEXPROMPT="***">要求輸入的提示文字)
送出搜尋條件 <A HREF="URL?***"></a>其中的問號不是數字,而是「問號」)
基本檔案的URL<BA SEHREF="URL">必須放在「文頭」區段內)
N2.0基本視窗名稱 <BA SETA RGET="***">必須放在「文頭」區段內)
相關性 <LINKREV="***"REL="***"HREF="URL">必須放在「文頭」區段內)
背景資訊 <META >必須放在「文頭」區段內)
HTML標簽
HTML標簽通常是英文詞匯的全稱(如塊引用:blockquot或縮略語(如“p代表Paragragh但它與一般文本有區別,因為它放在單書名號里。故Paragragh標簽是<p>,塊引用標簽是<blockquote>有些標簽說明頁面如何被格式化(例如,<p>開始一個新段落)其他則說明這些詞如何顯示(<b>使文字變粗)還有一些其他標簽提供在頁面上不顯示的信息-例如標題。
關于標簽,需要記住的成雙出現的每當使用一個標簽-如<blockquote>,則必須以另一個標簽</blockquote>將它關閉。注意“blockquot前的斜杠,那就是關閉標簽與打開標簽的區別。
基本HTML頁面以<html>標簽開始,以</html>結束。之間,整個頁面有兩部分-標題和正文。
標題詞-夾在<head>和</head>標簽之間-這個詞語在打開頁面時出現在屏幕底部最小化的窗口。正文則夾在<body>和</body>之間-即所有頁面的內容所在頁面上顯示的任何東西都包含在這兩個標簽之中。
那么讓我建立一個簡單的范例吧,非常容易的第一步,當然是要建立一個新的文本文件(記住,如果你使用比較復雜的文字處理器,就應該用“純文本”或“普通文本”來保存)將它命名為“xxxx.html隨便你起一個什么名字,但記住,要用英文)
然后你可以用瀏覽器將它打開,會看見最簡單的自己做的頁面。
.<html></html>
2.<head></head>
3.<body></body>
4.<title></title>
Html英文 HyperTextMarkupLanguag縮寫,中文意思是超文本標志語言”用它編寫的文件(文檔)擴展名是.html或.htm可供瀏覽器解釋瀏覽的文件格式。您可以使用記事本、寫字板或 FrontPagEditor等編輯工具來編寫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>標志中還可以有以下屬性:屬性
用途
示例
<bodibgcolor="#rrggbb">設置背景顏色。<bodibgcolor="red">紅色背景
<boditext="#rrggbb">設置文本顏色。<boditext="#0000ff">藍色文本
<bodilink="#rrggbb">設置鏈接顏色。<bodilink="blue">鏈接為藍色
<bodivlink="#rrggbb">設置已使用的鏈接的顏色。<bodivlink="#ff0000">
<bodialink="#rrggbb">設置正在被擊中的鏈接的顏色。<bodialink="yellow">
說明:以上各個屬性可以結合使用,如<bodibgcolor="red"text="#0000ff">引號內的rrggbb用六個十六進制數表示的RGB即紅、綠、藍三色的組合)顏色,如#ff0000對應的紅色。此外,還可以使用Html語言所給定的常量名來表示顏色:BlackWhiteGreenMaroonOliveNaviPurplGraiYellowLimeAguaFuchsiaSilverRedBlue和Teal如<boditext="Blue">表示<body></body>標志對中的文本使用藍色顯示在瀏覽器的框內。
4.<title></title>
使用過瀏覽器的人可能都會注意到瀏覽器窗口最上邊藍色部分顯示的文本信息,那些信息一般是網頁的主題”要將您的網頁的主題顯示到瀏覽器的頂部其實很簡單,只要在<title></title>標志對之間加入您要顯示的文本即可。注意:<title></title>標志對只能放在<head></head>標志對之間。
下面是一個綜合的例子,仔細閱讀,您便可以了解以上各個標志對在一個Html文檔中的布局或所使用的位置。
例1Html文檔中基本標志的使用
<html>
<head>
<title>顯示在瀏覽器最上邊藍色條中的文本</title>
</head>
<bodibgcolor="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屬性,用來說明對齊方式,語法是<palign=""></p>align可以是Left左對齊)Center居中)和Right右對齊)三個值中的任何一個。如<palign="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>
<boditext="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>
<boditext="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>:移動圖片或文本。direct屬性:內容的移動方向(left,right,down,up;behavior指定內容的移動行為(scroll,alternate,slid
<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.sina.net要訪問的主機名;80端口號
<ahref=""></a>:把中間標記的內容作為超鏈接顯示,href內容作為超連接點擊后轉向的頁面。
如:<ahref="http://www.sina.com">新浪網</a>
<ahref="http://www.sina.com<imgsrc="image/hy.gif"></a>
href屬性是不可少的
target屬性:指明在瀏覽器的哪個窗口打開新頁面。
<aname="">錨點標記,同一網頁中設置多個錨點便于超鏈接的瀏覽。
如:<ahref="#標記1">跳轉到第一個標記上</a>
mailto:打開電子郵件:
<ahref="mailto:ldc_5588@163.comsubject=hello&body=您好">聯系我</a>
九、<mapname=""></map>圖像地圖將一個圖像分成多個部分,各部分分別指向不同的鏈接。
<areashape="形狀"coords="坐標"href="url">給圖像分塊
shape屬性可以是以下幾種形狀:
rect:矩形,此時的coord為矩形的左上角個右下角的坐標
poly:多邊形,此時的coord為多邊形的各個頂點
circle:圓,此時coord為圓習坐標及半徑
如:
<imgsrc="chinagif"usemap="mymap"/>
<mapname=mymap>
<areashape="rect"href="a.html"coords="140,20,280,60">
<areashape="poly"href="b.html"coords="100,100,180,80,200,400">
<areashape="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:設置單元格之間的間隔
cellpad設置單元格內部的內容與邊框的間隔
width:表格的寬度
height:表格的高度
<tr></tr>
align:整行單元格的內容水平對齊方式left,center,right
valign:整行單元格的內容豎直對齊方式topmiddle,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參數的形式附在actionURL后面
set:將表單信息以HTTP消息實體發送給WEB服務器
target:設置服務器返回結果顯示的窗口
title:當鼠標放在表單上的時候以黃色的泡泡進行提示
<inputtype="submit">定義一個提交按鈕
action:指定URL所指定的服務器程序
value:按鈕上的文字
<inputtype="reset">:定義一個重新填寫的按鈕。
value:按鈕上的文字
<inputtype="text">:定義一個單行文本框
size:輸入區域的寬度,以字符個數為單位
value:文本框的內容
maxlength:用戶能夠輸入的最大字符串長度
readonly:屬性存在時,文本框可以獲得焦點,但用戶不能更改里面的內容。
disable:屬性存在時,文本框不能獲得焦點,也不能更改里面的內容。
<inputtype="checkbox">:定義一個復選框
name:復選框的名,同一組復選框用同一個名子
checked:該復選框是否被選中
value:指定復選框被選中時,這個復選框的后臺值
<inputtype="radio">:定義一個單選按鈕
name:單選按鈕的名,同一組單選按鈕用同一個名子
value:指定單選按鈕被選中時,這個單選按鈕的后臺值
<inputtype="hidden">表單上添加一個隱式的字段的元素,瀏覽器不會顯示這個字段
name:名子
value:值
當表單提交的時候會以name=valu形式提交到服務器上去。
<inputtype="button">:表單上定義一個普通的按鈕,這個按鈕通常與某個腳本代碼下關聯
<inputtype="password">:表單上定義一個密碼輸入區域.
<inputtype="file">:用來從本機向服務器傳文件
<inputtype="image">:表單上創建一個圖像元素。
圖像的源文件由src屬性來指定,沒有valu屬性。
圖像元素在某些情況下可以代替submit按鈕來使用
單擊圖像元時就會將表單信息和單擊處的x,y值一起發送到服務器
<select></select>創建一個下拉列表框或可以復選的列表框。
size:設置列表框中可見選項的數目。默認值是1,這時顯示的下拉列表框。
mutipl屬性:這是一個不且賦值的屬性,定義列表框是否可以多選。
列表框中定義各項是用<option></option>來實現的
<option></option>為列表框中添加項目
value:項目的后臺值
selected:指定項目是否被選定
<textarea></textarea>創建一個可輸入多行文本的文本框
cols:文本框的列數
rows:文本框的列數
十三、分區標簽:
<div></div>:區域標簽,層
<span></span>:區域標簽
十四、頭元素:
<base>標簽:用于指定網頁中超鏈接的基準地址。網頁中所有超鏈接的相對地址都以該地址為基準地址。
該標簽只能放在<head></head>標簽之間。
如:<basehref="http://www.sina.com/image"target="_blank">
<meta>標簽:通常用于文件的<head></head>之間。主要有兩種類型的<meta>用不同的屬性名(name,http-equiv來劃分。
name屬性主要用于在網頁中加入一些關于網頁的描述信息,例如,網頁的關鍵字,網頁的描述信息等
http-equiv屬性主要用于在HTML文檔中模擬HTTP頭。
什么是HTTP頭?
通過訪問網頁時,服務器除了返回網頁文件本身的內容(也就是瀏覽器中用查看源文件能看到東西)之外,還在返回網頁文件內容之前,傳送一部分被稱為HTTP頭的內容給瀏覽器,這部分肉容是瀏覽器的查看源文件中看不到HTTP頭的內容相當于服務器發送給瀏覽器的一些暗號指令,通知瀏覽器查看該網頁時應使用的字符編碼、否本地緩存、網頁的期時間、否間隔一定時間以后刷新頁面或跳到其它頁面等。
name屬性的設置:
Keywords:網頁的關鍵字,以便于在搜索引擎中進行收集信息。
<metaname="keywords"content="軟件工程師培訓,清華IT,華育國際">
Descript網頁描述信,以便于搜索。
Gener用于編輯此頁所用的工具名,content中填入所用的網頁編輯軟件。
Author用于說明網頁的作者,content中填入作者的姓名。
Copyright:用于版權聲明,content中填入你版權聲明。
http-equiv屬性設置:
Content-Type:用于說明網頁內容的類型以及文本內容所使用的字符集編碼。
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
Refresh:告訴瀏覽器定時自動刷新網頁
<metahttp-equiv="Content-Type"content="1;url=http://www.sina.com.cn">
通知瀏覽器過一秒后跳轉到新浪網上去。
Expires:用于設定網頁的期時間。為了提高效率,瀏覽器可以被設置成緩存以前訪問的頁面,當再次訪問該頁面時,瀏覽器不會再去服務器上訪問,而是直接在本地緩存中讀到如果將其Content設為0則禁止瀏覽器使用緩存頁面。
<metahttp_equiv="Expires"content=""Mon,12,May,200700:00:00GMT>
Windows-Target:強制頁面在某個窗口顯示。例如要防止別人把你網頁作為frame頁面調用:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。