简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML常用标签介绍及使用（列表、表格、表单）—2019年08月30日
Blogger Information
Blog 8
fans 0
comment 0
visits 6152
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
HTML常用标签介绍及使用（列表、表格、表单）—2019年08月30日
一把青的博客
Original
1426 people have browsed it

作业1. 谈谈你对html标签, 元素与属性的理解, 并举例说明

　　html标签是HTML的重要组成部分，用来描述文字语义，比如：<h1>文本文本</h1>，h1标签代表【文本文本】这几个字是主标题；<p>内容</p>标签表示这是一个段落。

　　html元素通常以开始标签起始、以结束标签终止，比如：<p>内容</p>；也有单体标签如<img>，标签及标签对之间的文本称为元素，<p>内容</p>称为元素.

，构成html文档。

　　html属性是给每一个标签所做的辅助信息，赋予标签更多的信息。比如<img class="image-item"  src="images/1.jpg"  alt="图片信息"/>，class属性规定元素的类名定义各种样式、src属性表示引用图片的路径、alt属性是图片说明。

作业2. 列表有几种, 如何定义?

列表分为：无序列表、有序列表、定义列表

  • 无序列表是一列项目，列表项目使用圆点进行标记，始于 <ul> 标签，每个列表项始于 <li>，示例：

<ul>
       <li>产品1</li>
       <li>产品2</li>
</ul>

浏览器显示：

2-1.jpg


  • 有序列表也是一列项目，列表项目使用数字进行标记，始于 <ol> 标签，每个列表项始于 <li>，示例：

    <ol>
           <li>产品1</li>
           <li>产品2</li>
    </ol>

浏览器显示：

    2-2.jpg

定义列表是项目及其注释的组合，自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以 <dd> 开始，示例：

<dl>
        <dt>水果类</dt>
            <dd>榴莲</dd>
            <dd>梨</dd>
            <dd>苹果</dd>
        <dt>蔬菜</dt>
            <dd>白菜</dd>
            <dd>黄瓜</dd>
            <dd>西红柿</dd>
    </dl>

    浏览器显示：

2-3.jpg

作业3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?

        列表是一系列项目，可以理解成对应表格的一列或者一行，各列表项数据是平级的，由<ul>或者<ol>起始定义，<li>定义列表项；

        表格由若干行、每行由若干列组成，数据按竖行和横行进行排列，基本上构成一个矩形的表格，由<table>起始定义，<tr>定义行，<td>定义单元格，<th>定义表头；

        列表型布局选择使用列表标签，比如图片列表、文章列表等，导航通常选用列表。表格型布局就需要用表格标签，比如各种各样的统计表、课程表之类。根据需求选用哪一种标签。

作业4. 编程实现,用列表制作工作计划


实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>工作计划</title>
</head>

<body>
    <!-- 无序列表 -->
    <p>待办事项</p>
    <ul>
        <li>开会</li>
        <li>处理售后</li>
        <li>制作网页</li>
        <li>对接客户</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>开会</li>
        <li>处理售后</li>
        <li>制作网页</li>
        <li>对接客户</li>
    </ol>
    <!-- 定义列表 -->
    <dl>
        <dt>上午</dt>
        <dd>开会</dd>
        <dd>处理售后</dd>
        <dt>下午</dt>
        <dd>制作网页</dd>
        <dd>对接客户</dd>
    </dl>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


作业5. 编程实现一张商品清单

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品清单</title>
</head>
<body>
    <p>周末购物清单</p>
    <table width="500" border="1" cellspacing="0" cellpadding="5">
        <tr bgcolor="lightblue">
            <th>种类</th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>金额</th>
        </tr>
        <tr>
            <td rowspan="2">生活用品</td>
            <td>漱口水</td>
            <td>20</td>
            <td>1</td>
            <td>20</td>
        </tr>
        <tr>
            <td>毛巾</td>
            <td>10</td>
            <td>1</td>
            <td>20</td>
        </tr>
        <tr>
            <td rowspan="2">食品</td>
            <td>苹果</td>
            <td>8</td>
            <td>3</td>
            <td>24</td>
        </tr>
        <tr>
            <td>方便面</td>
            <td>24</td>
            <td>1</td>
            <td>24</td>
        </tr>
        <tr>
            <td colspan="3" align="center">总计</td>
            <td>6</td>
            <td>88</td>
        </tr>
    </table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

作业6. 制作一张注册表单


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册表单</title>
</head>
<body>
    <h3>用户注册</h3>
    <form action="login.php" method="POST">
        <p>
            <label for="username">昵称：</label><input type="text" id="username" name="username" placeholder="请输入4-20个字符">
        </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="example@.163.com">
        </p>
        <p>
            <label for="age">年龄：</label><input type="number" id="age" name="age" min="16" max="80">
        </p>
        <p>
            <label for="secrecy">性别：</label>
            <input type="radio" id="male" name="gender"><label for="male">男</label>
            <input type="radio" id="female" name="gender"><label for="female">女</label>
            <input type="radio" id="secrecy" name="gender" checked><label for="secrecy">保密</label>
        </p>
        <p>
            <label for="">爱好：</label>
            <input type="checkbox" name="hoby[]" id="photography" value="photography"><label for="photography">摄影</label>
            <input type="checkbox" name="hoby[]" id="program" value="program"><label for="program">编程</label>
            <input type="checkbox" name="hoby[]" id="tea" value="tea" checked><label for="tea">喝茶</label>
        </p>
        <p>
            <label for="">课程</label>
            <select name="" id="">  
                <optgroup label="自然科学">
                    <option value="">请选择</option>
                    <option value="">数学</option>
                    <option value="">物理</option>
                    <option value="">生物</option>
                </optgroup>
                <optgroup label="人文社科">
                    <option value="">政治</option>
                    <option value="">哲学</option>
                    <option value="">文学</option>
                </optgroup>
            </select>
        </p>
        <button>提交</button>
        <input type="reset" name="reset" placeholder="重置">
    </form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

作业7. 写出总结, 对于这些常用标签的应用场景进行分析

列表、表格、表单这几种标签在前端开发中经常用到，列表适合在各种导航菜单设置、图片列表展示、新闻列表展等列表布局场景；表格应用于数据展示，可以让数据更加美观整齐，如订单统计、证券交易统计或者其他需要以表格来布局的场景；表单适用于各种站点的注册、登录、留言等场景，采集用户提交的信息，实现交互。

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！