1： 描述HTML与HTTP是什么,他们之间有什么联系?
HTML是超文本编辑语言，浏览器中显示的网页都是用HTML语言编辑显示出来的。是一种标识性语言。
HTTP是超文本传输协议。用于请求服务器与客户端数据传输的一种协议。是一套客户端和服务器端必须遵守的相应和请求的一套规范。
2：制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</title> </head> <body> <ul> <a href="/"><li>首页</li></a> <a href="chanpin.html"><li>产品</li></a> <a href="service.html"><li>服务</li></a> <a href="about.html"><li><img src="static/images/about.jpg" alt="关于我们"></li></a> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</title> </head> <body> <table width="600" border="1" cellspacing="0" align="center"> <tr> <th>序号</th> <th>产品名称</th> <th>数量</th> <th>价格(元)</th> </tr> <tr> <td>1</td> <td>iphone11</td> <td>2</td> <td>5999</td> </tr> <tr> <td>2</td> <td>华为note30</td> <td>1</td> <td>3200</td> </tr> <tr> <td>3</td> <td>小米</td> <td>1</td> <td>1999</td> </tr> <tr> <td rowspan="2">4</td> <td>oppov1</td> <td>1</td> <td>2999</td> </tr> <tr> <td>vivoxd</td> <td>2</td> <td>3999</td> </tr> <tr> <td colspan="2" align="center">合计</td> <td>6</td> <td>28194</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件</title> </head> <body> <h3>用户注册</h3> <form action="" method="post"> <p> <label for="username">账号：</label> <input type="text" name="username" id="username" placeholder="请输入用户名"> </p> <p> <label for="pwd">密码：</label> <input type="password" name="pwd" id="pwd" placeholder="密码必须6-12位"> </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="6" max="12"> </p> <p> <label for="">课程：</label> <select> <optgroup label="前端"> <option value="">html</option> <option value="">css</option> <option value="">js</option> </optgroup> <optgroup label="后端"> <option value="">java</option> <option value="">php</option> <option value="">mysql</option> </optgroup> </select> </p> <p> <label for="">爱好：</label> <input type="checkbox" name="hobby[]" id="game" checked><label for="">游戏</label> <input type="checkbox" name="hobby[]" id="sport"><label for="">运动</label> <input type="checkbox" name="hobby[]" id="mov"><label for="">电影</label> </p> <p> <label for="">性别：</label> <input type="radio" name="gender" id="boy"><label for="">男</label> <input type="radio" name="gerder" id="girl"><label for="">女</label> <input type="radio" name="gender" id="x"><label for="">秘密</label> </p> <p> <label for="">头像:</label> <input type="file" name="photo" id="photo"> </p> <p> <input type="submit" value="提交" name="submit"> <input type="reset" value="重置" name="resest"> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5：制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一个网站后面, 要求使用`<iframe>`内联框架实现 </title> </head> <body> <ul style="float:left"> <li><a href="3.html" target="content">首页</a></li> <li><a href="2.html" target="content">用户管理</a></li> <li><a href="1.html" target="content">添加动态</a></li> </ul> <iframe src="" frameborder="1" name="content" width="1200" height="600"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 总结: 为什么推荐使用语义化的标签?
语义化标签比较一目了然，看到就知道他有什么用意。
