10月29日作业:
1. 描述HTML与HTTP是什么,他们之间有什么联系?
2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
5. 制作一个网站后面, 要求使用`<iframe>`内联框架实现
6. 总结: 为什么推荐使用语义化的标签?
------------------------------------------------------------------
描述HTML与HTTP是什么,他们之间有什么联系?
HTML：超文本标记语言
HTTP：超文本传输协议
制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航作业</title> </head> <body> <ul> <li><a href="https://www.php.cn/">php首页</a></li> <li><a href="https://www.php.cn/course.html">视频教学</a></li> <li><a href="https://www.php.cn/course/type/3.html">入门教程</a></li> <li><a href="https://www.php.cn/blog.html">博客</a></li> <li><a href="https://www.php.cn/k.html"><img src="https://www.php.cn/static/images/footer5.gif?1" alt="" width="80"></a></li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
实例
<table border="1" cellspacing="0" cellpadding="10" width="500"> <caption><h3>商品列表</h3></caption> <!-- 表头--> <thead> <tr bgcolor="aqua"> <th>序号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>总价</th> </tr> </thead> <!--主体--> <tbody> <tr> <td>1</td> <td>手机</td> <td>9800</td> <td>2</td> <td>19600</td> </tr> <tr> <td>2</td> <td>电脑</td> <td>8800</td> <td>2</td> <td>26400</td> </tr> <tr> <td>3</td> <td>椅子</td> <td>800</td> <td>5</td> <td>4000</td> </tr> </tbody> <tfoot> <tr> <td colspan="4" align="center">应付金额</td> <!-- <td></td>--> <!-- <td></td>--> <!-- <td></td>--> <td>45788</td> </tr> </tfoot> </table>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册表单</title> </head> <body> <h3>用户注册表单</h3> action:是表单提交的地址，服务器上处理表单的程序、脚本 method:提交类型.get方式会出现在url地址中，post不会出现在url中 <form action="/login.php" method="post"> <p> <label for="username">用户名：</label> <!-- for的属性必须与下面的id值是一样的--> <input type="text" id="username" name="username" value="laowang"> </p> <p> <label for="password">密码：</label> <!-- placeholder为提示--> <input type="password" id="password" name="password" placeholder="不能少于8位数"> </p> <p> <label for="email">邮箱：</label> <!-- placeholder为提示--> <input type="email" id="email" name="email" placeholder="xx@ccc.com"> </p> <p> <label for="age">年龄：</label> <!-- placeholder为提示--> <input type="number" id="age" name="age" min="18" max="90"> </p> <p> <label for="add">地址：</label> <!-- placeholder为提示--> <input type="text" id="add" name="add" placeholder="填写地址"> </p> <p> <label for="tel">手机号：</label> <!-- placeholder为提示--> <input type="tel" id="tel" name="tel" placeholder="填写电话"> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 制作一个网站后面, 要求使用`<iframe>`内联框架实现
<h3>用户注册表单</h3>
action:是表单提交的地址，服务器上处理表单的程序、脚本
method:提交类型.get方式会出现在url地址中，post不会出现在url中
<form action="/login.php" method="post">
<p>
<label for="username">用户名：</label> <!-- for的属性必须与下面的id值是一样的-->
<input type="text" id="username" name="username" value="laowang">
</p>
<p>
<label for="password">密码：</label> <!-- placeholder为提示-->
<input type="password" id="password" name="password" placeholder="不能少于8位数">
</p>
<p>
<label for="email">邮箱：</label> <!-- placeholder为提示-->
<input type="email" id="email" name="email" placeholder="xx@ccc.com">
</p>
<p>
<label for="age">年龄：</label> <!-- placeholder为提示-->
<input type="number" id="age" name="age" min="18" max="90">
</p>
<p>
<label for="add">地址：</label> <!-- placeholder为提示-->
<input type="text" id="add" name="add" placeholder="填写地址">
</p>
<p>
<label for="tel">手机号：</label> <!-- placeholder为提示-->
<input type="tel" id="tel" name="tel" placeholder="填写电话">
</p>
</form>
6. 总结: 为什么推荐使用语义化的标签?
div:通用的块级元素
span:通用的行内元素头部
<header>
<nav>
</nav>
</header>
主体
<main>
<article>
主要内容
</article>
<aside>
边栏 广告
</aside> <section>
文章类似的区域
</section>页脚
<footer>
页脚内容
</footer>
都是块级元素独占一行，两边不允许有内容，垂直排列