Home > Article > Web Front-end > HTML5 study notes (4) - list, block and layout code examples

HTML5 study notes (4) - list, block and layout code examples

黄舟Original: 2017-03-16 15:41:481277browse

HTML list

List tag

tag	Description
c34106e0b4e09414b63b2ea253ff83d6	Define an ordered list.
ff6d136ddc5fdfeffaf53ff6ee95f185	Define an unordered list.
25edfb22a4f469ecb59f1190150159c6	Define list items.
def3eed00a09ea710a4bfa4b7fe74771	Definition definition list.
73de882deff7a050a357292d0a1fca94	Definition definition project.
67bc4f89d416b0b8236eaa5f43dee742	Definition Description of the definition.
e844f12ad266097c5818f79a28478846	is obsolete. Use ff6d136ddc5fdfeffaf53ff6ee95f185 instead.
5c0e96d12fc7501cef2ae2efde646ee0	is obsolete. Use ff6d136ddc5fdfeffaf53ff6ee95f185 instead.

##Commonly used lists

1. Unordered list

Use tags: ff6d136ddc5fdfeffaf53ff6ee95f185, 25edfb22a4f469ecb59f1190150159c6

Attributes: disc, circle, square

Example:

<!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. Ordered list

Use tags c34106e0b4e09414b63b2ea253ff83d6, < ;li>

Attributes: 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. Nested lists (including ordered list nesting and unordered list nesting)

Use the 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. Customize the list

Use the tags 5c69336ffbc20d23018e48b396cdd57a, 73de882deff7a050a357292d0a1fca94, 152436f649dfcc2350c70c7083a3231e

<!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 block element When block elements are displayed, they usually start with a new line

For example: 4a249f0d628e2318394fd9b75b4636b1, e388a4556c0f65e1904146cc1a846bee, ff6d136ddc5fdfeffaf53ff6ee95f185

2. HTML

Inline elements

Inline elements usually do not start with a new line

For example: a4b561c25d9afb9ac8dc4d70affff419, 3499910bf9dac5ae3c52d5ede7383485, a1f02c36ba31691bcfe87b2722de723b

3. HTML e388a4556c0f65e1904146cc1a846bee element

The e388a4556c0f65e1904146cc1a846bee element is also called a block element, which is mainly a container that combines HTML

4. HTML 45a2772a6b6107b401db3c9b82c049c2 element

The span element is an inline element and can be used as a container for text

Example: You can paste and run it to see the effect (development tool 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>

HTMLLayout

Two methods are recommended:

1. Use e388a4556c0f65e1904146cc1a846bee element layout

Example: In fact, there is no need to add p in the css code, and usually there is no need to add

<!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. Use f5d188ed2c074f8b944552db028f98a1 element layout

Example:

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

The above is the detailed content of HTML5 study notes (4) - list, block and layout code examples. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 Study Notes (3) - Detailed explanation of HTML5 styles, connections and table codesNext article：HTML5 Study Notes (3) - Detailed explanation of HTML5 styles, connections and table codes

See more

HTML5 study notes (4) - list, block and layout code examples

Related articles