1.描述HTML与HTTP是什么,他们之间有什么联系?
html:超文本标记语言。html是万维网文档，在各种主机上显示出来，这种文档专供浏览器上为浏览器用户提供统一的界面呈现的统一规约，且具备结构化的特征。
http：超文本传输协议。http是一个客户端到服务器请求和应答地标准tcp，用于www服务器传输超文本到本地浏览器的传输协议，可以是浏览器更加高效，减少网络传输。
html是通过http协议将html文档从服务器传输到本地浏览器，经过浏览器解析显示出来。
2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一个导航</title> </head> <body> <h1>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</h1> <nav> <ul> <li><a href=""><img src="static/images/ni1.jpg" alt="星闻"></a></li> <li><a href=""><img src="static/images/ni2.jpg" alt="图吧"></a></li> <li><a href=""><img src="static/images/ni3.jpg" alt="明星库"></a></li> <li><a href=""><img src="static/images/ni4.jpg" alt="排行榜"></a></li> </ul> </nav> </body> </html>
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一张商品信息表</title> </head> <body> <h1>制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</h1> <section> <table width="500" border="1" bordercolor="black" cellspcing="2" cellpadding="0" style="text-align: center;"> <caption><h1>商品信息表</h1></caption> <thead style="background-color:lightgreen;"> <tr> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>单品总价</th> <th>合计</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>小米手机</td> <td>3699</td> <td>2</td> <td>7398</td> <td rowspan="5">26492</td> </tr> <tr> <td>2</td> <td>笔记本</td> <td>4700</td> <td>3</td> <td>14100</td> </tr> <tr> <td>3</td> <td>红米电视</td> <td>2600</td> <td>1</td> <td>2600</td> </tr> <tr> <td>4</td> <td>路由器</td> <td>399</td> <td>6</td> <td>2394</td> </tr> </tbody> <tfooter> <tr> <td colspan="4">出纳</td> <td colspan="2">葛丽</td> </tr> </tfooter> </table> </section> </body> </html>
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一张完整的用户注册表单</title> </head> <body> <h1> 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件 </h1> <section> <h3>用户注册</h3> <form action="register.php" method="post"> <p> <label for="username">用户名:</label> <input type="text" name="username" id="username"> </p> <p> <label for="pwd">密码：</label> <input type="password" name="pwd" id="pwd"> </p> <p> <label for="email">邮箱:</label> <input type="email" placeholder="请输入您的邮箱" name="email" id="email"> </p> <p> <label for="sex">性别：</label> <input type="radio" name="sex" checked><label for="">女</label> <input type="radio" name="sex"><label for="">男</label> <input type="radio" name="sex"><label for="">密码</label> </p> <p> <label for="hobby">爱好:</label> <input type="checkbox" name="hobby[]">旅游 <input type="checkbox" name="hobby[]">跳舞 <input type="checkbox" name="hobby[]">健身 <input type="checkbox" name="hobby[]">书法 </p> <p> <label for="city">所在城市:</label> <select name="city" id="city"> <option value="0">请选择</option> <option value="1">北京</option> <option value="2">天津</option> <option value="3">上海</option> <option value="4">重庆</option> </select> </p> <p> <label for="avatar">头像上传::</label> <input type="file" name="avatar" id="avatar"> </p> <p> <button>注册</button> </p> </section> </body> </html>
5. 制作一个网站后台, 要求使用`<iframe>`内联框架实现
<div class="side" style="float: left;margin-right: 260px;"> <ul> <li><a href="demo1.html" target="content">商品添加</a></li> <li><a href="demo2.html" target="content">商品属性</a></li> <li><a href="demo3.html" target="content">***管理</a></li> </ul> </div> <iframe srcdoc="<h2>欢迎使用***后台管理系统</h2>" frameborder="0" width="600" height="500" name="content"></iframe>
6. 总结: 为什么推荐使用语义化的标签?
语义化的html结构是html发展的趋势， html本身没有表现的，语义化标签让页面呈现清晰的结构。
使用语义化标签，可以使页面具有更好的搜索引擎优化。因为搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重。使用语义化标签，让浏览器或者网络爬虫能够快速解析，更好的让网络爬虫分析页面中的内容。