描述HTML与HTTP是什么,他们之间有什么联系?
HTML：超文本标记语言
HTTP：超文本传输协议
HTTP是服务于HTML，可以将用户发送的请求到服务器端，并且可以将服务器端的请求返回。
制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</title> </head> <body> <ul> <li><a href="https://www.php.cn/map/yunv.html"><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""></a></li> <li><a href="https://www.php.cn/jishu/php/"><img src="https://www.php.cn/static/images/index_php_item2.jpg?1" alt=""></a></li> <li><a href="https://www.php.cn/course/type/4.html"><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"> <title>制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5"> <caption><h3>购物车</h3></caption> <thead> <tr bgcolor="#90ee90"> <th>编号</th> <th>名称</th> <th>数量</th> <th>单价</th> <th>金额</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>豌豆淀粉</td> <td>1</td> <td>9.80</td> <td>9.80</td> </tr> <tr> <td>2</td> <td>清风抽纸</td> <td>2</td> <td>57.90</td> <td>115.80</td> </tr> <tr> <td>3</td> <td>防尘门垫</td> <td>1</td> <td>10.80</td> <td>10.80</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">合计:</td> <!-- <td></td>--> <!-- <td></td>--> <td>4</td> <td>136.40</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件</title> </head> <body> <form action=""> <h3>注册</h3> <p> <label for="username">用户名</label> <input type="text" id="username" name="username" value="monster"> </p> <p> <label for="password">密码</label> <input type="password" id="password" name="password" placeholder="不能少于8位"> </p> <p> <label for="email">邮箱</label> <input type="email" id="email" name="email" placeholder="example@emai.com"> </p> <p> <label for="age">年龄</label> <input type="number" id="age" min="18" max="80"> </p> <p> <label for="female">性别</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="">爱好</label> <input type="checkbox" name="hobby[]" value="name" id="game"><label for="game">LOL</label> <input type="checkbox" name="hobby[]" value="name" id="book"><label for="book">看书</label> </p> <p> <label for="">课程</label> <select name="coures" id=""> <optgroup label="前端"> <option value="">HTML5</option> <option value="">CSS3</option> <option value="">JavaScript</option> </optgroup> <optgroup label="后端"> <option value="" selected>PHP</option> <option value="">MySQL</option> <option value="">Laravel</option> </optgroup> </select> </p> <p> <label for="photo">上传头像</label> <input type="file" name="photo" id="photo"> </p> <button>立即注册</button> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一个网站后面, 要求使用iframe内联框架实现</title> </head> <body> <ul> <li><a href="demo06.html">表格</a></li> <li><a href="demo07.html">表单</a></li> <li><a href="demo08.html">内联框架</a></li> </ul> <iframe srcdoc="<h2 style='color:red'>欢迎使用Monster管理后台</h2>" frameborder="1" name="content" width="530" height="600"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结: 为什么推荐使用语义化的标签?
增强了可读性，能够清晰看出网页结构，方便开发和维护
