精 簡

個人筆記部落格

0%

HTML 筆記

發表於 更新於 分類於

HTML 為定義網頁的結構的標記語言。

1
2
3
4
5
6
7
<html> <!--- 表示網頁內容 --->
    <head>　<!--- 給瀏覽器的其他資訊 --->
        <title> Sample html</title> <!--- 標題 --->
    </head>
    <body><!--- 網頁的主體 --->
    </body>
</html>

  • 基本元素 

    1
    <p> 這是一個段落</p>
    1
    2
    3
    4
    5
    6
    <img src="pic/123.jpg" alt="替代文字">
    <!--- 或是 --->
    <figure>
        <img src="pic/123.jpg" alt="替代文字">
        <figcaption>"圖片的簡單描述"</figcaption>
    </figure>
    1
    <a href="www.google.com">Google</a>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <ul><!--- 無序清單 --->
        <li></li> <!--- list item --->
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol><!--- 有序清單 --->
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <table><!--- 表格 --->
        <tr><!--- 標題列 ---->
            <th></th><!--- 標題欄 ---->
            <th></th>
            <th></th>
        </tr>

        <tr><!--- 列 --->
            <td></td>
            <td></td><!---欄 --->
            <td></td>
        </tr>
        <tr>
            <td rowspan="2" ></td><!---rowspan 垂直跨"列" --->
            <td colspan="2"></td> <!---colspan 水平跨"欄" --->
        </tr>
        <tr>
            <td></td><td></td><td></td>
        </tr>
    </table>

  • 區塊元素、行內元素

    區塊元素(block)是一種占用整行大小的元素，雖然可以設定寬、高，但是下個元素還是會列在下一行，並不會排列再一起；

    行內元素(inline)基本上是沒有寬(width)跟高(height)，當兩個行內元素排列時，並不會占用整行，而是依自己的元素內容而定．

元素 行內元素、區塊元素
div 區塊元素
p 區塊元素
img 行內元素(可以有寬高)算是(inline-block)
a 行內元素
ul ol li 區塊元素
table tr 區塊元素（會排除除了tr th td以外的元素)
td 行內元素(一般的情況下沒辦法跟其他行內元素再一起，因為父元素會排除其他元素)