作业1. 谈谈你对html标签, 元素与属性的理解, 并举例说明
html标签是HTML的重要组成部分，用来描述文字语义，比如：<h1>文本文本</h1>，h1标签代表【文本文本】这几个字是主标题；<p>内容</p>标签表示这是一个段落。
html元素通常以开始标签起始、以结束标签终止，比如：<p>内容</p>；也有单体标签如<img>，标签及标签对之间的文本称为元素，<p>内容</p>称为元素.
，构成html文档。
html属性是给每一个标签所做的辅助信息，赋予标签更多的信息。比如<img class="image-item" src="images/1.jpg" alt="图片信息"/>，class属性规定元素的类名定义各种样式、src属性表示引用图片的路径、alt属性是图片说明。
作业2. 列表有几种, 如何定义?
列表分为：无序列表、有序列表、定义列表
无序列表是一列项目，列表项目使用圆点进行标记，始于 <ul> 标签，每个列表项始于 <li>，示例：
<ul> <li>产品1</li> <li>产品2</li> </ul>
浏览器显示：
有序列表也是一列项目，列表项目使用数字进行标记，始于 <ol> 标签，每个列表项始于 <li>，示例：
<ol> <li>产品1</li> <li>产品2</li> </ol>
浏览器显示：
定义列表是项目及其注释的组合，自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以 <dd> 开始，示例：
<dl> <dt>水果类</dt> <dd>榴莲</dd> <dd>梨</dd> <dd>苹果</dd> <dt>蔬菜</dt> <dd>白菜</dd> <dd>黄瓜</dd> <dd>西红柿</dd> </dl>
浏览器显示：
作业3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
列表是一系列项目，可以理解成对应表格的一列或者一行，各列表项数据是平级的，由<ul>或者<ol>起始定义，<li>定义列表项；
表格由若干行、每行由若干列组成，数据按竖行和横行进行排列，基本上构成一个矩形的表格，由<table>起始定义，<tr>定义行，<td>定义单元格，<th>定义表头；
列表型布局选择使用列表标签，比如图片列表、文章列表等，导航通常选用列表。表格型布局就需要用表格标签，比如各种各样的统计表、课程表之类。根据需求选用哪一种标签。
作业4. 编程实现,用列表制作工作计划
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>工作计划</title> </head> <body> <!-- 无序列表 --> <p>待办事项</p> <ul> <li>开会</li> <li>处理售后</li> <li>制作网页</li> <li>对接客户</li> </ul> <!-- 有序列表 --> <ol> <li>开会</li> <li>处理售后</li> <li>制作网页</li> <li>对接客户</li> </ol> <!-- 定义列表 --> <dl> <dt>上午</dt> <dd>开会</dd> <dd>处理售后</dd> <dt>下午</dt> <dd>制作网页</dd> <dd>对接客户</dd> </dl> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
作业5. 编程实现一张商品清单
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品清单</title> </head> <body> <p>周末购物清单</p> <table width="500" border="1" cellspacing="0" cellpadding="5"> <tr bgcolor="lightblue"> <th>种类</th> <th>名称</th> <th>价格</th> <th>数量</th> <th>金额</th> </tr> <tr> <td rowspan="2">生活用品</td> <td>漱口水</td> <td>20</td> <td>1</td> <td>20</td> </tr> <tr> <td>毛巾</td> <td>10</td> <td>1</td> <td>20</td> </tr> <tr> <td rowspan="2">食品</td> <td>苹果</td> <td>8</td> <td>3</td> <td>24</td> </tr> <tr> <td>方便面</td> <td>24</td> <td>1</td> <td>24</td> </tr> <tr> <td colspan="3" align="center">总计</td> <td>6</td> <td>88</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
作业6. 制作一张注册表单
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册表单</title> </head> <body> <h3>用户注册</h3> <form action="login.php" method="POST"> <p> <label for="username">昵称：</label><input type="text" id="username" name="username" placeholder="请输入4-20个字符"> </p> <p> <label for="password">密码：</label><input type="password" id="password" name="password" placeholder="字母与数字结合"> </p> <p> <label for="email">邮箱：</label><input type="email" id="email" name="email" placeholder="example@.163.com"> </p> <p> <label for="age">年龄：</label><input type="number" id="age" name="age" min="16" max="80"> </p> <p> <label for="secrecy">性别：</label> <input type="radio" id="male" name="gender"><label for="male">男</label> <input type="radio" id="female" name="gender"><label for="female">女</label> <input type="radio" id="secrecy" name="gender" checked><label for="secrecy">保密</label> </p> <p> <label for="">爱好：</label> <input type="checkbox" name="hoby[]" id="photography" value="photography"><label for="photography">摄影</label> <input type="checkbox" name="hoby[]" id="program" value="program"><label for="program">编程</label> <input type="checkbox" name="hoby[]" id="tea" value="tea" checked><label for="tea">喝茶</label> </p> <p> <label for="">课程</label> <select name="" id=""> <optgroup label="自然科学"> <option value="">请选择</option> <option value="">数学</option> <option value="">物理</option> <option value="">生物</option> </optgroup> <optgroup label="人文社科"> <option value="">政治</option> <option value="">哲学</option> <option value="">文学</option> </optgroup> </select> </p> <button>提交</button> <input type="reset" name="reset" placeholder="重置"> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
作业7. 写出总结, 对于这些常用标签的应用场景进行分析
列表、表格、表单这几种标签在前端开发中经常用到，列表适合在各种导航菜单设置、图片列表展示、新闻列表展等列表布局场景；表格应用于数据展示，可以让数据更加美观整齐，如订单统计、证券交易统计或者其他需要以表格来布局的场景；表单适用于各种站点的注册、登录、留言等场景，采集用户提交的信息，实现交互。
