谈谈你对html标签, 元素与属性的理解, 并举例说明
元素是由<>加内容组成，HTML文档内容就是标签,元素和属性
元素类型：块级元素 例：h1-h6、p、table、ul、div等
特点：总是在新的一行开始
高度、行高以及外边距和内边距都可控制
宽度缺省则是他的容器的100%，除非设定一个宽度
他的里面可以有内联元素和其他块元素
内联元素 例：strong、a、img、span等
特点：和其他元素都在一行上
高、行高及外边距和内边距不可改变
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素
实例 <!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> 浏览器渲染的目标，用户真正感兴趣的内容 </body> </html>
2. 列表有几种, 如何定义
三种：无序列表、有序列表、定义列表
无序列表：<ul>、<li>
有序列表：<ul>、<li>
定义列表：<dl>、<dt>、<dd>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>h1-h6标题</title> </head> <body> <p>无序列表</p> <ul> <li>会当临绝顶</li> <li>一览众山小</li> <li>造化钟神秀</li> <li>阴阳割昏晓</li> </ul> <p>有序列表</p> <ul type="circle"> <li>会当临绝顶</li> <li>一览众山小</li> <li>造化钟神秀</li> <li>阴阳割昏晓</li> </ul> <ul type="square"> <li>会当临绝顶</li> <li>一览众山小</li> <li>造化钟神秀</li> <li>阴阳割昏晓</li> </ul> <ol> <li>会当临绝顶</li> <li>一览众山小</li> <li>造化钟神秀</li> <li>阴阳割昏晓</li> </ol> <ul> <p>导航</p> <li>公司</li> <li>简介</li> <li>产品</li> <li>关于我们</li> <li>联系我们</li> </ul> <p>定义列表</p> <dl> <dt>会当临绝顶</dt> <dd>一览众山小</dd> <dt>会当临绝顶</dt> <dd>一览众山小</dd> <dt>会当临绝顶</dt> <dd>一览众山小</dd> <dt>会当临绝顶</dt> <dd>一览众山小</dd> </dl> </body> </html>
3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
一条列的形式来显示数据是我们使用列表
对于多列且每一列之间有关联数据适合用表格进行组织
在适当的情况下选择对应的，使用户看到的更直观更便捷
4. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>
实例
<!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> <ul> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul> <ol> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ol> <dl> <dt>项目一</dt> <dd>列表</dd> <dd>表格</dd> <dd>表单</dd> </dl> <dl> <dt>项目二</dt> <dd>链接</dd> <dd>图像</dd> <dd>跳转</dd> </dl> </body> </html>
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>Document</title> </head> <body> <h3>购物车</h3> <ol> <li>1西瓜8块5个40</li> <li>2番茄6块3个18</li> <li>3豆角6块3个18</li> <li>4土豆2块12个24</li> </ol> <hr> <table border="1" cellspacing="0" width="400" cepadding="5"> <caption> <h3>购物车</h3> </caption> <thead> <tr bgcolor="lightblue"> <th>采购人</th> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> <tr> <td align="center" rowspan="4">崔泽</td> <td align="center">1</td> <td align="center">西瓜</td> <td align="center">8</td> <td align="center">5</td> <td align="center">40</td> </tr> <tr> <!-- <td align="center">1</td> --> <td align="center">2</td> <td align="center">番茄</td> <td align="center">6</td> <td align="center">3</td> <td align="center">18</td> </tr> <tr> <!-- <td align="center">1</td> --> <td align="center">3</td> <td align="center">豆角</td> <td align="center">6</td> <td align="center">3</td> <td align="center">18</td> </tr> <tr> <!-- <td align="center">4</td> --> <td align="center">4</td> <td align="center">土豆</td> <td align="center">2</td> <td align="center">12</td> <td align="center">24</td> </tr> <tr> <td colspan="4" align="center">合计：</td> <!-- <td>x</td> --> <!-- <td>x</td> --> <td td align="center">23</td> <td td align="center">100</td> </tr> </thead> </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>表单与表单中的控件元素</title> </head> <body> <h3>用户注册</h3> <form action="cuize.cn" method="POST"> <p> <label for="username">账号:</label> <input type="text" id="username" name="username" value="cuize"> </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@email.com"> </p> <p> <label for="age">年龄:</label> <input type="number" id="age" name="age" min="16" max="80"> </p> <label for="age ">课程:</label> <select> <optgroup label="前端 "> <option>请选择</option> <option>html</option> <option>css</option> <option>js</option> </optgroup> <optgroup label="后端 "> <option>phpl</option> <option>msql</option> <option>laravel</option> </optgroup> </select> <p> <label>爱好:</label> <input type="checkbox" name="hobby[]" value="study" id="syudy"><label for="study">写字</label> <input type="checkbox" name="hobby[]" value="sport" id="sport" checked><label for="sport">跑步</label> <input type="checkbox" name="hobby[]" value="drawing" id="drawing"><label for="drawing">画画</label> </p> <p> <label>性别:</label> <input type="radio" name="gender" id="male" checked><label for="male">男生</label> <input type="radio" name="gender" id="female"><label for="female">女生</label> </p> <p> <input type="submit" namen="submit" value="提交"></input> <input type="reset" namen="reset" value="重填"></input> <input type="button" namen="reset" value="提交"></input> </p> <label>省/直辖市</label> <select name="proince" id=""> <option value="">请选择省/直辖市</option> <option value="henan">河南</option> <option value="shanghai">上海</option> <option value="beijiang">北京</option> </select> </form> </body> </html>
7. 写出总结, 对于这些常用标签的应用场景进行分析
表单：账号，密码，邮箱，年龄，课程，爱好，性别，按钮
<form></form>:为用户创建html表单。定义表单开始和结束位置，在标签对之间都属于表单的内容。
action：此属性指示服务器上处理表单输出的程序，语法action="url"。
input 标签是常用的控件软件，配合form 标签帮助用户输入，修改，提交数据。
格式：<input type="..." ......>
type:表单元素类型：text，password，checkbox，radio，submit，reset，file，hidden，image，button。
name：表单元素名称
value：可选属性，表单元素的初始值。
checked：指定按钮是否被选中，输入类型为radio或checkbox时，使用。
按钮：submit 提交，reset 重填，button 按钮，