HTML常用标签的理解和使用--20190830

1、对html标签, 元素与属性的理解，并举例说明

• HTML元素由标签定义，包含在开始标签和结束标签之间；

• 每一种HTML元素一般都会有一个或多个属性，这些属性表现元素的一些特性、显示效果或者控制元素的一些行为动作；

• 属性放在元素标签中，紧随标签名称之后，用空格分割；

• 一个属性往往分为“属性名称”和“属性值”：形如{name="value"}或者style="name1:value1;name2:value2”；

• HTML中的元素可以多级嵌套，但不能互相交叉。

    HTML元素示例如下：

2、列表有几种, 如何定义?

    列表分为：有序列表、无序列表和定义列表；列表项属于“块元素”，每个列表项独占一行。

• 有序列表

• 有序列表使用<ol>来表示，每个列表项用<li>标签列出，

• 有序列表是由一个个列表项组成，列表想即可以使用数字标记，也可以使用字母标记；

• 有序列表的type属性取值有5种，分别是1（数字）、i（小写罗马字母）、I（大写罗马字母）、a（小写字母）、A（大写字母）；

• 无序列表
  

• 无序列表使用<ul>来表示，每个列表项用<li>标签列出，

• 无序列表是一个项目列表，使用项目符号标记无序列表的项目，无序列表也就是没有顺序的列表；

• 无序列表的type属性取值有三种，分别是circle（圆圈）、disc（实心圆点）、square（方块）；

• 定义列表
  

• 定义列表中，用<dl>定义列表，<dt>定义列表项，<dd>定义列表内容。在一个定义列表元素中，不允许有相同名字的dt元素。

• 定义列表是当无序列表和有序列表都不适合时，通过自定义列表来完成自定义展示，所以定义列表不仅仅是一个项目列表，而是项目和注释的组合；

有序列表代码实例:
<ol reversed>
    <li>HTML课程</li>
    <li>CSS课程</li>
    <li>JavaScript课程</li>
</ol>
运行实例 »
点击 "运行实例" 按钮查看在线实例

无序列表代码实例
<ul>
    <li>HTML课程</li>
    <li>CSS课程</li>
    <li>JavaScript课程</li>
</ul>
运行实例 »
点击 "运行实例" 按钮查看在线实例

定义列表代码实例
<h3>《静夜思》</h3>
<dl>
    <dt><dfn>床前明月光，疑是地上霜。</dfn></dt>
    <dd>描述诗人做客他乡一刹那间的错觉</dd>
    <dt><dffn>举头望明月，低头思故乡。</dfn></dt>
    <dd>通过刻画动作神态，深化思乡之情</dd>
</dl>
运行实例 »
点击 "运行实例" 按钮查看在线实例

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

• 列表和表格都是把项目(数据)按照规则进行排列，列表可以实现的样式，用表格也可以实现；（反之亦可用CSS实现）
  

• 表格的节点结构为：<table><tr><th></th></tr><tr><td></td></tr><table>

• 列表的节点结构为：<ul><li></li><ul>

        表格和表单的属性各不相同，适用的场景也不相同。一般当数据项目以一行（一列）显示时，多用列表元素；而一般碰到表单输入或数据以几行几列的表格呈现时，使用表格元素。因为这样能直观感受到多个元素是以行和列的概念排列，用表格会让网页设计轻松不少。

4、编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>

实例
<h3>工作计划</h3>
    <ol>
        <li>理解HTML标签、元素与属性，并举例说明</li>
        <li>HTML中列表有几种？写出定义方法</li>
        <li>写出列表与表格的联系与区别
            <ul>
                <li>说说：什么时候用列表，什么时候用表格</li>
                <li>说明为什么</li>
            </ul>
        </li>
        <li>写代码
            <ul>
                <li>用列表制作工作计划，用到：<ul><ol><dl></li>
                <li>使用表格实现一张商品清单, 要求有行与列的合并</li>
                <li>实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义</li>
            </ul>
        </li>
        <li>写总结
            <dl>
                <dt><dfn>知识掌握方面内容</dfn></dt>
                <dd>主要对常用标签的应用场景进行分析</dd>
                <dt><dfn>作业感受方面内容</dfn></dt>
                <dd>说说作业难度、作业量的感受</dd>
            </dl>
        </li>
    </ol>
运行实例 »
点击 "运行实例" 按钮查看在线实例

5、编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan

