HTML无序标签、表格标签、表单标签的练习-2019/7/2

1、无序标签的练习

实例

<ul><!--无序列表-->
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
</ul>

2、表格标签的练习

实例

<table border="1" cellspacing="0" cellpadding="3" width="250" align="left" >
    <caption>这是表格的标题：时间表</caption>
    <thead><!--这是在定义表头-->
        <tr bgcolor="#bdb76b">
            <th>序号</th>
            <th>事项</th>
            <th>耗时</th>
        </tr>
    </thead>
    <tbody><!--这是列表-->
        <tr><!--每一行-->
            <td width="50">1</td><!--第一行的第一列-->
            <td width="90">洗漱</td>
            <td width="80" rowspan="2">70min</td> <!--在列的方向上合并，就是合并行，减少行的单元格数量-->
        </tr>
         <tr>
            <td>2</td>
             <td>通勤</td>
            <!--<td>50min</td>--><!--在列的方向上合并，就是合并行，减少行的单元格数量-->
         </tr>
        <tr>
             <td>3</td>
             <td>吃饭</td>
             <td>20min</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2" align="center">总计</td> <!--在行的方向合并，就是合并列，减少列的单元格数量-->
            <td>90min</td>
        </tr>
    </tfoot>
</table>

3、表单标签的练习

实例

<form action="" method="" name=""><!--表单-->
   <!--以下是input type类型-->
   <p>
       <label for="username">用户名：</label>
       <input type="text" id="username" name="username" placeholder="提示语" autofocus required>
   </p>
   <p>
       <label for="password">密码:</label>
       <input type="password" id="password" name="password" placeholder="提示语" required>
   </p>
   <p>
       <label for="email">邮箱:</label>
       <input type="email" id="email" name="email" placeholder="提示语" required>
   </p>
   <p>
       <label for="age">年龄:</label>
       <input type="number" id="age" name="age" min="1" max="88">
   </p>
   <p>
       <label for="birthday">生日:</label>
       <input type="date" id="birthday" name="birthday">
   </p>
   <p>
       <label for="dou">爱好: </label>
       <input type="checkbox" name="hobby" value="eat" id="eat" checked>
           <label for="eat">吃饭</label>
       <input type="checkbox" name="hobby" value="sleep" id="sleep">
           <label for="sleep">睡觉</label>
       <input type="checkbox" name="hobby" value="dou" id="dou" >
           <label for="dou">打豆豆</label>
   </p>
   <p>
       <label for="man ">性别: </label>
       <input type="radio" name="gender" value="man" id="man">
           <label for="man">男生</label>
       <input type="radio" name="gender" value="woman" id="woman">
           <label for="woman">女生</label>
   </p>
   <p>
       <input type="submit" name="submit" value="提交"> <!--会判断编辑页面的必填项是否填写-->
       <input type="reset" name="reset" value="重置">  <!--清空已填写内容-->
       <input type="button" name="button" value="按钮"> <!--普通按钮，点击后的行为由JS定义-->
   </p>
   <!--以下是button type 类型-->
   <button type="submit">提交</button> <!--相当于 input type 为submit-->
   <button type="button">按钮</button><!--相当于 input type 为botton-->
   <hr>
   <!--标签就是类型-->
   <p><!--下拉选项-->
       <!--name在select中, value在option中-->
       <label for="hobby">爱好：</label>
       <select name="hobby" id="hobby" size="1"> <!--size意思是选项显示几个-->
           <optgroup label="娱乐">
               <option value="0" selected>唱歌</option>
               <option value="1">跳舞</option>
               <option value="2">游泳</option>
           </optgroup>
           <optgroup label="休息">
               <option value="4">睡觉</option>
               <option value="5">泡澡</option>
               <option value="6">瑜伽</option>
           </optgroup>
       </select>
   <p><!--多行文本框，value属性就框内的内容，不用设置-->
       <label for="content">内容:</label>
       <textarea name="content" id="content" cols="50" rows="10" maxlength="20" placeholder="提示语"></textarea>
   </p>

</form>

总结：标签的含义比较好理解， 使用运用还需要多练习。

有个问题，就是<table>标签，不管是用<p>标签包裹起来也好，还是后面加<hr><br>标签一行，后面新的标签即使被<p>标签包裹起来了，也不能另起一行。这让我想到块元素和内联元素，是这个原因吗？？？