1. 描述HTML与HTTP是什么,他们之间有什么联系?
HTML：超文本标记语言
HTTP: 超文本传输协议
两者联系：HTML文档存储在服务端供客户端访问，当用户访问网页时，用户客户端（如浏览器）通过HTTP协议访问服务端指定端口 ，服务端同样通过HTTP协议响应返回这些HTML文档，客户端（如浏览器）接收解析后再展示给用户。
2. 制作一个导航, 要求使用到列表,链接, 图片, 并使用图片做为链接元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php中文网简易导航</title> </head> <body> <!--ul:无序列表--> <ul> <li><a href="https://www.php.cn" target="_blank">首页</a></li> <li> <a href="https://www.php.cn/map/dugu.html" target="_blank" > <img src="https://www.php.cn/static/dugu/images/ztop-bg.png" alt="独孤九贱系列" width="500"> </a> </li> <li> <a href="https://www.php.cn/k.html" target="_blank"> <img src="https://www.php.cn/static/images/index_banner.png?1" alt="第九期线上直播班入口" width="500"> </a> </li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品信息表</title> </head> <body> <!--table:表格--> <!--caption:表格标题--> <!--thead:表格页眉--> <!--tbody:表格主题--> <!--tfoot:表格页脚--> <table border="1" cellspacing="0" cellpadding="10"> <!--cellspacing:单元格之间的空间--> <!--cellpadding:单元边沿与其内容之间的空白--> <caption>商品信息表</caption> <thead> <tr bgcolor="#add8e6"> <th>编号</th> <th>名称</th> <th>单价（元）</th> <th>数量</th> <th>金额（元）</th> </tr> </thead> <tbody align="center"> <tr> <td>1</td> <td>铅笔</td> <td >1</td> <td rowspan="2">3</td> <td rowspan="2">3</td> </tr> <tr> <td>2</td> <td>橡皮</td> <td>1</td> </tr> <tr> <td>3</td> <td>文具盒</td> <td>10</td> <td>1</td> <td>10</td> </tr> <tr> <td>4</td> <td>涂改液</td> <td>5</td> <td>1</td> <td>5</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">合计:</td> <td align="center">5</td> <td align="center">18</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属性与控件id属性须一致--> <label for="username">用户:</label> <input type="text" name="username" id="username" value="" > </p> <p> <label for="psd">密码:</label> <input type="password" name="psd" id="psd" placeholder="请输入密码"> </p> <p> <label for="email">邮箱：</label> <input type="email" name="email" id="email" placeholder="example@email.com"> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="18" max="60"> </p> <p> <label for="city">城市:</label> <select name="city" id="city"> <!--分组--> <optgroup label="江苏省"> <option value="">南京市</option> <option value="" selected>苏州市</option> <option value="">徐州市</option> </optgroup> <optgroup label="安徽省"> <option value="">合肥市</option> <option value="">六安市</option> <option value="">阜阳市</option> </optgroup> </select> </p> <p> <!--点击性别，自动选中未知，secrecy--> <label for="secrecy">性别：</label> <input type="radio" name="sex" id="male" checked><label for="male">男</label> <input type="radio" name="sex" id="female"><label for="female">女</label> <input type="radio" name="sex" id="secrecy"><label for="secrecy">未知</label> </p> <p> <!--点击爱好，自动选中跑步，running--> <label for="running">爱好：</label> <input type="checkbox" name="hobby[]" value="running" id="running"><label for="running">跑步</label> <input type="checkbox" name="hobby[]" value="play" id="music"><label for="music">音乐</label> <input type="checkbox" name="hobby[]" value="eat" id="eat"><label for="eat">吃</label> </p> <p> <label for="photo">头像上传：</label> <input type="file" name="photo" id="photo"> </p> <p> <input type="reset" name="reset" value="重填"> <button>提交</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 制作一个网站后台, 要求使用`<iframe>`内联框架实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品管理后台</title> </head> <body> <!--将另一个HTML页面嵌入到当前页面中,而不是窗口中打开另一个网页, 类似画中画--> <!--将当前页面显示到内联框架中，需将a标签与内联框架的name属性值绑定--> <ul style="float: left;margin-right: 15px;"> <!--左浮动，右边距15像素--> <li><a href="demo6.html" target="content">商品列表</a></li> <li><a href="demo7.html" target="content">添加用户</a></li> <li><a href="demo1.html" target="content">系统设置</a></li> </ul> <!--想让src支持html代码，改成srcdoc属性就好--> <iframe srcdoc="<h2 style='color:red;'>欢迎使用后台管理</h2>" frameborder="1" name="content" width="530" height="450"> </iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 总结：为什么推荐使用语义化标签？
(1). 有利于SEO优化，搜索引擎只要看到标签就能知道里面的内容，有利于网页被收录，符合w3c标准。
(2). 网页显示效果好，在没有css的情况下也能有清晰的网页结构，同时增强了可读性。
(3). 便于团队的开发和维护, 提高团队的效率。
