Heim > Artikel > Web-Frontend > HTML5-Studiennotizen (4) – Beispiele für Listen-, Block- und Layout-Code

HTML5-Studiennotizen (4) – Beispiele für Listen-, Block- und Layout-Code

黄舟Original: 2017-03-16 15:41:481214Durchsuche

HTML-Liste

Listen-Tags

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

Häufig verwendete Listen

1. Ungeordnete Liste

verwendet Tags: ff6d136ddc5fdfeffaf53ff6ee95f185, 25edfb22a4f469ecb59f1190150159c6

Attribute: Scheibe, Kreis, Quadrat

Beispiel:

<!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. Geordnete Liste

verwendet Tags c34106e0b4e09414b63b2ea253ff83d6, 25edfb22a4f469ecb59f1190150159c6

Attribute: 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. Verschachtelte Listen (einschließlich geordneter Listenverschachtelung und ungeordneter Listenverschachtelung)

Verwenden Sie Tags 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. Passen Sie die an Liste

Verwenden Sie die Tags 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>

HTML-Block

　1. HTML-Blockelement

Wenn ein Blockelement angezeigt wird, beginnt es normalerweise mit einer neuen Zeile

Zum Beispiel : 4a249f0d628e2318394fd9b75b4636b1, e388a4556c0f65e1904146cc1a846bee, ff6d136ddc5fdfeffaf53ff6ee95f185

2. HTMLInline-Elemente

Inline-Elemente enden normalerweise nicht mit „Neue Zeile beginnt“

Zum Beispiel: a4b561c25d9afb9ac8dc4d70affff419, 3499910bf9dac5ae3c52d5ede7383485, a1f02c36ba31691bcfe87b2722de723b

3. HTML e388a4556c0f65e1904146cc1a846bee-Element

e388a4556c0f65e1904146cc1a846bee-Element Element, es ist hauptsächlich ein Container zum Kombinieren von HTML

4. HTML 45a2772a6b6107b401db3c9b82c049c2-Element

Das span-Element ist ein Inline-Element und kann als Container für Text

Beispiel: Sie können es einfügen und ausführen, um den Effekt zu sehen (Entwicklungstool 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>

HTML-Layout

Zwei Methoden werden empfohlen:

1. Verwenden Sie das e388a4556c0f65e1904146cc1a846bee-Elementlayout

Beispiel: Tatsächlich ist es nicht erforderlich, p in den CSS-Code einzufügen , und normalerweise ist es nicht erforderlich,

<!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 hinzuzufügen. Verwenden Sie das f5d188ed2c074f8b944552db028f98a1-Elementlayout

Beispiel:

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

Das obige ist der detaillierte Inhalt vonHTML5-Studiennotizen (4) – Beispiele für Listen-, Block- und Layout-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML5-Studiennotizen (3) – Detaillierte Erläuterung der HTML5-Stile, Verbindungen und TabellencodesNächster Artikel：HTML5-Studiennotizen (3) – Detaillierte Erläuterung der HTML5-Stile, Verbindungen und Tabellencodes

In Verbindung stehende Artikel

Mehr sehen