博客列表 >html常见标签-2019-09-02

html常见标签-2019-09-02

Doctor_Zhong
Doctor_Zhong原创
2019年09月02日 18:13:09774浏览

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

1.1    HTML是超文本标记语言,我的理解是:超文本是其功能的概括,即该语言不仅表达文本本身的字面意义,还表达了文本的样式、功能等其他属性。标记则是“超文本”功能的实现方式,即通过“标签”和“属性”来区分和设置文本的样式、功能属性。

        html定义.png


1.2    正如下图所示:a元素通过“<a></a>”标签的形式进行标记,    href属性设置了该链接的目标位置,target属性则设置了该链接打开的方式,文本内容“百度首页”则是外化形式。标签元素和属性.png

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

目前,HTML中有3种基本的列表形式,分别是:

2.1    无序列表

2.2    有序列表

2..3    定义列表

        这三种列表形式,其标签都有若干属性及默认属性值,更改各属性值可以得到更多形式的列表。我们可以理解为这三种列表是默认状态下的三种样式,用于表达了“无序列表”、“有序列表”和“定义列表”这三种列表语义。

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

        列表list与表格table在语义和形式上差别较大,可以粗略的理解成列表是简单的“列举、枚举”,即一条一条的简单展示,而table则是采用“二维表格”的形式展示“数据”的关系,相对更加复杂。

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

实例

<!-- 有序列表:工作计划 -->
<h3>工作计划</h3>
<ol>
  <li>07:00【查房交班】</li>
  <li>08:00【开会】</li>
  <li>08:30——18:00【手术】</li>
  <li>18:20——20:00【工作任务1】</li>
  <li>20:20——22:00【工作任务2】</li>
</ol>

运行实例 »

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

        工作计划.png



实例

<!-- 无序列表:工作计划 -->
<h3>工作计划</h3>
<ul>
   <li>07:00【查房交班】</li>
  <li>08:00【开会】</li>
  <li>08:30——18:00【手术】</li>
  <li>18:20——20:00【工作任务1】</li>
  <li>20:20——22:00【工作任务2】</li>
</ul>

运行实例 »

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

        工作计划2.png



实例

<!-- 定义列表:工作计划 -->
<h3>工作计划</h3>
<dl>
    <dt>上午</dt>
        <dd>开晨会</dd>
        <dd>任务二</dd>
        <dd>任务三</dd>
    <dt>下午</dt>
        <dd>开会</dd>
        <dd>任务二</dd>
        <dd>任务三</dd>
</dl>

运行实例 »

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

        工作鸡胸.png


(用定义列表做任务计划不符合语义要求,仅尝试使用。)


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


实例

<table border="1" width="800" cellspacing="0" cellpadding="5">
<caption>
    <h3>购物车</h3>
</caption>
<thead>
    <tr bgcolor="lightblue">
        <th>编号</th>
        <th>分类</th>
        <th>名称</th>
        <th>数量</th>
        <th>单价</th>
        <th>金额</th>
    </tr>
</thead>
    <tr>
        <td>1</td>
        <td rowspan="2">水果</td>
        <td>茄</td>
        <td>1</td>
        <td>10</td>
        <td>10</td>
    </tr>
    <tr>
        <td>2</td>
        <td>苹果</td>
        <td>2</td>
        <td>30</td>
        <td>60</td>
    </tr>
    <tr>
        <td>3</td>
        <td rowspan="2">电器</td>
        <td>电脑</td>
        <td>1</td>
        <td>10000</td>
        <td>10000</td>
    </tr>
    <tr>
        <td>4</td>
        <td>热水壶</td>
        <td>3</td>
        <td>100</td>
        <td>300</td>
    </tr>
    <tr>
        <td colspan="3">总计</td>
        <td>7</td>
        <td>-</td>
        <td>103700</td>
    </tr>
</table>

运行实例 »

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

        购物车.png


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


实例

<!-- 表单------------账号注册 -->
<h3>账号注册</h3>
<form action="" method="POST">
    <!-- input标签 -->
    <p>
        <label for="username">账号:</label>
        <input type="text" name="username" id="username" class="" placeholder="不少于6个字符">
    </p>

    <p>
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" class="" placeholder="不少于6个字符,不多余12个字符">
    </p>

    <p>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id="email" class="" placeholder="eg@email.com">
    </p>

    <p>
        <label for="age">年龄:</label>
        <input type="number" name="age" id="age" class="" placeholder="" min="16" max="80">
    </p>

    <!-- 复选框 -->
    <p>
        <label for="">爱好:</label>
        <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">玩游戏</label>
        <input type="checkbox" name="hobby[]" value="program" id="program" checked><label for="program">撸代码</label>
        <input type="checkbox" name="hobby[]" value="movie" id="movie"><label for="movie">看电影</label>
    </p>

    <p>
        <label for="male">性别:</label>
        <input type="radio" name="gender" id="male"><label for="male">男</label>
        <input type="radio" name="gender" id="female"><label for="female">女</label>
        <input type="radio" name="gender" id="secret" checked><label for="secret">保密</label>
    </p>

    <!-- 下拉列表 -->
    <p>
        <label for="">课程:</label>
        <select name="" id="">
        <optgroup label="高中">
             <option value="请选择">请选择</option>
            <option value="语文">语文</option>
            <option value="数学">数学</option>
            <option value="英语">英语</option>
            <option value="生物">生物</option>
        </optgroup>
        <optgroup label="前端">
            <option value="请选择">请选择</option>
            <option value="html">html</option>
            <option value="css">css</option>
            <option value="js">js</option>
            <option value="其他">其他</option>
        </optgroup>
        </select>
    </p>


    <!-- 按钮 -->
    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
        <input type="button" name="reset" value="重置">
        <button type="submit">提交</button>
    </p>
</form>

运行实例 »

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

                账号注册.png


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

        这些常用标签的使用,原则上应该按照标签的语义对文本内容进行对应标记。

        比如:普通段落,就使用p标签进行标记;标题根据其意义和上下文关系选择对应的h标签标记。

        应该尽量按照标签意义进行使用,若无法根据标签语义进行选择时,可以使用无语义标签,通过class、name、id等属性设置进行语义或功能明确。


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