1.描述HTML与HTTP是什么，他们之间有什么联系？ HTML：是一种通用的编写超文本的标记语言(简称超文本标记语言)，他使用一系列的标签使网络上的文档格式统一， 使分散的Internet资源成为一个整体。 HTTP：超文本传输协议，是一套客户端和服务端都必须遵守的请求和响应的标准和规范。 联系：客户端发送HTTP请求给服务器端，服务器端响应HTTP请求将存储在服务期端的大量的HTML文档或图像视频等资源供服务器端访问 2.制作一个导航，要求使用到列表，链接，图片并使用图片作为链接元素 实例 img标签的alt属性是对这张图片进行的一些描述 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <main> <h2>制作一个导航，要求使用到列表，链接，图片并使用图片作为链接元素</h2> <article> <ul> <li><a href="https://www.w3school.com.cn">W3School</a></li> <li> <a href="https://www.imooc.com"> <img src="../../img/1.jpg" width="300px" alt="慕课网"/> </a> </li> </ul> </article> </main> <hr /> </body> </html> 运行实例 »点击 "运行实例" 按钮查看在线实例
3.制作一张商品信息表，要求用到标题，头部与底部，行与列方向的合并
实例 rowspan:行合并 colspan：列合并 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h2>制作一张商品信息表，要求用到标题，头部与底部，行与列方向的合并</h2> <article> <table border="1" cellspacing="0" cellpadding="8px"> <caption>商品信息表</caption> <thead> <tr> <th>商家</th> <th>商品名称</th> <th>商品单价</th> <th>商品数量</th> </tr> </thead> <tbody> <tr> <td rowspan="2">华为</td> <td>荣耀手环5</td> <td>198</td> <td>10</td> </tr> <tr> <td>荣耀20</td> <td>2699</td> <td>10</td> </tr> <tr> <td rowspan="2">小米</td> <td>小米手环四</td> <td>169</td> <td>10</td> </tr> <tr> <td>小米8</td> <td>1699</td> <td>10</td> </tr> </tbody> <tfoot> <tr> <td colspan="4" align="center">余货不多想买速购</td> </tr> </tfoot> </table> </article> <hr /> </body> </html> 运行实例 »点击 "运行实例" 按钮查看在线实例
4.制作一张完整的用户注册表
实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h2>制作一张完整的用户注册表</h2> <article> <form action="register.php" method="post"> <!--label标签中for的属性值需要与input标签的name属性值一致--> <label for="username">姓名：</label> <input type="text" name="username" id="username" placeholder="请输入姓名" /><br /> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="请输入不得少于6位密码" /><br /> <label for="mail">邮箱：</label> <input type="email" name="mail" id="mail" placeholder="123456@qq.com" /><br /> <label for="address">住址：</label> <select name="address"> <optgroup label="江苏"> <option value="南通">南通</option> <option value="无锡">无锡</option> <option value="南京" selected="">南京</option> </optgroup> <optgroup label="江西"> <option value="南昌">南昌</option> <option value="景德镇">景德镇</option> </optgroup> </select><br /> <label for="man">性别：</label> <input type="radio" name="sex" id="man" checked="" /><label for="man">男</label> <input type="radio" name="sex" id="woman" /><label for="woman">女</label><br /> <label for="">爱好：</label> <input type="checkbox" name="hoppy" id="book" checked="" /><label for="book">看书</label> <input type="checkbox" name="hoppy" id="basketball" /><label for="basketball">篮球</label> <input type="checkbox" name="hoppy" id="code" /><label for="code">敲代码</label> <input type="checkbox" name="hoppy" id="game" /><label for="game">打游戏</label><br /> <button>提交</button> </form> </article> </body> </html> 运行实例 »点击 "运行实例" 按钮查看在线实例
5.制作一个网站后台面，要求使用iframe内联框架实现
实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>十月29号作业</title> </head> <body> <h2>制作一个网站后台面，要求使用iframe内联框架实现</h2> <article> <!-- target属性的值要与iframe标签中name属性值一致 --> <ul style="float: left;"> <li><a href="1.html" name="navigation" target="content">导航</a></li> <li><a href="2.html" name="table" target="content">表格</a></li> <li><a href="3.html" name="form" target="content">表单</a></li> </ul> <iframe frameborder="1" height="380px" width="480" name="content" srcdoc="<p>Hello world!</p>"></iframe> </article> <hr /> </body> </html> 运行实例 »点击 "运行实例" 按钮查看在线实例
6.为什么推荐使用语义化的标签？
(1).有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
(2).使开发者更好的理解网页开发的内容。
(3).标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。