前端|Day2：列表、表格、表单（黑马笔记）

Day2：列表、表格、表单

目录

  • Day2：列表、表格、表单
    • 一、列表
      • 1.无序列表
      • 2.有序列表
      • 3. 定义列表
    • 二、表格
      • 1.基本使用
      • 2. 表格结构标签(了解)
      • 3.合并单元格
    • 三、表单
      • 1.input 标签
      • 2.input 标签占位文本
      • 3.单选框
      • 4.上传文件
      • 5.多选框
      • 6.下拉菜单
      • 7.文本域
      • 8.label 标签
      • 9.按钮
    • 四、语义化
      • 1.无语义的布局标签
      • 2.有语义的布局标签
    • 五、字符实体
    • 六、综合案例
      • 1.体育新闻列表
      • 2.注册信息

一、列表

作用：布局内容排列整齐的区域
分类： 无序列表，有序列表，定义列表

1.无序列表

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

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

注：

  • ul 标签里面只能包裹 li 标签
  • li 标签里面可以包裹任何内容

2.有序列表

作用：布局排列整齐的需要规定顺序的区域。

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。

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

注：

  • ol 标签里面只能包裹 li 标签
  • li 标签里面可以包裹任何内容

3. 定义列表

标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

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

1

注：

  • dl 里面只能包含dt 和 dd
  • dt 和 dd 里面可以包含任何内容

二、表格

网页中的表格与 Excel 表格类似，用来展示数据。

2

1.基本使用

标签：table 嵌套 tr，tr 嵌套 td / th。

3

提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。

<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>

2. 表格结构标签(了解)

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

4

提示：表格结构标签可以省略。

3.合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。

5

合并单元格的步骤：

  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>

注：

  • 不能跨表格结构标签合并单元格（thead、tbody、tfoot）
  • 合并边框线的css:border-collapse: collapse;

三、表单

作用：收集用户信息
使用场景：

  • 登录页面
  • 注册页面
  • 搜索区域

1.input 标签

input 标签 type 属性值不同，则功能不同。

<input type="..." >

6

2.input 标签占位文本

占位文本：提示信息，文本框和密码框都可以使用。

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

3.单选框

常用属性

7

<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女

提示：name 属性值自定义。

4.上传文件

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。

<input type="file" multiple>

5.多选框

多选框也叫复选框，默认选中：checked。

<input type="checkbox" checked> 敲前端代码

6.下拉菜单

8

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <option selected>武汉</option>
</select>

默认显示第一项，selected 属性实现默认选中功能。

7.文本域

作用：多行输入文本的表单控件。

9

<textarea>默认提示文字</textarea>

注：

  • 实际开发中，使用 CSS 设置 文本域的尺寸
  • 实际开发中，一般禁用右下角的拖拽功能

8.label 标签

作用：网页中，某个标签的说明文本。

在这里插入图片描述

经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。

在这里插入图片描述

  • 写法一
    • label 标签只包裹内容，不包裹表单控件
    • 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
<input type="radio" id="man">
<label for="man">男</label>
  • 写法二：使用 label 标签包裹文字和表单控件，不需要属性
<label><input type="radio"> 女</label>

提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

9.按钮

<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>

提示：按钮需配合 form 标签（表单区域）才能实现对应的功能。

四、语义化

1.无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

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

2.有语义的布局标签

在这里插入图片描述

五、字符实体

在这里插入图片描述

六、综合案例

1.体育新闻列表

在这里插入图片描述

<ul>
  <li>
    <img src="./images/1.jpg" alt="">
    <h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
  </li>
  <li>
    <img src="./images/2.jpg" alt="">
    <h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3>
  </li>
  <li>
    <img src="./images/3.jpg" alt="">
    <h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3>
  </li>
</ul>

2.注册信息

在这里插入图片描述

<h1>注册信息</h1>
<form action="">
  <!-- 表单控件 -->
  <!-- 个人信息 -->
  <h2>个人信息</h2>
  <label>姓名：</label><input type="text" placeholder="请输入真实姓名">
  <br><br>
  <label>密码：</label><input type="password" placeholder="请输入密码">
  <br><br>
  <label>确认密码：</label><input type="password" placeholder="请输入确认密码">
  <br><br>
  <label>性别：</label>
  <label><input type="radio" name="gender"> 男</label>
  <label><input type="radio" name="gender" checked> 女</label>
  <br><br>
  <label>居住城市：</label>
  <select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option>武汉</option>
  </select>
  <!-- 教育经历 -->
  <h2>教育经历</h2>
  <label>最高学历：</label>
  <select>
    <option>博士</option>
    <option>硕士</option>
    <option>本科</option>
    <option>大专</option>
  </select>
  <br><br>
  <label>学校名称：</label><input type="text">
  <br><br>
  <label>所学专业：</label><input type="text">
  <br><br>
  <label>在校时间：</label>
  <select>
    <option>2015</option>
    <option>2016</option>
    <option>2017</option>
    <option>2018</option>
  </select>
  --
  <select>
    <option>2019</option>
    <option>2020</option>
    <option>2021</option>
    <option>2022</option>
  </select>
  <!-- 工作经历 -->
  <h2>工作经历</h2>
  <label>公司名称：</label><input type="text">
  <br><br>
  <label>工作描述：</label>
  <br>
  <textarea></textarea>
  <br><br>
  <!-- 协议 和 按钮 -->
  <input type="checkbox"><label>已阅读并同意以下协议：</label>
  <ul>
    <li><a href="#">《用户服务协议》</a></li>
    <li><a href="#">《隐私政策》</a></li>
  </ul>
  <br><br>
  <button>免费注册</button>
  <button type="reset">重新填写</button>
