HTML 是用来描述网页的一种语言，在前端开发中有着重要的作用。而HTML5是目前最新的 HTML 标准。因此，学习HTML5显得尤为重要。本篇博文通过几个实例就HTML5常用标签进行练习、总结。
1. 描述HTML与HTTP是什么，他们之间有什么联系？
HTML 指的是超文本标记语言 (Hyper Text Markup Language)，HTML 不是一种编程语言，而是一种标记语言 (markup language)。
HTTP 指的是超文本传输协议。
HTTP的产生是为HTML服务的，可以通过客户端发起HTTP请求到服务器端，将服务器端存储的HTML文档等内容返回。
2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>导航</title> </head> <body> <!--nav标签定义导航链接的部分--> <nav> <!-- ul 标签定义无序列表--> <ui> <!-- li 标签定义列表项目--> <li> <a href="https://www.php.cn">PHP中文网</a> </li> <li> <a href="https://www.php.cn/k.html"> <img src="https://www.php.cn/static/images/index_banner.png" alt="第九期报名" width="500"> </a> </li> <li> <a href="https://www.php.cn/xiazai/gongju/1500"> <img src="https://www.php.cn/static/images/index_banner9.jpg" alt="PHPStudy发布" width="500"> </a> </li> </ui> </nav> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>LOL亚索数据表</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5"> <!-- 标题--> <caption> <h3>LOL亚索数据表</h3> </caption> <!-- 表头--> <thead> <tr bgcolor="#7fffd4"> <th>场次</th> <th>游戏模式</th> <th>击杀英雄</th> <th>死亡次数</th> <th>合计经济</th> </tr> </thead> <!-- 主体--> <tbody> <tr> <td>1</td> <td>匹配模式</td> <td>3</td> <td>15</td> <td>8000.00</td> </tr> <tr> <td>2</td> <td>排位模式</td> <td rowspan="2">3</td> <td>18</td> <td>6000.00</td> </tr> <tr> <td>3</td> <td>无限火力</td> <td>28</td> <td>10000.00</td> </tr> <tr> <td>4</td> <td>人机练习</td> <td>5</td> <td>13</td> <td>7000.00</td> </tr> </tbody> <!-- 底部--> <tfoot> <tr> <td colspan="3" align="center">合计</td> <td>74</td> <td>31000.00</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>人人网用户注册</title> </head> <body> <h3>人人网用户注册</h3> <form action="register.php" method="post"> <p> <label for="username">账号:</label> <input type="text" name="username" id="username" placeholder="请输入注册账号"> </p> <p> <label for="password">密码:</label> <input type="password" name="password" id="password" placeholder="不能少于6位且不能为纯数字"> </p> <p> <label for="male">性别:</label> <input type="radio" name="gender" id="male"><label for="male">男</label> <input type="radio" name="gender" id="female" checked><label for="female">女</label> <input type="radio" name="gender" id="secrecy"><label for="secrecy">保密</label> </p> <p> <label for="number">年龄:</label> <input type="number" name="number" id="number" min="18" max="60"> </p> <p> <label for="weihun">交友条件:</label> <input type="checkbox" name="hobby" value="weihun" id="weihun" checked> <label for="weihun">未婚</label> <input type="checkbox" name="hobby" value="yihun" id="yihun"><label for="yihun">已婚</label> <input type="checkbox" name="hobby" value="nanxing" id="nanxing"><label for="nanxing">男性</label> <input type="checkbox" name="hobby" value="nvxing" id="nvxing"><label for="nvxing">女性</label> </p> <p> <label for="area">推荐地区:</label> <select name="" id="area"> <optgroup label="河北省"> <option value="">秦皇岛</option> <option value="" >唐山</option> <option value="">天津</option> <option value=""selected>廊坊</option> </optgroup> <optgroup label="四川省"> <option value="">成都</option> <option value="">广元</option> <option value="">眉山</option> </optgroup> </select> </p> <p> <label for="email">联系邮箱:</label> <input type="email" name="email" id="email" placeholder="example@email.com"> </p> <p> <label for="photo">头像上传:</label> <input type="file" name="photo" id="photo"> </p> <p> <button>开始交友</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 制作一个网站后面, 要求使用<iframe>内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>人人网管理后台</title> </head> <body> <!--内联框架 iframe--> <!--将另一个HTML页面嵌入到当前页面中,而不是窗口中打开另一个网页, 类似画中画--> <!--内联框架不会被搜索引擎抓取一般用于后台设计--> <ul style="float: left;margin-right: 20px"> <li><a href="wenzhang.html" target="content">文章管理</a></li> <li><a href="yonghu.html" target="content">用户管理</a></li> <li><a href="shiming.html" target="content">实名认证管理</a></li> </ul> <!--srcdoc代替src, 可以在属性值中直接写html代码--> <!--name属性是链接到该框架的入口--> <iframe srcdoc="<h1>欢迎使用人人网管理后台</h1>" frameborder="1" name="content" width="500" height="500"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 总结：为什么推荐使用语义化标签？
a. 标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。
b. 有利于SEO，有利于搜索引擎更好的理解我们的网页，从而获取更多的有效信息。
c. 便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
