HTML CSS 第二次笔记

爱泡脚的鸡腿2025-04-02 17:57

列表、表格、表单

1.列表

1.1 无序列表(有序、无序、自定义列表都默认独占一行，可通过js语句改变布局)

作用： 布局排列整齐的不需要规定顺序 的列表
标签： ul嵌套li，ul是无序列表，li是列表条目

html 复制代码

<body>
  <h3>您喜欢的水果？</h3>
  <!-- ul里只能放li标签 -->
  <!-- li里可以放其他标签-->
  <ul>
    <li>苹果</li>
    <li>芒果</li>
    <li>香蕉</li>
    <li>梨子</li>
  </ul>

</body>

1.2 有序列表

作用： 布局排列整齐的需要规定顺序 的列表
标签： ol嵌套li，ol是无序列表，li是列表条目

html 复制代码

<body>
  <h3>您喜欢的水果？</h3>
  <!-- ul里只能放li标签 -->
  <ol>
    <li>苹果</li>
    <li>芒果</li>
    <li>香蕉</li>
    <li>梨子</li>
  </ol>

</body>

1.3 定义列表

标签: dl嵌套dt和dd,dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情.dl里面只能包含dt和dd

html 复制代码

<body>
  <h3>您所在的区域？</h3>

  <dl>
    <dt>广州市</dt>
    <dd>越秀区</dd>
    <dd>天河区</dd>
    <dd>黄浦区</dd>
    <dd>荔湾区</dd>
  </dl>
</body>

2. 表格

2.1 表格基本用法

html 复制代码

<body>
  <!-- th表头 第一行才能使用 -->
  <!-- border="1"给表格加边框 -->
  <table border="1">
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>99</td>
      <td>100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      <td>100</td>
      <td>100</td>
    </tr>
    <tr>
      <td>总结</td>
      <td>全市第一</td>
      <td>全市第一</td>
      <td>全市第一</td>
    </tr>
  </table>
</body>

2.2 表格结构标签（了解）

划分标签有利于后期js处理

(分为thead、tbody，tfoot)

html 复制代码

<body>
  <!-- th表头 第一行才能使用 -->
  <!-- border="1"给表格加边框 -->
  <table border="1">
    <!-- 表格头部 -->
    <thead>
      <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>总分</th>
      </tr>
    </thead>


    <!-- 表格主体部分 -->
    <tbody>
      <tr>
        <td>张三</td>
        <td>99</td>
        <td>100</td>
        <td>199</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>98</td>
        <td>100</td>
        <td>100</td>
      </tr>
    </tbody>


    <!-- 表格底部 -->
    <tfoot>
      <tr>
        <td>总结</td>
        <td>全市第一</td>
        <td>全市第一</td>
        <td>全市第一</td>
      </tr>
    </tfoot>

  </table>
</body>