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