1. 程式人生 > >列表 ,表格與媒體元素基礎

列表 ,表格與媒體元素基礎

html 內聯 註意 src 表格 塊元素 元素 自動 框架

一.列表
信息資源的一種展示形式

二.列表的分類
1.有序列表
<ol>
<li>列表項1</li>
<li>列表項2</li>
</ol>

特性:
1.有順序,每一個li獨占一行
2.默認每一個li前有順序標識

2.無序列表
<ul>
<li>列表項1</li>
<li>列表項2</li>
<ul>

特性:
1.沒有順序,每一個li獨占一行(塊元素)
2.默認每一個li前有一個實心小圓點

3.定義列表
<!--dh標簽同樣代表 列表項的開始類似於dt標簽-->
<dl>
<dt>列表項1</dt>
<dd>列表項1值1</dd>
<dd>列表項1值2</dd>

<dt>列表項2</dt>
<dd>列表項2值1</dd>
<dd>列表項2值2</dd>
</dl>

特性:
1.沒有順序,每一個dt和dd標簽獨占一行
2.默認沒有標記
三.表格
<table>
<tr>
<th>第一行第一個單元格</th>
<th>第一行第二個單元格</th>

</tr>
<tr>
<td>第二行第一個單元格</td>
<td>第二行第二個單元格</td>
</tr>
</table>
跨行(rowspan)和跨列(colspan):橫向跨列,縱向跨行

四.音頻和視頻元素
※使用時註意瀏覽器兼容問題

<video controls="controls">

<source src="../video/video.webm"/>
<source src="../video/video.mp4"/>

</video>


<audio controls autoplay>
<source src="../music/music.mp3"/>
<source src="../music/music.ogg"/>
</audio>

controls:播放插件 autoplay:自動播放

五.iframe內聯框架
<iframe src="嵌套的頁面地址" name="內聯框架名稱" width="200px" height="200px"></iframe>


點擊鏈接跳轉到指定地址:
<a href="fristHtml.html" target="ifrmae">內聯框架第一個頁面</a>
<a href="secondHtml.html" target="ifrmae">內聯框架第二個頁面</a>
<a href="thridHtml.html" target="ifrmae">內聯框架第三個頁面</a>
<iframe src="fristHtml.html" name="ifrmae" width="200px" height="200px"></iframe>

列表 ,表格與媒體元素基礎