H5教程

HTML5學習筆記（四）-列表, 區塊和佈局程式碼實例

黄舟

Mar 16, 2017 pm 03:41 PM

HTML清單

　　清單標籤

描述定義有序列表。

#定義無序列表。

#定義清單項目。 dl>#定義定義清單。

#定義定義項目。

#定義定義的描述。

dir

>#已廢棄。使用

已廢棄。使用

##屬性

: disc, circle, square

範例:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>聊表</title></head><body>
    <!--无序列表, 列表项为li-->
    <!--disc 实心圆, circle 空心圆, square 实行正方形, 依次更改运行看下--><ul type="disc">
    <li>apple</li>
    <li>orange</li>
    <li>bananer</li>
    <li>Berry</li></ul></body></html>

2. 有序列表

使用標籤

, < ;li>

　　屬性: A, a, I, i, start

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>列表</title></head><body><!--有序列表, 列表项为li--><!--A: 以A,B,C...排序
    a: 以a,b,c...排序
    I: 以I, II, III...排序
    i: 以i,ii,iii...排序
    start: 自己定义排序的第一个--><ol type="i">
    <li>iOS</li>
    <li>Android</li>
    <li>Java</li>
    <li>Swift</li>
    <li>Objective-C</li></ol></body></html>

　　3. 嵌套列表(包含有序列表嵌套, 無序列表嵌套)

　　使用標籤

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>列表</title></head><body><!----><ul type="square">
    <li>iOS</li>
        <ul>
            <li>iPhone</li>
            <li>iWatch</li>
            <li>iPod</li>
            <li>iPad</li>
        </ul>
    <li>Android</li>
        <ul>
            <li>Any Call</li>
            <li>Oppo</li>
            <li>Vivio</li>
            <li>Huawei</li>
        </ul>
    <li>Objective-C</li></ul></body></html>

　　4. 自訂列表

## #　　使用標籤

, <dt># dd>

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>自定义列表</title></head><body><!--定义自定义列表--><dl>
    <!--定义自定义项目-->
    <dt>cast:</dt>
    <!--定义自定义描述-->
        <dd>vi. 1投掷扔抛, 2丢弃, 抛弃 3把...投向, 抛射, 4分派..., 扮演角色 5铸造, 浇铸 n. 全体演员</dd>
    <dt>forecast:</dt>
        <dd>v. 预测, 预报, /dd>        <dd>n. 预测, 预报<</dd>
    <dt>insight:</dt>
     <dd>n. 洞察力, 领悟 v. 洞悉, 了解</dd></dl></body></html>

HTML區塊

　　1. HTML區塊元素

　　塊元素在顯示時, 通常會以新行開始

　　如:

,

#　　2. HTML

　　內嵌元素通常不會以新行開始

　　如: , ,

　　3. HTML

元素

元素也被稱為塊元素, 其主要是組合HTML的容器#######　　4. HTML 元素########　　4. HTML 元素## ####　　span元素是內聯元素, 可作為文字的容器######　　例:可貼上執行查看效果(開發工具IntelliJ IDEA)###

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>块元素</title>
    <!--样式-->
    <style type="text/css">
        #wraper p{
            color: blueviolet;
        }
        #span span{
            color: indianred;
        }
    </style></head><body><!--块元素--><h1 id="visual">visual:</h1><p>视力的, 视觉的</p>
    <!--内联元素--><b>vision:</b><a>1视力, 2眼光,远见, 洞察力 3幻想 4设想, 念头</a>
    <!--p元素--><p id="wraper">
    <p>prospective</p>
    <a>1可能的,有望的 2未来的, 即将发生的</a></p><!--span元素: 文本的容器--><p id="span">
    <p>respective: <span>分别的,</span> 各自的</p></p></body></html>

元素佈局######　　例: css程式碼中其實p不用加, 通常也不用加###

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>p布局</title>
    <style type="text/css">
        body{margin: 0px}
        p#container{
            /*可以充满全屏*/
            width: 100%;
            height: 950px;
            background-color: darkgray;
        }
        p#heading{
            width: 100%;
            height: 10%;
            background-color: aqua;
        }
        p#menu{
            width: 30%;
            height: 80%;
            background-color: darkorange;
            float: left;
        }
        p#mainbody{
            width: 70%;
            height: 80%;
            background-color: brown;
            float: left;
        }
        p#footing{
            width: 100%;
            height: 10%;
            background-color: cornflowerblue;
            clear: both;
        }
    </style></head><body><p id="container">
    <p id="heading">头部</p>
    <p id="menu">内容菜单</p>
    <p id="mainbody">内容主体</p>
    <p id="footing">底部</p></p></body></html>

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>table布局</title></head><body marginheight="0px" marginwidth="0px">
    <table width="100%" height="950" style="background-color: darkgray">
    <tr>
        <td colspan="3" width="100%" height="10%" style="background-color: aqua">
            头部        </td>
    </tr>
    <tr>
        <td width="20%" height="80%" style="background-color: cornflowerblue">
            <ul>
                <li>diktatet</li>
                <li>diktator</li>
                <li>diktation</li>
            </ul>
        </td>
        <td width="60%" height="80%" style="background-color: cadetblue">中间部分</td>
        <td width="20%" height="80%" style="background-color: crimson">右菜单</td>
    </tr>
    <tr>
        <td width="100%" height="10%" colspan="3" style="background-color: coral">底部</td>
    </tr></table></body></html>

以上是HTML5學習筆記（四）-列表, 區塊和佈局程式碼實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代碼：可訪問性和語義HTMLApr 09, 2025 am 12:05 AM

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構，提高SEO。 2.ARIA屬性如aria-label增強可訪問性，輔助技術用戶可順利使用網頁。

H5與HTML5相同嗎？Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多數情況下是相同的，但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準，包含新標籤和API。 2."h5"通常是HTML5的簡稱，但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

H5的功能是什麼？Apr 07, 2025 am 12:10 AM

H5，即HTML5，是HTML的第五個版本，它為開發者提供了更強大的工具集，使得創建複雜的網頁應用變得更加簡單。 H5的核心功能包括：1）元素允許在網頁上繪製圖形和動畫；2）語義化標籤如、等，使網頁結構清晰，利於SEO優化；3）新API如GeolocationAPI，支持基於位置的服務；4）跨瀏覽器兼容性需要通過兼容性測試和Polyfill庫來確保。

h5鏈接怎麼做Apr 06, 2025 pm 12:39 PM

如何創建 H5 鏈接？確定鏈接目標：獲取 H5 頁面或應用程序的 URL。創建 HTML 錨點：使用 <a> 標記創建錨點並指定鏈接目標URL。設置鏈接屬性（可選）：根據需要設置 target、title 和 onclick 屬性。添加到網頁：將 HTML 錨點代碼添加到希望鏈接出現的網頁中。

h5兼容問題怎麼解決Apr 06, 2025 pm 12:36 PM

解決 H5 兼容問題的方法包括：使用響應式設計，允許網頁根據屏幕尺寸調整佈局。採用跨瀏覽器測試工具，在發布前測試兼容性。使用 Polyfill，為舊瀏覽器提供對新 API 的支持。遵循 Web 標準，使用有效的代碼和最佳實踐。使用 CSS 預處理器，簡化 CSS 代碼並提高可讀性。優化圖像，減小網頁大小並加快加載速度。啟用 HTTPS，確保網站的安全性。

See all articles