常用HTML標籤學習筆記2

表格元素

<table border="1">
        <tr> <!-- rows -->
            <td>序列</td>
            <td>姓名</td>
            <td>年齡</td>
            <td>婚否</td>
        </tr>
        <tr> 
            <td>001</td>
            <td>楊念</td>
            <td>60</td>
            <td>未婚</td>
        </tr>
        <tr> 
            <td>002</td>
            <td>吳志輝</td>
            <td>18</td>
            <td rowspan="2">已婚</td>   <!-- 跨行 -->
        </tr>
        <tr> 
            <td>003</td>
            <td>AII</td>
            <td>20</td>
            <!-- <td>已婚</td> -->
        </tr>
        <tr> 
            <td>004</td>
            <td>陳曼</td>
            <td colspan="2">80/已婚</td> <!-- 跨列 -->
            <!-- <td>未婚</td> -->
        </tr>

</table>

表單元素

<form action="#" method="post"> <!-- action 提交到哪個頁面-->
        賬號：<input type="text" name="user" value="abc" /><br/>
        密碼：<input type="password" name="password" /><br/>
        確認密碼：<input type="password" style="width: 125px" /><br/>
        郵箱：<input type="email" /> <br/>  <!--email是H5屬性值 -->
        性別：  <input name="gender" value="male"   type="radio" />男
               <input name="gender"  value="female" type="radio" />女
               <input checked name="gender"  value="baomi" type="radio" />保密
               <!-- 給value用於區分在request的get請求中的參數值，默認on/off -->

<input checked type="radio" name="hobby" value="basketball"/>打籃球
               <input type="radio" name="hobby" value="reading"/>讀書
               <input type="radio" name="hobby" value="movie"/>看電影
               <input type="radio" name="hobby" value="swimming"/>游泳
               <input type="radio" name="hobby" value="studying"/>只愛學習
               <br/><br/><br/>
        其他愛好：<input checked name="surfing" type="checkbox"/>上網       
                 <input name="money" type="checkbox"/>理財       
                 <input name=breaking"" type="checkbox"/>Breaking(街舞)      
                 <input checked name="coding" type="checkbox"/>Coding <br/><br/>
        
        <!-- 提交後爲GET方式(？後面拼接參數)發送到服務器 -->
        生日：
            <select size="5"><!--size下拉框顯示選擇行數 -->
            <!--Emmet插件快速生成多級HTML-->
                <option value="1991">1991</option>
                <option value="1992">1992</option>
                <option value="1993">1993</option>
                <option selected value="1994">1994</option>
                <option value="1995">1995</option>
            </select> 

個人說明：
            <textarea name="" id="" rows="10" cols="30"></textarea><br/>
        按鈕<input type="button" value="This is Button" /><br/>
        重置按鈕<input type="reset" value="重置" /><br/>


        隱藏域：<input type="hidden" value="This is hidden"/><br/>
    <!-- hidden不是給用戶看的，在頁面中沒有任何效果，可以用來驗證表單是否跨域攻擊CSRF -->
        <input type="submit" value="註冊" /> <br/>
    </form>

網頁轉義特殊服務號示例（pre標籤）

<pre> <!-- 轉義，還可以保留換行 -->
        &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
        &lt;meta name="Keywords" content="關鍵字" /&gt;
        &lt;meta name="description" content="描述 80字以內" /&gt;
        &lt;title&gt;title&lt;/title&gt;
        &lt;link href="#" rel="stylesheet" /&gt;
        &lt;/head&gt;
    </pre>