首页 > 博客列表 > HTML常用标签及应用场景

博主信息

博文 48

粉丝 3

访问量 45972

专题推荐

更多>

HTML常用标签及应用场景

一个页面就是一个HTML文档，CSS、JS都是寄生在HTML中的，是以标签的方式嵌入到HTML页面的。

1.属性类型

1.1 通用属性(id/class/style)

通用属性几乎所有元素都拥有。
id：用于表示页面中的唯一元素, 唯一性开发者自己保证,权重过大,尽量少用或不用,主要用在表单元素,锚点。
class：用于表示同类（相同特征）元素，具备样式复用的特征，推荐使用。
style：自定义某个元素的样式，权重大于外部样式。

1.2 预置属性

是通用属性的子集，id/class/style也是预置的属性，元素的默认属性。
比如：a标签中的href属性，img中的src/alt属性等。

1.3 事件属性

有一个通用的前缀：On+事件名称：事件属性。例如：onclick点击事件等。

1.4 自定义属性

有一个通用前缀: “data-”。
vue框架中有使用到大量的自定义属性：v-model,v-for,v-bind等，这些属性都是Vue框架开发者自定的属性。

2.布局标签

2.1 经典布局方式

<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>

2.2 语义化布局元素

<header>header</header>
<main>main</main>
<footer>footer</footer>

备注：
为什么还是有大量的开发者, 喜欢用 div + class 模式, 不用语义化布局标签?
1.目前项目90%以上是基于移动端的, 不依赖搜索引擎优化。
2.语义化标签还是数量太少了, 不如用class来描述更精准。

3. 图片/链接/列表

3.1 图片(img)

图片是外部资源，是通过标签引入到当前HTMl中的；
引入外部标签，通常使用“单标签”。
<img src="https://img.php.cn/upload/aroundimg/000/000/001/62b28bed0afe0115.png" alt="20期" width="200">
效果如下：

20期

3.1 链接(a)

<a href="https://php.cn" target="_blank">php.cn</a> 20期开班啦

效果如下：

3.3 列表（ul/ol/dl）

ul:无序列表
ol:有序列表
dl:自定义列表

<!-- 自定义列表: 类似名词解释 -->
<dl>
    <!-- 标题 -->
    <dt>地址:</dt>
    <!-- 内容:解释 -->
    <dd>贵阳市观山湖</dd>
</dl>

效果如下：

3.4 图片/链接/列表组合使用

图片，链接，通常不会单独使用,而是与其它元素组合使用。

<style>
   /* 去掉li的小圆点 */
   ul,li{list-style:none;}
</style>
<ul>
    <li><a href="#"><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220622/fff6ec91ec83a015333dfa45d0999d6b.jpeg" alt="" width="200"></a></li>
    <li><a href="#"><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220630/50b5233d9fb6d04960b50a6eacc6f689.jpeg" alt="" width="200"></a></li>
    <li><a href="#"><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220702/4da9bd93a115fa046ccaed3be13308c4.jpeg" alt="" width="200"></a></li>
</ul>

效果如下：

4.表格元素

table：表格标签。
caption：表格标题。
thead：表头，可选。
tbody：表内容，必选。
tfoot：表尾，可选。
tr：行，必须先画行, 然后再一行中划分列(单元格)。
th/td：划分列（单元格）。
其中th内置了【style=”text-align:center;font-weight:bold”】的td标签。
rowspan：跨行（垂直）合并。
colspan：跨列（水平）合并。

应用场景-使用表格制作课程表

代码块：

<style>
      td {
        /* 文字居中 */
        text-align: center;
      }
      caption {
        /* 设置标题大小、标题与表的间距 */
        font-size: 25px;
        margin-bottom: 5px;
      }
      th{
       /* 表头背景颜色 */
        background-color: antiquewhite;
      }
</style>
<table border="1" width="600" cellpadding="0" cellspacing="0">
      <caption>
        学生信息表
      </caption>
      <thead>
        <tr>
          <th colspan="2">时间</th>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
          <th>星期四</th>
          <th>星期五</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="7">课件操8:00~8:30</td>
        </tr>
        <tr>
          <td rowspan="5" bgcolor="lightgreen">上午</td>
          <td>第一节<br />8:30~9:10</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>数学</td>
        </tr>
        <tr>
          <td>第二节<br />9:20~10:00</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
        </tr>
        <tr>
          <td colspan="6">眼操 10:00~10:05</td>
        </tr>
        <tr>
          <td>第三节<br />10:15~10:55</td>
          <td>数学</td>
          <td>数学</td>
          <td>语文</td>
          <td>英语</td>
          <td>英语</td>
        </tr>
        <tr>
          <td>第四节<br />11:05~11:45</td>
          <td>体育</td>
          <td>数学</td>
          <td>语文</td>
          <td>数学</td>
          <td>数学</td>
        </tr>
        <tr>
          <td colspan="7">午休时间</td>
        </tr>
        <tr>
          <td rowspan="8" bgcolor="lightgreen">下午</td>
          <td colspan="7">到校时间 13:50</td>
        </tr>
        <tr>
          <td colspan="7">午写 13:55~14:10</td>
        </tr>
        <tr>
          <td>第五节<br />14:15~14:555</td>
          <td>思品</td>
          <td>美术</td>
          <td>体育</td>
          <td>音乐</td>
          <td>体育</td>
        </tr>
        <tr>
          <td colspan="6">眼操 14:55~15:00</td>
        </tr>
        <tr>
          <td>第六节<br />15:10~15:50</td>
          <td>音乐</td>
          <td>英语</td>
          <td>思品</td>
          <td>形体</td>
          <td>美术</td>
        </tr>
        <tr>
          <td>第七节<br />16:00~16:40</td>
          <td>班会</td>
          <td>围棋</td>
          <td>象棋</td>
          <td>书法</td>
          <td>例会</td>
        </tr>
        <tr>
          <td colspan="6">放学时间 16:40</td>
        </tr>
      </tbody>
</table>