1. 程式人生 > >HTML5------列表、表格與媒體元素

HTML5------列表、表格與媒體元素

列表

無序列表:

無序列表中使用到了ul與li標籤,ul為外標籤,ul中只能存在li標籤,li標籤中可以存在其他標籤 基本格式:

<ul>
	<li>···</li>
	<li>···</li>
	······
</ul>
有序列表:

有序列表中使用到了ol與li標籤,ol為外標籤,ol中只能存在li標籤,li標籤中可以存在其他標籤 基本格式:

<ol>
	<li>···</li>
	<li>···</li>
	······
<ol/>
自定義列表:

自定義列表顧名思義可以自定義,自定義的類別列表,自定義類別中的元素和個數,通過運用dl(外標籤)–dt(類別)–dd(元素)–dl/格式實現 基本格式:

<dl>
	<dt>類別
	<dd>元素
	<dd>元素
	<dt>類別
	<dd>元素
	<dd>元素
	······
</dl>

表格:

表格中用到table(外標籤)、tr(行標籤)、td(單元格標籤)、th(標題標籤)。 基本格式:

<table>
	<tr>
		<th>···</th>
		······
	</tr>
	<tr>
		<td>···</td>
		······
	</tr>
	<tr>
		<td>···</td>
		······
	</tr>
	······
</table>

表格中存在兩種常用屬性:跨行(rowspan)與跨列(colspan),這兩個屬性均為td/th標籤的屬性,賦予的值是所跨行與列的個數。

連結

1.超連結

基本格式:

<a href=" 地址(網址需http://開頭) " 
target=" 目標視窗位置(常用_self和_blank,也可以是標記的視窗)
>連結文字式影象<a/> "
錨鏈節
A頁甲位------A頁乙位 A頁甲位------B頁乙位
建立跳轉連結標記
基本格式:
<a name=" 標記值 ">乙</a>
建立跳轉連結
基本格式:
<a href=" #目標name值 " >甲</a>

新增影象

基本格式:
<img src=" 圖片地址 " alt=" 影象替代的文字,當網速或影象源影響,圖片無法載入時顯示 "
 title=" 滑鼠懸停提示文字 " width=" 圖片寬度 " height=" 圖片高度 ">

新增視訊音訊元素

視訊、音訊元素新增原理相同,此處用視訊舉例 source標籤在video下,這裡有一個注意的是,不同的瀏覽器有不同的相容性,可以存在多個source標籤,每個標籤的視訊格式各有不同,當瀏覽器啟動網頁時,會依次去嘗試source下的視訊,如果成功相容播放,就不會在嘗試之後的source,在失敗之後才會繼續嘗試後面的。 基本格式:
<video src=" 視訊路徑 " controls(這裡controls為點選播放,具體還有其他控制按鈕;另外還可以為autoplay,它為自動播放)>
	<source src=" 視訊地址 " />
	······
</video>

iframe框架

此框架用於引用外網頁面至本頁面顯示 基本格式:
<a href=" 地址 " target=" 標記 ">連結內容</a>
<a ···

<iframe name=" 標記 " width=" 框架寬度 " height=" 框架高度 " 
src=" 初始框架內的顯示內容 " />