1. 谈谈你对html标签, 元素与属性的理解, 并举例说明
1.HTML标签是由一对尖括号<>组成的。标签其分为“起始标签”和“结束标签”，前标签为<>，结束标签为</>结束标签多了一个斜杠“/”。举例所示，<ul>为起始标签，</ul>为结束标签
2.元素是有多个标签组成的，“起始标签”表示元素的开始，“结束标签”表示元素的结束，元素分为块元素和行元素，
2.1 块元素举例如下：
2.2 行元素举例如下：
3.属性提供了对HTML元素的描述和控制信息，对网页进行字体颜色等渲染，是网页充满更多色彩
2. 列表有几种, 如何定义?
HTML列表有三种
1.无序列表 （在网页中定义一个无序的列表，需要自定义序列号，如果想实现1.2..3排序）
2.有序列表（在网页中定义一个有序的列表，不需要自定义，就会自动实现1.2.3排序，大多数开发不会用到此列表）
实例
<ol> <li>小牛</li> <li>大牛</li> <li>老牛</li> </ol>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.自定义列表（定义列表。<dl>标签表示列表的整体。<dt>标签定义的题目。<dd>标签是术语的解释。一个<dl>中可以有多个<dt>和<dd>，）
3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
列表大多数用于少量的情况下，例如一列情况下
表格用于多数行或者列的情况下
对于多列且每一行之间有关联的数据，适合用表格组织
4. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>
5. 编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan
实例
<!DOCTYPE html> <html lang="en"> <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> <table border="1" cellspacing="0" winth="500" cellpadding="5"> <caption>购物车</caption> <!-- 表头 --> <thead> <tr bgcolor="red"> <th style="color:white">编号</th> <th style="color:white">型号</th> <th style="color:white">颜色</th> <th style="color:white">大小</th> <th style="color:white">数量</th> <th style="color:white">单价</th> <th style="color:white">金额</th> </tr> </thead> <!-- 主体 --> <tr> <td>1</td> <td>iphone x</td> <td rowspan="3">白色</td> <td rowspan="3">64G</td> <td>1</td> <td>5500</td> <td>5500</td> </tr> <tr> <td>2</td> <td>iphone xs</td> <!-- <td>白色</td> --> <!-- <td>64G</td> --> <td>1</td> <td>6500</td> <td>6500</td> </tr> <tr> <td>3</td> <td>iphone xs max</td> <!-- <td>白色</td> --> <!-- <td>64G</td> --> <td>2</td> <td>8500</td> <td>8500</td> </tr> <tr> <td colspan="4" align="center">合计:</td> <!-- <td></td> <td></td> --> <td>4</td> <td></td> <td>20500</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义
实例
<!DOCTYPE html> <html lang="en"> <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>Document</title> </head> <body> <h1 style="color: blue">登陆</h1> <form action="login" method="get"></form> <p> <label for="Phone">账号：</label> <input type="text" name="Phone" id="Phone" placeholder="不能超过11个字符"> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="example@email.com"> </p> <p> <label for="password">密码：</label> <input type="password" id="passwor" name="password" placeholder="输入6-11位密码"> </p> <P> <label for="age">年龄</label> <input type="number" name="age" id="age" placeholder="请输入您的年龄" min="16" max="88"> </P> <br> <label for="">开发课程</label> <!-- 下拉列表 --> <select name="" id=""> <optgroup label="前端"> <option value="">请选择</option> <option value="">HTML5</option> <option value="">CSS3</option> <option value="">JavaScript</option> </optgroup> <optgroup label="后端"> <option value="">Php</option> <option value="">Mysql</option> <option value="">Laravel</option> </optgroup> </select> <br> <p> <label for="">爱好：</label> <input type="checkbox" name="hobby[]" value="grame" id="grame"><label for="grame">玩游戏</label> <input type="checkbox" name="hobby[]" value="programe" id="programe" checked><label for="programe">撸代码</label> <input type="checkbox" name="hobby[]" value="movies" id="movies"><label for="movies">看电影</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="femal">女生</label> <input type="radio" name="gender" id="secrecy" checked><label for="cecrecy">保密</label> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重填"> <input type="button" name="button" value="按钮"> <button type="button">注册</button> </p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
7. 写出总结, 对于这些常用标签的应用场景进行分析
总结：感觉web前端标签太多了。也记不住，有什么好的方法记住吗，还是熟能生巧，按照课堂上的，大概看下才能写出来。而且容易混淆。
HTML文件由<html></html><head></head>和<body></body>三部分组成，只有<body></body>中内容在网页上显示。<title>：指定整个网页的标题，在浏览器最上方显示。<body>：主体标签，定义HTML文档所要显示的内容。
元素分为块级元素和行元素。超链接<a>标签，href：目标URL，即要跳转的页面URL。target：告诉浏览器用什么方式打开目标页面，target属性如下：_blank新窗口打开，_self:在同一个页面中显示。JavaScript是前端唯一的脚本编程语言, 得到了所有浏览器的支持，JavaScript可以控制页面元素的显示与行业, 使页面具有交互性,提升用户体验，HTML是超文本标记语言，HTTP超文本传输协议，标题标签<h1></h1>...<h6></h6>水平线<hr/>段落<p></p>换行<br/><table></table>表格框<tr></tr>表格行<td></td>表格列<th></th> 表格标题列（将tr中的td替换为th)，th默认加粗且在单元格居中显示。
form表单使用
action：表单需要提交的服务器地址
method：表单提交数据使用的方法，get/post
>>>get和post的区别
① get传参使用URL传递，所有参数在地址栏可见，不安全；get传参数据量有限。
② post传参使用http请求传递，比较安全；post可以传递大量数据。
但是，get请求的传输速率比post快。
input的常用属性
① type：设置input的输入类型
② name：给input输入框命名。一般情况下，name属性必不可少。因为，传递数据时，使用name=value（输入内容）的形式传递。
③ value：input输入框的默认值
④ placeholder：输入框的提示内容。当input有默认的value或输入值时，placeholder消失
下拉选择控件 select
写法：<select>
<option></option> option可以有N多个
</select>
option常用属性：
value="":当option没有value属性时，往后台传递的是<option></option>标签中的文字；
当option有value属性时，往后台传递的是value属性的值。
title="":鼠标指上后显示的文字。
selected="selected":默认选中。
<optgroup label="山东省"></optgroup> :用于将option标签进行分组，label属性表示分组名。
