1.描述HTML与HTTP是什么,他们之间有什么联系?
HTML是超文本标记语言
HTTP是超文本标记协议
用HTML编写的文档，通过HTTP协议在客户端与服务器端传输
2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航</title> </head> <body> <h1>购物车</h1> <hr width="500" align="left"> <ul> <li><a href="https://www.baidu.com">麻椒鸡</a></li> <li>皇后猪蹄</li> <li>辣烤鸭</li> <li>百味鸡</li> </ul> <ol> <li> <a href="https://www.baidu.com"> 麻椒鸡 <img src="pictuer/logo.jpg" height="40" width="30" align="center"/> </a> </li> <li>皇后猪蹄</li> <li>辣烤鸭</li> <li>百味鸡</li> </ol> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品信息表</title> </head> <body> <table border="1" width="600" cellspacing="0" cellpadding="5"> <caption ><h2>商品信息表</h2></caption> <thead> <tr bgcolor="#7fffd4"> <th>名称</th> <th>单位</th> <th>进价</th> <th>售价</th> </tr> </thead> <tr align="center"> <td>可乐</td> <td rowspan="4">瓶</td> <td>1</td> <td>2</td> </tr> <tr align="center"> <td>雪碧</td> <td>1</td> <td>2</td> </tr> <tr align="center"> <td>青岛啤酒</td> <td>1</td> <td>2</td> </tr> <tr align="center"> <td>橙汁</td> <td>1</td> <td>2</td> </tr> <tr align="center"> <td colspan="2" bgcolor="ff7f50">XXX超市</td> <td colspan="2" bgcolor="ff7f50">***</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <h3>用户注册</h3> <form action="demo3.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="6-8位数"> </p> <p> <label for="email">邮箱：</label><input type="email" id="email" name="email" placeholder="example@email.com"> </p> <p> <label for="ega">年龄：</label><input type="number" id="ega" name="ega" min="16" max="80"> </p> <p> <label for="">课程：</label> <select name="" id=""> <optgroup label="前端"> <option value="">HTML5</option> <option value="">123</option> </optgroup> <optgroup label="后端"> <option value="" selected>PHP</option> <option value="">456</option> </optgroup> </select> </p> <p> <label for="">爱好：</label> <input type="checkbox" id="game" name="hobby[]"><label for="game">打游戏</label> <input type="checkbox" id="book" name="hobby[]"><label for="book">看书</label> <input type="checkbox" id="program" name="hobby[]"><label for="program">写代码</label> </p> <p> <label for="male">性别：</label> <input type="radio" id="male" name="gender" ><label for="male">男生</label> <input type="radio" id="female" name="gender" ><label for="female">女生</label> <input type="radio" id="secrecy" name="gender" checked><label for="secrecy">保密</label> </p> <p> <label for="img">头像上传：</label><input type="file" id="img" name="img"> </p> <p> <input type="button" name="button" value="按钮"> <input type="submit" name="submit" value="提交"> </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="menu.html" target="content">商品信息表</a></li> <li><a href="demo3.html" target="content">注册</a></li> <li><a href="Navigation.html" target="content">导航</a></li> </ul> <iframe srcdoc="<h2>欢迎使用管理后台</h2>" frameborder="1" name="content" width="800" height="650"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 总结: 为什么推荐使用语义化的标签?
优势：
利于SEO优化，搜索引擎看到标签就知道里面的内容，容易被收入。
特点：
符合W3C标准。
所有标签都是块级元素，独占一行，自动撑满父容器的所有空间，两侧不允许其它内容存在。
行内元素始终嵌到其他元素中，宽是内容宽度、高由两边元素决定，设置宽高无效。