描述HTML与HTTP是什么,他们之间有什么联系?
html是一种通用的编写超文本的标记语言，http是超文本传输协议，用于传输超文本标记语言编写的文档，用于服务器端与客户端的一套协议。他们之间有相互依存关系！
2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!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> <header> <nav> <ul> <li><a href="1.jpg" target="_blank"><img src="https://img.php.cn/upload/course/000/000/001/5d22ad53c4d41933.jpg">首页</a></li> <li><a href="1.jpg" target="_blank">简介</a></li> <li><a href="1.jpg" target="_blank">新闻</a></li> <li><a href="1.jpg" target="_blank">图片</a></li> </ul> </nav> </header> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品表</title> </head> <body> <table border="1" width="600" cellpadding="5" cellspacing="0""> <!-- 声明表格 --> <caption><h1>商品表</h1></caption> <!-- 表格头部 --> <thead> <tr bgcolor="green"> <th>订单编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <!-- 表格主体 --> <tbody> <tr> <td rowspan="3" align="center">010254</td> <td>法拉利</td> <td>150万</td> <td>1</td> <td>150万</td> </tr> <tr> <!--<td></td>--> <td>路虎</td> <td>200万</td> <td>1</td> <td>200万</td> </tr> <tr> <!--<td></td>--> <td>捷豹</td> <td>250万</td> <td>1</td> <td>250万</td> </tr> </tbody> <!-- 表格底部 --> <tfoot> <tr> <td colspan="3" align="center">合计</td> <!--<td></td> <td></td>--> <td>4</td> <td>600万</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单制作</title> </head> <body align="center"> <h2>网站用户注册</h2> <form> <p> <label for="username">账号：</label> <input type="text" name="username" id="username" value="zhangsan"> </p> <p> <label for="password">密码：</label> <input type="password" name="password" placeholder="必须在8到12位之间"> </p> <p> <label>邮箱：</label> <input type="email" name="email" id="email" placeholder="example@email.com"> </p> <h3>以下内容选填</h3> <p> <label for="age">年龄:</label> <input type="number" id="age" name="age" min="16" max="80"> </p> <p> <label for="">爱好:</label> <input type="checkbox" name="hobby[]" value="Bodybuilding" id="Bodybuilding"><label for="Bodybuilding">健身</label> <input type="checkbox" name="hobby[]" value="Cycling" id="Cycling" checked><label for="Cycling">骑车</label> <input type="checkbox" name="hobby[]" value="read" id="read"><label for="read">阅读</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> <input type="radio" name="gender" id="secrecy" checked><label for="secrecy">保密</label> </p> <p> <label for="photo">头像上传:</label> <input type="file" name="photo" id="photo"> </p> <p> <input type="reset" name="reset" value="重填"> <button type="button">注册</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联样式</title> </head> <body> <!-- ul列表为后台侧边导航 --> <ul style="float: left;margin-right: 18px;"> <li><a href="demo3.html" target="content">商品列表</a></li> <li><a href="demo2.html" target="content">会员中心</a></li> <li><a href="demo1.html" target="content">促销活动</a></li> </ul> <!-- 设置内联边框大小尺寸，以及显示方式 --> <iframe srcdoc="<h2>欢迎你</h2>" frameborder="1" name="content" width="630px" height="450px"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 总结: 为什么推荐使用语义化的标签?
语义化标签有利于程序员更新维护，便于SEO优化，也是未来发展趋势！
以下为手抄图片，因手指受伤，写的不好，请老师多担待！
第一页
第二页
第三页
第四页
第五页
第六页
第七页
第八页
