HTML5學習第四天

阿新 • • 發佈：2021-02-06

HTML5學習第四天

一、HTML列表

HTML列表，有無序表，有序表以及自定義表，列表於列表之間可以實現巢狀

   <ul>
        <li>(多選)誰世界第二可愛？</li>
        <ol type="A">
            <li>荔枝</li>
            <li>荔枝</li>
            <li>荔枝</li>
            <li>荔枝</li>
            <li>荔枝</li>
        </ol>
        <li>(多選)誰世界第一可愛？</li>
        <ol type="A">
            <li>不是荔枝</li>
            <li>就不是荔枝</li>
            <li>還是不是荔枝</li>
            <li>怎麼都不是荔枝</li>
            <li>別看了，和上面一樣</li>
        </ol>
    </ul>

二、HTML5塊標籤的使用

HTML塊元素在顯示時，通常會換行，HTML內聯元素通常不會新行開始

HTML<div>元素主要作為HTML其他元素組合的容器，便於CSS檔案對其進行樣式表定義，一般會帶有ID

HTML<span>元素也是一種內聯元素，可以作為文字的容器，小說網站裡的文字基本以<span>作為標籤

HTML塊

    <!-- 塊 -->
    <p>荔枝</p>
    <h1>標題荔枝</h1>
    <b>加化荔枝</b>
    <a href="index01.html">轉跳荔枝</a>
    <div id="divID">
        <!-- div元素一般u用於搭配css樣式搭配-->
        <p>div荔枝</p>
        <h1>DIV裡的標題荔枝</h1>
    </div>

    <div id="divspan">
        <p><span>這是一個span荔枝測試</span>這個荔枝長什麼樣</p>
    </div>

三、HTML5佈局的使用

佈局方式有<div>元素佈局和<table>元素佈局兩種方式

<div>比較常用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div佈局</title>
    <link rel="stylesheet" type="text/css" href="MyCSSstyle.css">
</head>
<body>
    <div id="container">
        <div id="heading">頭部</div>
        <div id="content_menu">選單</div>
        <div id="content_body">主體</div>
        <div id="footing">底部</div>
    </div>
</body>
</html>

CSS檔案：

body{
    margin: 0px;
}

#container{
    width: 100%;
    height: 1080px;
}

#container{
    background-image: url("img/16.jpg");
}

#heading{
    width: 100%;
    height: 10%;
    background-color: #ffffffbf;
}

#content_menu{
    width: 30%;
    height: 80%;
    background-color: #ffffffbf;
    float: left;
}

#content_body{
    width: 70%;
    height: 80%;
    background-color: #ffffffbf;
    float: left;
}

#footing{
    width: 100%;
    height: 10%;
    background-color: #ffffffbf;
    clear: both;
}

div實現佈局

table佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table佈局</title>
</head>
<body marginheight="0px" marginwidth="0px">
    <table cellspacing="15px" width="100%" height="1080px" style="background-image: url(img/16.jpg)">
        <tr>
            <td colspan="3" width="100%" height="10%" style="background: #ffffffbf" align="center">我不管</td>
        </tr>
        <tr>
            <td width="25%" height="80%" style="background: #ffffffbf" align="center"><ul>荔枝世界第二可愛</ul></td>
            <td width="50%" height="80%" style="background: #ffffffbf" align="center" style="font-size: xx-large;"><ul>祖張依世界第一可愛</ul></td>
            <td width="25%" height="80%" style="background: #ffffffbf" align="center"><ul>荔枝世界第二可愛</ul></td>
        </tr>
        <tr>
            <td colspan="3" width="100%" height="10%" align="center" style="background: #ffffffbf">嘿嘿嘿</td>
        </tr>
    </table>
</body>
</html>

table實現佈局