一、描述HTML与HTTP是什么,他们之间有什么联系?
html：超文本标记语言 http：超文本传输协议 之间的关系：html通过http协议在网络中进行传输，通过浏览器渲染呈现
二、制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</title> </head> <body> <h1>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</h1> <p> <ul> <li><a href="">首页</a></li> <li><a href="">HTML入门</a></li> <li><a href="">CSS入门</a></li> <li><a href="">PHP入门</a></li> </ul> </p> <a href="https://www.php.cn/k.html" target="_blank"> <img src="https://www.php.cn/static/images/index_banner.png?1" alt=""> </a> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" width="300" cellspacing="0" cellpadding="5"> <caption><h3>商品信息</h3></caption> <thead> <tr> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>苹果</td> <td>10</td> <td>1</td> <td>10</td> </tr> <tr> <td>2</td> <td>梨子</td> <td>20</td> <td>1</td> <td>20</td> </tr> <tr> <td>3</td> <td>芒果</td> <td>30</td> <td>1</td> <td>30</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center" >合计金额：</td> <!-- <td></td>--> <!-- <td></td>--> <td>3</td> <td>60</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四、制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <form action="" method="post"> <p> <label for="username">用户名：</label> <input type="text" id="username" name="username" value="" placeholder="请输入用户名"> </p> <p> <label for="password">密 码：</label> <input type="password" id="password" name="password" value="" placeholder="密码在6-12位"> </p> <p> <label for="email">邮 箱：</label> <input type="email" id="email" name="email" value="" placeholder="example@email.com"> </p> <p> <label for="age">年 龄：</label> <input type="number" id="age" name="age" value="" min="16" max="80"> </p> <p> <label for="">课 程：</label> <select name="coures" id=""> <optgroup label="前端"> <option value="">HTML5</option> <option value="">CSS3</option> <option value="">JS</option> </optgroup> <optgroup label="后端"> <option value="" selected>PHP</option> <option value="">MySQL</option> <option value="">Laravel</option> </optgroup> </select> </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> </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="code" id="code" checked><label for="code">写代码</label> </p> <p> <label for="photo">上传头像：</label> <input type="file" name="photo" id="photo"> </p> <p> <input type="button" name="button" value="按钮"> <input type="submit" name="submit" value="提交"> <button>提交</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
五、 制作一个网站后台, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一个网站后台, 要求使用`<iframe>`内联框架实现</title> </head> <body> <ul style="float: left; margin-right: 15px;"> <li><a href="new.html" target="content">导航信息</a></li> <li><a href="new1.html" target="content">商品列表</a></li> <li><a href="new2.html" target="content">添加用户</a></li> </ul> <iframe srcdoc="<h2>后台管理</h2>" frameborder="1" name="content" width="530px" height="580px"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六、总结: 为什么推荐使用语义化的标签?
1、使代码更加规范，更加容易被电脑解析
2、更加容易被收录，增加SEO效果
3、更加容易被读懂
