Java中列表、表格與媒體元素重點總結

什麼是列表？

1. 列表就是信息資源的一種展示形式。
2. 可以使信息結構化和條理化，並以列表的樣式顯示出來，以便瀏覽者能更快捷地獲得相應的信息
3. 列表中ul、ol、dl不能嵌套其他標籤，但是li中可以嵌套其他標籤

列表的分類：

一、無序列表

無序列表的特性：

1. 沒有順序，每個<li>標籤獨佔一行（塊元素）
2. 默認<li>標籤項前面有個實心小圓點
3. 一般用於無序類型的列表，如導航、側邊欄新聞、有規律的圖文組合模塊等

二、有序列表

有序列表的特性：

1. 有順序，每個<li>標籤獨佔一行（塊元素）
2. 默認<li>標籤項前面有順序標記
3. 一般用於排序類型的列表，如試卷、問卷選項等

 

三、定義列表

定義列表的特性：

1. 沒有順序，每個<dt>標籤、<dd>標籤獨佔一行（塊元素）
2. 默認沒有標記
3. 一般用於一個標題下有一個或多個列表項的情況

 

列表對比：

類型	說明	項目符號
無序列表	以<ul>標籤來實現 以<li>標籤表示列表項	無序列表中的每項都是平級的，沒有級別之分，並且列表中的內容一般都是相對簡單的標題性質的網頁內容
有序列表	以<ol>標籤來實現 以<li>標籤表示列表項	有序列表ol-li一般用於顯示帶有順序編號的特定場合
定義類表	以<dl>標籤來實現 以<dt>標籤定義列表項 以<dd>標籤定義內容	定義列表一般適用於帶有標題和標題解釋性內容的場合

 

列表樣式：

list-style-type

list-style-image

可以放小圖片

list-style-position

可以改變位置

list-style

值	說明	語法示例
none	無標記符號	list-style-type:none;
disc	實心圓，默認類型	list-style-type:disc;
circle	空心圓	list-style-type:circle;
square	實心正方形	list-style-type:square;
decimal	數字	list-style-type:decimal

例如：

li {

       list-style:none;

}

 

表格：

爲什麼使用表格？

1. 簡單通用
2. 結構穩定

基本結構：

1. 行（tr）
2. 單元格（td）

 

表格的基本語法：

<table>

    <tr>

         <td>第1個單元格的內容</td>

         <td>第2個單元格的內容</td>

    </tr>

</table>

表格的跨列：

<table border>

  <tr>

    <td colspan="n">單元格內容</td>         【colspan="n"所跨的列數】

  </tr>

  <tr>

    <td>單元格內容</td>

  </tr>

</table>

表格的跨行：

<table border="1">

  <tr>

<td rowspan="n">單元格內容</td>        【rowspan ="n"所跨的列數】

 </tr>

  <tr>

<td>單元格內容</td>

  </tr>

</table>

表格的跨行和跨列：

<table border="10">

<tr>

        <td colspan="3">學生成績</td>

</tr>

<tr>

        <td rowspan="2">張三</td>

        <td>語文</td>

        <td>98</td>

</tr>

</table>

 

如何實現在網頁上播放視頻和音頻？

1. 第三方自主開發的播放器
2. Flash
3. HTML5媒體元素

 

視頻元素：video

主流瀏覽器支持的視頻格式：

瀏覽器	IE	Firefox	Opera	Chrome	Safari
視頻格式
Ogg	不支持	3.5+	10.5+	5.0+	不支持
MPEG4	9.0+	不支持	不支持	5.0+	3.0+
WebM	不支持	4.0+	10.6+	6.0+	不支持

播放視頻：

<video controls>

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

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

</video>

自動播放視頻：

<video controls autoplay width= "500" >

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

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

    你的瀏覽器不支持video元素

</video>

 

音頻元素：audio

主流瀏覽器支持的音頻格式：

瀏覽器	IE	Firefox	Opera	Chrome	Safari
音頻格式
Ogg	不支持	3.5+	10.5+	3.0+	不支持
MP3	9.0+	不支持	不支持	3.0+	3.0+
WAV	不支持	4.0+	10.6+	不支持	3.0+

播放音頻：

<audio controls>

    <source src="music/music.mp3" type="audio/mpeg"/>

    <source src="music/music.ogg" type="audio/ogg"/>

    你的瀏覽器不支持audio元素

</audio>

 

HTML5的結構元素：

頁面佈局分析：

結構元素：

元素名	描述
header	標題頭部區域的內容（用於頁面或頁面中的一塊區域）
footer	標記腳部區域的內容（用於整個頁面或頁面的一塊區域）
section	Web頁面中的一塊獨立區域
article	獨立的文章內容
aside	相關內容或應用（常用於側邊欄）
nav	導航類輔助內容

<header><h2>網頁頭部</h2> </header>

<section><h2>網頁主體部分</h2></section>

<footer><h2>網頁底部</h2></footer>

 

<iframe>內聯框架：

可以設置src的屬性值爲http://www.bdqn.cn，在這個頁面中也可以打開一個線上的網頁

<iframe>屬性（實現頁面間的相互跳轉）

在被打開的框架上加name屬性：

<iframe name="mainFrame" src="subframe/the_second.html" ></iframe>

在超鏈接上設置target目標窗口屬性爲希望顯示的框架窗口名：

<a href="subframe/the_second.html "  target="mainFrame">下邊顯示第二頁</a>

總結：