</form>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/397872.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【论文精读】MAE

【论文精读】MAE

摘要 将掩码重建任务从nlp引入到cv&#xff0c;提出非对称掩码自编码器。 框架 概述 如上图&#xff0c;本文提出掩码自编码器&#xff0c;即将给定原始信号的部分观测值的情况下重建原始信号&#xff0c;编码器将观察到的部分信号(没有掩码标记)映射到潜在表示&#xff0c;采…
阅读更多...
电大考试哪个搜题软件好用？分享6个可以搜答案的软件 #经验分享#其他#微信

电大考试哪个搜题软件好用？分享6个可以搜答案的软件 #经验分享#其他#微信

当今社会&#xff0c;技术的发展给我们带来了许多便利&#xff0c;包括了许多实用的学习工具。 1.三羊搜题 这是一个公众号 它支持文本搜索、扫码搜书、拍照搜索&#xff0c;不会的题目直接对准书书本&#xff0c;或手打文字搜索题目&#xff0c;找到的后的题目都有详细的解…
阅读更多...
【JVM篇】什么是运行时数据区

【JVM篇】什么是运行时数据区

文章目录 &#x1f354;什么是运行时数据区⭐程序计数器⭐栈&#x1f50e;Java虚拟机栈&#x1f388;栈帧的内容 &#x1f50e;本地方法栈 ⭐堆⭐方法区 &#x1f354;什么是运行时数据区 运行时数据区指的是jvm所管理的内存区域&#xff0c;其中分为两大类 线程共享&#xf…
阅读更多...
w29pikachu-ssrf实例

w29pikachu-ssrf实例

实验环境 php&#xff1a;7.3.4nts apache&#xff1a;2.4.39 浏览器&#xff1a;谷歌实验步骤 ssrf&#xff08;curl&#xff09; 打开ssrf(curl) 点击文字&#xff0c;跳转404页面&#xff0c;从反馈信息来看是找不到对应的页面。 查看源码&#xff0c;发现有个RD变量影…
阅读更多...
sentinel的资源数据指标是如何采集

sentinel的资源数据指标是如何采集

资源数据采集 之前的NodeSelectorSlot和ClusterBuilderSlot已经完成了对资源调用树的构建, 现在则是要对资源进行收集, 核心点就是这些资源数据是如何统计 LogSlot 作用: 记录异常请求日志, 用于故障排查 public class LogSlot extends AbstractLinkedProcessorSlot<Def…
阅读更多...
使用 Docker 安装 Kibana 8.4.3

使用 Docker 安装 Kibana 8.4.3

使用 Docker 安装 Kibana 8.4.3 一. 安装启动 Kibana 8.4.3二. 简单使用2.1 向 Elasticsearch 发送请求2.2 搜索2.3 整体页面 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 安装k…
阅读更多...
十五、Object 类

十五、Object 类

文章目录 Object 类6.1 public Object()6.2 toString方法6.3 hashCode和equals(Object)6.4 getClass方法6.5 clone方法6.6 finalize方法 Object 类 本文为书籍《Java编程的逻辑》1和《剑指Java&#xff1a;核心原理与应用实践》2阅读笔记 java.lang.Object类是类层次结构的根…
阅读更多...
医卫医学试题及答案，分享几个实用搜题和学习工具 #笔记#笔记#微信

医卫医学试题及答案，分享几个实用搜题和学习工具 #笔记#笔记#微信

收录了大量考试类型的题库&#xff0c;大到考公&#xff0c;小到知识竞赛&#xff0c;题库资源算是比较丰富的了。操作起来也不难&#xff0c;我们只需输入题目内容&#xff0c;即可快速搜索出答案&#xff0c;而且它在给出答案的同时还会附带解析。最重要的是&#xff0c;搜题…
阅读更多...
软件工具安装遇到bug、报错不知道怎么解决？看这里！

软件工具安装遇到bug、报错不知道怎么解决？看这里！

前言 本文举例了几个常见的软件工具使用问题&#xff0c;文末会提供一些我自己整理和使用的工具资料 。 "在追逐零 Bug 的路上&#xff0c;我们不断学习、改进&#xff0c;更加坚定自己的技术信念。让我们相信&#xff0c;每一个 Bug 都是我们成长的机会。" 一、VM…
阅读更多...
09MARL深度强化学习policy gradient

