1. HTML与HTTP是什么,他们之间有什么联系?
（1）HTML是一种通用的编写超文本的标语言，以“.html”为扩展名。
（2）HTTP是一套客户端和服务器端都必须遵守的请求和响应的标准和规范。
（3）客户端发起到服务器端指定端口的HTTP请求，服务器端将存有大量HTML文档或图片资源反馈给客户端浏览。
2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航作业</title> </head> <body> <ul> <li><a href="https://www.php.cn" >首页</a></li> <li><a href="https://www.php.cn" >PHP中文网</a></li> <li><a href="https://www.xp.cn" >PHPSTUDY</a></li> <li><a href="https://www.php.cn" ><img src="https://www.php.cn/static/images/logo.png" alt="PHP中文网"></a></li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品信息表作业</title> </head> <body> <table border="1" width="600" cellspacing="0" cellpadding="5"> <caption> <h2>商品信息表</h2> </caption> <thead> <tr bgcolor="lightblue"> <th>序号</th> <th>品名</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Apple iPad mini 5</td> <td>2929</td> <td>1</td> <td>2929</td> </tr> <tr> <td>2</td> <td>苹果(2019)MacBook Pro</td> <td>18199</td> <td>2</td> <td>36398</td> </tr> <tr> <td>3</td> <td>ThinkPad(2019)X1 extreme</td> <td>13500</td> <td>1</td> <td>13500</td> </tr> <tr> <td>4</td> <td>Apple iMac 2019</td> <td>16500</td> <td>1</td> <td>16500</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">合计:</td> <td>5</td> <td>69327</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>完整表单作业</title> </head> <body> <h3>完整表单注册</h3> <form action="reg.php" method="POST"> <p> <label for="username">用户：</label> <input type="text" required id="username" name="username" placeholder="请输入用户名"> </p> <p> <label for="password">密码：</label> <input type="password" required id="password" name="password" placeholder="请输入密码"> </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" value="18" min="10" max="99"> </p> <p> <label for="male">性别:</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="secrecy" checked><label for="secrecy">保密</label> </p> <p> <label for="dis">政治面貌：</label> <input type="text" id="dis" name="no-input" placeholder="此项禁用" disabled> </p> <p> <label for="address">家庭住址：</label> <input type="text" id="address" name="address" placeholder="长安街" readonly> </p> <p> <label for="userface">头像:</label> <input type="file" name="userface" id="userface"> </p> <p> <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> </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="movies" id="movies"><label for="movies">看片</label> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重填"> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架作业</title> </head> <body> <h3>内联框架作业</h3> <hr> <ul> <li><a href="https://www.baidu.com" target="content">百度</a></li> <li><a href="adduser.html" target="content">添加用户</a></li> <li><a href="#" target="content">系统设置</a></li> </ul> <iframe srcdoc="<h2>欢迎使用管理后台</h2>" frameborder="1" name="content" width="530" height="450"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 总结: 为什么推荐使用语义化的标签?
（1）代码结构清晰，方便代码的阅读和维护，利于团队开发。
（2）让浏览器或是网络爬虫可以很好地解析，有利于SEO优化。
7.手写代码
