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>

运行实例 »

点击 "运行实例" 按钮查看在线实例