1. 程式人生 > >列表。表格與媒體元素

列表。表格與媒體元素

標識 enter bsp name ble HR nav section 類型信息

一.無序列表

<ul>
<li>無序列表</li>
<li>有序列表</li>
<li>自定義列表</li>
</ul>

特性:1.沒有順序,每個<li>標簽獨占一行(塊級元素)
2.默認每一個li標簽前有一個實心小圓點
3.主要用於無序類型信息的展示,如導航欄等


二.有序列表

<ol>
<li>無序列表</li>
<li>有序列表</li>
<li>自定義列表</li>
</ol>

特性:1.有順序,每個<li>標簽獨占一行(塊級元素)
2.默認每一個li標簽前有順序標識
3.一般用於排序類型的列表,如試卷、問卷選項等

三:定義列表

<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.默認沒有標記
3.一般用於一個標題下有一個或多個列表項的情況

四.表格

組成部分:行

單元格
表格優點:結構穩定
簡單通用


<table border="1" align="right">
<tr>
<td rowspan="2">張三</td>

<td>語文</td>
<td>98</td>
<tr>
<td>數學</td>
<td>89</td>
</tr>
</tr>

<tr>
<td rowspan="2">李四</td>

<td>語文</td>
<td>76</td>
<tr>
<td>數學</td>
<td>60</td>
</tr>
</tr>

</table>

<!--border:邊框粗細 align:位置 center:居中 colspan:跨列 rowspan:跨行-->
<table border="1" align="center">
<tr>
<td colspan="2" align="center">分數</td>

</tr>
<tr>
<td>89</td>
<td>95</td>
</tr>

</table>

五.媒體元素
video:視頻
<video controls autoplay>
<source src="視頻地址 " type="video/視頻格式">
<source src="視頻地址 " type="video/視頻格式">
</video>
audio:音頻
<audio controls autoplay>
<source src="音頻地址 " type="audio/音頻格式">
<source src="音頻地址 " type="audio/音頻格式">
</audio>

六.頁面格局結構
header 標題頭部區域的內容(用於頁面或頁面中的一塊區域)
footer 標記腳部區域的內容(用於整個頁面或頁面的一塊區域)
section Web頁面中的一塊獨立區域
article 獨立的文章內容
aside 相關內容或應用(常用於側邊欄)
nav 導航類輔助內容
<header style="border: 1px; height: 100px;"><h1>頁面頭部</h1></header>
<section style="border: 1px; height: 500px;"><h1>頁面主題部分</h1></section>
<footer style="border: 1px; height: 100px;"><h1>頁面腳部</h1></footer>

七.內聯框架
<iframe src="嵌套地址" name="自定義名稱"></iframe>
<!--target值必須和iframe的name屬性值相等才能完成點擊a標簽時會在內聯框架中顯示要跳轉的頁面-->
<a href="頁面地址" target="內聯框架自定義名稱"></a>

列表。表格與媒體元素