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
  • 一個自定義WPF窗體的解決方案,借鑒了呂毅老師的WPF製作高性能的透明背景的異形視窗一文,併在此基礎上增加了滑鼠穿透的功能。可以使得透明窗體的滑鼠事件穿透到下層,在下層窗體中響應。 ...
  • 在C#中使用RabbitMQ做個簡單的發送郵件小項目 前言 好久沒有做項目了,這次做一個發送郵件的小項目。發郵件是一個比較耗時的操作,之前在我的個人博客裡面回覆評論和友鏈申請是會通過發送郵件來通知對方的,不過當時只是簡單的進行了非同步操作。 那麼這次來使用RabbitMQ去統一發送郵件,我的想法是通過 ...
  • 當你使用Edge等瀏覽器或系統軟體播放媒體時,Windows控制中心就會出現相應的媒體信息以及控制播放的功能,如圖。 SMTC (SystemMediaTransportControls) 是一個Windows App SDK (舊為UWP) 中提供的一個API,用於與系統媒體交互。接入SMTC的好 ...
  • 最近在微軟商店,官方上架了新款Win11風格的WPF版UI框架【WPF Gallery Preview 1.0.0.0】,這款應用引入了前沿的Fluent Design UI設計,為用戶帶來全新的視覺體驗。 ...
  • 1.簡單使用實例 1.1 添加log4net.dll的引用。 在NuGet程式包中搜索log4net並添加,此次我所用版本為2.0.17。如下圖: 1.2 添加配置文件 右鍵項目,添加新建項,搜索選擇應用程式配置文件,命名為log4net.config,步驟如下圖: 1.2.1 log4net.co ...
  • 之前也分享過 Swashbuckle.AspNetCore 的使用,不過版本比較老了,本次演示用的示例版本為 .net core 8.0,從安裝使用開始,到根據命名空間分組顯示,十分的有用 ...
  • 在 Visual Studio 中,至少可以創建三種不同類型的類庫: 類庫(.NET Framework) 類庫(.NET 標準) 類庫 (.NET Core) 雖然第一種是我們多年來一直在使用的,但一直感到困惑的一個主要問題是何時使用 .NET Standard 和 .NET Core 類庫類型。 ...
  • WPF的按鈕提供了Template模板,可以通過修改Template模板中的內容對按鈕的樣式進行自定義。結合資源字典,可以將自定義資源在xaml視窗、自定義控制項或者整個App當中調用 ...
  • 實現了一個支持長短按得按鈕組件,單擊可以觸發Click事件,長按可以觸發LongPressed事件,長按鬆開時觸發LongClick事件。還可以和自定義外觀相結合,實現自定義的按鈕外形。 ...
  • 一、WTM是什麼 WalkingTec.Mvvm框架(簡稱WTM)最早開發與2013年,基於Asp.net MVC3 和 最早的Entity Framework, 當初主要是為瞭解決公司內部開發效率低,代碼風格不統一的問題。2017年9月,將代碼移植到了.Net Core上,併進行了深度優化和重構, ...