初学HTML 常见的标签列表标签

Posted 2020-06-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初学HTML 常见的标签列表标签相关的知识，希望对你有一定的参考价值。

　　上次介绍了一些简单的文本标签设计, 这篇介绍列表类标签, 通过列表能写出很好看的, 多元化的网络页面.

　　ul-li 列表标签

　　<ul>

　　</ul>

　　ul-li在网页中显示的默认样式一般为:每项li前都带一个圆点, 所以ul-li是没有序号的信息列表, 不存在前面的1, 2, 3等等的序号为其排序.

　　ol-li 列表标签

　　ol-li在网页中显示的默认样式和ui-li的区别就在于, 它是有序号的信息列表, 所以它的前面不再是圆点, 而是1, 2, 3等等的序号为其排序, 如果懂一些英文的人我想会更好记忆(<ul>代表的就是, unorder list, <ol>代表的是order list, <li>代表的是list, 如上都是我推断出来, 英文本人惭愧的连四级都没有过, 所以如果哪里有错误, 希望批评指正).

　　<div>逻辑标签

　　<div>逻辑标签很大程度上和文本标签中的<span>很像, 但是它是有语义的, 也会对原本的布局产生影响, 之所以说很像, 也是因为<div>标签大部分都只是为自定义提供了一个容器, 这点和<span>是相同的, 在实际的网页中, <div>也和<span>一样, 是最重要的标签之一. <div>最主要的作用是将一个完整的逻辑模块框在一起, 说的通俗一点, 就是古惑仔中的这片场子归我管.

　　<table>表格标签

　　先来简单说说标签名字的含义, 我个人习惯这样, 因为这样能方便记忆, 就如同ol-li这样似的, 在<table>中会有三种必用标签, <tr>, <th>, <td>.

　　<tr> table row 表格行标签, 这个标签的出现意味着下面的都是这一行上面要出现的数据, 结束也就意味着这一行结束了. 再出现当然就是又出现一行了.

　　<th> table head 表头标签, 这个标签是内嵌在<tr>中的, 因为先有行, 才会有表头对吧, 所以这个只会在一个<tr>标签中出现, 毕竟表头不可能有两行.

　　<td> table data cell 单元数据标签, 这个标签的的用法和<th>是一样的, 在非表头行使用, 是指每个单元中和表头标题一一对象的元素, 所以在第一行表头有多少个<th>在后面的<tr>中就会有多少个<td>与之相对应.

　　下面上代码给大家解释:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
</head>
<body>
<!--表格开始标签-->
<table>
    <!--表格行开始标签-->
    <tr>
      <!--表格头标签-->
      <th>班级</th>
      <th>学生数</th>
      <th>平均成绩</th>
    </tr>
    <tr>
      <!--表格单元格标签-->
      <td>一班</td>
      <td>30</td>
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>
    <tr>
        <td>三班</td>
        <td>32</td>
        <td>80</td>
    </tr>
</table>
</body>
</html>