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

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

降落伞的博客
降落伞的博客原创
2019年07月03日 11:00:03674浏览

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>标签包裹起来了,也不能另起一行。这让我想到块元素和内联元素,是这个原因吗???

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议