HTML列表、表格與媒體元素

来源:https://www.cnblogs.com/wyh518/archive/2022/11/06/16862738.html
-Advertisement-
Play Games

1、列表 無序列表和定義列表在網頁製作中應用非常廣泛 什麼是列表: 列表就是信息資源的一種展示形式。它可以使信息結構化和條理化,並以列表的樣式顯示出來,以便瀏覽者能更快捷地獲得相應的信息。 無序列表 <!--ul 聲明無序列表--> <ul> <!--li 聲明列表項--> <li>語文</li> ...


1、列表

無序列表和定義列表在網頁製作中應用非常廣泛

什麼是列表:

列表就是信息資源的一種展示形式。它可以使信息結構化和條理化,並以列表的樣式顯示出來,以便瀏覽者能更快捷地獲得相應的信息。

無序列表

<!--ul 聲明無序列表-->
<ul>
    <!--li 聲明列表項-->
    <li>語文</li>
    <li>數學</li>
    <li>英語</li>
    <li>電腦</li>
</ul>

列表項中可以包含圖片、文本,還可以嵌套列表、其他標簽等

無序列表的特性

  • 沒有順序,每個< li>標簽獨占一行(塊元素)
  • 預設<li>標簽項前面有個實心小圓點
  • 一般用於無序類型的列表,如導航、側邊欄新聞、有規律的圖文組合模塊等

有序列表

<!--ol 聲明有序列表-->
<ol>
    <li>語文</li>
    <li>數學</li>
    <li>英語</li>
    <li>電腦</li>
</ol>

有序列表預設以數字序號顯示

有序列表與無序列表一樣,也可以嵌套列表、可以包含圖片、文本、其他標簽等

有序列表的特性

  • 有順序,每個< li>標簽獨占一行(塊元素)
  • 預設< li>標簽項前面有順序標記
  • 一般用於排序類型的列表,如試卷、問卷選項等

自定義列表

<!--dl 聲明定義列表-->
<dl>
    <!--dt 聲明列表項-->
    <dt>水果</dt>
    <!--dd 定義列表項內容-->
    <dd>蘋果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>
</dl>

定義列表也可以嵌套列表、包含圖片、文本、其他標簽等

以後的網頁製作中經常會用到定義列表,特別是圖文混排的情況

定義列表的特性

  • 沒有順序,每個< dt>標簽、< dd>標簽獨占一行(塊元素)
  • 預設沒有標記
  • 一般用於一個標題下有一個或多個列表項的情況

 

 

 小結:列表對比

列表之間可以互相嵌套,進行頁面的局部佈局

 

2、表格

基本結構

  • 單元格

表格的基本語法

<!--table表格標簽-->
<table border="1px">
    <!--tr 行標簽-->
    <tr>
        <!--td 單元格標簽-->
        <td>第1個單元格的內容</td>
        <td>第2個單元格的內容</td>
        ……
    </tr>
    <tr>
        <td>第1個單元格的內容</td>
        <td>第2個單元格的內容</td>
        ……
    </tr>
</table>

表格的跨列 

<table>
    <tr>
        <!--colspan 所跨的列數-->
        <td colspan="n">單元格內容</td>
    </tr>
    <tr>
        <td>單元格內容</td>
        ……
    </tr>
    ......
</table>

 表格的跨行

<table >
    <tr>
        <!--rowspan 所跨的行數-->
        <td rowspan="n"> </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
    </tr>
</table>

 表格的跨行和跨列

<table>
    <tr>
        <!--跨列-->
        <td colspan="3">學生成績</td>
    </tr>
    <tr>
        <!--跨行-->
        <td rowspan="2">張三</td>
        <td>語文</td>
        <td>98</td>
    </tr>
</table>

3、音頻、視頻

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

  • 第三方自主開發的播放器
  • Flash
  • HTML5媒體元素

