溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html5學(xué)習(xí)筆記(2)

發(fā)布時(shí)間：2020-07-15 16:01:44 來(lái)源：網(wǎng)絡(luò) 閱讀：382 作者：thystar 欄目：移動(dòng)開發(fā)

html5


列表：

http://www.w3school.com.cn/tags/html_ref_byfunc.asp


html5學(xué)習(xí)筆記(2)

列表：

  • 無(wú)序列表：

    • 使用標(biāo)簽<ul><li>

    • 屬性：disc, circle, square

  • 有序列表：

    • 使用標(biāo)簽<ol><li>

    • 屬性：A,a,I,i,start

  • 嵌套列表：

    • 使用標(biāo)簽：<ul>,<ol>,<li>

  • 自定義列表：

    • 使用標(biāo)簽：<dl>,<dt>,<dd>

<body>
    <ul type="circle">
        <li>apple</li>
        <li>bnana</li>
        <li>orange</li>
    </ul>
    <ul type="square">
        <li>apple</li>
        <li>bnana</li>
        <li>orange</li>
    </ul>
    <ol type="a">
        <li>apple</li>
        <li>bnana</li>
        <li>orange</li>
    </ol>
    <ol type="A">
        <li>apple</li>
        <li>bnana</li>
        <li>orange</li>
    </ol>
    <ol type="i">
        <li>apple</li>
        <li>bnana</li>
        <li>orange</li>
    </ol>
    <ol type="I">
        <li>apple</li>
        <li>bnana</li>
        <li>orange</li>
    </ol>
    <ol start="10">
        <li>apple</li>
        <li>bnana</li>
        <li>orange</li>
    </ol>
    <ul type="square">
        <li>fruit</li>
            <ol>
                <li>apple</li>
                <li>bnana</li>
                <li>orange</li>
            </ol>
        <li>vegetable</li>
            <ol>
                <li>potato</li>
                <li>tomato</li>
                <li>cabbage</li>
            </ol>
    </ul>
    <dl>
        <dt>helloworld</dt>
            <dd>print helloworld</dd>
        <dt>helloworld</dt>
            <dd>print helloworld</dd>
    </dl>
</body>


html塊

  1. html塊元素

    1. 塊元素在顯示時(shí)，通常以新行開始

    2. <h2>,<p>.<ul>

  2. html內(nèi)聯(lián)元素：

    1. 內(nèi)聯(lián)元素通常不會(huì)以新行開始

    2. <b>,<a>,<img>

  3. html <div>元素：

    1. <div>元素也被稱為塊元素，其主要是組合html元素的容器

  4. html<span>元素：

    1. <span>元素是內(nèi)聯(lián)元素，可作為文本的容器

<div>和<span>通常一起使用


index.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="divcss.css">
    <style type="text/css">
        span{
            color: crimson;
        }
    </style>
    <title></title>
</head>
<body>
    <p>hello world</p>
    <h2>hello world</h2>
    <br/>
    <b>helloworld</b>
    <a href="hrefht.html">hrefht</a>
    <br/>
    <div id="divid">
        <p>helloworld</p>
        <a>click</a>
    </div>
    <div id="divspan">
        <p><span>hello world</span>this is a text</p>
    </div>
</body>
</html>


divcss.css:

#divid p{
    color : chartreuse;
}

html5學(xué)習(xí)筆記(2)

html布局：

    

使用<div>布局    

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css">
        body{
            margin: 0px;
        }
        div#container{
            width: 100%;
            height: 950px;
            color : gainsboro;
        }
        div#heading{
            width: 100%;
            height: 10%;
            background-color: cornflowerblue;
        }
        div#content_menu{
            width: 30%;
            height: 80%;
            background-color: gainsboro;
            float: left;
        }
        div#content_body{
            width: 70%;
            height: 80%;
            background-color: burlywood;
            float: right;
        }
        div#footing{
            width: 100%;
            height: 10%;
            background-color: black;
            clear: both;
        }
    </style>
    <title></title>
</head>
<body>
    <div id="container">
        <div id="heading">頭部</div>
        <div id="content_menu">內(nèi)容菜單</div>
        <div id="content_body">內(nèi)容主體</div>
        <div id="footing">底部</div>
    </div>
</body>
</html>

    

使用<table>布局

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body marginheight="0px" marginwidth="0px">
    <table width="100%" height="950px" >
        <tr>
            <td colspan="2" width="100%" height="10%" >頭部</td>
        </tr>
        <tr>
            <td width="20%" height="80" >
                <ul>
                    <li>ios</li>
                    <li>ios</li>
                    <li>ios</li>
                </ul>
            </td>
            <td width="60%" height="80%" >實(shí)體</td>
            <td width="20%" height="80" >左菜單</td>
        </tr>
        <tr>
            <td colspan="2" width="100%" height="10%" >底部</td>
        </tr>
    </table>
</body>
</html>



極客學(xué)院：http://www.jikexueyuan.com/course/135.html


向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手