masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah hujung hadapan web Tutorial H5 HTML5学习笔记（四）-列表, 块和布局代码实例

HTML5学习笔记（四）-列表, 块和布局代码实例

黄舟
黄舟
Mar 16, 2017 pm 03:41 PM

HTML列表

　　列表标签

标签 描述
    		定义有序列表。
      		定义无序列表。
    		• 定义列表项。
      <dl> 定义定义列表。
      		定义定义项目。
      		定义定义的描述。
      <dir> 已废弃。使用
        代替它。
      已废弃。使用
        代替它。

      常用的列表

      1. 无序列表

      使用标签:

        ,

      • 属性: 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>
        Salin selepas log masuk

        2. 有序列表

        使用标签

          ,

        1. 　　属性: 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>
          Salin selepas log masuk

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

          　　使用标签

            ,
              , 

            1. <!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>
              Salin selepas log masuk

              　　4. 自定义列表

              　　使用标签

              ,
              , 

              <!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>
              Salin selepas log masuk

              HTML块

              　　1. HTML块元素

              　　块元素在显示时, 通常会以新行开始

              　　如:

              ,

              ,

                　　2. HTML内联元素

                　　内联元素通常不会以新行开始

                　　如: , ,

                　　3. HTML

                元素

                　　

                元素也被称为块元素, 其主要是组合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>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>
                Salin selepas log masuk

                HTML布局

                推荐两种方式:

                　　1. 使用

                元素布局

                　　例: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>
                Salin selepas log masuk

                　　2. 使用

                元素布局

                　　例:

                <!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>
                Salin selepas log masuk


                Atas ialah kandungan terperinci HTML5学习笔记（四）-列表, 块和布局代码实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

                Kenyataan Laman Web ini
                Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

                Alat AI Hot

                Undresser.AI Undress

                Undresser.AI Undress

                Apl berkuasa AI untuk mencipta foto bogel yang realistik

                AI Clothes Remover

                AI Clothes Remover

                Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

                Undress AI Tool

                Undress AI Tool

                Gambar buka pakaian secara percuma

                Clothoff.io

                Clothoff.io

                Penyingkiran pakaian AI

                Video Face Swap

                Video Face Swap

                Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

                Tunjukkan Lagi

                Artikel Panas

                Assassin's Creed Shadows: Penyelesaian Riddle Seashell
                3 minggu yang lalu By DDD
                Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini
                2 minggu yang lalu By DDD
                Di mana untuk mencari kad kunci kawalan kren di atomfall
                3 minggu yang lalu By DDD
                <🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran
                4 minggu yang lalu By DDD
                Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua
                4 minggu yang lalu By DDD
                Tunjukkan Lagi

                Alat panas

                Notepad++7.3.1

                Notepad++7.3.1

                Editor kod yang mudah digunakan dan percuma

                SublimeText3 versi Cina

                SublimeText3 versi Cina

                Versi Cina, sangat mudah digunakan

                Hantar Studio 13.0.1

                Hantar Studio 13.0.1

                Persekitaran pembangunan bersepadu PHP yang berkuasa

                Dreamweaver CS6

                Dreamweaver CS6

                Alat pembangunan web visual

                SublimeText3 versi Mac

                SublimeText3 versi Mac

                Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

                Tunjukkan Lagi

                Topik panas

                Di manakah pintu masuk log masuk untuk e-mel gmail?
                7652
                15
                Tutorial CakePHP
                1393
                52
                Apakah format nama akaun stim
                91
                11
                kunci pengaktifan win11 kekal
                73
                19
                Jawapan silang kata NYT mini
                37
                110
                Tunjukkan Lagi
                Related knowledge
                Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

                Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

                Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

                Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

                HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

                Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

                Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

                Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

                Pemegang Tempat Input HTML Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

                Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

                Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

                Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

                Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

                Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

                Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

                Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

                See all articles

                Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

                Tentang kita Penafian Sitemap

                © php.cn All rights reserved