在HTML5問世之前,要在網頁上展示視頻、音頻、動畫等,除了使用第三方自主開發的播放器外,使用 最多的工具應該算是Flash了,但是它需要在瀏覽器上安裝各種插件才能使用,有時候速度也會非常慢。 HTML5的出現改變了這一狀況,在網頁中使用HTML5來播放音頻、視頻再也不需要安裝插件,只需要一 個支持HTML5的瀏覽器就可以了。

視頻標簽

src:指定要播放的視頻文件的路徑
controls:提供播放、暫停和音量的控制項
autoplay:自動播放屬性
loop:視頻的迴圈播放
<video src="視頻路徑" controls autoplay></video>

音頻標簽

src:指定要播放的音頻文件的路徑
trols:提供播放、暫停和音量的控制項
<audio src="音頻路徑" controls autoplay></video>

 

4、頁面結構分析

 HTML5結構元素

5、內聯框架

iframe 單頁面內聯

src:引用頁面地址
name:框架標識名
<iframe src="path" name="mainFrame" ></iframe>

iframe屬性(實現頁面間的相互跳轉)

在被打開的框架上加name屬性
<iframe name="mainFrame"></iframe>
在超鏈接上設置target目標視窗屬性為希望顯示的框架視窗名
<a href="https://www.baidu.com/" target="mainFrame">載入</a>

 

6、小結

 

本文來自博客園,作者:腹白,轉載請註明原文鏈接:https://www.cnblogs.com/wyh518/


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 先上效果 簡易map 在圖一的地圖中可以看到 a點 連接 到 b點, 基本信息 以及 基本的控制項(放大、縮小、回到某個指定的點),接下來我們分開逐步講解。 所需配置 需要先在manifest.json中的 app模塊中配置地圖,並添加相關 ...
  • 函數 基本概念 在JS中,函數實際上是對象,是Function類型的實例。 函數名是指向函數對象的指針。 function sum(num1, num2){ return num1 + num2; } // 檢查sum是否是Function類型的實例 console.log(sum instance ...
  • 1、什麼是CSS Cascading Style Sheet 級聯樣式表。 表現HTML或XHTML文件樣式的電腦語言。 包括對字體、顏色、邊距、高度、寬度、背景圖片、網頁定位等設定。 2、CSS的發展史 CSS1.0 讀者可以從其他地方去使用自己喜歡的設計樣式去繼承性地使用樣式; CSS2.0 ...
  • 虛擬DOM就是用JS來模擬DOM結構的,它並不是真正的DOM。 為什麼使用虛擬DOM? 用傳統的方式去操作DOM的時候,瀏覽器會從構建DOM樹開始,從頭到尾執行一遍流程。簡單來說,就是會觸發重排與重繪。 比如說,在一次操作中,需要更新10個DOM節點。 理想是一次性構建完成DOM樹,但是瀏覽器並不會 ...
  • 一、事件委派 1.理解DOM事件流 事件流描述的是從頁面中接收事件的順序。事件發生時會在元素節點之間按照特定的順序傳播,這個傳播過程即DOM事件流。 DOM事件流分為三個階段: 捕獲階段:從上往下 當前目標階段 冒泡階段:從下往上 事件流如下圖所示: 註意事項: JavaScript代碼中只能執行捕 ...
  • 一.商品列表 1.1 獲取數據 首先能夠進入商品列表的途徑 傳的數據有 瞭解了這個之後就可以開始了,先創建分支 創建編譯模式,並分配初試數據 這個時候就可以獲取數據了 需要的數據 所以在發起請求之前需要整理一下數據,先定義數據 整理數據發起請求 1.2 渲染頁面 ==註意我們可以去定義一個預設的圖片 ...
  • 本文主要記錄 Vue.js 中的 router 管理,涉及如何使用路由實現單頁面應用(SPA)的組件切換,以及路由的一些 API 操作。 ...
  • 1、表單語法 method: 規定如何發送表單數據常用值:get post 在實際網頁開發中通常採用post方式提交表單數據 action: 表示向何處發送表單數據 <form method="post" action="result.html"> <p>名字:<input name="name" ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...