描述HTML与HTTP是什么,他们之间有什么联系?
答：HTML是超文本标记语言，http是超文本传输协议；html写好的网页通过http协议进行传输。
2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>nav</title> </head> <body> <h2> 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</h2> <ul> <li><a href="">首页</a></li> <li><a href="">新闻</a></li> <li><a href="">地图</a></li> <li><a href="http://baijiahao.baidu.com/s?id=1648612920083186131"> <img src="http://pics6.baidu.com/feed/cb8065380cd79123d6722abf582ef087b3b7800f.jpeg?token=c7e1362dca1b41c722be7f07d42ed6b8&s=6B6022D148727F8E9AB061E20300F0F3" width="120px" height="90px"alt=""></a> </li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 制作一张商品信息表, 要求用到标题, 头部与底部,行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>双十一热销的商品</title> </head> <body> <h3>制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</h3> <table border="1" cellspacing="0"> <thead> <tr> <th>编号</th> <th>名称</th> <th>单价</th> <th>库存</th> <th>金额</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Givenchy</td> <td>340RMB</td> <td>10</td> <td>3400</td> </tr> <tr> <td>2</td> <td>YSL</td> <td>240RMB</td> <td>10</td> <td>2400</td> </tr> <tr> <td>3</td> <td>Dior</td> <td>270RMB</td> <td>10</td> <td>2700</td> </tr> <tr> <td>4</td> <td>Christian Louboutin</td> <td>750RMB</td> <td>10</td> <td>7500</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">total</td> <!-- <td></td> <td></td> --> <td>40</td> <td>16000</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>用户注册</title> </head> <body> <h2>制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件</h2> <form action="login.php" method="POST"> <p> <label for="username">用户名</label> <input type="text" id="username" name="username" value="brait"> </p> <p> <label for="password">密码</label> <input type="password" id="passworde" name="password" placeholder="不能少于6位"> </p> <p> <label for="email">email</label> <input type="email" id="email" name="email" placeholder="example@email.com"> </p> <p> <label for="age">年龄</label> <input type="number" id="age" name="age" min="16" max="80"> </p> <p> <label for="tel">电话</label> <input type="number" id="tel" name="tel" minlength="8" maxlength="12"> </p> <p> <label for="sex">性别</label> <input type="radio" name="sex" value="male" checked>Male <input type="radio" name="sex" value="fmale" >Female </p> <p> <label for="">课程</label> <select name="course" 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="hobby">兴趣</label> <input type="checkbox" name="hobby[]" value="Bike">骑单车 <input type="checkbox" name="hobby[]" value="basketball">打篮球 <input type="checkbox" name="hobby[]" value="football">踢足球 <input type="checkbox" name="hobby[]" value="films">看电影 </p> <p> <label for="photo">上传头像</label> <input type="file" name="photo" id="photo"> </p> <button>提交</button> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h2>制作一个网站后面, 要求使用`iframe`内联框架实现</h2> <ul> <li><a href="form.html" target="content">用户注册</a></li> <li><a href="nav.html" target="content">导航</a></li> <li><a href="table.html" target="content">商品列表</a></li> </ul> <iframe srcdoc=" <h2 style='color:red'>欢迎使用管理后台</h2>" frameborder="1" name="content" width="530"> </iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 总结: 为什么推荐使用语义化的标签?
答：用语义化的标签便于做seo且符合W3C的规则。而且语义化标签更方便维护代码。
