![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：合格
Collection
Collection
在学习PHP之前，能够掌握HTML5常用标签与属性能够更加透彻的理解PHP与前端的交互，本编博文就HTML5中相关的常用标签与属性进行了总结。
1.描述HTML与HTTP是什么，他们之间有什么联系
HTML是超文本标记语言，HTTP是超文本传输协议。使用html超文本标记语言编写的文档，以".html"为扩展名，HTTP是一套客户端和服务端都必须遵守的请求和响应的标准或规范，客户端可发起到服务器指定端口的HTTP请求来访问服务器的html文档。
2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航</title> </head> <body> <ul> <li><a href=""><img src="https://img11.360buyimg.com/mobilecms/s140x140_jfs/t1/11402/20/6707/75970/5c440e7dE928fc81b/dfa20b3c4d4d88f1.jpg.webp" alt="1"></a></li> <li><a href=""><img src="https://img10.360buyimg.com/mobilecms/s140x140_jfs/t1/49128/38/14373/76981/5db25ee5Ea5b2a7d6/eccfb79ef48f5c74.jpg.webp" alt="2"></a></li> <li><a href=""><img src="https://img12.360buyimg.com/mobilecms/s140x140_jfs/t1/83897/12/13351/184106/5da94f07Ee26d9069/ab7e20f429426de6.jpg.webp" alt="3"></a></li> <li><a href=""><img src="https://img30.360buyimg.com/mobilecms/s140x140_jfs/t17086/101/235552916/267999/1d3ce99f/5a644367Nf0597411.jpg.webp" alt="4"></a></li> <li><a href=""><img src="https://img14.360buyimg.com/mobilecms/s130x130_jfs/t1/46695/6/4615/328214/5d26b57bEfa83f44e/bcbef612da9be3a9.png.webp" alt="5"></a></li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品信息表</title> </head> <body> <table border="1" cellspacing="0" cellpadding="10" width="500"> <caption><h3>商品信息表</h3></caption> <thead> <tr bgcolor="#add8e6"> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <tbody> <tr> <td>1</td> <td rowspan="2">Mi A3</td> <td>888</td> <td>10</td> <td>8888元</td> </tr> <tr> <td>2</td> <td>799</td> <td>3</td> <td>2397元</td> </tr> <tr> <td>3</td> <td>Redmi 8</td> <td>999</td> <td>10</td> <td>9999元</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">合计：</td> <td>23</td> <td>21284元</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" id="username" name="username" value="老王"> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="不能少于6位"> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="example@email.com"> </p> <p> <label for="ege">年龄：</label> <input type="number" id="ege" name="ega" min="18" max="80"> </p> <p> <label for="kc">课程：</label> <select name="coures" id="kc"> <optgroup label="前端"> <option value="HTML5">HTML5</option> <option value="CSS3">CSS3</option> <option value="JavaScript">JavaScript</option> </optgroup> <optgroup label="后端"> <option value="PHP" selected>PHP</option> <option value="MySQL">MySQL</option> <option value="Laraver">Laraver</option> </optgroup> </select> </p> <p> <label for="male">性别：</label> <input type="radio" name="sex" id="male" value="man"><label for="male">男</label> <input type="radio" name="sex" id="female" value="woman"><label for="female">女</label> <input type="radio" name="sex" id="secrecy" value="secrecy" checked><label for="secrecy">保密</label> </p> <p> <label for="game">爱好：</label> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">玩游戏</label> <input type="checkbox" name="hobby[]" value="basketball" id="basketball" checked><label for="basketball">打篮球</label> <input type="checkbox" name="hobby[]" value="football" id="football"><label for="football">踢足球</label> </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"> <title>管理后台</title> </head> <body> <ul style="float: left; margin-right: 20px"> <li><a href="demo1.html" target="content">分类列表</a></li> <li><a href="demo2.html" target="content">管理员管理</a></li> <li><a href="demo3.html" target="content">系统管理</a></li> </ul> <iframe srcdoc="<h2>欢迎来到商品管理后台！</h2>" frameborder="1" name="content" width="800" height="500"></iframe> </body> </html>
点击 "运行实例" 按钮查看在线实例
6. 总结: 为什么推荐使用语义化的标签?
1、有意义的标签使得页面结构化，即使去掉css样式页面也能以一种清晰的结构展现。
2、根据文档显示结构更易于后期的维护。
3、除了人容易理解外，程序和其他设备也可以理解有意义的标签。例如，搜索引擎可以识别出标题行，并给它分配更高的重要度。同时，屏幕阅读器的用户可以依靠标题作为辅助的页面导航。
上述代码和总结中涉及知识点注释总结：
1.HTML文档的结构
2.HTML元素，标签与属性
3.HTML常用标签
4.HTML5语义化标签