一、HTML行內元素的特性

• 後面的元素會接續在右邊，不會自動換行
• 寬度不會占滿整列(可透過瀏覽器的開發者工具檢查)
• 若要使行內元素有區塊元素的特性，可以使用display:block

常見的行內元素

a標籤(連結)

img標籤(圖片)

strong

em

b

i

u

    <a href="#">a標籤</a>
    <img src="https://fakeimg.pl/96/" alt="img標籤">
    <strong>加強標籤</strong>
    <input type="button" value="input標籤">
    <em>em標籤</em>
    <b>b標籤</b>
    <i>i標籤</i>
    <u>u標籤</u>

行內元素範例：

二、HTML的區塊元素

• 後面寫的元素會自動從下一行開始
• 寬度會占滿整列
• 若要使區塊元素不會換行，可以使用display:inline

常見的區塊元素

h1~h6標籤

table標籤

form標籤

address標籤

div標籤

ul li標籤

    <div class="div">div標籤</div>
    <table>
        <tr>
            <th>表頭</th>
            <th>表頭</th>
        </tr>
        <tr>
            <td>表格內容</td>
            <td>表格內容</td>
        </tr>
    </table>

    <h1>h1標籤</h1>
    <h2>h2標籤</h2>
    <h3>h3標籤</h3>
    <h4>h4標籤</h4>
    <h5>h5標籤</h5>
    <h6>h6標籤</h6>
    
    <address>address地址標籤</address>
    <form action="action.do" method="get">form標籤
    </form>
    <ul>
        <li>ul標籤</li>
        <li>li標籤</li>
    </ul>
    <p>p標籤</p>
    <pre>pre標籤</pre>

區塊元素範例：