本文轉載自：http://blog.csdn.net/iamduoluo/article/details/5875117
| 字體 |
標題字體 <Header> |
<h>標題標籤 |
| <hn>標題標籤 | ||
| <font>標籤 | 設置字體大小<size> | |
| 設置字體風格<face> | ||
| 常用文本格式Tag | 使用縮進<blockquote> | |
| 保留空格和換行<pre> | ||
| 使用內聯行<span> | ||
| 使用文字方向<bdo> | ||
| 物理字體 | 設置粗體<b> | |
| 設置斜體<i> | ||
| 設置下劃線<u>/<ins> | ||
| 設置中劃線<del>/<s>/<strike> | ||
| 設置打印機效果<tt> | ||
| 設置上標<sup> | ||
| 設置下標<sub> | ||
| 邏輯字體 | 設置粗體<strong> | |
| 設置斜體<em> | ||
| 設置等寬字體<code> | ||
| 設置引用<samp> | ||
| 設置輸入文本<kbd> | ||
| 設置變量<var> | ||
| 設置突出顯示<dfn> | ||
| 設置內容出處<cite> | ||
| 設置小字體<small> | ||
| 設置大字體<big> | ||
| 顯示特殊符號 | ||
| 顯示< < | ||
| 顯示> > | ||
| 顯示" " | ||
| 顯示& & |
| 超鏈接 | href屬性 | 連接到同一頁當前位置 |
<a href="#name1">…</a> <a name="n">…</a> |
|
| 製作本地鏈接 | 同級鏈接 | <a href="文件名">…</a> | ||
| 下級鏈接 | <a href="文件夾名/文件名">…</a> | |||
| 上級鏈接 | <a href="…/文件名">…</a> | |||
| 製作URL鏈接 | <a href="http://www.baidu.com/">鏈接到百度網站</a> | |||
| 製作目錄鏈接 | 目錄鏈接是指互相鏈接的網頁在不同的文件夾裏面 | |||
| 製作E-mail鏈接 | <a href="mailto:[email protected]">郵件連接</a> | |||
| target屬性 | 打開空白頁_blank | <a href="http://www.baidu.com/" target="_blank">在空白頁打開百度鏈接</a> | ||
| 打開上一級窗口_parent | <a href="http://www.baidu.com/" target="_parent">在上一級窗口打開鏈接</a> | |||
| 在本窗口打開_self | <a href="http://www.baidu.com/" target="_self">在本窗口打開鏈接</a> | |||
| 打開整個窗口_top | <a href="http://www.baidu.com/" target="_top">打開整個窗口</a> |
| 圖像 | 網頁圖片概述 | ||
| 背景圖像的設定 | <body background="#"></body> | ||
| 網頁中插入圖片標籤 | 選擇路徑src | <img src="#" /> | |
| 設定替換文本alt | <img src="#" alt="" /> | ||
| 選擇寬度width | <img src="#" width="" /> | ||
| 選擇高度height | <img src="#" height="" /> | ||
| 設定低分辨率lowsrc | <img src="#" lowsrc="" /> | ||
| 設定映像地圖usemap | |||
| 設定排列align | <img src="#" align="" /> | ||
| 設定邊框border | <img src="#" border="n" /> | ||
| 設定水平間距hspace | <img src="#" hspace="n" /> | ||
| 設定垂直間距vlign | <img src="#" vspace="n" /> | ||
| 圖像的超鏈接 | 鏈接本地圖像 | <a href="#"><img src="n" /></a> | |
| 鏈接網上圖像 | <a href="#" img src="URL"> | ||
| 鏈接本地頁面 | |||
| 鏈接網上頁面 | |||
| 編輯圖像矩形熱區 |
<img src="#" usemap="#map" /> <map name="map"> <area shape="rect" coords="33, 36, 109, 94" href="#"> </map> |
||
| 編輯圖像橢圓熱區 | |||
| 編輯圖像多邊熱區 | |||
| 插入圖像佔位符 | <img name="" src="" width="" height="" background-color="" /> | ||
| 用<img>標籤插入avi文件 | 使用路徑dynsrc | <img dynsrc="#" /> | |
| 循環播放次數loop | <img dynsrc="#" loop="n" /> | ||
| 播放方式start | <img dynsrc="#" start="n" /> |
| 表格 | 表格的基本結構 |
<table> <tr> <td></td> </tr> </table> |
|
| 表格<title> | 設置行標籤<tr> | ||
| 設置表頭單元格<th> |
<table> <tr> <th></th> </tr> </table> |
||
| 設置單元格數據標籤<td> |
<table> <tr> <td></td> </tr> </table> |
||
| <table>標籤的屬性 | 設置寬度width |
<table width="n"> <tr> <td></td> </tr> </table> |
|
| 設置高度height | |||
| 設置背景圖片background | |||
| 設置間距cellspacing | |||
| 設置內容與邊界的距離cellpadding | |||
| 邊框 |
<table border="n"> <tr> <td></td> </tr> </table> |
||
| 編輯邊框顏色bordercolor | |||
| 編輯亮邊框顏色bordercolorlight | |||
| 編輯暗邊框顏色bordercolordark | |||
| 顯示整個邊框box | <table border="" frame="box"> | ||
| 不顯示邊框void | |||
| 顯示上下邊框hsides | |||
| 顯示左右邊框vsides | |||
| 顯示上邊框above | |||
| 顯示下邊框below | |||
| 顯示左邊框lhs | |||
| 顯示右邊框rhs | |||
| 表格行的設定 | 設置水平對齊align | <tr align=""> | |
| 設置垂直對齊valign | <tr valign=""> | ||
| 跨多行、多列的表元 | 設置跨多列colspan | <tr colspan="n"> | |
| 設置跨多行rowspan | <td rowspan="n"> | ||
| 表格行分組 | 使用表頭標籤<thead> | ||
| 使用主體標籤<tbody> | |||
| 使用尾註標籤<tfoot> | |||
| 表格的標題標籤<caption> | <caption></caption> | ||
| 表格的嵌套 |
| 多媒體 | 滾動字幕<marquee> | 滾動字幕<marquee>標籤概述 | <marquee>文本內容/鏈接圖片</marquee> | |
| 設置移動方式behavior | 滾動播出 | <marquee behavior="scroll" width="300px" height="100px">滾動播出</marquee> | ||
| 滾動到一方後停止滾動 | <marquee behavior="slide" width="300px" height="100px">滾動播出</marquee> | |||
| 滾動到一方後向相反方向滾動 | <marquee behavior="alternate" width="300px" height="100px">滾動播出</marquee> | |||
| 設置背景顏色bgcolor | <marquee bgcolor="n">文本內容/鏈接圖片</marquee> | |||
| 設置文字捲動方式direction | 從右到左滾動 | <marquee direction="left">文本內容/鏈接圖片</marquee> | ||
| 從左到右滾動 | <marquee direction="right">文本內容/鏈接圖片</marquee> | |||
| 從下到上滾動 | <marquee direction="up">文本內容/鏈接圖片</marquee> | |||
| 從上到下滾動 | <marquee direction="down">文本內容/鏈接圖片</marquee> | |||
| 設置移動速度scrollamount | <marquee scrollamount="n">文本內容/鏈接圖片</marquee> | |||
| 設置停頓時間scrolldelay | <marquee scrolldelay="n">文本內容/鏈接圖片</marquee> | |||
| 設置字幕左右空白區域hspace | <marquee hspace="n">文本內容/鏈接圖片</marquee> | |||
| 設置字幕上下空白區域vspace | <marquee vspace="n">文本內容/鏈接圖片</marquee> | |||
| 設置滾動次數loop | <marquee loop="n">文本內容/鏈接圖片</marquee> | |||
| 設置鼠標滑過onMouseOver | <marquee onMouseOut="this.start()" onMouseOver="this.stop()">文本內容/鏈接圖片</marquee> | |||
| 插入多媒體文件 | 插入音樂 | 設置音樂文件路徑src | <embed src="#"></embed> | |
| 設置自動播放autostart | <embed src="#" autostart="true/false"></embed> | |||
| 設置播放次數loop | <embed src="#" loop="true/false"></embed> | |||
| 設置隱藏播放版面hidden | <embed src="#" hidden="true/false"></embed> | |||
| 插入Flash標籤<object> | ||||
| 顯示Flash標籤<param> | ||||
| 插入Flash的另一標籤<embed> | ||||
| 嵌入多媒體文件 | 設置背景音樂路徑src | <bgsound src="#" /> | ||
| 設置自動播放autostart | <bgsound src="#" autostart="true/false" /> | |||
| 設置循環播放loop | <bgsound src="#" loop=n/indinite /> | |||
| 點播音樂 |
| 框架 | 框架含義 | ||
| 基本構成 |
<frameset> <frame src="#" /> </frameset> |
||
| 框架集<frameset>控制 | 分割左右窗口cols |
<frameset cols="*,*,*"> <frame src="#" /> </frame> |
|
| 分隔上下窗口rows |
<frameset rows="*,*.*"> <frame src="#" /> </frame> |
||
| 設置邊框粗細border |
<frameset border="n"> <frame src="#" /> </frameset> |
||
| 設置邊框顏色bordercolor |
<frameset border="n" bordercolor=""> <frame src="#" /> </frameset> |
||
| 是否顯示邊框frameborder |
<frameset frameborder="1/0"> <frame src="#" /> </frameset> |
||
| 設置空白距離framespacing |
<frameset frameborder="n"> <frame src="#" /> </frameset> |
||
| 添加<noframes>標籤 |
<frameset> <frame src="#" /> </frameset> <noframes> <body></body> </noframes> |
||
| 子框架<frame>標籤的設定 | 設定調節noresize |
<frameset> <frame src="#" /noresize="noresize" /> </frameset> |
|
| 設定窗口嵌套 |
<frameset> <frame src="#"> <frameset> <frame src="#"> <frame src="#"> </frameset> </frameset> |
||
| 窗口的名稱和鏈接 | 框架集語法形式 |
<frameset> <frame src="#" name="n"> </frameset> |
|
| 鏈接頁面語法形式 | <a href="#" target="n"></a> | ||
| 浮動窗口<iframe> | 設置滾動條scrolling屬性 | <iframe src="#" scrolling="yes/no">代替文本內容</iframe> | |
| 設置透明浮動窗口allowtransparency屬性 | <iframe src="#" allowtransparency="true">代替文本內容</iframe> | ||
| 浮動窗口鏈接 | 浮動窗口語法形式 | <iframe src="#" name="n">代替文本內容</iframe> | |
| 鏈接頁面語法形式 | <a href="#" target="n"></a> |
| 列表 | 無序列表<ul> | 設置列表結構 |
<ul> <li></li> </ul> |
|
| 使用空心圓樣式disc |
<ul type="disc"> <li></li> </ul> |
|||
| 使用空心圓樣式circle |
<ul type="circle"> <li></li> </ul> |
|||
| 使用小方塊樣式square |
<ul type="square"> <li></li> </ul> |
|||
| 有序列表<ol> | 設置列表結構 |
<ol> <li></li> </ol> |
||
| 使用數字標號樣式 |
<ol type="1"> <li></li> </ol> |
|||
| 使用大寫字母標號樣式 |
<ol type="A"> <li></li> </ol> |
|||
| 使用小寫字母標號樣式 |
<ol type="a"> <li></li> </ol> |
|||
| 使用大寫羅馬數字標號樣式 |
<ol type="Ⅰ"> <li></li> </ol> |
|||
| 使用小寫羅馬數字標號樣式 |
<ol type="i"> <li></li> </ol> |
|||
| 嵌套列表 | 嵌套無序列表 |
<ul> <li> <ul> <li></li> </ul> </li> </ul> |
<ol> <li> <ul> <li></li> </ul> </li> </ol> |
|
| 嵌套有序列表 |
<ul> <li> <ol> <li></li> </ol> </li> </ul> |
<ol> <li> <ol> <li></li> </ol> </li> </ol> |
||
| 自定義列表的標記 | 顯示整體列表<dl> |
<dl> <dt></dt> </dl> |
||
| 設置列表項標籤<dt> |
<dl> <dt></dt> <dt></dt> </dl> |
|||
| 設置註釋項標籤<dd> |
<dl> <dt></dt> <dd></dd> </dl> |
|||
| 目錄列表<dir> |
<dir> <li></li> </dir> |
|||
| 菜單列表<menu> |
<menu> <li></li> </menu> |
| 表單 | 基本語法 | 設置鏈接跳轉action | <form action=""></form> | |
| 指向鏈接跳轉方法method | <form action="" method="get/post"></form> | |||
| 設置鏈接跳轉方式target | <form action="" target="_blank/_parent/_self/_top"></form> | |||
| 設置字符集列表accept-charset | <form accpet-charset=""></form> | |||
| 設置編碼表單內容enctype | <form enctype=""></form> | |||
| 定義表單名稱name | <form name=""><form> | |||
| 輸入框 |
<form> <imput /> </form> |
輸入文字 |
<form> <input type="text" name="n" id="" /> </form> |
|
| 輸入密碼 |
<form> <input type="password" name="n" id="" /> </form> |
|||
| 使用單選框 |
<form> <input type="radio" name="n" id="" value="" /> </form> |
|||
| 使用複選框 |
<form> <input type="checkbox" name="n" id="" value="" /> </form> |
|||
| 使用圖像域 | <form> <input type="image" name="n" id="" src="#" /> </form> |
|||
| 使用隱藏表單的元素 |
<form> <input type="hidden" name="n" value="#" /> </form> |
|||
| 使用列表框 |
<form> <select name="n" id=""> <option value=" "></option> </select> </form> |
|||
| 使用文本區域 | <form> <textarea name="n" id=""cols=""></textarea> </form> |
|||
| 使用按鈕 | 設置提交按鈕 |
<form> <input type="submit" name="n" id="" value="" /> </form> |
||
| 設置清空按鈕 |
<form> <input type="reset" name="n" id="" value="" /> </form> |
| 佈局 | 使用表格 | |||
| 使用div | 在內容中應用div | <div style=""></div> | ||
| 嵌套div |
<div> <div> 被嵌套的文本內容 </div> </div> |
|||
| 使用浮動樣式定義框架 | <div style="float:left/none/right;"></div> | |||
| 製作左右結構的框架 |
<div> <div style="float:left;"></div> <div style="float:right;"></div> </div> |
|||
| 製作橫向結構的框架 | 橫向結構的框架是指水平線上分隔出來的框架。它和左右結構的框架有些相似，都利用同樣的原理設計，只是多了幾個小的div標籤。語法形式和左右框架的語法形式一樣。 | |||
| 製作縱向結構的框架 | 縱向結構的框架是指垂直線上分割出來的框架。它和橫向結構的框架有些相似，只是多了一個clear屬性，使框架縱向排列 |
<div> <div style="clear:both;"></div> <div style="clear:both;"></div> </div> |