HTML标签的学习—2019年8月30日22时30分

问题:
1. 谈谈你对html标签, 元素与属性的理解, 并举例说明
2. 列表有几种, 如何定义?
3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
4. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>
5. 编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan
6. 编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义
7. 写出总结, 对于这些常用标签的应用场景进行分析

简答：

• HTML标签分为单标签和双标签，通常由一对尖括号组成，中间为文本，标签页分块级元素和行内元素，如div是一个块级元素，p为一个行元素，每个元素可以设置相应的属性，表示大小、颜色、位置等信息，通常用css样式表来布局，动态元素涉及的触发事件可由js来实现。

• 列表有有序、无序、自定义三种，分别可用ol>li、ul>li、dl>dt+dd来创建。

• 表格是由多个单元格组成，有行列结构，列表是只有一列依次展示的。对于大量数据做集中整合的时候用表格，列表一般对有标题等结构的数据需求时用。

  
  

  
  

• 实例

  <div>
  <!-- 1.无序列表 -->
  <h3>计划</h3>
  <ul>
  <li>23:00 - 08:30 休息</li>
  <li>09:00 - 19:00 上班</li>
  <li>20:00 - 23:00 学习</li>
  </ul>
  <!-- 2.有序列表 -->
  <h3>计划</h3>
  <ol>
  <li>23:00 - 08:30 休息</li>
  <li>09:00 - 19:00 上班</li>
  <li>20:00 - 23:00 学习</li>
  </ol>
  <!-- 3.定义列表 -->
  <h3>计划</h3>
  <dl>
  <dt>休息</dt>
  <dd>23:00 - 08:30</dd>
  
  <dt>上班</dt>
  <dd>09:00 - 19:00</dd>
  
  <dt>学习</dt>
  <dd>20:00 - 23:00</dd>
  </dl>
  
  </div>

  
  

  
  

  
  

• 实例

  <div>
  <table border="1" width="500" cellspacing="0" cellpadding="5">
  <!-- 标题 -->
  <caption><h2>购物车</h2></caption>
  <!-- 表头 -->
  <thead>
  <tr bgcolor="bluegreen">
  <th>编号</th>
  <th>名称</th>
  <th>单价</th>
  <th>数量</th>
  <th>金额</th>
  <th>收款人</th>
  </tr>
  </thead>
  <!-- 主体 -->
  <tbody>
  <tr>
  <td>1</td>
  <td>电脑</td>
  <td>10000</td>
  <td>1</td>
  <td>10000</td>
  <td rowspan="4" align="center">Alfred</td>
  </tr>
  <tr>
  <td>2</td>
  <td>手机</td>
  <td>2000</td>
  <td>2</td>
  <td>4000</td>
  </tr>
  <tr>
  <td>3</td>
  <td>鼠标</td>
  <td>300</td>
  <td>3</td>
  <td>900</td>
  </tr>
  
  <!-- 底部 -->
  <tr>
  <td colspan="3" align="center">合计</td>
  <td>6</td>
  <td>14900</td>
  <!-- <td></td> -->
  <!-- <td></td> -->
  <!-- <td></td> -->
  </tr>
  </tbody>
  </table>
  
  </div>

  
  

  
  

  
  

• 实例

  <div>
  <h3>用户注册</h3>
  <form action="login.php" method="POST">
  <p>
  <label for="username">账号：</label>
  <input type="text" name="username" id="username" placeholder="不能超过8个字符">
  </p>
  <p>
  <label for="password">密码：</label>
  <input type="password" name="password" id="password" placeholder="必须在6-12位之间">
  </p>
  <p>
  <label for="email">邮箱：</label>
  <input type="email" name="email" id="email" placeholder="example@email.com">
  </p>
  <p>
  <label for="age">年龄：</label>
  <input type="number" name="age" id="age" min="16" max="80" width="500" placeholder="范围：16-80">
  </p>
  <p>
  <label for="">课程：</label>
  <!-- 下拉列表 -->
  <select name="" id="">
  <!-- 分组 -->
  <option value="">请选择</option>
  
  <optgroup label="前端">
  <option value="">HTML5</option>
  <option value="">CSS3</option>
  <option value="" selected>JavaScript</option>
  </optgroup>
  <optgroup label="后端">
  <option value="">PHP</option>
  <option value="">mysql</option>
  <option value="">Laravel</option>
  </optgroup>
  </select>
  </p>
  <p>
  <label for="">爱好：</label>
  <!-- 复选框 -->
  <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">玩游戏</label>
  <input type="checkbox" name="hobby[]" value="programme" id="programme" checked><label for="programme">编程</label>
  <input type="checkbox" name="hobby[]" value="moves" id="moves"><label for="moves">影视</label>
  </p>
  <p>
  <label for="">性别：</label>
  <!-- 单选框 -->
  <input type="radio" name="gender" id="male"><label for="male">男生</label>
  <input type="radio" name="gender" id="female"><label for="female">女生</label>
  <input type="radio" name="gender" id="secret"><label for="secret">保密</label>
  </p>
  <p>
  <!-- 按钮 -->
  <input type="submit" name="submit" value="提交">
  <input type="reset" name="reset" value="重置">
  <input type="button " name="button" value="按钮">
  <button type="">注册</button>
  </p>
  </form>
  
  </div>

  
  

• 总结

        表格多用在对请求获取的大量数据整合显示，表单控件用的地方比较多，输入框和按钮以及选择下拉框等等，对应不同的需求而定。