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"> <title>导航</title> </head> <body> <!--nav标签定义导航链接的部分--> <nav> <!-- ul 标签定义无序列表--> <ul> <!-- li 标签定义列表项目--> <li> <a href="https://www.php.cn/" target="_self"> <img src="https://www.php.cn/static/images/index_banner.png?1" alt="php中文网" width="500"> </a> </li> <li> <a href="https://www.taobao.com/" target="_blank"> <img src="static/images/tb.jpg" alt="淘宝"> </a> </li> <li><a href="https://www.baidu.com/">百度一下</a></li> </ul> </nav> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品信息表</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5"> <!-- 标题--> <caption> <h3>商品信息表</h3> </caption> <!-- 表头--> <thead> <tr bgcolor="#7fffd4"> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <!-- 主体--> <tbody> <tr> <td>1</td> <td>荣耀20</td> <td>2499.00</td> <td>1</td> <td>2499.00</td> </tr> <tr> <td>2</td> <td>华为Mate30</td> <td rowspan="2">4299.00</td> <td>2</td> <td>8598.00</td> </tr> <tr> <td>3</td> <td>一加7Pro</td> <td>1</td> <td>4299.00</td> </tr> <tr> <td>4</td> <td>魅族16sPro</td> <td>2699.00</td> <td>3</td> <td>8097.00</td> </tr> </tbody> <!-- 底部--> <tfoot> <tr> <td colspan="3" align="center">合计</td> <td>7</td> <td>23493.00</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!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" 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="12" max="60"> </p> <p> <label for="soccer">爱好:</label> <input type="checkbox" name="hobby" value="basktball" id="basktball" checked> <label for="basktball">篮球</label> <input type="checkbox" name="hobby" value="soccer" id="soccer"><label for="soccer">足球</label> <input type="checkbox" name="hobby" value="pingpong" id="pingpong"><label for="pingpong">乒乓球</label> </p> <p> <label for="area">地区:</label> <select name="" id="area"> <optgroup label="山东省"> <option value="">济南</option> <option value="" selected>青岛</option> <option value="">东营</option> </optgroup> <optgroup label="河北省"> <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> <input type="reset" name="reset" value="重置"> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 制作一个网站后面, 要求使用<iframe>内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品管理后台</title> </head> <body> <!--内联框架 iframe--> <!--将另一个HTML页面嵌入到当前页面中,而不是窗口中打开另一个网页, 类似画中画--> <ul style="float: left;margin-right: 20px"> <li><a href="demo04.html" target="content">商品列表</a></li> <li><a href="demo05.html" target="content">添加商品</a></li> <li><a href="demo06.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可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
