描述HTML与HTTP是什么,他们之间有什么联系?
答:HTML是超文本标记语言,HTTP是超文本传输协议,html是基于http的基础上,设计http的最初目的是为了提供一种发布和接收html页面的方法.
2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</title> </head> <body> <ul> <li><a href="/"><img src="images/1.jpg" alt="图片说明"></a></li> <li><a href="/"><img src="images/2.jpg" alt="图片说明"></a></li> <li><a href="/"><img src="images/3.jpg" alt="图片说明"></a></li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</title> </head> <body> <table border="1" cellspacing="0" cellpadding="20"> <!-- cellspacing:单元格间距 / cellpadding:把表格单元边沿与单元内容之间的间距--> <caption><h3>商品信息表</h3></caption> <thead> <tr bgcolor="#CCC"> <!--设置#ccc为背景色--> <th>编号</th> <th>名称</th> <th>单价</th> <th>重量</th> <th>金额</th> </tr> </thead> <!-- 表格主体--> <tbody> <tr> <td>1</td> <td>苹果</td> <td>10元</td> <td>2</td> <td>20元</td> </tr> <tr> <td>2</td> <td>梨子</td> <td>5元</td> <td>1</td> <td>5元</td> </tr> <tr> <td>3</td> <td>枣子</td> <td>20元</td> <td>3</td> <td>60元</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">合计</td><!--执行一个三列的合并--> <td>6</td> <td>85元</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
商品信息
4.制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册表单</title> </head> <body> <form action="login.php" method="post"> <p> <label for="username">账号: </label> <input type="text" name="username" id="username" value="默认值"> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="不能少于6位"> </p> <p> <label for="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="">课程</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="secreat">性别:</label> <input type="radio" name="gender" id="male"><label for="male">男生</label> <input type="radio" name="gender" id="female"><label for="female">女生</label> <input type="radio" name="gender" id="secreat" checked><label for="secreat">保密</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="game" id="program"><label for="program">写代码</label> <input type="checkbox" name="hobby[]" value="game" id="sport"><label for="sport">运动</label> </p> <p> <label for="photo">头像上传</label> <input type="file" name="photo" id="photo"> </p> <p> <button>提交</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 制作一个网站后台, 要求使用`<iframe>`内联框架实现
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网站后台</title> </head> <body> <ul style="float: left; margin-right:15px;"> <li><a href="2.html" target="content">商品列表</a></li> <li><a href="4.html" target="content">添加用户</a></li> <li><a href="4.html" target="content">系统设置</a></li> </ul> <iframe srcdoc="<h2>后台管理</h2>" frameborder="1" name="content" width="500" height="300"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 总结: 为什么推荐使用语义化的标签?
答:
1.网站更好的SEO效果。网页更容易被收录,符合w3c标准.2. 网页显示效果的保证。浏览器对这些带语义的标签都有默认的样式和行为。所以即便在CSS/JS加载失败的情况下，也能有比较好的展示效果。3. 协同办公情况下,便于其他前端人员快速的辨别及定位.