TML基本標簽,即超文本標記語言(HyperText Markup Language)。
標簽是由小于號(<)+中間字符+大于號(>)組成的代碼(英文字符)組成的,主要是用來標記內容模塊的,也可以用來標明元素內容的意義。標簽一般使用尖括號包圍,例如:、,這兩個標簽都是表示一個HTML文件。
作用是給用戶展示特定內容或是告訴瀏覽器與搜索引擎關于網頁的部分信息。
單標簽<只有開始標簽;雙標簽開始標簽和結束標簽成雙出現;"/”:網頁上如果某個標簽的小于號后面有此符號的即為結束標簽,沒有此符號的則為雙標簽 的專業術語稱為注釋標簽。
我們可以將一行代碼的作用、含義、意圖等信息寫在這四個減號中間,讓自己后期能夠看懂之前寫的什么。
標簽的使用有兩種形式,一種是成對出現的標簽,另一種是段度出現的標簽。無論是哪種標簽,都不能含有空格。
1、成對式標簽成對式標簽也是包含開始標簽和結束標簽的形式。比如,前端布局中常用的網頁內容,這是一個標準的成對出現的標簽。起始標記標志代表內容段的開始,而結束標記則代表內容段的結束。
2、雖然不是所有的開始標簽都要有對應的結束標簽,但是最好都有,這樣網站頁面更容易閱讀,也更容易需要更改。如果開始標記和結束標記之間沒有內容,可以寫成。
3、標簽屬性的定義
和元素相關的特性就是屬性,可以為屬性賦值。正常情況下,可以不使用引號來包含屬性值,這時候屬性值應該包含數字、字母、符號。使用引號可以更好的表現,因為這符合W3C的標準,并且可以順利的鏈接未來的標準。
4、大小寫規范
項目名稱及屬性均不分大小寫,但仍建議使用者標簽以大寫字母為主,屬性以小寫字母為主,以便于瀏覽及了解。
5、基本標簽:
(1)段落標簽
在html中如果你輸入兩段話,那么他顯示的還是顯示在一行上,這個時候就需要我們在分段的地方加上 段落標簽 才能正常換行
(2)標題字
標題字就像我們的word文章標題一樣,需要明確那些文字是標題
(3)換行符
輸入一段話我們想要在某一段在下一行顯示,那么就需要進行換行。
(4)水平線
我們常常用一條線來分割上下文,那么就會用到 水平線 這個標簽
(5)預留格式
當我們在html頁面中寫如一些東西的時候他往往不會按照你輸入的格式來,那么就需要用到 預留格式 這個標簽
(6)粗體字 斜體字 插入字 刪除字
粗體字 粗體字
斜體字 斜體字
插入字 插入字
刪除字 刪除字 就是刪除字中間有一條橫線
(7)右上角加字 右下角加字
右上角加字: 102
右下角加字: CO2
(8)字體標簽
有些時候我們想在一些文字加上一些修飾,那么就需要用到字體標簽有些時候我們想在一些文字重點強調加上修飾。效果如下:有些時候我們想在一些文字重點強調,加上修飾。
<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.jungjaehyung.com/uploadfile/2024/0807/20240807031144623.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頁面調用:
.h1-h6標簽
都是標題標簽,定義一段話的標題,h1最大,依次遞減,h6最小
標題標簽的作用:讓文本加粗顯示
2. 段落標簽:p標簽
用來顯示一段文本(圖片),它會忽略源代碼中的排版
塊元素:獨占一行的元素,和相鄰的元素不能共享同一行,所有的塊元素都有align屬性,h1-h6和p元素都是塊元素
3. 格式標簽:
b標簽:加粗文本
del標簽:包含的文本中間有條橫線
em標簽:包裹的文本會顯示為斜體
i標簽:包裹的文本會顯示為斜體
pre標簽:顯示源代碼的排版
strong標簽:和em作用一樣,都有強調的意思,如果要強調一段文字,建議使用strong標簽
u標簽:給文本添加下劃線
sup:定義上標文本
sub:定義下標文本
4. 圖片標簽img,用來把圖片顯示在網頁上
必須屬性:1.src:圖片的路徑(可以用相對路徑或絕對路徑,不建議用絕對路徑)
alt:定義圖片無法顯示時的代替文本
相對路徑:以當前文件所在的位置為參考路徑,定義出來的路徑叫相對路徑
絕對路徑:文件在硬盤上的物理路徑叫絕對路徑,
例如:
D:\work181129JAVA班\課件-web前端課件\web-day1\Code\web-day1\img\tly.jpg
可選屬性:
1.title:鼠標放在圖片上時的提示文字,所有元素都有title屬性
2.width:定義圖片的寬度,默認以像素px為單位,可以省略單位不寫
3.height:定義圖片的高度
br標簽:換行標簽,可以寫成<br>或者<br/>
hr標簽:水平線標簽,可以寫成<hr>或者<hr/>,屬性有:width(寬度),size(高度),color(顏色)
5. span:通常用于修飾文本,可以給它添加樣式,例如style="color: red;"
div:把文檔分割成若干個獨立的部分 ,塊級元素
6. ul定義無序列表,type屬性定義列表項目的標記,默認是disc
type="disc" 默認黑色圓點
type="circle" 空心圓點
type="square" 方塊
ol定義有序列表,type屬性定義項目的標記,默認是數字
type="A"或"a":表示大寫字母或者小寫字母
type="I"或type="i":表示羅馬大寫字母或羅馬小寫字母
7. border:定義表格的邊框屬性
cellspacing:單元格之間的距離,設置為0則只有1條邊框了
cellpadding:單元格的內容到邊框之間的距離
8. 表頭:表格中的第一行,用來顯示列標題的,使用th定義表頭的每一列,把里面的內容加粗居中顯示
通常,第一行是表頭行,從第二行開始就是數據行(顯示具體的數據),
使用td(table data cell )表示數據行每一列
表格的align="center":讓表格整體居中顯示
tr(table row)的align="center":讓行里面的內容居中顯示
caption:定義表格的標題,會相當于表格居中
9. colspan:跨列,即在水平方向上合并單元格,值是要合并的單元格數目
rowspan:跨行,即在豎直方向上合并單元格,值是要合并的單元格數目
10. form:表單標簽,用于創建一個表單,收集用戶輸入的數據,并提交給服務器程序
屬性:action:指定將表單的數據發送到哪個服務器程序
method:指定用哪種方式來提交數據,常用值有GET,POST,默認值是get
表單域:又叫表單元素,作用是收集用戶輸入的數據 ,并提交給服務器端程序
常用的表單域:1.input元素:它的type屬性有不同值,表現出不同形態
type="text":表示文本框,提供文本的輸入
type="radio":單選框(單選按鈕), 多個單選框的name值必須相同,如果name不同則不能互斥,提交時是提交value值
type="checkbox":復選框,當name相同時,可以提交多個值(value屬性的值)
type="file"":文件域,讓用戶選擇本地文件上傳到服務器
type="hidden":隱藏域,對用戶不可見的元素,可以有默認值并且能提交給服務器(在javaEE開發中會大量使用隱藏域)
2. select元素:表示下拉列表,又叫下拉框,在下拉列表中用option元素定義待選擇的選項,默認第1個選項被選中,
設置某個option被選中: 在option元素上添加selected="selected"或者selected
設置下拉列表為多選下拉列表:在select元素上加multiple屬性
關于選中元素的設置:
1)設置單選框或復選框被選中的屬性是checked
2)設置下拉列表的某個選項被選中的屬性是selected
11. body標簽:
1.background:定義網頁的背景圖片,如果背景圖片很小,會自動在水平和豎直方向上平鋪展示
2.bgcolor:定義網頁的背景顏色
12. textarea:文本域,又叫多行文本框,cols是文本區內的寬度,rows:行數
placeholder:用來設置單行文本框(不是textarea)里的默認提示文字,當輸入了新的內容后,該提示文字就消失了
label:本身沒有什么效果,當結合單選按鈕或復選框使用時,如果label的for屬性和按鈕的id相同,則點擊
label后就相當于點擊了按鈕,會將單選框或復選框選中
表單按鈕:
1.提交按鈕: <input type="submit">,提交按鈕作用是將表單數據發送到action指定的服務器上
2.重置按鈕: <input type="reset">,作用是將表單中數據清空
3.普通按鈕:<input type="button">,普通按鈕在沒有添加js代碼情況下,是不能提交表單的
13. frameset:框架集,用于將整個瀏覽器窗口劃分成多個小窗口,每個小窗口稱為一個frame,每個小窗口(frame)都可以,加載一個獨立的html文檔
使用frameset的cols或rows屬性定義如何分割整個大窗口,
cols:定義水平方向上分割的各個frame的百分比,
rows:定義豎直方向上分割的各個frame的百分比,
noresize:不能調整frame的寬或高 frameborder="0":去掉frame的邊框
*代表剩余百分比,會自動計算
使用frame來定義每個小窗口,src指frame所加載的網頁的相對路徑
14. iframe:能夠包含其它文檔(網頁)的內聯框架,內聯就是行內,因為它能和相鄰的元素共享同一行
src:要加載的文檔的路徑 width:寬度,height:高度
frameborder:邊框,0或no代表無邊框
15. 將超鏈接所跳轉的頁面顯示在iframe的技巧:
1)給iframe元素添加一個name屬性,例如
2)超鏈接添加屬性target,值應該是iframe元素的name
16. 實體集
*請認真填寫需求信息,我們會在24小時內與您取得聯系。