HTML是超文本标记语言；它包括一系列的标签，通过这些标签可以将网络上的文档格式统一，HTML命令可以说明文字、图形、动画、声音、表格连接等。HTTP是一种超文本传输协议，它指定了客户端可以发送给服务器什么样的消息以及得到什么样的响应。它们之间的联系；HTML做成的客户端需要HTTP的传输协议，没有HTTP协议，数据不能传输，HTML也就没有意义了。
导航页
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航</title> </head> <body> <section> <ul style =color:blue> <li>首页</li> <li>新闻</li> <li>娱乐</li> <li>体育</li> </ul> <li><a href="https://www.baidu.com/">购物</a></li> <li><a href="https://www.baidu.com/">商品</a></li> <li><a href="https://www.baidu.com/">详情</a></li> <li><a href="https://www.baidu.com/">售后</a></li> <img src="static/images/1.jpg" alt="图片"width="500"> <a href="https://www.baidu.com"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" width="500" alt="百度"> </a> <ol> <li>华为手机</li> <li>苹果手机</li> <li>小米手机</li> </ol> <hr> <dl> <dt>电话:</dt> <dd>010-123456789</dd> <dt>地址:</dt> <dd>北京市大兴区</dd> <dt>emamil:</dt> <dd>123456@email.com</dd> </dl> </section> </body> </html>
表格页
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品信息表</title> </head> <body> <table border="1" width="500" cellspacing="0" cellpadding="5"> <caption> <h3>今天要买的东西</h3> </caption> <thead> <tr bgcolor="lightblue"> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>总价</th> </tr> </thead> <tr> <td>1</td> <td>红酒</td> <td>100</td> <td>2</td> <td>200</td> </tr> <tr> <td>2</td> <td>水果</td> <td>50</td> <td>2</td> <td>100</td> </tr> <tr> <td>3</td> <td>可口可乐</td> <td>3</td> <td>5</td> <td>15</td> </tr> <tr> <td>4</td> <td>面包</td> <td>10</td> <td>5</td> <td>50</td> </tr> <tr bgcolor="#7fffd4"> <td colspan="3" align="center">合计</td> <td>14</td> <td>365</td> </tr> </table> </body> </html>
注册页
实例
<!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" name="username" placeholder="只能为手机号或邮箱"> </p> <P> <label for="password">密码</label> <input type="password" id="password" name="password" placeholder="必须由字母和数字组成"> </P> <p> <label for="email">邮箱</label> <input type="email"id="email"name="email"placeholder="examole@email.com"> </p> <p> <label for="">想学习的内容</label> <select name="" id=""> <optgroup label="舞蹈类"> <option value="">街舞</option> <option value="">民族舞</option> <option value="">爵士舞</option> </optgroup> <optgroup label="歌唱类"> <option value="">美声</option> <option value="">流行</option> <option value="">戏曲</option> </optgroup> </select> </p> <p> <label for="">爱好:</label> <input type="checkbox" name="hobby[]" valur="game" id="game"><label for="game">玩游戏</label> <input type="checkbox" name="hobby[]" valur="xuexi" id="xuexi" checked ><label for="xuexi">学习</label> <input type="checkbox" name="hobby[]" valur="运动" id="sport"><label for="sport">运动</label> </p> <p> <label for="male">性别：</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"><label for="secrecy">保密</label> </p> <p> <label for="age">年龄</label> <input type="number"id="age"name="age" min="18" max="40"> </p> <p> <label for="photo">照片上传</label> <input type="file" name="photo" id="photo"> </p> <p> <input type="submit"name="submit" valur="提交"> <input type="reset" neme="rest" value="重写"> <button type="button">注册</button> </p> </form> </body> </html>
内联框架
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body> <iframe src="https://j.map.baidu.com/c1/IJ" frameborder="0" width="500" height="500"></iframe> <hr> <ul style="float: left;margin-right: 15px"> <li><a href="dome1.html" target="content">主页</a></li> <li><a href="deme2.html" target="content">购物列表</a</li> <li><a href="demo3.html" target="content">用户注册</a</li> </ul> <iframe srcdoc="<h2>欢迎使用管理后台</h2>" frameborder="1" name="content" width="500" height="500"></iframe> </body> </html>
为什么推荐使用语义化标签？增强了可读性，能够清晰看出网页结构，方便开发和维护
点击 "运行实例" 按钮查看在线实例
点击 "运行实例" 按钮查看在线实例
点击 "运行实例" 按钮查看在线实例
点击 "运行实例" 按钮查看在线实例
