一 . 描述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><h2>导航</h2></title> </head> <body> <ul style="list-style: none"> <li><a href="https://www.php.cn/">PHP中文网</a></li> <li><a href="https://www.html.cn">HTML中文网</a></li> <li><a href="https://www.php.cnl"><img src="https://www.php.cn/static/images/logo.png" 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="8" width="50%"> <caption><h3>商品信息表</h3></caption> <thead> <tr bgcolor="#add8e6" align="center"> <th>编号</th> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>总价</th> </tr> </thead> <tbody> <tr align="center"> <td rowspan="2" bgcolor="red">1</td> <td>华为</td> <td>2800</td> <td>2</td> <td>5600</td> </tr> <tr align="center"> <td>橘子</td> <td>5800</td> <td>1</td> <td>5800</td> </tr> <tr align="center"> <td>2</td> <td>香蕉</td> <td>5800</td> <td>1</td> <td>5800</td> </tr> <tr align="center"> <td>3</td> <td>苹果</td> <td>5800</td> <td>1</td> <td>5800</td> </tr> </tbody> <tfoot align="center"> <tr> <td colspan="4">合计</td> <td>11400</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四 . 制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body> <ul style="float: left;margin-right: 15px;list-style: none"> <li><a href="https://www.php.cn/article.html" target="tnt">导航列表</a></li> <li><a href="https://www.php.cn/dic.html" target="tnt">商品列表</a></li> <li><a href="https://www.php.cn/xiazai/" target="tnt">用户注册</a></li> </ul> <iframe srcdoc="<h2>欢迎使用管理后台</h2>" frameborder="1" name="tnt" width="80%" height="50%"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结: 为什么推荐使用语义化的标签?
有利于内容整洁，页面内容更加丰富。内容设置会更加灵活。
