前端开发day01（列表、表格、表单）

A宝呀

已于 2023-04-18 20:00:57 修改

阅读量65

点赞数

文章标签：前端 javascript html5

于 2023-04-18 16:03:53 首次发布

本文链接：https://blog.csdn.net/m0_73254888/article/details/130220723

版权

列表

无序列表

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ……
</ul>

注意事项：

ul 标签里面只能包裹 li 标签

li 标签里面可以包裹任何内容

有序列表

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ……
</ol>

注意事项：

ol 标签里面只能包裹 li 标签

li 标签里面可以包裹任何内容

定义列表

<dl>
  <dt>列表标题</dt>
  <dd>列表描述 / 详情</dd>
   ……
</dl>

注意事项：

dl 里面只能包含dt 和 dd

dt 和 dd 里面可以包含任何内容

效果展示

表格

基本使用

<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>198</td>
  </tr>
  <tr>
    <td>总结</td>
    <td>全市第一</td>
    <td>全市第一</td>
    <td>全市第一</td>
  </tr>
</table>

合并单元格

合并单元格的步骤：

1、明确合并的目标

2、保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

跨行合并，保留最上单元格，添加属性 rowspan

跨列合并，保留最左单元格，添加属性 colspan

3、删除其他单元格

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>99</td>
      <td rowspan="2">100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      <!-- <td>100</td> -->
      <td>198</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总结</td>
      <td colspan="3">全市第一</td>
      <!-- <td>全市第一</td>
      <td>全市第一</td> -->
    </tr>
  </tfoot>
</table>

表单

input标签

<input type="..." placeholder="提示信息">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A宝</title>
</head>
<body>
    用户名: <input type="text" placeholder="请输入用户名哦">
    <br>
    密码: <input type="password" placeholder="请输入密码哦">

    <br>
    性别:
    <input type="radio" name="gender" >男
    <input type="radio" name="gender" checked>女

    上传文件:
    <input type="file" multiple>

    多选:
    <input type="checkbox" > C++
    <input type="checkbox" checked> Java
    <input type="checkbox" > Python
    <input type="checkbox" checked> HTML

</body>
</html>

下拉菜单

文本框

label标签

按钮

<button type="">按钮</button>

<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
  用户名：<input type="text">
  <br><br>
  密码：<input type="password">
  <br><br>

  <!-- 如果省略 type 属性，功能是 提交 -->
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>

补充：语义化和字符实体

无语义

<div>div 标签，独占一行</div>
<span>span 标签，不换行</span>

有语义的布局标签

字符实体

A宝呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发day01（列表、表格、表单）

HTML基础内容
复制链接

扫一扫