![[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 超文本传输协议 网络协议 联系 http 可以传输 html
制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
一般用无序列表ul做导航 用图片做连接元素只要把<img> 放到链接之间就可以
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航</title> </head> <body> <div> <ul> <li><a href="http://www.baidu.com"><img src="./1.png" alt="http://www.baidu.com"target='_blank'></a></li> <li><a href="http://www.baidu.com"><img src="./1.png" alt="http://www.baidu.com" target='_blank'></a></li> <li><a href="http://www.baidu.com"><img src="./1.png" alt="http://www.baidu.com" target='_blank'></a></li> </ul> </div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
表格<table> 表头<thead>表主体<tbody>表尾<tfoot> 行列合并用 colspan 和rowspan属性
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业三</title> </head> <body> <table border="1" cellspacing="0" align="center"> <capion><h3>商品篮</h3></caption> <thead> <tr bgcolor="lightgreen"> <th>编号</th> <th>名称</th> <th>数量</th> <th>单价</th> <th>金额</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>华为(2019)MateBookX Pro</td> <td>8699</td> <td>1</td> <td>8699</td> </tr> <tr> <td>2</td> <td>苹果(2019)MacBook Pro</td> <td>18199</td> <td>2</td> <td>36398</td> </tr> <tr> <td>3</td> <td>ThinkPad(2019)X1 extreme</td> <td>13500</td> <td>1</td> <td>13500</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">总计:</td> <td>4</td> <td>58597</td> </tr> </tfoot> </table> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
用户注册表单空间包括 text password email number select radio checkbox file button submit 等
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <h3>用户注册</h3> <form action="" method="POST"> <div> <label for="username"><strong>账号:</strong></label> <input type="text" name="username" id='username' value= "jz"> </div> <div> <label for="password"><strong>密码:</strong></label> <input type="password" name="password" id="password" placeholder="不能少于六位"> </div> <div> <label for="email"><strong>邮箱:</strong></label> <input type="email" id='email' name="email" placeholder="example@Emai.com"> </div> <div> <label for="age"><strong>年龄:</strong></label> <input type="number" id='age' name="age" min="16" max="18"> </div> <div> <label for="coures"><strong>课程:</strong></label> <select name="coures" id="coures"> <optgroup label="前端"> <option value="0">html</option> <option value="1">css</option> <option value="2">js</option> </optgroup> <optgroup label="后端"> <option value="3" selected>php</option> <option value="4">mysql</option> <option value="5">laravel</option> </optgroup> </select> </div> <div> <label for=""><strong>性别:</strong></label> <input type="radio" name="sex" id='male' value="male"><label for="male"><strong>男生</strong></label> <input type="radio" name="sex" id='female' value="female"><label for="female"><strong>女生</strong></label> <input type="radio" name="sex" id='security' value="security" checked><label for="security">保密:</label> </div> <div> <label for=""><strong>爱好</strong></label> <input type="checkbox" name="hobby[]" id='game' value="game"><label for="game"><strong>打游戏</strong></label> <input type="checkbox" name="hobby[]" id='video' value="video"><label for="video"><strong>看片</strong></label> </div> <div> <label for="file"><strong>头像上传:</strong></label> <input type="file" name='file' value="photo"> </div> <div> <button>提交</button> <input type="reset" value="重置"> </div> </form> </body>
运行实例 »点击 "运行实例" 按钮查看在线实
制作一个网站后面, 要求使用<iframe>内联框架实现
无序列表导航target填入内敛框架iframe name 属性值即可
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> <li><a href="http://www.baidu.com" target="content">商品列表</a></li> <li><a href="http://www.jd.com" target="content">添加用户</a></li> <li><a href="http://www.baidu.com" target="content">系统设置</a></li> </ul> <iframe srcdoc="<h2 style='color:red'>欢迎使用管理后台</h2>" frameborder="1" width="600" height="600" name='content'></iframe> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
总结: 为什么推荐使用语义化的标签?
主要是语义化标签便于搜索引擎爬取，收录 ，利于seo优化