HTML与HTTP 的关系，在Web服务中，信息一般是使用HTML格式以超文本和超媒体方式传送的，所使用的Internet协议是HTTP协议，即HTML是超文本标记语言，HTTP是超文本传输协议。
一、HTML标签导航，实现列表、链接、图片、并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML标签导航，实现列表、链接、图片、并使用图片做为链接元素</title> </head> <body> <h3>我的导航</h3> <ul> <li><a href="#">首页</a></li> <li><a href="#"><img src="pic.jpg" alt="秒杀"></a></li> <li><a href="#">团购</a></li> <li><a href="#">拼团</a></li> <li><a href="#">分销</a></li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
注：无序标签ul一般应用于导航。
二、商品购物车表格，含有标题、头部与底部，实现行与列方向的合并功能
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品购物车表格，含有标题、头部与底部，实现行与列方向的合并功能</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5" width="400"> <caption><h3>我的购物车</h3></caption> <thead> <tr bgcolor="#ba55d3"> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <tbody align="center"> <tr> <td>1</td> <td>苹果XR</td> <td rowspan="2">5000</td> <td>1</td> <td>5000</td> </tr> <tr> <td>2</td> <td>华为P30</td> <td>2</td> <td>10000</td> </tr> <tr> <td>3</td> <td>一加7</td> <td>3000</td> <td>3</td> <td>9000</td> </tr> </tbody> <tfoot align="center"> <tr> <td colspan="3">合计</td> <td>6</td> <td>24000</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
表格单元格的合并操作：
列方向: <td colspan="n"></td>
行方向: <td rowspan="n"></td>
三、完整的用户注册表单及对应的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>完整的用户注册表单及对应的表单控件</title> </head> <body> <h3>用户注册</h3> <form action="login.php" method="POST"> <p> <label for="username">账号：</label> <input type="text" id="username" value="yourname"> </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@email.com"> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="10" max="80"> </p> <p> <label for="">课程：</label> <select name="course" id=""> <optgroup label="前端"> <option value="">HTML5</option> <option value="">CSS</option> <option value="">JavaScript</option> </optgroup> <optgroup label="后端"> <option value="" selected>PHP</option> <option value="">MYSQL</option> <option value="">PYTHON</option> </optgroup> </select> </p> <p> <label for="">性别</label> <input type="radio" name="person" id="male"><label for="male">男生</label> <input type="radio" name="person" id="female"><label for="female">女生</label> <input type="radio" name="person" id="secrecy" checked><label for="secrecy">保密</label> </p> <p> <label for="">爱好</label> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">玩游戏</label> <input type="checkbox" name="hobby[]" value="program" id="program"><label for="program">写程序</label> <input type="checkbox" name="hobby[]" value="tv" id="tv" checked><label for="tv">看片</label> </p> <p> <label for="photo">头像上传</label> <input type="file" name="photo" id="photo"> </p> <p> <input type="button" name="button" value="按钮"> <input type="submit" name="submit" value="提交"> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
特别注意：表单中属性for与id的值必须保持一致。
四、网站后台, 使用<iframe>内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网站后台, 使用<iframe>内联框架实现</title> </head> <body> <ul style="float: left"> <li><a href="system.html" target="content">系统设置</a></li> <li><a href="user.html" target="content">用户管理</a></li> <li><a href="products.html" target="content">产品管理</a></li> </ul> <iframe srcdoc="<h2>后台管理中心</h2>" frameborder="1" name="content" width="500" height="300" style="margin-left: 10px;"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
注意：
1、iframe标签中使用srcdoc代替src，可以在属性值中直接写html代码，实现后台首页的功能；
2、iframe标签的name属性值非常重要, 链接到该框架页面target值应该保持一致。
五、为什么推荐使用语义化标签？
有两个方面重要作用：
1、有利于SEO，便于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重；
2、便于团队开发和维护，语义化标签的HTML可以让开发者更容易看明白，从而提高团队的效率和协调能力。
