描述HTML与HTTP是什么,他们之间有什么联系?
HTML称为超文本标记语言，是一种标识性的语言。
http是一个简单的请求-响应协议，它通常运行在TCP之上。
.HTML是放在服务器上的超级文本，如果我们想获取到网站的某一个页面，那就需要HTTP来请求，然后才能到达本机通过浏览器解析后方可看到网页内容。
制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航</title> </head> <body> <nav> <ul> <li><a href="#"><img src="../static/images/1.jpg" alt="首页"></a></li> <li><a href="#"><img src="../static/images/2.jpg" alt="聚划算"></a></li> <li><a href="#"><img src="../static/images/3.jpg" alt="天猫"></a></li> <li><a href="#"><img src="../static/images/4.jpg" alt="天猫超市"></a></li> <li><a href="#"><img src="../static/images/5.jpg" alt="淘超市"></a></li> </ul> </nav> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品信息表</title> </head> <body> <table border="1" width="300" cellpadding="10" cellspacing="0"> <tr> <td>品名</td> <td>单价</td> <td>数量</td> <td>总价</td> </tr> <tr> <td>华为手机</td> <td>4999</td> <td>1</td> <td>4999</td> </tr> <tr> <td>小米手机</td> <td>2999</td> <td>2</td> <td>5998</td> </tr> <tr> <td>苹果手机</td> <td>5288</td> <td>1</td> <td>5288</td> </tr> <tr> <td colspan="3" align="center">合计</td> <td>16285</td> </tr> </table> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>用户注册表单</title> </head> <body> <h3>用户注册表</h3> <form action="./login.php" method="POST"> <p> <label for="username">账号:</label> <input type="text" id="username" name="username"> </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="18" max="60"> </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="">php</option> <option value="">php</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> <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> <button type="button">注册</button> </p> </form> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe</title> </head> <body> <iframe src="https://map.baidu.com/@12697919.69,2560977.31,12z" frameborder="0" width="500" height="400"></iframe> <br> <ul style="float: left;margin-right: 15px;"> <li><a href="https://map.baidu.com/@12697919.69,2560977.31,12z" target="content">点我去百度地图</a></li> </ul> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
总结: 为什么推荐使用语义化的标签?
1、有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
2、便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
博客列表 >HTML的导航，注册表，信息表作业_2019_10_29
HTML的导航，注册表，信息表作业_2019_10_29
- 赤原创转载
- 2019年10月31日 19:58:06486浏览
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议