作业1：描述HTML与HTTP是什么,他们之间有什么联系?
html是超文本标记语言，http是超文本传输协议。html通过http协议从服务器传输到本地浏览器，然后浏览器解析后得到我们平时看到的页面。
作业2：制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业1-列表</title> </head> <body> <ul> <li><a href="http://php.cn">php中文网</a></li> <li><a href="http://php.cn">php.cn</a></li> <li><a href="http://php.cn"><img src="https://img.php.cn/upload/webcode/000/001/120/5db847cd7de43727.jpg" alt="图片链接元素"></a></li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
作业3：制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品信息表</title> </head> <body > <table cellpadding="6" border="1" cellspacing="0"> <caption><h3>商品信息</h3></caption> <thead align="center"><tr> <td>编号</td> <td>商品名称</td> <td>单价</td> <td>数量</td> <td>总价</td> </tr> </thead> <tbody align="center"> <tr> <td>1</td> <td>苹果手机</td> <td>5999</td> <td>2</td> <td>12000</td> </tr> <tr> <td>2</td> <td>华为手机</td> <td>1999</td> <td>3</td> <td>6000</td> </tr> </tbody> <tfoot align="center"> <tr> <td colspan="3" >合计：</td> <td>5</td> <td>18000</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
作业4：制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <p> <label for="username">账号:</label> <input type="text" id="username" name="username" placeholder="包含英文或字母"> </p> <p> <label for="password">密码:</label> <input type="password" name="password" id="password" placeholder="请输入您的密码"> </p> <p> <label for="name1">姓名:</label> <input type="text" id="name1" name="name1" placeholder="请输入您的姓名"> </p> <p> <label for="age">年龄:</label> <input type="number" id="age" min="16" max="50"> </p> <p> <label for="email">邮箱</label> <input type="email" id="email" name="email" placeholder="请输入邮箱地址@xx.com"> </p> <p> <label for="youxi">爱好:</label> <input type="checkbox" name="hobby[]" id="youxi" value="youxi"><label for="youxi">玩游戏</label> <input type="checkbox" name="hobby[]" id="kanpian" value="kanpian"><label for="kanpian">看电影</label> <input type="checkbox" name="hobby[]" id="kanshu" value="kanshu"><label for="kanshu">看小说</label> </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> </p> <p> <label for="diqu">地区:</label> <select name="" id=""> <option value="">请选择</option> <optgroup label="安徽"> <option value="">合肥</option> <option value="">芜湖</option> <option value="">黄山</option></optgroup> <optgroup label="上海"> <option value="">普陀区</option> <option value="">静安区</option> <option value="">上海市</option></optgroup> </select> </p> <p> <label for="file">文件上传</label> <input type="file" name="file" id="file"> </p> <p> <button>提交</button> </p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
作业5：制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>管理后台</title> </head> <body> <ul> <li><a href="https://www.php.cn/" target="lianjie">注册</a></li> <li><a href="demo1.html" target="lianjie">登陆</a></li> <li><a href="https://www.php.cn/" target="lianjie">首页</a></li> </ul> <iframe srcdoc="<h2 style='color:red;'>来到管理后台</h2>" name="lianjie" frameborder="2" width="500" height="400"></iframe> </body> </html> <!--srcdoc代替src, 可以在属性值中直接写html代码, 实现后台首页的功能--> <!--name属性非常重要, 它是链接到该框架页面的入口-->
运行实例 »
点击 "运行实例" 按钮查看在线实例
作业6:总结: 为什么推荐使用语义化的标签?
1，没有CSS的情况下，页面也能呈现出良好的结构。
2.title.alt的可以用于解释图片或名词方便理解
3.便于浏览器SEO，这个语义可以给搜索引擎爬虫，有利于百度SEO
4.方便其他开发者理解代码含义！使代码方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
