HTML5------列表、表格與媒體元素
阿新 • • 發佈:2018-12-14
列表
無序列表:
無序列表中使用到了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=" 初始框架內的顯示內容 " />