HTML常见标签2

最新推荐文章于 2024-04-08 14:45:12 发布

程序员浩浩

最新推荐文章于 2024-04-08 14:45:12 发布

阅读量980

点赞数 5

文章标签： html 前端 servlet

本文链接：https://blog.csdn.net/weixin_52655964/article/details/126319614

版权

1. 列表

在网页上，有很多的有相同样式的项组成的大的整体，叫列表。

列表中的每一项样式都相同（大部分情况）

有些列表有顺序，比如1,2,3,4,5

有些列表没有顺序。这两种列表就叫有序列表和无序列表

应用场景

1.1. 有序列表

使用的标签是ol每个列表中都由列表项，而列表项用li表示。列表是我们学习的第一个需要组合使用的标签

<ol>
  <li>内容1</li>
  <li>内容2</li>
  <li>内容3</li>
  <li>内容4</li>
  <li>内容5</li>
</ol>

1.2. 无序列表

使用标签ul表示无序列表，无序列表也需要通过li表示列表项

<ul>
  <li>内容1</li>
  <li>内容2</li>
  <li>内容3</li>
  <li>内容4</li>
  <li>内容5</li>
</ul>

无序列表没有顺序，可以使用这样的方式来表示一个无序列表。

未来遇到网页中的列表，我们要使用哪一个，是无所谓的，因为列表如果使用都会把标号给清除的，大部分的网页上都使用的是ul

作业

完成下面列表的一个写法

1.3. 自定义列表

自定义列表就是一个列表标题加列表项的样式。通常网站底部的相关链接信息可以使用自定义列表完成。

我们使用dl包裹dt和dd来完成对应的自定义列表的布局

<dl>
  <dt>列表标题</dt>
  <dd>列表项</dd>
  <dd>列表项</dd>
  <dd>列表项</dd>
  <dd>列表项</dd>
  <dt>列表标题</dt>
  <dd>列表项</dd>
  <dd>列表项</dd>
  <dd>列表项</dd>
  <dd>列表项</dd>
</dl>

<dl>
  <dt>列表标题</dt>
  <dd>列表项</dd>
  <dd>列表项</dd>
  <dd>列表项</dd>
  <dd>列表项</dd>
  <dt>列表标题</dt>
  <dd>列表项</dd>
  <dd>列表项</dd>
  <dd>列表项</dd>
  <dd>列表项</dd>
</dl>

2. Emmet

这是一个工具，几乎上主流的编辑器都支持，提高我们写标签和未来写CSS的速度。VSCode中想要更好用，就要去设置。

本质上，我们在VSCode中输入标签按tab直接展开成对应的标签结构的这个做法，就是利用了emmet。

如何才能使用emmet实现复杂结构的展开呢？

2.1. 基础的展开操作

2.1.1. 普通标签的展开

输入标签，直接按tab就能展开我们对应的标签

2.1.2. 如果要生成多个

输入标签，然后*数量，就可以生成对应的标签数量

p*10

2.1.3. 生成标签的同时生成内容

内容使用{}包裹，{}在谁后面，就生成到谁里面

p{内容}

2.1.3.1. 生成内容的差异化

可以在{}中使用$，$会自动根据我们生成的数量变成1-数量的数字。

p{内容$}*3

Abbreviations Syntax

2.1.4. 生成属性

使用 [] 可以生成对应的标签的属性

a[href="#"]{超链接}
a[href="#" target="_blank"]{超链接}

2.2. 元素关系

父子

<ul>
  <li>
    <a></a>
  </li>
</ul>

ul和li是父子关系
li和a是父子关系

同胞

<ul>
  <li></li>
  <li></li>
</ul>

两个li是同胞

2.2.1. 父子关系展开

父子关系要用>表示，例如：我们想要生成无序列表 ul>li

<!-- ul>li -->
<ul>
  <li></li>
</ul>

结合上面的基础操作

ul>li{列表项$}*10

如果要生成ul下10个li，每个li里都有a标签

ul>li*10>a[href="#"]{超链接}

2.2.2. 同胞关系展开

<!-- a+p -->
<a></a>
<p></p>

如果我们的同胞关系要重复多次，则使用()包裹

(a+p)*2

主要的我们需要了解的是，父子并且能够生成多个

3. 表格

表格所使用的标签为table，表格中包含了行和列。

如果我们想要生成一个表格，需要至少用到以下标签

table 表示一个完整的表格

- tr 表示一行

- - td 表示单元格
  - th 表头中的单元格

技巧：如果我们想要生成一个x行y列的表格，我们直接写

table>tr*x>td*y

然后按tab即可快速生成

<table>
    <tr>
      <td>第1行第1列</td>
      <td>第1行第2列</td>
      <td>第1行第3列</td>
      <td>第1行第4列</td>
      <td>第1行第5列/td>
      <td>第1行第6列</td>
    </tr>
    <tr>
      <td>第2行第1列</td>
      <td>第2行第2列</td>
      <td>第2行第3列</td>
      <td>第2行第4列</td>
      <td>第2行第5列/td>
      <td>第2行第6列</td>
    </tr>
</table>

表格上大部分的属性都已经废弃了，因为HTML5推荐：能用CSS实现的就不要在用属性了。

那我们的样式怎么办

3.1. 样式设置

我们先提供一个表格通用样式，如果会的同学，自己写。如果不会就直接把下面的代码，复制到，你的网页代码中的head标签中

<style>
  table {
    border-collapse: collapse;
  }

  td, th {
    border: 1px solid #aaa;
    padding: 10px;
  }
</style>

3.2. 标签

3.2.1. table

表示一个完整的表格，需要借助内部的子元素实现表格的效果

<table></table>

3.2.2. tr

行标签，可以定义table中的行，有几行就写几个tr

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

3.2.3. td

单元格标签，一行有几列，就写几个td

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

3.2.4. th

表头中的单元格，表头一般定义在第一行中。

<table>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</table>

3.2.5. thead tbody tfoot

表格有三个部分，分别是表头（thead）、主体（tbody）、脚注（tfoot）。一般我们不需要专门去写这些标签，如果不写，浏览器会自动把所有的行都添加到tbody中。

注意！！！tr不是table的子元素！！！是tbody thead tfoot的子元素。如果我们没有写对应的结构元素，tr自动被放在tbody里。

3.2.6. caption

用于定义表格的标题，我们可以更灵活的div+css的方式实现表格标题

<table>
  <caption>表格标题</caption>
</table>

3.2.7. colgroup col

这两个标签结合可以定义列的样式，很方便。

<table>
  <colgroup>
    <col></col>
    <col></col>
    <col></col>
  </colgroup>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</table>

未来学习CSS后，定义col的样式，就可以实现对应列的样式改变。主要目的是为了方便对列进行操作。

<table>
  <colgroup>
    <col style="background: red;">
    <col style="background: darkblue;">
    <col style="background: darkgoldenrod;">
    <col style="background: firebrick;">
    <col style="background: violet;">
  </colgroup>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
    <td>单元格4</td>
    <td>单元格5</td>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
    <td>单元格4</td>
    <td>单元格5</td>
  </tr>
</table>