HTML CSS 第二次笔记

列表、表格、表单

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>
相关推荐
想要学好前端的阿毛2 分钟前
React状态管理库 -- Redux篇
前端
拾光拾趣录3 分钟前
前端宏(微)任务 | 从“为什么我的代码不按顺序执行”说起
前端·javascript
林太白6 分钟前
NestJS-菜单模块
前端·后端·nestjs
程序员ys8 分钟前
微前端(What)
前端·架构
用户7974761127310 分钟前
Mysql RR事务隔离级别引发的生产Bug,你中招了吗?
前端
Mintopia12 分钟前
🧠 三分视界:Three.js 离屏渲染与多重视角的艺术
前端·javascript·计算机图形学
JarvanMo21 分钟前
Dart & Flutter DevTools 扩展
前端
yuko093123 分钟前
【手机验证码】手机号格式化光标异常问题
前端
原生高钙24 分钟前
高性能前端埋点上报系统的架构与实现
前端·面试
水痕0129 分钟前
nginx一个域名下部署多套前端项目
运维·前端·nginx