![[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
描述HTML与HTTP是什么,他们之间有什么联系?
HTML:超文本标记语言。
HTTP:超文本传输协议。
HTML是通过HTTP协议将它从服务器传输到本地服务器，经过浏览器解析，再显示在页面上。
手抄作业
制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航列表</title> </head> <body> <ul style="list-style: none"> <h1>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</h1> <li><a href="https://www.php.cn/">PHP中文网</a></li> <li><a href="https://www.html.cn">HTML中文网</a></li> <li><a href="https://www.php.cn/course/1078.html"><img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg"></a></li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例 手抄作业
制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品信息</title> </head> <body> <h2>制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</h2> <table border="1"cellspacing="0"cellpadding="5"> <caption><h0>商品信息</h0></caption> <thead > <tr bgcolor="aqua"> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>华为</td> <td>12000</td> <td>2</td> <td>24000</td> </tr> <tr> <td>2</td> <td>苹果</td> <td>18000</td> <td>2</td> <td>36000</td> </tr> </tbody> <tfoot> <tr> <td colspan="3"align="center">合计</td> <td>4</td> <td>50000</td> </tr> </tfoot> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例 手抄作业
制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <h3>制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件</h3> <h0>用户注册</h0> <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="不能少于六位"> </p> <p> <label for="age">年龄：</label> <input type="number"id="age" name="age"mid="16"max="80"> </p> <p> <label for="">课程</label> <select name="coures" id=""> <optgroup label="前端"> <option value="">请选择</option> <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="">laravel</option> </optgroup> </select> </p> <p> <label for="">性别</label> <input type="radio"name="gender"id="male"checked><label for="male">男生</label> <input type="radio"name="gender"id="female"><label for="female">女生</label> <input type="radio"name="gender"id="secrecy"><label for="secrecy">保密</label> </p> <p> <label for="">爱好</label> <input type="checkbox"name="hobby[]"value="game"id="game"><label for="game">玩游戏</label> <input type="checkbox"name="hobby[]"value="programme"id="programme"><label for="programme">撸代码</label> <input type="checkbox"name="hobby[]"value="movies"id="movies"><label for="movies">看电影</label> </p> <p> <label for="photo">头像上传</label> <input type="file"name="photo"id="photo"> </p> <p> <button>提交</button> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例 手抄作业
制作一个网站后面, 要求使用`<iframe>`内联框架实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架</title> </head> <body> <h4>制作一个网站后面, 要求使用iframe内联框架实现</h4> <ul style="list-style: none"> <li><a href="1.html">导航列表</a></li> <li><a href="2.html">商品列表</a></li> <li><a href="3.html">用户注册</a></li> </ul> <iframe srcdoc="<h2>欢迎使用后台</h2>" frameborder="1"name="content"width="530"height="450"></iframe> </body> </html>
点击 "运行实例" 按钮查看在线实例 手抄作业
总结: 为什么推荐使用语义化的标签?
有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取
有利于不同设备的解析（屏幕阅读器，盲人阅读器等）满是div的页面这些设备如何区分那些是主要内容优先阅读
有利于构建清晰的机构，有利于团队的开发、维护
手抄作业
