1. 谈谈你对html标签, 元素与属性的理解, 并举例说明
html标签：
HTML语言就是一种标记语言；html标签分为双标签和单标签两种。
双标签是一种闭合标签，成对儿出现，如H标签<h1>这是标题一</h1>单标签，单个出现，不用闭合，如br标签<br>，img标签<img src="dog.jpg" >
html元素：
每个完整的html标签包含的整个内容就是元素。如：<h3>这是一个h3元素</h3>
html属性：
每个元素中起始标签内的非标签部分为属性。如：<img src="dog.jpg" width="600">中的src和width都是img标签的属性
------------------------------------------------------------------------------------------------------------------------------
2. 列表有几种, 如何定义?
列表有三种：无序列表，有序列表，定义列表。
无序列表
实例
<h3>无序列表</h3>
<!--无序列表-->
<!--ul>li{章节$$}*10-->
<ul>
<li>章节01</li>
<li>章节02</li>
<li>章节03</li>
<li>章节04</li>
<li>章节05</li>
<li>章节06</li>
<li>章节07</li>
<li>章节08</li>
<li>章节09</li>
<li>章节10</li>
</ul>运行实例 »
点击 "运行实例" 按钮查看在线实例
有序列表
实例
<h3>有序列表</h3> <!--有序列表--> <ol> <li>学号01</li> <li>学号02</li> <li>学号03</li> <li>学号04</li> <li>学号05</li> <li>学号06</li> <li>学号07</li> <li>学号08</li> <li>学号09</li> <li>学号10</li> </ol>
运行实例 »点击 "运行实例" 按钮查看在线实例
定义列表
------------------------------------------------------------------------------------------------------------------------------
3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
列表是一行行的，表格是n行n列的。列表多用于项目或序列多行单列的显示，如侧边导航栏；表格用于展示多行多列的数据，如关系型数据表格；
-------------------------------------------------------------------------------------------------------------------------------
4. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>
实例
<h3>一周工作计划</h3> <ul> <li>周一：A项目设计图审核</li> <li>周二：A项目施工技术交底</li> <li>周三：B项目系统单点调试</li> <li>周四：B项目系统自检测试</li> <li>周五：B项目联合调试</li> </ul> <h3>9月第一周工作计划</h3> <ol> <li>周一：A项目设计图审核</li> <li>周二：A项目施工技术交底</li> <li>周三：B项目系统单点调试</li> <li>周四：B项目系统自检测试</li> <li>周五：B项目联合调试</li> </ol> <h3>9月第二周工作计划</h3> <dl> <dt>9月第二周工作计划</dt> <dd>周一：出差宜昌</dd> <dd>周二：东西湖项目验收</dd> <dd>周三：光谷项目开工</dd> <dd>周四：沌口项目投标文件汇总与检查</dd> <dd>周五：沌口项目投标</dd> </dl>
运行实例 »
点击 "运行实例" 按钮查看在线实例
--------------------------------------------------------------------------------------------------------------------
5. 编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan
实例
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1" width="700" cellspacing="0" cellpadding="5"> <caption>***表</caption> <thead bgcolor="lightblue"> <tr> <th>设备分类</th> <th>序号</th> <th>型号</th> <th>名称</th> <th>单位</th> <th>数量</th> <th>单价</th> <th>合价</th> <th>备注</th> </tr> </thead> <tr> <th rowspan="2">控制器配件</th> <td>01</td> <td>line_card</td> <td>回路卡</td> <td>张</td> <td>1</td> <td>8000</td> <td>8000</td> <td></td> </tr> <tr> <!-- <th></th>--> <td>02</td> <td>DSP_01</td> <td>显示单元</td> <td>个</td> <td>1</td> <td>12000</td> <td>12000</td> <td>货期2周</td> </tr> <tr> <th rowspan="4">现场设备</th> <td>03</td> <td>FDO119</td> <td>烟感</td> <td>只</td> <td>15</td> <td>360</td> <td>5400</td> <td>含底座</td> </tr> <tr> <!-- <th></th>--> <td>04</td> <td>FDT119</td> <td>温感</td> <td>只</td> <td>10</td> <td>350</td> <td>3500</td> <td>含底座</td> </tr> <tr> <!-- <th></th>--> <td>05</td> <td>FDM119</td> <td>手动报警按钮</td> <td>只</td> <td>5</td> <td>420</td> <td>2100</td> <td>含底座</td> </tr> <tr> <!-- <th></th>--> <td>06</td> <td>FDCI119</td> <td>输入模块</td> <td>只</td> <td>10</td> <td>430</td> <td>4300</td> <td>含底座</td> </tr> <tr> <th colspan="7">合计：</th> <!-- <td></td>--> <!-- <td></td>--> <!-- <td></td>--> <!-- <td></td>--> <!-- <td></td>--> <!-- <td></td>--> <td colspan="2"><strong>35300</strong></td> <!-- <td>含底座</td>--> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
-----------------------------------------------------------------------------------------------------------------------------
6. 编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义
实例
<h3>用户注册</h3>
<form action="login.php" method="post">
<!--input标签-->
<p>
<!-- 单行文本-->
<label for="username">账号：</label>
<input type="text" id="username" name="username" value="shun">
</p>
<p>
<!-- 密码-->
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="必须在6-12位之间">
</p>
<p>
<!-- 邮箱-->
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="example@qq.com">
</p>
<p>
<!-- 数字-->
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="16" max="80">
</p>
<p>
<!-- 日期-->
<label for="birthday">出生年月</label>
<input type="date" id="birthday" name="birthday">
</p>
<p>
<!-- 滑动输入-->
<label for="num_family">家庭人数：</label>
<input type="range" id="num_family" name="num_family" min="1" max="10">
</p>
<p>
<!-- 注意：单选按钮的input中name应一致-->
<label for="male">性别：</label>
<input type="radio" id="male" name="sex"><label for="male">男</label>
<input type="radio" id="female" name="sex"><label for="female">女</label>
<input type="radio" id="security" name="sex" checked><label for="security">保密</label>
</p>
<p>
<!-- 注意：复选框的input中name应一致-->
<label for="">学习过的编程语言：</label><br>
<input type="checkbox" name="lang[]" id="Basic"><label for="Basic">Basic语言</label>
<input type="checkbox" name="lang[]" id="C" checked><label for="C">C语言</label>
<input type="checkbox" name="lang[]" id="C++"><label for="C++">C++语言</label>
<input type="checkbox" name="lang[]" id="Java"><label for="C">Java语言</label>
<input type="checkbox" name="lang[]" id="Python"><label for="Python">Python语言</label>
</p>
<p>
<label for="">课程：</label>
<!--下拉列表-->
<select name="course" id="">
<option value="">请选择</option>
<optgroup label="web前端">
<option value="">HTML5</option>
<option value="">CSS3</option>
<option value="">JavaScript</option>
</optgroup>
<optgroup label="web后端">
<option value="">php</option>
<option value="">MySQL</option>
<option value="">laravel</option>
</optgroup>
</select>
</p>
<p>
<input type="submit" name="submit" value="提交">
<input type="reset" name="reset" value="重置">
<input type="button" name="button1" value="这是一个按钮">
<input type="button" onclick="alert('Hello World!')" value="点击我">
</p>
<p>
<button type="button" onclick="alert('感谢输入')">点出我！</button>
<button type="submit">注册</button>
<button type="reset">重置</button>
</p>
</form>运行实例 »
点击 "运行实例" 按钮查看在线实例
7. 写出总结, 对于这些常用标签的应用场景进行分析
H标签：标题标签。从H1到H6为标题一到标题六，相当于Word里的六级章节标题；
P标签：段落标签。<p>此处书写段落内容</p>
A标签：链接标签。<a href="http://www.126.com" target="_blank">126邮箱</a>
img标签：图像标签。<img src="图片文件链接" width="图片宽度" alt="图片提示" align="对齐方式left,right,bottom,top,middle">单标签
列表：
无序列表：<ul><li>列表内容</li>。。。<li>列表内容</li></ul>生成无序项
有序列表：<ol><li>列表内容</li>。。。<li>列表内容</li></ol>会自动生成带序列的项
定义列表：<dl><dt>列表项目</dt><dd>项目描述</dd>。。。<dd>项目描述</dd>。。。<dt>列表项目</dt><dd>项目描述</dd>。。。<dd>项目描述</dd></d>
表格：
表示关系型多列多行数据。在<table></table>里逐行书写，在每一行<tr></tr>里逐格<td>单元格中内容</td>书写
表格标题：<caption>表格标题</caption>
表头：<thead>。。。</thead>
<tr>每一行内容</tr>
<th>加粗居中的单元格</th>
<td>每个单元格</td>
表格中的行单元格合并，<td colspan="行内合并单元格的数量">行内合并单元格</td>
表格中的列单元格合并，<td rowspan="列内合并音单元格的数量">列内合并单元格</td>
表单：
用来与网站数据交互。
<form action="url" method="get/post">表单内各种标签</form>
表单中的标签组件包含
描述型标签<label for="组件ID名">描述文本</label>
各种input输入标签<input type="类型名" id="id名" name="名称描述">
type类型：text单行文本；password密码输入框；email邮件输入框；number数据输入框，可增加min和max值属性；
range滑块输入，指定min和max属性；date日期输入框；
radio单选按钮，一组单选按钮的name属性要一致，默认选中checked；
checkbox复选框，一组复选框的name属性需一致，默认选中checked；
submit提交按钮，需value属性表示按钮显示的文本，提交表单到form的action页面处理；
reset重置按钮，需value属性表示按钮显示的文本，清除表单中的输入到默认；
button按钮，需value属性表示按钮显示的文本，可增加操作，如onclick等；
select下拉列表标签<select name="" id="">。。。</select>：
name属性和ID属性；
option标签：选项标签，在<select>之下，<option value>选择项</option>
optgroup标签：选项分组，<optgroup label="分组分隔描述">多个（option选项）</optgroup>
button按钮标签：
可替代input 的type=submit，reset，button；
<button type="submit">提交</button>
<button type="reset">清除输入</button>
<button type="button" onclit="alert('爆炸了！')">点击我</button>