10月29日作业:
一、 描述HTML与HTTP是什么,他们之间有什么联系?
HTML超文本编辑语言，Hyper Text Markup Language的缩写
HTTP超文本传输协议，HyperText Transfer Protocol的缩写
HTML 就是要渲染（链接）显示出来的内容，但是要通过 HTTP协议标准，实现服务器和客户端的数据交换。
二、制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航关联图像作业</title> </head> <body> <nav> <ul> <li> <img src="static/images/1.jpg" alt="我和我的祖国" width="16.7%"> </li> <li> <a href="https://www.php.cn/course/1078.html" > <!-- 此前a标签中间超链接是个文本“python自学教程”，点击文本跳转，现在替换成img元素即可实现点击图片跳转--> <img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt="python自学教程"> </a> </li> </ul> </nav> </body> </html>
点击 "运行实例" 按钮查看在线实例
三、制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品信息表</title> </head> <body> <!--添加一个横线--> <hr> <!--table:表格--> <!--caption:表格标题--> <!--thead:表格页眉--> <!--tbody：表格主体--> <!--tfoot:表格页脚--> <table border="1" cellspacing="0" cellpadding="5" width="700"> <!-- 标题--> <caption><h3>购物车</h3></caption> <thead> <!--表头--> <tr bgcolor="#add8e6"> <th>编号</th> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>金额</th> <th>快速通道</th> </tr> </thead> <!--主体 --> <tbody> <tr > <td>1</td> <td>华为(HUAWEI)MateBook14</td> <td>5699.00</td> <td>1</td> <td align="right">5699.00</td> <td rowspan="3">一键结算</td> <!-- 行合并是rowspan--> </tr> <tr > <td>2</td> <td>苹果2019新款MacBook Pro 13.3英寸</td> <td>9188.00</td> <td>2</td> <td align="right">18376.00</td> </tr> <tr > <td>3</td> <td>小米RedmiBook 14 增强版</td> <td>4499.00</td> <td>1</td> <td align="right">4499.00</td> </tr> </tbody> <!-- 页脚--> <tfoot> <tr> <td colspan="3" align="center">合计：</td> <!-- 行合并是rowspan 列合并是colspan--> <!-- <td></td>--> <!-- <td></td>--> <td>4</td> <td align="right">28574.00</td> <td></td> </tr> </tfoot> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
四、制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单与表单中的课件</title> </head> <body> <h3>用户注册</h3> <!-- action:表单提交的地址，即服务器上处理表单数据的脚本/程序/代码--> <!--method:提交类型--> <form action="login.php" method="post"> <p> <label for="username">账号：</label> <input type="text" id="username" name="username" value="admin master"> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="不少于8位"> </p> <p> <label for="email">邮箱：<lable> <input type="email" id="email" name="email" placeholder="example@xx.com"> </p> <p> <label for="age">年龄：<lable> <input type="number" id="age" name="age" min="18" max="100" > </p> <p> <label for="birthdate">出生日期：<lable> <input type="date" id="birthdate" name="birthdate"> </p> <p> <label for="course">课程</label> <select name="course" id=""> <!-- 分组optgroup--> <optgroup label="前端"> <option value="">HTML5</option> <option value="">CSS3</option> <option value="">JAVA </option> </optgroup> <optgroup label="后端"> <option value="" selected>PHP</option> <option value="">MySQL</option> <option value="">Laravel</option> </optgroup> </select> </p> <p> <label for="male">性别：</label> <input type="radio" name="gender" id="male"> <label for="male">男</label> <input type="radio" name="gender" id="female" checked> <label for="female">女</label> <input type="radio" name="gender" id="unknow"> <label for="unknow">保密</label> </p> <p> <label for="music">爱好：</label> <input type="checkbox" name="hobby[]" value="game"><lable for="game">肝游戏</lable> <input type="checkbox" name="hobby[]" value="movies" checked><lable for="movies">看电影</lable> <input type="checkbox" name="hobby[]" value="music" id="music"><lable for="music">听音乐</lable> </p> <p> <label for="photo">文件上传</label> <input type="file" name="photo" id="photo"> </p> <p> <button>提交</button> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
五、制作一个网站后台, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body> <iframe src="https://j.map.baidu.com/5f/7" frameborder="0" width="600" height="600"></iframe> <ul style="float: left;margin-right: 15px;"> <li><a href="demo6.html" target="content">商品查看</a></li> <li><a href="demo7.html" target="content">添加用户</a></li> <li><a href="demo1.html" target="content">系统设置</a></li> </ul> <iframe srcdoc="<h2 style='color:red'>欢迎登陆管理台</h2>" frameborder="1" name="content" width="600" height="500"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
