HTML的文件結構:<html> <head>網頁頭部信息</head> <body>網頁主體正文部分</body> </html> HTML的基本標記:定義網頁背景色——bgcolor <body bgcolor=”背景顏色 ”> 設置背景圖片——backgroung <body backgrou ...
HTML的文件結構:<html>
<head>網頁頭部信息</head>
<body>網頁主體正文部分</body>
</html>
HTML的基本標記:定義網頁背景色——bgcolor
<body bgcolor=”背景顏色 ”>
設置背景圖片——backgroung
<body background=”圖片的地址 ”>
設置文字顏色——text
<body text=”文字的顏色 ”>
設置鏈接文字屬性
<body link=”顏色 ”>
(使用alink可以設置滑鼠單擊超鏈接時的顏色
使用vlink可以設置已訪問過的超鏈接顏色)
設置頁面邊距——margin
topmargin 設置頂邊的距離
leftmargin 設置左邊的距離
rightmargin 設置右邊的距離
bottommargin 設置底邊的距離
頁面的頭部元素<!DOCTYPE>和<head>
<!DOCTYPE>為瀏覽器提供的一項聲明
<head>文檔頭部信息</head>
頁面標題元素<title>
<title>…</title>(輸入標題信息在瀏覽器上顯示)
元信息元素<meta>
設置頁面關鍵詞
<meat name=”keywords ”content=”輸入具體的關鍵詞”>
設置頁面主要內容
<meat name=”description ”content=”頁面描述 ”>
定義頁面的搜索方式
<meat name=”robots ”conten=”搜索方式 ”>
搜索方式取值:all 表示能搜索當前網頁及其鏈接的網頁
nofollow 搜索引擎不繼續通過此網頁的鏈接搜索其他的網頁
follow 搜索引擎繼續通過此網頁的鏈接搜索其他的網頁
index 表示能搜索當前網頁
noindex 表示不能搜索當前網頁
none 搜索引擎將忽略此網頁
定義編輯工具(generator:設置編輯工具)
<meat name=”generator ”content=”編輯軟體的名稱 ”>
定義頁面的作者信息(author:設置作者信息)
<meat name=”author ”content=”作者的姓名”>
定義網頁文字及語言(http-equiv 用於傳送HTTP通信協議的標頭)
<meat http-equiv=”content-type”content=”text/html ;charest=字元集類型”/>
定義頁面的跳轉 (refresh網頁刷新)
<meat http-equiv=”refresh ”content=”跳轉的時間;URL=跳轉到的地址”>
定義頁面的版權信息——copyright
<meat name=”copyright ”content=”©http://www.baidu.com”/>
腳本元素<script>
<script type=”text/javascript ”src=”dru.js ”></script>
創建樣式元素<style>
<style type=”text/css ”>
…………………………………………
</style>
鏈接元素<link>
<head>
<link rel=”stylesheet ”type=”text/css “href=”theme.css “/>
</head>
設置文字與段落格式
插入空格符號: 
輸入特殊符號:&-&;﹤-<;﹥->;x-×;§-§;©-©;®-®;™-&trade
設置字體——face
<font face=”字體樣式 ”>……</font>
設置字型大小——size
<font size=”文字字型大小 ”>……</font>
設置文字顏色——color
<font color=”字體顏色 ”>……</font>
設置粗體、斜體、下劃線——b、strong、em、u
<b>加粗的文字</b>
<strong>加粗的文字</strong>
<i>斜體文字</i>
<em>斜體文字</em>
<cite>斜體文字</cite>
<u>下劃線的內容</u>
設置上標和下標——sup、sub
<sup>上標內容</sup>
<sub>下標內容</sub>
設置段落的格式
段落標記——p
<p>段落文字</p>
段落的對齊屬性——align
<aling=對齊方式>(left 左對齊、right 右對齊、center 居中對齊)
不換行標記——nobr
<nobr>不換行文字</nobr>
換行標記——br
<br>
插入水平線——hr
<hr>
設置水平線寬度與高度屬性——width、size
<hr width=”寬度 ”>
<hr size=”高度 ”>
設置水平線的顏色——color
<hr color=”顏色 ”>
設置水平線的對齊方式——aling
<hr aling=”對齊方式 ”> (left 左對齊、right 右對齊、center 居中對齊)
水平線去掉陰影——noshade
<hr noshade>
設置滾動文字
滾動文字標簽——marguee
<marquee>滾動的文字</marquee>
滾動方向屬性——direction (預設:文字滾動的方向是從右向左的,可通過direction標記來設置滾動的方向)
<marquee direction=”滾動方向 ”>滾動的文字</marquee>
滾動方式屬性——behavior
<marquee behavior=”滾動方式 ”>滾動的文字</marquee>
Behavior標記的屬性:scroll-迴圈滾動,預設效果
Slide-只滾動一次就停止
alternate-來回交替進行滾動
滾動速度屬性——scrollamount
<marquee scrollamount=”滾動速度 ”>滾動的文字</marquee>
滾動延遲屬性——scrolldelay (毫秒)
<marquee scrolldelay=”時間間隔 ”>滾動的文字</marquee>
滾動迴圈屬性——loop
<marquee loop=”迴圈次數 ”>滾動的文字</marquee>
滾動範圍屬性——width、height
< marquee width=”背景寬度 ”height=”背景高度 ” >滾動的文字</marquee>
滾動背景顏色屬性——bgcolor
<marquee bgcolor=”背景顏色 ”>滾動的文字</marquee>
滾動空間屬性——hspace、vspace(設置滾動文字周圍的文字與滾動背景之間的空白區域)
<marquee hspace=”水平範圍 ”vspace=”垂直範圍 ”>滾動的文字</marquee>
創建精彩的圖像和多媒體頁面
插入圖像並設置圖像屬性
圖像標記——img
<img src=”圖像文件的地址”>
屬性 描述 屬性 描述
src 圖像的源文件 dynsrc 設定avia文件的播放
alt 提示文字 loop 設定avia文件迴圈播放的次數
width,height 寬度和高度 loopdelay 設定avia文件迴圈播放的延遲時間
border 邊框 start 設定avia文件的播放方式
vspace 垂直間距 lowsrc 設定低解析度圖片
hspace 水平間距 usemap 映像地圖
align 排列
設置圖像高度——height(如果img元素不定義高度,圖片就會按照其原始尺寸顯示)
<img src=”圖像文件的地址 ”height=”圖像的高度 ”>
設置圖像寬度——width
<img src=”圖像文件的地址”width=”圖像的寬度 ”>
設置圖像的邊框——border
<img src=”圖像文件的地址 ”border=”圖像邊框的寬度 ”>
設置圖像水平間距——hspace
<img src=”圖像文件的地址 ”hspace=”水平邊距 ”>
設置圖像垂直間距——vspace
<img src=”圖像文件的地址 ”vspace=”垂直邊距 ”>
設置圖像的對齊方式——align
<img src=”圖像文件的地址 ”align=”對齊方式 ”>
屬性 描述 屬性 描述
Bottom 把圖像與底部對齊 top 把圖像與頂部對齊
left 把圖像對齊到左邊 right 把圖像對齊到右邊
middle 把圖像與中央對齊
設置圖像的代替文字——alt
<img src=”圖像文件的地址 ”alt=”提示文字的內容 ”>
添加多媒體文件
<embed src=”多媒體文件地址 ”width=”多媒體的寬度 ”height=”多媒體的高度 ”autostart=”是否自動運行”loop=”是否迴圈播放 ”></embed>
添加背景音樂——bgsound
<bgsound src=”背景音樂的地址 ”>
設置迴圈播放次數——loop(-1是無限迴圈)
<bgsound src=”背景音樂的地址 ”loop=”播放次數 ”>
創建超鏈接和表單
創建基本超鏈接
超鏈接標記——a
<a href=”鏈接目標 ”>鏈接顯示文本</a>
屬性 說明 屬性 說明
href 指定鏈接地址 title 為鏈接添加提示文字
name 為鏈接命名 target 指定鏈接的目標視窗
設置的目標視窗(使用target 屬性來控制打開的目標視窗)
<a href=”鏈接目標 ”target=”目標視窗的打開方式”>
創建圖像的超鏈接
設置圖像超鏈接——a
<a href=”鏈接目標 ”>鏈接的圖像</a>
設置圖像熱區鏈接(形狀:矩形-rect 橢圓形-circle 多邊形-poly)
<img usemap=”#熱區名稱 ”>
<map name=”熱區名稱 ”>
<area shape=”熱點形狀 ”coords=”區域坐標 ”href=”#鏈接目標 ”alt=”替換文字 ”>
…………………………………………………………………
</map>
創建錨點鏈接
創建錨點:<a name=”錨點的名稱 ”></a>
鏈接到頁面不同位置的錨點鏈接:<a href=”#錨點的名稱 ”>……</a>
插入表單——form
處理動作——action(用於指定表單數據提交到哪個地址進行處理)
<form action=”表單的處理程式 ”>
…………………………………
</form>
表單名稱——name
<form name=”表單名稱 ”>
………………………………….
</form>
傳送方法——method
<form method=”傳送方法 ”>
……………………………..
</form>
編碼方式——enctype
<form enctype=”編碼方式 ”>
……………………………………
</form>
enctype的取值 取值含義
application/x-www-form-ulencoded 預設的編碼形式
multipart/form-data MIME編碼,上傳文件的表單必須選擇項
目標顯示方式——target
<form target=”目標視窗的打開方式 ”>
……………………………………
</form>
創建強大的表格
創建並設置表格屬性
表格的基本標記——table、tr、td
<table>
<tr>
<td>單元格內的文字</td>
<td>單元格內的文字</td>
</tr>
<tr>
<td>單元格內的文字</td>
<td>單元格內的文字</td>
</tr>
</table>
表格寬度和高度——width、height
<table width=”表格的寬度 ”height=”表格的高度 ”>
表格的標題——caption
<caption>表格的標題</caption>
表格的表頭——th
<table>
<tr>
<th>…….</th>
</tr>
</table>
表格對齊方式——aline(left-左對齊 center-居中 right-右對齊)
<table aline=”對齊方式”>
表格的邊框寬度——border
<table border=”邊框寬度 ”>
表格邊框顏色——bordercolor
<table border=”邊框寬度 ”bordercolor=”邊框顏色”>
單元格間距——cellspacing
<table cellspacing=”間距值 ”>
單元格邊距——cellpadding
<table cellpadding=”文字與邊框距離值 ”>
表格的背景顏色——bgcolor
<table bgcolor=”背景顏色 ”>
表格的背景圖像——background
<table background=”背景圖像地址 ”>
設計表頭樣式——thead
<thead>
…………………………
</thead>
設計表主體樣式——tbody
<tbody bgcolor=”背景顏色 ”align=”對齊方式 ”>
…………………………………………………….
</tbody>
設計表尾樣式——tfoot
<tfoot bgcolor=”背景顏色 ”align=”對齊方式 ”valign=”垂直對齊方式 ”>
…………………………………………………..
</tfoot>
創建框架結構網頁
水平分割視窗——rows
<frameset rows=”高度1,高度2,….,*”>
<frame src=”url ”>
<frame src=”url ”>
……………………..
</frameset>
垂直分割視窗——cols
<frameset cols=”高度1,高度2,….,*”>
<frame src=”url ”>
<frame src=”url ”>
……………………..
</frameset>
嵌套分割視窗
<frameset rows=”30%,*”>
</frame>
<frameset cols=”20%,*”>
<frame>
<frame>
</frame>
</frame>
設置邊框——frameborder
<frameset frameborder=”是否顯示 ”>
框架的邊框寬度——framespacing
<frameset framespacing=”邊框寬度 ”>
框架的邊框顏色——bordercolor
<frameset bordercolor=”邊框顏色 ”>
框架頁面源文件——src
<frame src=”html文件的位置 ”>
框架名稱——name
<frame src=”html文件的位置 ”name=”子視窗名稱 ”>
調整框架視窗的尺寸——noresize
<frame src=”頁面源文件地址 ”noresize >
框架邊框與頁面內容的水平邊距——marginwidth
<frame src=”頁面源文件地址 ”marginwidth=”value ”>
框架邊框與頁面內容的垂直邊距——marginheight
<frame src=”頁面源文件地址 ”marginheight=”value ”>
設置框架滾動條顯示——scrolling
<frame scrolling=”yes 或no或auto ”>
不支持框架標記——noframes
<noframes>
</noframes>
浮動框架的頁面源文件——src
<iframe src=”url ”></iframe>
浮動框架的寬度和高度——width和 height
<iframe src=”浮動框架的源文件 ”width=”浮動框架的寬 ”height=”浮動框架的高 ”>
</iframe>
浮動框架的對齊方式——align
<iframe src=”浮動框架的源文件 ”align=”對齊方式 ”></iframe>
設置浮動框架是否顯示滾動條——scrolling
<iframe src=”浮動框架的源文件 ”scrolling=”是否顯示滾動條 ”></iframe>
屬性 說明
auto 預設值,整個框架在瀏覽器頁面中左對齊
yes 總是顯示滾動條,即使頁面內容不足以撐滿框架範圍,滾動條的位置也會預留出
no 在任何情況下都不顯示滾動條
浮動框架的邊框——frameborder
<iframe src=”浮動框架的源文件 ”frameborder=”是否顯示框架邊框 ”></iframe>