一、描述HTML与HTTP是什么,他们之间有什么联系?
HTML：超文本标记语言（Hypertext Markup Language）
HTTP：超文本传输协议（Hypertext Transfer Protocol）
在Web服务中，信息一般是使用HTML格式以超文本和超媒体方式传送的，所使用的Internet协议是HTTP协议
二. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</title> </head> <body> <!-- 使用列表 ul li 来制作导航 --> <ul> <li> <a href="https://www.baidu.com">百度一下</a> </li> <li> <a href="https://www.php.cn/"> <img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt="图片无法显示"> </a> </li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5"> <caption><h1>商品信息表</h1></caption> <thead> <tr> <th>商品编号</th> <th>商品名称</th> <th>售价</th> <th>数量</th> <th>行合并</th> </tr> </thead> <tbody> <tr> <td>0</td> <td>可口可乐</td> <td>3.00</td> <td>10</td> <!--行合并--> <td rowspan="3">我是行合并</td> </tr> <tr> <td>1</td> <td>百事可乐</td> <td>3.00</td> <td>20</td> </tr> <tr> <td>3</td> <td>雪碧</td> <td>3.00</td> <td>5</td> </tr> </tbody> <tfoot> <tr> <!--列合并--> <td colspan="3" alian="center">合计：</td> <td>100</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件</title> </head> <body> <h1>用户注册</h1> <form action=""> <p> <label for="name">账号</label> <input type="text" name="name" id="name" placeholder="请输入账号"> </p> <p> <label for="password">密码</label> <input type="password" name="password" id="password" placeholder="请输入密码"> </p> <p> <label for="email">邮箱</label> <input type="email" name="email" id="email" placeholder="请输入邮箱"> </p> <p> <label for="date">出生日期</label> <input type="date" name="date" id="date"> </p> <p> <label for="education">学历</label> <select name="education" id="education"> <option value="0" selected>大学</option> <option value="1">高中</option> </select> </p> <p> <label>爱好</label> <input type="checkbox" name="hobby[]" id="html" value="html"><label for="html">html</label> <input type="checkbox" name="hobby[]" id="css" value="css"><label for="css">css</label> <input type="checkbox" name="hobby[]" id="php" value="php"><label for="php">php</label> </p> <p> <label>学历</label> <input type="radio" name="man" id="man"><label for="man">男</label> <input type="radio" name="woman" id="woman"><label for="woman">女</label> </p> <p> <label for="photo">头像</label> <input type="file" id="photo" name="photo"> </p> <p> <button>提交</button> <input type="button" value="保存"> <input type="reset" value="重置"> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五. 制作一个网站后台, 要求使用`<iframe>`内联框架实现
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>制作一个网站后台, 要求使用`iframe`内联框架实现</title> </head> <body> <ul style="float:left;margin-right: 20px"> <li><a href="demo0.html" target="content">首页</a></li> <li><a href="demo1.html" target="content">商品列表</a></li> <li><a href="demo2.html" target="content">用户管理</a></li> </ul> <iframe src="demo0.html" frameborder="1" name="content" width="600" height="600"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六. 总结: 为什么推荐使用语义化的标签?
问：什么是语义化的HTML？
答：语义化的HTML就是正确的标签做正确的事情，能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。
问：为什么要做到语义化？
答：标签语义化有利于SEO，有助于构架良好的HTML结构，便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
