<html> </html> 標(biāo)志著html文件的開始與結(jié)束
<head> </head> 頭部標(biāo)志符
<title> </title> 網(wǎng)頁的標(biāo)題
<boby> </boby> 構(gòu)成web的主體
1. background 定義網(wǎng)頁的背景圖案
2. bgcolor 背景色(默認(rèn) 白)
3. text 文字顏色(默認(rèn) 黑)
4. link 超鏈接顏色(默認(rèn) 藍(lán))
5. alink 當(dāng)前被選中的超鏈接顏色(默認(rèn) 紅)
6. vlink 已被訪問過的超鏈接顏色(默認(rèn) 紫)
<font> </font> 標(biāo)志符可以控制字符的樣式
1. face 設(shè)置文字的字體效果
2. color 設(shè)置文字顏色
3. size 設(shè)置字體大小
<b></b> 粗體 <strike></strike> 刪除線
<big></big> 大字體 <sub></sub> 下標(biāo)
<i></i> 斜體 <sup></sup> 上標(biāo)
<s></s> 刪除線 <u></u> 下劃線
<small></small> 小字體
<hn></hn> 設(shè)置文件中的標(biāo)題 nj 1~6的數(shù)字
<p></p> (paragraph)劃分段落
<pre></pre> 預(yù)格式化標(biāo)志符
<hr> 換行并繪制一條水平線(沒有結(jié)束標(biāo)志符)
1. width 水平線長度
2. size 水平線粗細(xì)
3. noshade 無陰影
4. align 水平線的對齊方式(left center right)
5. color 水平線顏色
<br> 強(qiáng)制換行(沒有結(jié)束標(biāo)志符)
<ol>
<li>......</li>
<li>......</li>
.......
</ol> 設(shè)置有序列表 li可是1.2.3....或a.b.c....或A.B.C...或i.ii.iii.....或I.II.III....
(兩個屬性:type start)
<ul>
<li>......</li>
<li>......</li>
......
</ul> 無序列表 (一個屬性:type disc實(shí)心圓 circle空心圓 square方框)
<a></a> 實(shí)現(xiàn)超鏈接
1. href 定義超鏈接所指向的文檔的URL
2. target 目標(biāo)窗口
3. name 錨名稱 (該屬性一般在創(chuàng)建頁面內(nèi)超鏈接時使用)
<a href="/URL"> </a> 使用a標(biāo)志符創(chuàng)建超鏈接時,可以使用相對路徑(同一網(wǎng)站內(nèi)的文件),也可以使用絕對路徑(指向本站點(diǎn)以外的文件)
<a > </a>
.....
<a href="#錨點(diǎn)名稱"> </a> 創(chuàng)建網(wǎng)面內(nèi)超鏈接邏輯上分為兩步,首先定義錨點(diǎn),然后再創(chuàng)建指向錨點(diǎn)的超鏈接
<a href="mailto:電子郵箱地址"> </a> 指向電子郵箱的超鏈接
<img> 插入圖像
1. src 設(shè)置被引用的圖像文件所在的位置
2. alt 設(shè)置圖像的簡單文字說明
3. width, height 設(shè)置圖像的寬度與高度
4. align 對齊方式(left,right,top,bottom,middle)
5. border 邊框?qū)挾?/font>
6.hspace ,vspace 定義了圖像與周圍元素的水平和垂直間距
<map >
<area>
<area>
......
</map>
<img src="/"usemap="#圖像映射名稱"> <map></map> 定義了圖像映射的區(qū)域
img通過usemap可以確定與所建立的圖像映射區(qū)域的關(guān)系
area定義圖像不同區(qū)域與不同文檔之間建立鏈接
1. shape 形狀(rect矩形 circle圓 poly多邊形)
2. coords 坐標(biāo)
3. target 目標(biāo)窗口
4. alt 替換文字
<table>
<caption> </caption>
<tr>
<th> </th><th> </th>......
</tr>
<tr>
<td> </td><td> </td>......
</tr>
<tr>
<td> </td><td> </td>
</tr>
......
</table> table標(biāo)記符定義表格 caption定義表格標(biāo)題 tr標(biāo)記符定義表格的行 th,td標(biāo)志符定義表格的單元格 th定義表頭單元格
table 可以創(chuàng)建一個新的表格
1. width (寬), height (高)
2. border (邊框)
3. bgcolor (背景顏色)
4. align (對齊方式left right center)
5. cellpadding (填充距)
6. cellspacing (單元格間距)
7. rules (分隔線 none無分隔線 groups在行列之間有 rows只有行分隔線 cols只有列 all所有)
8. frame (邊框 void無邊框 above只顯示頂部邊框 below只顯示底部邊框 hsides只顯示頂,底部邊框 vsides只顯示左右邊框 lhs顯示左邊框 rhs顯示右 box顯示所有)
<tr> </tr>表行
1. align 對齊方式(left center right)
2. valign 垂直對齊方式 (top middle bottom baseline)
3. bgcolor 背景顏色
<td></td> 表格數(shù)據(jù)
1. width (寬), height (高)
2. align (對齊方式 left right center)
3. valign (top middle bottom)
4. bgcolor 背景顏色
5. rowspan 單元表的行數(shù)
6. colspan 單元表的列數(shù)
<frameset>
<frame>
<frame>
......
<frame>
</frameset> frameset是將窗口分割成若干個子窗口,子窗口數(shù)取決于frame的個數(shù)
<frame> 標(biāo)記符來標(biāo)識子窗口(無結(jié)果符)
1. name
2. src (源) 設(shè)置框架內(nèi)容的URL
3. frameborder (框架邊框)
4. marginwidth (框架的左右邊距)
5. marginheight (框架的上下邊距)
6. scrolling (是否顯示滾動條 auto自動 yes顯示 no不顯示)
7. noresize (不允許調(diào)整框架的尺寸)
<a herf="目標(biāo)文件"target="目標(biāo)框架名">超鏈接內(nèi)容</a>
1. _top 表示將超鏈接的目標(biāo)文件裝入整個瀏覽器窗口
2. _self 表示將超鏈接的目標(biāo)文件裝入當(dāng)前框架,以取代該框架中正在顯示的文件
3. _blank 表示將超鏈接的目標(biāo)文件裝入一個新的瀏覽窗口
4. _parent 表示將超鏈接的目標(biāo)文件裝入當(dāng)前框架的父框架
<iframe></iframe> 定義了一個頁面內(nèi)的框架
1. src (源) 設(shè)置框架內(nèi)容的URL
2. name
3. width,height
4. align (top middle bottom)
5. frameborder (框架邊框)
6. marginwidth (框架左右邊框), marginheight (框架上下邊框)
7. scrolling (是否顯示滾動條 auto yes no)
<form></form> 表單
1. method (方法) 定義表單的提交方式
2. action (動作) 指定表單所對應(yīng)的處理程序
<input> 定義了一個用于用戶輸入的表單元素(無結(jié)束標(biāo)記符)
1. name 標(biāo)識表單元素
2. type 指定表單元素的類型(text文本 password密碼 checkbox復(fù)選框 radio單選框 submit提交按鈕 reset重置按鈕)
<input type="text"> 將type指定為text,在瀏覽器中顯示一個文本輸入框,供用戶輸入信息
1. value (初始值)
2. size (尺寸)
3. maxlength (輸入文本的最大字符數(shù))
<input type="password"> 密碼文本框
例:<form>
密碼:<input type="password"size="10"maxlength="15">
</form>
<input type="checkbox">復(fù)選框
例:<from>
<p>你的愛好:</P>
<input type="checkbox"value="music"checked>音樂
<input type="checkbox"value="sports">體育
<input type="checkbox"value="other">其它
</form>
<input type="radio">單選框
例:<form>
<p>公司的人數(shù):</p>
<p><input type="radio">少于10人</p>
<p><input type="radio"checked>10人至100人</p>
<p><input type="radio">100人以上</p>
</form>
<input type="submit">提交按鈕
<form>
<input type="submit"value="提交">
</form>
<input type="reset">重置按鈕
<input type="image">圖像提交按鈕
<input type="file">
<input type="buttom">
<input type="hidden">
<textarea> </textarea> 定義一個用于用戶多行輸入的表單元素
1. name 指定文本域的名稱
2. rows 指定文本域的高度
3. cols 指定文本域的寬度
<select>
<option></option>
<option></option>
......
<option></option>
</select> 定義了一個選項(xiàng)列表表單元素
1. name 指定選取項(xiàng)列表的名稱
2. size 指定列表選項(xiàng)顯示時一次顯示選項(xiàng)的數(shù)目
3. multiple 使用該屬性可以允許多重選擇
4. value 指定當(dāng)該選項(xiàng)被選中并提交后,瀏覽器傳給服務(wù)器的數(shù)據(jù)
5. selected 指定哪一個選項(xiàng)在默認(rèn)狀態(tài)下是選中狀態(tài)
<label></label> 選中該控件
<marquee></marquee> 創(chuàng)建一些滾動字幕
1.direction (方向 left right up down)
2.behavior (行為 scroll繞圈滾動 slide只滾一次 alternate來回滾動)
3.loop (循環(huán))
4.scrollamount (滾動的速度)
5.scrolldelay (滾動延時)
6.align (對齊方式 top middle bottom)
7.bgcolor
8.height,width
9.hspace,vspace (垂直和水平間距)
<applet>
<param>
<param>
......
</applet> applet用來在網(wǎng)頁中插入一個Java小應(yīng)用程序?qū)ο?/font>
1. code (源代碼) 指定Java小應(yīng)用程序的源代碼文件(.class文件)
2. name
3. width,height
4. align
param 用來定義Java小應(yīng)用程序中的參數(shù)
1.name
2.value (值)給變量賦值
3.valuetype (值類型 data表示value指定的值將作為一個字符串傳遞的對象
ref 表示value指定的值是一個URL
object 表示value指定的值是一個指向同一文檔中一個object的標(biāo)志符)
4. type (類型)當(dāng)valuetype屬性的值設(shè)置為ref時,此屬性指定了URL所代表資源的內(nèi)容類型
<object>
<param>
<param>
......
</object> object可以定義很多種不同的多媒體文件
1. classid: 該屬性指定了瀏覽器中用來播放相應(yīng)多媒體對象的控件ID
2.codebase :定義多媒體文件相對位置的根目錄
3.codetype: 指定當(dāng)下載由classid所指定的對象時使用的數(shù)據(jù)內(nèi)容的類型
4.data: 定義多媒體文件的位置
5.type:定義多媒體文件的類型
6.width,height
selector{property1:value1;property2:value2......} selector 表示需要應(yīng)用式樣的對象
property 表示由css標(biāo)準(zhǔn)定義的樣式屬性
value 表示樣式賂性的值
例:h2{text-align:center;font-family:楷體_gb2312}
selector.classname{property1:value1;......} 標(biāo)記符類
.classname{property:value;......} 通用類
#IDname{property:value;......}用戶定義ID
虛類
a:link或:link 當(dāng)超鏈接末被訪問過時,超鏈接的顯示方式
a:visited或:visited 當(dāng)超鏈接已經(jīng)被訪問過時,超鏈接的顯示方式
a:active或:active當(dāng)超鏈接當(dāng)前為選中姿態(tài)時,超鏈接的顯示方式
a:hover或:hover 當(dāng)鼠標(biāo)指針懸停在超鏈接上時,超鏈接的顯示方式
例: a:link{color:blue}
長度單位
1.em:它所代表的長度是當(dāng)前字體中m字母的寬度
2.ex:它所代表的長度是當(dāng)前字體中x字母的高度
3.px:像素,它是相對于計(jì)算機(jī)屏幕的分辨率來定義的
in:英寸,1in=2.54cm 1cm=10mm
pt:點(diǎn),1點(diǎn)=1/72in pc:帕 1帕=12點(diǎn)
font-family(字體族)
font-family:字體名稱 | 字體族名稱
例: p{font-family:黑體,宋體,serif}
font-style(字體風(fēng)格)
font-style:字體風(fēng)格名稱
例: p{font-style:oblique}
font-size (字體大小)
font-size:絕對大小 | 相對大小 | 百分比
font-variant(字體變形)
font-varient:字體變形值
1.normal(普通)
2.small-caps(小型大寫字母)
font-weight(字體加粗)
font-weight:字體加粗值
1.normal(普通)
2.bold(加粗)
3.bolder(更粗)
4.lighter(更細(xì))
letter-spacing(字符間距)
letter-spacing:數(shù)值
text-decoration(文字修飾)
text-decoration:文字修飾效果
1.none 無
2.underline 下劃線
3.overline 上劃線
4.line-through 刪除線
5.bink 閃爍
text-transform(文本轉(zhuǎn)換)
text-transform:文本轉(zhuǎn)換方式
1.none 無
2.capitalize 使所有單詞的第一個字母大寫
3.uppercase 使所有單詞字母都大寫
4.lowercase 使所有單詞字母都小寫
text-align(文本對齊方式)
text-align:對齊方式
1.left
2.right
3.justify 可調(diào)整
text-indent(文本縮放)
text-indent:縮放的數(shù)值
line-height(行高)
line-height:數(shù)值
margin(頁邊距)
margin:數(shù)值
padding(填充距)
padding:數(shù)值
例: table{padding:2cm 3cm 5cm}上填充距2cm,左右填充距為3cm,下填充距5cm
border-style(邊框樣式)
border-style:邊框樣式
1.none
2.dotted 點(diǎn)線
3.dashed 虛線
4.solid 實(shí)線
5.double
6.groove 凹線
7.ridge 凸線
8.inset 內(nèi)陷
9.outset 外凸
border-color(邊框顏色)
border-color: 顏色值
border-width(邊框?qū)挾?
border-width:數(shù)值
1.thin 細(xì)
2.medium 中
3.thick 寬
border(邊框)
border:邊框樣式|邊框?qū)挾葇邊框顏色
常用的HTML代碼
一、文字標(biāo)記
基本代碼如下:
<P align=center><FONT color=#0066ff face=隸書 size=5>插入文字</FONT></P>
align=center 表示字體居中,可選值為居右(right)居左(left)
color=顏色代碼
face=字體 常用字體為:宋體.黑體.楷體.仿宋.幻緣.新宋體.細(xì)明體等
size=字體大小,這里的最大值為7 取值越大文字就越大
1.字體變化 <font>..........</font>
a.字體大小 <font size=#>..........</font> #=1~7;數(shù)字愈大字也愈大
b.指定字型 <font face="字體名稱">..........</font>
c.文字顏色 <font color=#rrggbb>..........</font>
rr:表紅色(red)色碼
gg:表綠色(green)色碼
bb:表藍(lán)色(blue)色碼
rrggbb也可用6位顏色代碼數(shù)字
2.粗體字 <b>..........</b>
3 字體加粗<STRONG>..........</STRONG>和<b>標(biāo)簽差不多的效果
4.換行(也稱回車) <br>
5.分段標(biāo)記 <p>
文字的對齊方向 <p align="#"> #號可為 left:表向左對齊(預(yù)設(shè)值) center:表向中對齊 right:表向右對齊 P.S.<p align="#">之后的文字都會以所設(shè)的對齊方式顯示,直到出現(xiàn)另一個<p align="#">改變其對齊方向,遇到<hr>或<h#>標(biāo)簽時會自動設(shè)回預(yù)設(shè)的向左對齊。
6.區(qū)隔標(biāo)記 <DIV>
<DIV>稱為區(qū)隔標(biāo)記。作用:設(shè)定字、畫、表格等的擺放位置。
<DIV>應(yīng)用于 Style Sheet(式樣表)方面會更顯威力,它最終目的是給設(shè)計(jì)者另一種組織 能力,有 Class ; Style ; title ; ID 等屬性。。
以 <DIV align="center"> 為例:
align="center"
可選值:center ; left ; right 。決定字、畫、表格等居中、靠左或靠右。
<DIV align="center"> 的作用和居中標(biāo)記 <CENTER>一樣。。
注:其實(shí)常用跟<p>標(biāo)簽的效果差不多,但是功能比<p>相對強(qiáng)一些。。。
7.分隔線 <hr>
a.分隔線的粗細(xì) <hr size=點(diǎn)數(shù)>
b.分隔線的寬度 <hr size=點(diǎn)數(shù)或百分比>
c.分隔線對齊方向 <hr align="#">
#號可為 left:表向左對齊(預(yù)設(shè)值) center:表向中對齊 right:表向右對齊
d.分隔線的顏色 <hr color=#rrggbb>
e.實(shí)心分隔線 <hr noshade>
8.居中對齊 <center>..........</center> 跟<p align="center">........</p>,<DIV align="center">........<DIV>效果基本是一樣的。。。
9.文字移動標(biāo)記<MARQUEE>..........</MARQUEE>
<marquee 屬性=屬性值> 滾動內(nèi)容 </marquee>
移動速度指令是:scrollAmount=# #最小為1,速度為最慢;數(shù)字越大移動的越快。
字符移動每步的延時:scrolldelay=# 屬性值為數(shù)字, #最小為1, 數(shù)值越大速度越大,反之亦然。
移動方向指令是:direction=# up向上、down向下、left向左、right向右。
屬性值為scroll:文字單向移動,side:移動到邊界停止,alternate:到邊界后反向移動;
align,對齊方式,其屬性值為center,left,right,top, middle, bottom,分別表示居中,左對齊, 右對齊,對齊上沿、中間、下沿;
bgcolor,移動字符的背景色,屬性值為顏色代碼,可以是rrggbb 16 進(jìn)制數(shù)碼,r=red,g=green, b=blue,也就是色彩中的三原色,也可是預(yù)定義色彩;
loop,移動字符的循環(huán)次數(shù),屬性值為數(shù)字,若未指定則循環(huán)不止(infinite);
width及height,文字高度和寬度,以象素為單位,屬性值為數(shù)字;
hspace字符左右留白長度,屬性值為數(shù)字;
vspace字符上下留白長度,屬性值為數(shù)字;
scrollamount字符的移動速度,屬性值為數(shù)字,數(shù)值越大速度越大,反之亦然;
常用指令舉例:<MARQUEE scrollAmount=3 direction=up>..........</MARQUEE>
a.<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=center>啦啦啦,我會移動耶!</marquee>
b.<marquee direction=left>啦啦啦,我從右向左移!</marquee>
啦啦啦,我從右向左移!
c.<marquee behavior=scroll>啦啦啦,我一圈一圈繞著走!</marquee>
啦啦啦,我一圈一圈繞著走!
d.<marquee behavior=alternate>啦啦啦,我來回走耶!</marquee>
啦啦啦,我來回走耶!
e.<marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee>
啦啦啦,我走一步,停一停!
二、圖片標(biāo)記
1.插入圖片 <img src="圖形文件名">
2.設(shè)定圖框 -- border <img src="圖形文件名" border=點(diǎn)數(shù)>
3.設(shè)定圖形大小 -- width、height <img src="圖形文件名" width=寬度點(diǎn)數(shù) height=高度點(diǎn)數(shù)>
4.設(shè)定圖形上下左右留空 -- vspace、hspace <img src="圖形文件名" vspace=上下留空點(diǎn)數(shù) hspace=左右留空點(diǎn)數(shù)>
5.圖形附注 <img src="圖形文件名" alt="說明文字">
例1:
<img src="
例2: