圖像標籤:用於顯示圖片,alt用於在無法找到圖片時顯示的信息。title用於鼠標移到圖片上所顯示的內容
<img src="圖片的路徑" title="提示標題"
alt="提示信息"/>
範圍標籤:用於顯示限制範圍內的文檔內容
<span>內容</span>
換行標籤:將內容進行換行顯示(相當於Java中的\n,無閉合標籤)
<br/>
超鏈接標籤:極爲常用的鏈接標籤
<a href="目標頁面地址" target="頁面打開方式">信息</a>
說明:
href——用於設定需要進行跳轉的頁面地址
target——頁面打開方式
_blank:新空白窗口內顯示
_self:當前窗口內(默認)
_parent:父窗口內
_top:頂級窗口內
三種鏈接方式
頁面間鏈接:完成頁面間跳轉
錨鏈接:跳轉到當前頁面指定的錨定位置
錨鏈接實現步驟
1、設定頁面間的錨(name)
2、超鏈接時使用#+name(錨)的方式進行跳轉
功能性鏈接:完成特定的功能,如發郵件:mailto
塊級標籤:多段內容在一行內進行顯示或多行內容爲一段進行顯示。兩個塊級標籤隔行進行顯示(有特例)
基本塊級標籤
標題標籤:<h1>內容</h1>~<h6>內容</h6>——用於顯示不同大小字體的標題內容
水平線標籤:<hr/>——顯示一條水平線(無閉合標籤)
段落標籤:<p>內容</p>——將內容按照段落進行顯示
分組標籤:<filedset>內容</filedset>——將頁面進行分組顯示
<legend>內容</legend>——對分組標籤添加文字
有序標籤:一般用於新聞列表、內容的列表、導航,內容前有序號 <ol>
<li>內容</li>
...
</ol> 無序標籤:一般用於新聞列表、內容的列表、導航,內容前無序號,但可以有統一的符號
<ul>
<li>內容</li>
...
</ul>
描述標籤:一般可以用於圖文混排,內容和標題有縮進。
<dl>
<dt>標題</dt>
<dd>內容</dd>
</dl>
表格標籤:常用於規整數據的顯示(不常用,加載完全才會顯示,給人感覺慢)
<table>
<caption>表格標題<caption>
<thead>
<tr>
<td>第一行第一列的內容(表頭)</td>
</tr>
</thead>
<tbody>
<tr>
<td>第二行第一列的內容(主體)</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>第三行第一列的內容(表尾)</td>
</tr>
</tfoot>
</table>
說明:tr表格中的行,td爲行中的列。rowspan跨行colspan跨列(從當前行開始跨)
表單標籤:一般用於需要提交信息的頁面,與其他標籤聯合使用,比如登錄頁面,註冊頁面等。
<form
action="表單提交地址" method="提交方式">
</form>
action——當前表單內容進行提交過程中,處理地址負責處理當前表單的內容
method——內容提交方式,推(post安全性較高)拉(get地址欄會出現一串編碼)
表單元素:
<input
type="元素類型" value="元素初始值" name = "名稱" />
元素類型:
輸入框
text——輸入文本框(maxlength:最大長度)
password——密碼框
按鈕
button——用於做各種用途的按鈕
submit——用於實現提交表單內容
reset——用於實現重置表單內容
image——用於實現圖片效果的按鈕
說明:submit與reset需要與form配合使用。
選擇框(checked:是否被選中)
checkbox——複選框
radio——單選按鈕(name必須設定,擁有相同name值的所有元素表示一個分組)
上傳
file——用於實現上傳文件的選擇
隱藏域
hidden——內容不顯示在表單中,用於做特殊用途(如:保存記錄ID)
下拉列表:select——用於實現以列表方式顯示選擇項
<select>
<option selected="selected">顯示內容</option>
<option>列表內容</option>
</select>
selected——表示默認選中
多行文本框
<textarea cols="列寬度" rows="行高度">內容</textarea>
分區標籤:相當於一個大容器,也叫浮動標籤。
div-ul(ol)-li:用於實現菜單或導航
div-dl-dt-dd:用於實現圖文混排的效果
table-tr-td:圖文佈局或數據顯示
form-table-tr-td:表單的佈局實現(將一組信息進行統一提交)
特殊符號
空格——
大於——>
小於——<
引號——"
版權號——©
HTML框架
框架用於將一個指定的頁面劃分爲多個部分用於引用其他頁面
內嵌框架(iframe)
<iframe
src="頁面地址" scrolling="yes/no" frameborder="0/1" name="名稱"/>
說明:
src——框架所顯示的頁面地址
scrolling——是否出現滾動條
frameborder——邊框;0:無邊框;1:有邊框
框架集(frameset)
<frameset rows="值1,值2……" cols="值1,值2……" border="值">
<frame
src="頁面地址" scrolling="yes/no"/>
……
</frameset>
<noframes>
頁面內容或提示信息
</noframes>
說明:
rows——用於將頁面進行橫向分割。rows中有多少項值表示分割爲多少行
cols——用於將頁面進行縱向分割。cols中有多少項值表示分割爲多少列
border——表示邊框的寬度。無邊框值爲0
frame——表示分割項,用於顯示所引用的頁面。有多少行(或列)就需要有多少個<frame/>
scrolling——表示frame是否具有滾動條。no:無滾動條;yes:有滾動條
noframes——用於在瀏覽器不支持frameset(所有設置將不能正常顯示)顯示的內容
注意:
編寫代碼過程中,frameset替換了body標籤(body於frameset不能同時出現)。
分割數值之間一定要用逗號(,)連接
缺點:
瀏覽器可能會不支持
需要多個頁面
靈活性較差