HTML
- head
- meta
- …
- body
- …
HTML:http://www.w3school.com.cn/tags/tag_frameset.asp
head
- meta提供頁面信息
<meta name="keywords" content="某個關鍵字"/>
// 某些搜索引擎在遇到這些關鍵字時，會用這些關鍵字對文檔進行分類。
<meta name="author" content="yzw"/>
<meta name="generator" content="編輯工具"/>
<meta name="description" content="頁面說明"/>
<meta http-equiv="content-type" content="text/html; charset=euc-jp" />
// 設置網頁文字和語言：此處爲日語
<meat http-equiv="refresh" content="[跳轉時間]; rul=[跳轉地址]" />
More: http://www.w3school.com.cn/tags/tag_meta.aspbody
<body
bgcolor="背景顏色"
backgroud="圖片地址"
text="文字顏色"
link="鏈接顏色"
alink="正在訪問連接顏色"
vlink="訪問後連接顏色"
topmargin=上邊距
leftmargin=左邊距(單位像素)/>標題
<h1></h1> -> <h6></h6> <h2 align="left / center / right"> 標題對齊</h2>- 文本
<font face="宋體 / 華文彩玉" size="字號" color="顏色">文本</font>
<b>加粗</b>
<i>斜體</i>
<hr> 水平線
<hr width="300" size="3" noshade(去掉陰影) color="顏色" align="center/left/right">
<br> 換行
空格圖像
<img src="images/car.jpg" alt="無法顯示或鼠標停服時提示文字"> // 爲圖像添加鏈接 <a href="#"><img src=""></a>列表
// 有序列表 <ol> <li>星期一</li> <li>星期二</li> </ol> <ol type="1 / a / A / i / I (序列符號類型)" start="序號起始值"> </ol> // 無序列表 <ul> <li>星期一</li> <li>星期二</li> </ul> <ul type="Disc / circle / square"> </ul>表格
table:表格
tr:行標記
td:單元格標記
eg:
<table border="1">
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</table>
表格標題
<table>
<caption>標題</caption>
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
<th>表頭4</th>
</table>
// 表格屬性
<table
width=""
height=""
align="left / center / right(整個表格在瀏覽器的對齊方式)"
border="邊框寬度"
bordercolor="邊框顏色"
cellspacing="內邊框度值"
cellpadding="文字與邊框距離"
bgcolor=""
background="">
</table>
// 表格行屬性
<tr
height=""
bordercolor=""
bgcolor=""
background=""
align=""
valign="top / middle / bottom">
</tr>
// 單元格屬性
<td
width=""
height=""
colspan="水平跨度的列數"
rowspan="垂直跨度的行數"
align=""
valign=""
bgcolor=""
bordercolor=""
bordercolorlight="亮邊框的顏色"
bordercolordark="暗邊框的顏色"
background="">
</td>
// 表格結構
<thead></thead> // 表首標記 包裹<caption>
<tbody></tbody> // 表主體標記 包裹<tr>
<tfoot></tfoot> // 表尾標記 包裹<td> <tr>
- 超鏈接
- 內部鏈接 – 與自身網站頁面有關的鏈接
- 外部鏈接
// 內部鏈接
<a href="鏈接地址" target="">
// 錨點 用於跳轉，也在本頁面也可以在其他頁面
<a name="錨點名稱"></a> // 建立錨點
<a href="#錨點名稱></a> // 鏈接錨點
<a href="index.html#錨點名稱"></a> // 鏈接到index.html 錨點
// 外部鏈接
<a href="http://www.baidu.com / mailto:郵件地址 / ftp://... "></a>
多媒體
滾動：
<marquee>文字、圖片、表格...</marquee>
<marquee
direction="up / down / left(默認) / right" 滾動方向
behavior="scroll(默認，循環滾動) \ slide(滾動一次) \ alternate(來回滾動)" 滾動方式
scrollamount="3" 滾動速度
scrolldelay="200" 滾動延遲
loop="12" 滾動次數
width=""
height="" 滾動範圍
bgcolor=""
hspace=""
vspace="" 空白空間
>
</marquee>
多媒體文件:
<embed src="" width="" height=""></embed>
背景音樂:
<bgsound src="" loop="循環次數/true(無限循環)">
- 框架結構 ： 將兩個或兩個以上的網頁組合起來，在同一個窗口中打開的網頁結構。
<frameset
rows="40%,60%" // 水平分割窗口 cols="123,312,41" // 垂直分割窗口
frameborder="yes/1 no/0" 邊框
border="1"
bordercolor=""
framespacing="1"
>
<frame src="top.html" name="mainFrame" id="mainFrame"/>
<frame src="foot.html" name="footFrame" id="footFrame"/>
</frameset>
<noframes>
瀏覽器不支持框架效果
</noframes>
// 嵌套分割
<frameset
rows="80,*" // 水平分割窗口
cols="*" // 垂直分割窗口
frameborder="yes/1 no/0" 邊框
border="1"
bordercolor=""
framespacing="1"
>
<frame src="top.html" name="mainFrame" id="mainFrame"/>
<frameset cols="80,*" >
<frame src="left.html" name="leftFrame" id="leftFrame"/>
<frame src="right.html" name="rightFrame" id="rightFrame"/>
</frameset>
// frame
<frame
src=""
name=""
noresize // 禁止調整窗口尺寸
marginwidth="邊框與頁面內容水平距離"
marginheight="邊框與頁面內容垂直距離"
scrolling="yes / no / auto" // 是否顯示滾動條
>懸浮框架
框架鏈接
- 表單 – 收集客戶端信息
// 表單
<form
action="表單處理程序">
name="表單名稱(不能含特殊符號和空格)"
method="get / post (傳送方法)"
enctype="application/x-www-form-urlencoded(默認) / multipart/form-data (MIME編碼方式)"
target="目標窗口打開方式">
</form>
// 插入表單對象 以下都有id元素，用來表示頁面的唯一元素
<form >
姓名:
<input name="控件名稱" type="text" value="文本字段的默認值" size="控件長度" maxlength="24" />
密碼:
<input name="" type="password" value="" .. />
單選按鈕
<input name="" type="radio" value="" checked="checked"/>
複選框
<input name="" type="checkbox" value="" checked="checked" />
普通按鈕
<input type="submit" name="" value="單擊關閉窗口" onclick="window.close()" />
重置按鈕
<input type="reset" name="" value="重置" />
圖像按鈕
<input type="image" src="" name="" />
隱藏按鈕 -- 用於傳輸對用戶不可知數據
<input type="hidden" name="" value="" />
文件域
<input type="file" />
// 菜單
<select name="下拉菜單名稱">
<option value="選項值" selected="selected">選項1</option>
<option value="選項值">選項2</option>
</select>
// 列表
<select name="" size="" multiple="multiple">
<option value="選項值">選項1</option>
</select>
// 文本域
<textarea name="" cols="列數" rows="行數">
</textarea>
</form>
- XHTML
作爲HTML向XML的過渡
// XHTML的頁面結構
//文檔類型聲明
<!DOCTYPE html>
//<html>元素和名稱空間
<html lang="zh-cn">
完全嵌套
id屬性代替name屬性
標籤必須小寫
屬性必須雙引號