博客列表 >HTML常用标签的理解和使用--20190830

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

Victor的博客
Victor的博客原创
2019年09月01日 13:56:47946浏览

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

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

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

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

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

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

    HTML元素示例如下:

HTML元素.pngHTML元素.png

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>
运行实例 »
点击 "运行实例" 按钮查看在线实例

运行示例1.png


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>
运行实例 »
点击 "运行实例" 按钮查看在线实例

表格示例.png

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>
运行实例 »
点击 "运行实例" 按钮查看在线实例

注册表单.png

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

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


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

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

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

  • 有些场景下,可能有两种(或以上)元素可以实现目标,

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

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

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议