描述HTML与HTTP是什么,他们之间有什么联系?
HTML:超文本标记语言
HTTP:超文本传输协议
通过HTTP协议发起请求到服务器，返回响应到客户端，将html内容显示出来。
2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航</title> </head> <body> <ul> <li><a href="https://www.jd.com/" target="_blank">京东</a></li> <li><a href="https://www.taobao.com/" target="_blank">淘宝网</a></li> <li><a href="https://www.vip.com/" target="_blank"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572431433048&di=377e4fb94da2635fdf173ecca56a536f&imgtype=0&src=http%3A%2F%2Fimg.itmop.com%2Fupload%2F2015-6%2F201562121128.png" alt="唯品会">唯品会</a></li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品表</title> </head> <body> <table align="center" border="1" cellspacing="0" cellpadding="5"> <caption>手机列表</caption> <thead> <tr> <th>编号</th> <th>商品名</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <tbody> <tr> <td >1</td> <td>华为 HUAWEI Mate 30 Pro 5G 麒麟990 OLED环幕屏双4000万徕卡电影四摄8GB+256GB亮黑色5G全网通版</td> <td>￥6899.00</td> <td >1</td> <td rowspan="3" align="center">未知</td> </tr> <tr> <td>2</td> <td>小米9 Pro 5G 骁龙855Plus 30W无线闪充 12GB+512GB 钛银黑 双卡全网通 全面屏拍照智能新品游戏手机</td> <td>￥4299.00</td> <td>1</td> </tr> <tr> <td>3</td> <td>vivo iQOO Pro 8GB+128GB 竞速黑 高通骁龙855Plus手机 4800万AI三摄 44W超快闪充 4G全网通手机</td> <td>￥3198.00</td> <td>1</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">合计</td> <td>3</td> <td>￥14,396</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>用户注册</h3> <form> <p> <label for="username">账号</label> <input type="text" id="username" name="username" placeholder="请输入登录账号"> </p> <p> <label for="password">密码</label> <input type="text" id="password" name="password" placeholder="请输入密码"> </p> <p> <label for="email">邮箱</label> <input type="text" id="email" name="email" placeholder="请输入邮箱"> </p> <p> <label for="age">年龄</label> <input type="number" id="age" name="age" min="16" max="80"> </p> <p> <label for="">课程</label> <select name="课程" id="xxx"> <optgroup label="前端"> <option va>HTML5</option> <option>CSS3</option> <option>JavaScript</option> </optgroup> <optgroup label="后端"> <option>php</option> <option>java</option> <option>sql</option> </optgroup> </select> </p> <p> <label for="sex">性别</label> <input type="radio" name="gender" id="male" checked><label for="male">男</label> <input type="radio" name="gender" id="id="female"><label for="female">女</label> <input type="radio" name="gender" id="id="secrecy"><label for="female">保密</label> </p> <p> <label for="photo">头像上传:</label> <input type="file" name="photo" id="photo"> </p> <p> <button>注册</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联标签</title> </head> <body> <ul style="float: left;margin-right: 15px;"> <li><a href="https://passport.bilibili.com/login" target="test">登录</a></li> <li><a href="https://weibo.com/" target="test">欢迎使用</a></li> <li><a href="https://sh.qihoo.com/pc/home?sign=360chrome" target="test">注销</a></li> </ul> <iframe srcdoc="<h2>欢迎使用yjCMS</h2>" frameborder="1" name="test" width="500" height="550"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 总结: 为什么推荐使用语义化的标签?
1、有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
2、便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
