HTML 學習筆記

基本框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>標題</title>
</head>
<body>

</body>
</html>

可打開 .html 文件，直接輸入 html:5 調出html

語句

一些規範：框架

標籤使用小寫，元素必須閉合
空元素要加斜槓以閉合 eg. <br />
不使用語義化，全部樣式都存放於 CSS 中，內容與樣式分離

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>標題</title>
</head>

<body>
    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <p>段落</p>

    <!--換行符-->
    <br />
    <!--分割線-->
    <hr />

    <!--列表，可嵌套-->
    <!--有序列表-->
    <ol>
        <li>第一項</li>
        <li>第二項</li>
    </ol>
    <!--無序列表-->
    <ul>
        <li>第一項</li>
        <li>第二項</li>
    </ul>

    <!--連接-->
    <a href="https://www.google.com/">連接顯示的文本</a>
    <!--連接到頁面特定位置，使用 ID 特性-->
    <a href="#top">回到頂部</a>
    <p id="top">頂部</p>
    <!--連接到其餘頁面的特定位置-->
    <a href="http://wiki-power.com/#top">跳轉到站外頁面的某個位置</a>

    <!--圖像-->
    <img src="/xx.png" alt="沒法加載時的文字說明" />

    <!--表格-->
    <table>
        <!--第一行-->
        <tr>
            <!--第一列-->
            <th></th>
            <!--第二列-->
            <th scope="col">週六</th>
            <!--第三列-->
            <th scope="col">週日</th>
        </tr>
        <!--第二行-->
        <tr>
            <th scope="row">數量</th>
            <td>120</td>
            <td>135</td>
        </tr>
        <!--第三行-->
        <tr>
            <th scope="row">收益</th>
            <!--跨列 colspan，跨行 rowspan-->
            <td colspan="2">500</td>
        </tr>
    </table>

    <!--表單，待補充-->
    <!--iframe，待補充-->
    <!--flash/視頻/音頻，待補充-->

</body>

</html>

參考與致謝

文章做者：Power Lin
原文地址：https://wiki-power.com
版權聲明：文章採用 CC BY-NC-SA 4.0 協議，轉載請註明出處。ui