---
tags: html, table, from,
---
# html 該懂的標籤

[TOC]

文字類
===

## 標題文字 h1-h6 (block)
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<h3>Hello World!</h3>
<h4>Hello World!</h4>
<h5>Hello World!</h5>
<h6>Hello World!</h6>

    <h1>Hello World!</h1>
    <h2>Hello World!</h2>
    <h3>Hello World!</h3>
    <h4>Hello World!</h4>
    <h5>Hello World!</h5>
    <h6>Hello World!</h6>

## 段落文字 (block)
<p>段落文章</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique sed consectetur delectus est, enim nesciunt
nostrum dicta doloribus sapiente earum quidem aperiam perferendis consequuntur culpa reiciendis eaque, ut quod
哈哈哈 ipsum dolor sit amet consectetur adipisicing elit. Voluptates minima doloremque earum illum at quia
mollitia quas adipisci ipsum accusamus repudiandae aut praesentium modi, aspernatur explicabo quam magnam,
obcaecati quibusdam?
soluta?
</p>

<p>段落文章</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique sed consectetur delectus est, enim nesciunt
    nostrum dicta doloribus sapiente earum quidem aperiam perferendis consequuntur culpa reiciendis eaque, ut quod
    哈哈哈 ipsum dolor sit amet consectetur adipisicing elit. Voluptates minima doloremque earum illum at quia
    mollitia quas adipisci ipsum accusamus repudiandae aut praesentium modi, aspernatur explicabo quam magnam,
    obcaecati quibusdam?
    soluta?
</p>

## span 特定區域文字 (inline)
可針對特定文字編輯增加屬性

<p>14523453<span>這是特定文字</span>24524352345</p>

## 段落元素
* #### 換行 ```<br>```
* #### 水平線```<hr>```

## 連結標籤 ``<a href=""></a>``

<a href="http://www.google.com">Google</a>

<a href="http://www.google.com" target="_blank">Google</a><br>
<!-- 另開視窗 target="_blank"-->

<a href="structure.html">structure.html</a><br>
<!-- 開啟內部檔案 -->

## 跑馬燈 ``<marquee></marquee>``

<marquee>這是會呈現跑馬的「跑馬燈」</marquee>

## 其它文字屬性
<b>我是粗體</b>

<b>我是粗體</b>

<strong>我也是粗體(有強調語氣)</strong>

<strong>我也是粗體(有強調語氣)</strong>

<i>我是斜體</i>

<i>我是斜體</i>

<em>我也是斜體(有強調語氣)</em>

<em>我也是斜體(有強調語氣)</em>

<s>我是刪除線</s>

<s>我是刪除線</s>

<del>我也是刪除線(意有所指)</del>

<del>我也是刪除線</del>

<u>我是底線</u>

<u>我是底線</u>

<ins>我也是底線</ins>

<ins>我也是底線</ins>

X^{2(我是上標)}

X<sup>2(我是上標)</sup>

CO_{2(我是下標)}

CO<sub>2(我是下標)</sub>

<pre>可顯示空格 空白 所有在內的字元</pre>

<pre>可顯示空格 空白 所有在內的字元</pre>

<code>Code 可以顯示程式碼</code>

<code>Code 可以顯示程式碼</code>

表格
===
### 一般表格``<table></table>``
<table>
<tr> <!-- 這是直排 -->
<td>這是橫排1</td><!-- 這是橫排 -->
<td>這是橫排2</td><!-- 這是橫排 -->
<td>這是橫排3</td>
</tr>
<tr> <!-- 這是直排 -->
<td>這是橫排a</td><!-- 這是橫排 -->
<td>這是橫排b</td><!-- 這是橫排 -->
<td>這是橫排c</td>
</tr>
</table>

<table>
    <tr> <!-- 這是直排 -->
        <td>這是橫排1</td><!-- 這是橫排 -->
        <td>這是橫排2</td><!-- 這是橫排 -->
        <td>這是橫排3</td>
    </tr>
    
    <tr> <!-- 這是直排 -->
    <td>這是橫排a</td><!-- 這是橫排 -->
    <td>這是橫排b</td><!-- 這是橫排 -->
    <td>這橫排c</td>
</tr>
</table>

### 表格合拼_欄合拼_列合拼
* colspan="(要合拼的欄位數)" 左吃右 合拼
* rowspan="(要合拼的列位數)" 上吃下 合拼

:::danger
:fire:注意:如多佔了一個欄/列位，需要刪除一個位數，以免凸出。
:::

<table border="0" >
<tr>
<td colspan="2">1</td>
<td>3</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>

<table border="0" >
<tr>
<td colspan="2">1</td>
<td>3</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>

表單
===

<!-- 表格標籤 -->
    <form method="post" enctype="multipart/form-data">

    <!-- 建立 11x2，寬度為 100% 的表格  -->
    <fieldset>
        <legend>  <!--標題_標籤 顯示title-->
            <h1>常用表單</h1>
        </legend>
        <!-- 
            method分為 get、post 
        -->

        <!-- enctype="multipart/form-data" 為上傳檔案必須設定 -->
            <table id="aaa" width="100%" border="1" cellpadding="10" cellspacing="0">
                <tr>
                    <td width="100">帳號：</td>
                    <td><input type="text" size="50" maxlength="20" placeholder="請輸入帳號" name="id"></td>
                </tr>
                <tr>
                    <td>密碼：</td>
                    <td><input type="password" placeholder="請輸入密碼" name="pw"></td>
                </tr>
                <tr>
                    <td>性別：</td>
                    <td>
                        <input type="radio" name="gender" value="男">男
                        <input type="radio" name="gender" value="女" checked="checked">女
                    </td>
                </tr>
                <tr>
                    <td>興趣：</td>
                    <td>
                        <input type="checkbox" name="like" value="拍照">拍照
                        <input type="checkbox" name="like" value="看書">看書
                        <input type="checkbox" name="like" value="唱歌">唱歌
                        <input type="checkbox" name="like" value="寫網頁">寫網頁
                        <input type="checkbox" name="like" value="逛街">逛街
                    </td>
                </tr>
                <tr>
                    <td>出生年份：</td>
                    <td>
                        <select name="my_select">
                            <option value="1980">1980</option>
                            <option value="1990">1990</option>
                            <option value="2000">2000</option>
                            <option value="2010">2010</option>
                        </select>
                        年
                    </td>
                </tr>
                <tr>
                    <td>上傳檔案：</td>
                    <td><input type="file" name="upload_file"></td>
                </tr>
                <tr>
                    <td>留言訊息：</td>
                    <td><textarea name="msg" cols="60" rows="10"></textarea></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="submit" value="送出">
                        <input type="reset" value="重置">
                    </td>
                </tr>
                <tr>
                    <td>一般按鈕：</td>
                    <td><input type="button" value="我是一般按鈕" onclick="alert('我是一般按鈕')"></td>
                </tr>
                <tr>
                    <td>圖片按鈕：</td>
                    <td><input type="image" src="tailogo.JPG" width="100" onclick="alert('我是圖片按鈕')"></td>
                </tr>
                <tr>
                    <td>隱藏欄位：</td>
                    <td><input type="hidden" name="hidden"></td>
                </tr>
            </table>
    </fieldset>
        </form>