一、描述HTML与HTTP是什么,他们之间有什么联系?
HTML：是描述网页的的语言，其全称为超文本标记语言 (英文为Hyper Text Markup Language)
HTTP：是一个基于TCP/IP通信协议，其全称为超文本传输协议（英文为Hyper Text Transfer Protocol）
HTML与HTTP的联系：简单来说就是浏览器通过http协议请求服务器，然后将返回信息经过浏览器解释并显示出来的内容就是html
二、制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
案例：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航</title> </head> <body> <h3>要求：制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</h3> <p> <ul> <li><a href="#" target="_blank">我的博客</a></li> <li><a href="#" target="_parent">视频教程</a></li> <li><a href="#" target="_self">技术文章</a></li> <li><a href="#" target="_top">资源下载</a></li> </ul> </p> <p> <!--图片、链接--> <a href="http://www.php.cn"><img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt="php中文网"></a> </p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品信息表</title> </head> <body> <article><h3>要求：制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</h3></article> <hr> <!--table：表格--> <!--caption：表格标题--> <!--thead：表格页眉--> <!--tbody：表格主体--> <!--tfoot：表格页脚--> <table border="1" cellspacing="0" cellpadding="5"> <caption><h3>购物车</h3></caption> <thead> <tr bgcolor="aqua"> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <!-- 主体--> <tbody> <tr> <td>1</td> <td>HUAWEI Mate X 5G 全网通 8GB+512GB</td> <td>16999元</td> <td>1</td> <td>16999</td> </tr> <tr> <td>2</td> <td>HUAWEI Mate 20 RS 保时捷设计 8GB+512GB</td> <td>12999元</td> <td>1</td> <td>12999</td> </tr> <tr> <td>3</td> <td>HUAWEI Mate 30 5G 全网通 8GB+256GB</td> <td>5499元</td> <td>1</td> <td>5499</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">总计：</td> <!-- <td></td>--> <!-- <td></td>--> <td>3</td> <td>35497元</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四、制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册表单</title> </head> <body> <article><h3>要求：制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件</h3></article> <form action="" method="post"> <p> <label for="username">账号:</label> <input type="text" name="username" id="username" value=""> </p> <p> <label for="password">密码:</label> <input type="password" name="password" id="password" value="" placeholder="不能少于6位"> </p> <p> <label for="email">邮箱:</label> <input type="email" name="email" id="email" value="" placeholder="php@zy.wang"> </p> <p> <label for="age">年龄:</label> <input type="number" name="age" id="age" value="" min="16" max="100"> </p> <p> <label for="secrecy">性别:</label> <input type="radio" name="sex" id="male"><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> <label for="photo">上传头像:</label> <input type="file" name="photo" id="photo" > </p> <p> <label for="class">课程:</label> <select name="class" id="class"> <optgroup label="前端课程"> <option value="">html5</option> <option value="">css3</option> <option value="">JavaScript</option> </optgroup> <optgroup label="后端课程"> <option value="" selected>php</option> <option value="">mysql</option> <option value="">c#</option> </optgroup> </select> </p> <p> <label for="book">爱好:</label> <input type="checkbox" name="hobby[]" id="sing"> <label for="sing">唱歌</label> <input type="checkbox" name="hobby[]" id="book"> <label for="book">看书</label> <input type="checkbox" name="hobby[]" id="intelnet"> <label for="intelnet">上网</label> </p> <p> <button>提交</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五、制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架iframe的使用</title> </head> <body> <article><h3>要求：制作一个网站后面, 要求使用iframe内联框架实现</h3></article> <hr> <!--<iframe src="https://j.map.baidu.com/49/MYo"></iframe>--> <ul style="float: left"> <li><a href="demo.html" target="content">导航</a></li> <li><a href="demo1.html" target="content">购物车</a></li> <li><a href="demo2.html" target="content">用户注册</a></li> </ul> <iframe srcdoc="<h3>欢迎使用后台管理系统</h3>" name="content" frameborder="1" width="600" height="400"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六、总结: 为什么推荐使用语义化的标签?
答：1、语义化标签有利于搜索引擎爬虫准确抓取信息，有利于网站权重提升
2、语义化标签有利于团队人员后续的开发维护以及理解，提高工作效率
3、有利于终端设备无障碍阅读
总之就是增强人或机器阅读理解能力。