实例
<table border="1" width="500" cellspacing="0" cellpadding="5">
        <caption>
            <h3>空调安装***单</h3>
        </caption>
        <tr bgcolor="lightblue">
            <th>序号</th>
            <th>产品名称</th>
            <th>单位</th>
            <th>数量</th>
            <th>单价</th>
            <th>总价</th>
        </tr>
        <tr>
            <td>1</td>
            <td>家用空调</td>
            <td>台</td>
            <td>2</td>
            <td>￥2500</td>
            <td>￥5000</td>
        </tr>
        <tr>
            <td>2</td>
            <td>冷媒</td>
            <td>罐</td>
            <td>1</td>
            <td>￥320</td>
            <td>￥320</td>
        </tr>

        <tr>
            <td rowspan="2">3</td>
            <td rowspan="2">安装费</td>
            <td colspan="3">排水管、电线材料</td>
            <td>￥200</td>
        </tr>
        <tr>
            <td colspan="3">人工费</td>
            <td>￥500</td>
        </tr>
        <tr>
            <td colspan="5">总价合计</td>
            <td>￥6020</td>
        </tr>
    </table>
运行实例 »
点击 "运行实例" 按钮查看在线实例

6、编程实现一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义

实例
<h3>注册新用户</h3>
    <form action="regist.php" method="POST">
        <p>
            <label for="name"><span style="color:red;">*</span>账号：</label>
            <input type="text" id="name" name="name" required="required" placeholder="请输入账户名称">
        </p>
        <p>
            <label for="password"><span style="color:red;">*</span>密码：</label>
            <input type="password" id="password" name="password" required="required" placeholder="6-12位字符或数字">
        </p>
        <p>
            <label for="email"> 邮箱：</label>
            <input type="email" id="email" name="email" placeholder="xxx@xxx.xxx">
        </p>
        <p>
            <label for="age"> 年龄：</label>
            <input type="number" id="age" name="age" min="18" max="80">
        </p>
        <p>
            <label for="male"> 性别：</label>
            <input type="radio" id="male" name="gender" value="male"><label for="male">***</label>
            <input type="radio" id="female" name="gender" value="female"><label for="female">***</label>
            <input type="radio" id="baomi" name="gender" value="baomi" checked><label for="baomi">保密</label>
        </p>
        <p>
            <label for="tour"> 爱好：</label>
            <input type="checkbox" id="tour" name="hobby[]" value="tour"><label for="tour">旅游</label>
            <input type="checkbox" id="read" name="hobby[]" value="read" checked=""><label for="read">阅读</label>
            <input type="checkbox" id="game" name="hobby[]" value="game"><label for="game">游戏</label>
        </p>
        <p>
            <label for="course"> 关注课程：</label>
            <select id="course" name="course" multiple>
                <optgroup label="前端课程">
                    <option value="">请选择...</option>
                    <option value="">HTML&CSS基础教程</option>
                    <option value="">JavaScript课程</option>
                </optgroup>
                <optgroup label="后端课程">
                        <option value="">PHP课程</option>
                        <option value="">TP教程</option>
                        <option value="">mySQL课程</option>
                    </optgroup>   
            </select>
        </p>
        <p>
            <input type="submit" id="submit">
            <input type="reset" id="reset">
            <input type="button" id="close" value="退出">
            <button type="submit">注册</button>
        </p>
    </form>
运行实例 »
点击 "运行实例" 按钮查看在线实例

HTML5表单新增了许多表单类型和属性，有很多的输入元素类型，需要了解掌握常用的表单元素和属性。

当需要实现与用户进行交互时使用表单元素，表单元素是允许用户在表单中输入内容，比如：文本框、文本域、单选框、复选框、下拉列表、按钮等等，表单可以把用户输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据，并给出相应的反馈。

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

• 通过练习，基本掌握了列表元素、表格元素和表单元素的代码结构、使用场景和方法；

• 每种元素有很多属性，后期需要熟练掌握常用属性。其他属性仅通过手册做大概了解即可，尽量少用冷僻属性，避免产生兼容性问题。

• 有些场景下，可能有两种（或以上）元素可以实现目标，

  比如：W3C规范中说Table是用来呈现数据的，但以前很多人用来做布局；

             很多人认为WebAPP中前端获得数据展示时用Table元素方便，但有人用div做过性能出色的数据展示工具；
  

  所以，决定使用哪种元素实现某个功能，需要根据具体情况综合分析决定。