09MARL深度强化学习policy gradient

文章目录 前言1、Multi-Agent Policy Gradient Theorem2、Centralised State-Value Critics2、Centralised Action-Value Critics 前言 Independent learning算法当中每个智能体看待其他智能体为环境的一部分&#xff0c;加剧了环境非平稳性&#xff0c;而CTDE框架的算法能够降…
阅读更多...
防火墙——计算机网络

防火墙——计算机网络

前述基于密码的安全机制不能有效解决以下安全问题&#xff1a; 用户入侵&#xff1a; 利用系统漏洞进行未授权登录&#xff1b; 授权用户非法获取更高级别权限等。 软件入侵&#xff1a; 通过网络传播病毒、蠕虫和特洛伊木马。 拒绝服务攻击等。 解决方法&#xff1a; 防火墙&a…
阅读更多...
Camera2 setRepeatingRequest源码分析

Camera2 setRepeatingRequest源码分析

当createCaptureSession流程执行完成后&#xff0c;应用在回调方法onConfigured就可以获得创建的CameraCaptureSession&#xff0c;接下来就可以调用CameraCaptureSession#setRepeatingRequest来下发camera stream命令获取camera数据。在CameraCaptureSession#setRepeatingRequ…
阅读更多...
离线升级esp32开发板升级包esp32-2.0.14（最新版已经3.0alpha了）

离线升级esp32开发板升级包esp32-2.0.14（最新版已经3.0alpha了）

1.Arduino IDE 2.3.2最新 2024.2.20升级安装:https://www.arduino.cc/en/software 2.开发板地址 地址&#xff08;esp8266,esp32&#xff09; http://arduino.esp8266.com/stable/package_esp8266com_index.json,https://raw.githubusercontent.com/espressif/arduino-esp32…
阅读更多...
【Redis高手修炼之路】④主从复制

【Redis高手修炼之路】④主从复制

主从复制 就是 redis集群的策略配从&#xff08;库&#xff09;不配主&#xff08;库&#xff09;&#xff1a;小弟可以选择谁是大哥&#xff0c;但大哥没有权利去选择小弟读写分离&#xff1a;主机写&#xff0c;从机读 一主二仆 准备三台服务器&#xff0c;并修改redis.co…
阅读更多...
HTTP 与HTTPS笔记

HTTP 与HTTPS笔记

HTTP 80 HTTP是一个在计算机世界里专门在【两点】之间【传输】文字、图片、音频、视频等【超文本】数据的约定和规范。 HTTP状态码 1xx 提示信息&#xff0c;表示目前是协议处理的中间状态&#xff0c;还需要后续的操作&#xff1b;2xx 200 204 026 成功3xx 重定向&#xff…
阅读更多...
MySQL篇之覆盖索引

MySQL篇之覆盖索引

一、定义 覆盖索引是指查询使用了索引&#xff0c;并且需要返回的列&#xff0c;在该索引中已经全部能够找到。 二、例子 1. id为主键&#xff0c;默认是主键索引。 2. name字段为普通索引。 select * from tb_user where id 1 覆盖索引 select id&#xff0c;na…
阅读更多...
OPPO公布全新AI战略，AI 手机时代再提速

OPPO公布全新AI战略，AI 手机时代再提速

2024年2月20日&#xff0c;深圳——今日OPPO 举办 AI 战略发布会&#xff0c;分享新一代 AI 手机的四大能力特征&#xff0c;展望由AI驱动的手机全栈革新和生态重构的趋势&#xff0c;并发布由OPPO AI 超级智能体和 AI Pro 智能体开发平台组成的OPPO 1N 智能体生态战略&#xf…
阅读更多...
提升网络灵活性，SD-WAN助您快速应对备用线路需求

提升网络灵活性，SD-WAN助您快速应对备用线路需求

随着企业规模不断扩大&#xff0c;传统网络架构在面对快速扩张的业务需求时显得力不从心&#xff0c;如同狭窄的道路难以容纳日益增多的车流和人群&#xff0c;访问流量的激增可能导致网络拥堵和延误&#xff0c;极大地影响业务正常访问。本文将详细介绍SD-WAN如何快速调整备用…
阅读更多...
【MySQL】Navicat/SQLyog连接Ubuntu中的数据库（MySQL）

【MySQL】Navicat/SQLyog连接Ubuntu中的数据库（MySQL）

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 前言一、安装…
阅读更多...
C++结合Lambda表达式在函数内部实现递归

C++结合Lambda表达式在函数内部实现递归

529. 扫雷游戏 已解答 中等 相关标签 相关企业 让我们一起来玩扫雷游戏&#xff01; 给你一个大小为 m x n 二维字符矩阵 board &#xff0c;表示扫雷游戏的盘面&#xff0c;其中&#xff1a; M 代表一个 未挖出的 地雷&#xff0c;E 代表一个 未挖出的 空方块&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023