一、描述HTML与HTTP是什么,他们之间有什么联系?
答：HTML：超文本编辑语言（全称是Hypertext Markup Language）； HTTP：超文本传输协议（全称是Hypertext Transfer Protocol）； HTML 和 HTTP的联系：HTML 是通过 HTTP协议将它从服务器传输到本地浏览器，经过浏览器解析，再显示在页面上。
二、制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> </head> <body> <!--作业要求--> <h1>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</h1> <!--列表链接--> <p> <ul> <li><a href="#">首页</a></li> <li><a href="#">视频入门</a></li> <li><a href="#">入门教程</a></li> <li><a href="#">社区问答</a></li> </ul> </p> <!--图片链接--> <p> <a href="http://www.php.cn"><img src="https://www.php.cn/static/images/index_banner.png?1" alt="php中文网"></a> </p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品信息表</title> </head> <body> <!--作业要求--> <h1> 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</h1> <!--table 表格--> <!--caption 表格标题--> <!--thead 表格页眉--> <!--tbody 表格主题--> <!--tfoot 表格页脚--> <p> <table border="1px" cellspacing="0px"> <!-- 标题--> <caption><h3>购物车</h3></caption> <!-- 头部--> <thead> <tr> <th>编号</th> <th>商品名称</th> <th>商品数量</th> <th>商品单价</th> </tr> </thead> <!-- 内容--> <tbody> <tr> <th>1</th> <th>nike kobe ad</th> <th>1</th> <th>999</th> </tr> <tr> <th>2</th> <th>小米手机8</th> <th>1</th> <th>1899</th> </tr> <tr> <th>3</th> <th>thinkpad 2019新款</th> <th>1</th> <th>13999</th> </tr> </tbody> <!-- 页脚合并单元格--> <tfoot> <tr> <th colspan="3">合计价格:</th> <th>16897</th> </tr> </tfoot> </table> </p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四、制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <h2>制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件</h2> <h3>用户注册</h3> <form action="" method="post"> <p>用户名：<input type="text" name="username" placeholder="请输入用户名" ></p> <p>密码：<input type="password" name="password" placeholder="请输入密码"></p> <p>邮箱：<input type="email" name="email" placeholder="@126.com"></p> <p>年龄：<input type="number" min="12" max="80"></p> <p>性别： <label for="man">男</label> <input type="radio" name="sex" id="man"> <label for="women">女</label> <input type="radio" name="sex" id="women"> <label for="secrecy">保密</label> <input type="radio" name="sex" id="secrecy"> </p> <p>爱好： <input type="checkbox" name="hobby" id="game"><label for="game">玩游戏</label> <input type="checkbox" name="hobby" id="movies"><label for="movies">看电影</label> <input type="checkbox" name="hobby" id="shop"><label for="shop">购物</label> </p> <p>课程：<select name="lession"> <optgroup label="前端"> <option>html</option> <option>css</option> </optgroup> <optgroup label="后端"> <option>php</option> <option>mysql</option> </optgroup> </select></p> <p> <label for="photo">头像上传:</label> <input type="file" id="photo"> </p> <p> <input type="submit" value="提交"><br/> <input type="button" value="按钮"><br/> <button>按钮</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五、制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body> <h2>制作一个网站后台, 要求使用内联框架实现</h2> <ul style="float: left; margin-right: 15px;"> <li><a href="demo1.html" target="content">导航栏</a></li> <li><a href="demo2.html" target="content">商品信息表</a></li> <li><a href="demo3.html" target="content">用户注册</a></li> </ul> <iframe name="content" width="530px" height="580px" srcdoc="<h2>欢迎使用后台管理</h2>"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六、总结: 为什么推荐使用语义化的标签?
语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
支持多终端设备的浏览器渲染。
