Maison > Article > interface Web > Notes d'étude HTML5 (4) - exemples de codes de liste, de bloc et de mise en page

Notes d'étude HTML5 (4) - exemples de codes de liste, de bloc et de mise en page

黄舟original: 2017-03-16 15:41:481277parcourir

Liste HTML

Balises de liste

标签	描述
c34106e0b4e09414b63b2ea253ff83d6	定义有序列表。
ff6d136ddc5fdfeffaf53ff6ee95f185	定义无序列表。
25edfb22a4f469ecb59f1190150159c6	定义列表项。
def3eed00a09ea710a4bfa4b7fe74771	定义定义列表。
73de882deff7a050a357292d0a1fca94	定义定义项目。
67bc4f89d416b0b8236eaa5f43dee742	定义定义的描述。
e844f12ad266097c5818f79a28478846	已废弃。使用 ff6d136ddc5fdfeffaf53ff6ee95f185 代替它。
5c0e96d12fc7501cef2ae2efde646ee0	已废弃。使用 ff6d136ddc5fdfeffaf53ff6ee95f185 代替它。

Listes couramment utilisées

utilise les balises : ff6d136ddc5fdfeffaf53ff6ee95f185, 25edfb22a4f469ecb59f1190150159c6

Attributs : disque, cercle, carré

Exemple :

<!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. La liste ordonnée

utilise les balises c34106e0b4e09414b63b2ea253ff83d6, 25edfb22a4f469ecb59f1190150159c6

Attributs : 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. Listes imbriquées (y compris l'imbrication de listes ordonnées et l'imbrication de listes non ordonnées)

Utilisez les balises ff6d136ddc5fdfeffaf53ff6ee95f185, c34106e0b4e09414b63b2ea253ff83d6, 25edfb22a4f469ecb59f1190150159c6

<!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. Personnalisez le liste

Utiliser les balises 5c69336ffbc20d23018e48b396cdd57a, 73de882deff7a050a357292d0a1fca94, 67bc4f89d416b0b8236eaa5f43dee742

<!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>

Bloc HTML

　1. Élément de bloc HTML

Lorsqu'un élément de bloc est affiché, il commence généralement par une nouvelle ligne

Par exemple. : 4a249f0d628e2318394fd9b75b4636b1, e388a4556c0f65e1904146cc1a846bee, ff6d136ddc5fdfeffaf53ff6ee95f185

2. HTMLéléments en ligne

Les éléments en ligne ne commencent généralement pas par une nouvelle ligne commence

Par exemple : a4b561c25d9afb9ac8dc4d70affff419, 3499910bf9dac5ae3c52d5ede7383485, a1f02c36ba31691bcfe87b2722de723b

3. Élément HTML e388a4556c0f65e1904146cc1a846bee

Élément e388a4556c0f65e1904146cc1a846bee élément, il s'agit principalement d'un conteneur pour combiner du HTML

4. Élément HTML 45a2772a6b6107b401db3c9b82c049c2

L'élément span est un élément en ligne et peut être utilisé comme conteneur pour le texte

Exemple : Vous pouvez le coller et l'exécuter pour voir l'effet (outil de développement 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>

Mise en page HTML

Deux méthodes sont recommandées :

　1. Utiliser la disposition des éléments e388a4556c0f65e1904146cc1a846bee

Exemple : En fait, il n'est pas nécessaire d'ajouter p dans le code CSS , et il n'est généralement pas nécessaire d'ajouter

<!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>

　2. Utilisez la disposition des éléments f5d188ed2c074f8b944552db028f98a1

Exemple :

<!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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Notes d'étude HTML5 (3) - Explication détaillée des styles HTML5, des connexions et des codes de tableArticle suivant：Notes d'étude HTML5 (3) - Explication détaillée des styles HTML5, des connexions et des codes de table

Articles Liés

Voir plus