HTML5學習筆記<四>: 列表, 塊和佈局

時間 2019-12-13

標籤 html5 html 學習筆記列表佈局欄目 HTML5 简体版

原文原文鏈接

HTML列表css

　　列表標籤html

標籤	描述
<ol>	定義有序列表。
<ul>	定義無序列表。
<li>	定義列表項。
<dl>	定義定義列表。
<dt>	定義定義項目。
<dd>	定義定義的描述。
<dir>	已廢棄。使用 <ul> 代替它。
<menu>	已廢棄。使用 <ul> 代替它。

經常使用的列表app

1. 無序列表工具

使用標籤: <ul>, <li>佈局

屬性: disc, circle, square學習

示例:開發工具

<!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. 有序列表spa

使用標籤<ol>, <li>code

　　屬性: A, a, I, i, starthtm

<!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. 嵌套列表(包含有序列表嵌套, 無序列表嵌套)

　　使用標籤<ul>, <ol>, <li>

<!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. 自定義列表

　　使用標籤<dl>, <dt>, <dd>

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

　　1. HTML塊元素

　　塊元素在顯示時, 一般會以新行開始

　　如: <h1>, <p>, <ul>

　　2. HTML內聯元素

　　內聯元素一般不會以新行開始

　　如: <b>, <a>, <img>

　　3. HTML <div>元素

　　<div>元素也被稱爲塊元素, 其主要是組合HTML的容器

　　4. HTML <span>元素

　　span元素是內聯元素, 可做爲文本的容器

　　例:可粘貼運行一下查看效果(開發工具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>
<!--div元素-->
<div id="wraper">
    <p>prospective</p>
    <a>1可能的,有望的 2將來的, 即將發生的</a>
</div>
<!--span元素: 文本的容器-->
<div id="span">
    <p>respective: <span>分別的,</span> 各自的</p>
</div>
</body>
</html>

HTML佈局

　　推薦兩種方式:

　　1. 使用<div>元素佈局

　　例:css代碼中其實div不用加, 一般也不用添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div佈局</title>
    <style type="text/css">
        body{margin: 0px}
        div#container{
            /*能夠充滿全屏*/
            width: 100%;
            height: 950px;
            background-color: darkgray;
        }
        div#heading{
            width: 100%;
            height: 10%;
            background-color: aqua;
        }
        div#menu{
            width: 30%;
            height: 80%;
            background-color: darkorange;
            float: left;
        }
        div#mainbody{
            width: 70%;
            height: 80%;
            background-color: brown;
            float: left;
        }
        div#footing{
            width: 100%;
            height: 10%;
            background-color: cornflowerblue;
            clear: both;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="heading">頭部</div>
    <div id="menu">內容菜單</div>
    <div id="mainbody">內容主體</div>
    <div id="footing">底部</div>
</div>
</body>
</html>

　　2. 使用<table>元素佈局

　　例:

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