dogcave/html_basic.html at master · AlvinChangTW/dogcave · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #oo {
        color: #FAF15E;
    }

    .xx {}

    .xx {
        color: #f21;
    }

    h1 {
        color: #aaa;
        font-style: italic;
    }
    </style>
</head>

<body>
    <table border='1'>
        <caption>我是表格標題，會在表格外</caption>
        <tr>
            <th scope="col">我是標題</th>
            <th scope="col">我是標題</th>
            <th scope="col">我是標題</th>
        </tr>
        <tr>
            <th scope="row">我是列標題</th>
            <td>儲存格2</td>
            <td>儲存格3</td>
        </tr>
        <tr>
            <th scope="row">我是列標題</th>
            <td>儲存格2</td>
            <td>儲存格3</td>
        </tr>
    </table>
    <h1 class="xx" id="oo">主標題</h1>
    <h2>副標題</h2>
    <h3 class="xx">小標題</h3>
    <table border='1'>
        <caption>我是新表格</caption>
        <thead>
            <tr>
                <th scope="col">我是標題</th>
                <th scope="col">我是標題</th>
                <th scope="col">我是標題</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>我是內容喔</td>
                <td>我是內容喔</td>
                <td>我是內容喔</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>我是內容喔</td>
                <td>我是內容喔</td>
                <td>我是內容喔</td>
            </tr>
        </tfoot>
    </table>
    ul>li*5>a[href=#]{我是內容}
    <ul>
        <li><a href="#">我是內容</a></li>
        <li><a href="#">我是內容</a></li>
        <li><a href="#">我是內容</a></li>
        <li><a href="#">我是內容</a></li>
        <li><a href="#">我是內容</a></li>
    </ul>
    <p>Lorem <i>isbdbd</i> <b>ipsum</b>ipsum <strong>strong</strong>dolor <em>sit</em>sit amet, consectetur adipisicing elit. Expedita eum ipsum quisquam officiis, veritatis magnam earum itaque neque perferendis vel dolorem, harum dolores dolore. Ratione at repellendus ea reiciendis facilis, inventore, nihil laborum veniam quam labore tenetur autem earum adipisci.</p>
    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>
    <ol>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ol>
    <a href="http://tw.yahoo.com">雅虎</a>
    <img src="圖片來源" alt="說明用替代文字">
    <img src="https://api.fnkr.net/testimg/100x100/aaCED1/FFF/?text=img+placeholder">
    <nav>
        <a href="">link</a>
        <a href="">link</a>
        <a href="">link</a>
    </nav>
    <nav>
        <ul>
            <li> <a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
        </ul>
    </nav>
    <article>主文</article>
    <section>章節</section>
    <aside>次要，側邊欄</aside>
    <header>文章的標題區</header>
    <footer>頁尾區</footer>
    <div>區塊，有面積</div>
    <span>區段，一小條線</span>
</body>

</html>