html常见标签-2019-09-02

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

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

        

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

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>

        

实例

<!-- 无序列表：工作计划 -->
<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>

        

实例

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

        

（用定义列表做任务计划不符合语义要求，仅尝试使用。）

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>

        

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>

                

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

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

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

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