简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 2019年10月29日作业
Blogger Information
Blog 6
fans 0
comment 0
visits 3023
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2019年10月29日作业
胶州汽车网
Original
507 people have browsed it

10月29日作业:
1. 描述HTML与HTTP是什么,他们之间有什么联系?
2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
5. 制作一个网站后面, 要求使用`<iframe>`内联框架实现
6. 总结: 为什么推荐使用语义化的标签?

------------------------------------------------------------------

  1. 描述HTML与HTTP是什么,他们之间有什么联系?

    HTML：超文本标记语言

    HTTP：超文本传输协议

  2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素

     

     

实例

<!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>
都是块级元素独占一行，两边不允许有内容，垂直排列


Correction status：qualified

Teacher's comments：代码请放在代码块中提交
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！