一、HTML与HTTP是什么，他们之间有什么联系？
HTML是一个超文本标记语言，包含了一系列的标签，通过这些标签可以将分散的资源链接成一个整体。HTTP是一个客户端和服务器端都必须遵守的一个超文本传输协议,可以将客户端的请求发送给服务器端，也可以将服务器端的响应发送给用户。
二、制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1029作业二制作导航</title> </head> <body> <ul> <li><a href="index1.html" target="_blank">首页</a></li> <li><a href="http://www.php.cn" target="_self">新闻</a></li> <li><img src="image/tp1.jpg" alt="打开失败后显示" width="30" height="10"></li> <li><a href="https://www.php.cn/jishu/php/" target="_blank"><img src="https://www.php.cn/static/images/index_php_item2.jpg?1" alt="每日编程小知识" height="40" width="30"></a></li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三、制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<table border="1" cellspacing="0" cellpadding="5" width="500" > <caption><h2>商品列表</h2></caption> <thead> <tr bgcolor="#6495ed"> <th>编号</th> <th>名称</th> <th>数量</th> <th>金额</th> </tr> </thead> <tbody align="center"> <tr> <td rowspan="2">1</td> <td>汽车1</td> <td>1</td> <td>600</td> </tr> <tr> <td>汽车2</td> <td>1</td> <td>500</td> </tr> <tr> <td>2</td> <td>卡车</td> <td>1</td> <td>400</td> </tr> <tr> <td>3</td> <td>火车</td> <td>10</td> <td>700</td> </tr> </tbody> <tfoot align="center"> <tr> <td colspan="2">总计</td> <td>13</td> <td>1700</td> </tr> </tfoot> </table>
运行实例 »
点击 "运行实例" 按钮查看在线实例
四、制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<h1>用户注册</h1> <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="默认显示内容"> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="name@email.com"> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="18" max="60"> </p> <p> <label for="time">日期：</label> <input type="datetime-local" id="time" name="time"> </p> <p> <label for="">课程选择：</label> <select name="coures" id=""> <optgroup label="前端课程"> <option value="">HTML5</option> <option value="">css3</option> <option value="">JavaSript</option> </optgroup> <optgroup label="后端课程"> <option value="" selected>PHP</option> <option value="">MySQL</option> <option value="">Larave</option> </optgroup> </select> </p> <p> <label for="qita">性别：</label> <input type="radio" name="gender" id="man"><label for="man">男孩</label> <input type="radio" name="gender" id="girl" checked><label for="girl">女孩</label> <input type="radio" name="gender" id="qita"><label for="qita">其他</label> </p> <p> <label for="cold">喜好：</label> <input type="checkbox" name="hobby[]" id="game" value="game" checked><label for="game">游戏</label> <input type="checkbox" name="hobby[]" id="movie" value="movie"><label for="movie">影视</label> <input type="checkbox" name="hobby[]" id="cold" value="cold"><label for="cold">代码</label> </p> <p> <input type="button" name="button" value="按钮"> <input type="submit" name="submit" value="提交"> <button>button提交</button> </p>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 制作一个网站后面, 要求使用`<iframe>`内联框架实现
实例
<ul style="float: left; margin-right: 15px"> <li><a href="index1.html" target="content">商品汇总</a></li> <li><a href="index3.html" target="content">总汇展示</a></li> <li><a href="index7.html" target="content">系统设置</a></li> </ul> <iframe srcdoc="<h1 style='color:blue'>欢迎使用后台软件</h1>" frameborder="1" name="content" width="500" height="300"></iframe>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六、 总结: 为什么推荐使用语义化的标签?
1.网站更好的SEO效果。网页更容易被收录,.2. 网页显示效果的保证。浏览器对这些带语义的标签都有默认的样式和行为。所以即便在CSS/JS加载失败的情况下，也能有比较好的展示效果。3. 协同办公情况下,便于其他前端人员快速的辨别及定位.