列表、表格、表单

news2024/11/15 16:58:22

day02：列表、表格、表单

目标：掌握嵌套关系标签的写法，使用列表标签布局网页

01-列表

作用：布局内容排列整齐的区域。

列表分类：无序列表、有序列表、定义列表。

无序列表

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

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

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

注意事项：

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

有序列表

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

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

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

注意事项：

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

定义列表

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

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

在这里插入图片描述

注意事项：

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

02-表格

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

在这里插入图片描述

基本使用

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

在这里插入图片描述

提示：在网页中，表格默认没有边框线，使用 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>

表格结构标签-了解

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

在这里插入图片描述

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

合并单元格

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

在这里插入图片描述

合并单元格的步骤：

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

03-表单

作用：收集用户信息。

使用场景：

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

input 标签

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

<input type="..." >

在这里插入图片描述

input 标签占位文本

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

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

单选框

常用属性
在这里插入图片描述

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

提示：name 属性值自定义。

上传文件

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

<input type="file" multiple>

多选框

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

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

下拉菜单

在这里插入图片描述

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

<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <option>江苏</option>
  <option selected>淮安</option>
</select>

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

文本域

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

在这里插入图片描述

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

注意点：

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

label 标签

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

在这里插入图片描述

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

在这里插入图片描述

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

提示：支持 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>

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

04-语义化

无语义的布局标签

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

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

有语义的布局标签

在这里插入图片描述

05-字符实体

在这里插入图片描述

06-综合案例一-体育新闻列表

在这里插入图片描述

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

07-综合案例二-注册信息

在这里插入图片描述

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Bean 的生命周期

Bean 的生命周期

观前提示:本篇博客演示使用的 IDEA 版本为2021.3.3版本,使用的是Java8(又名jdk1.8) 电脑使用的操作系统版本为 Windows 10 目录 Spring 的执行流程 1. 启动容器 2. 根据配置完成 Bean 的初始化 3. 注册 Bean 对象到容器中 4. 装配 Bean 的属性 Bean 的生命周期 Bean 的…
阅读更多...
掌握Python的X篇_2_Python的安装

掌握Python的X篇_2_Python的安装

掌握Python的X篇_2_Python的安装 1. 软件安装包下载1.1 Python版本的区别1.2 同一版本不同安装包的区别 2. 安装过程3. 验证是否安装成功 1. 软件安装包下载 下载地址&#xff1a;https://www.python.org/downloads/ 可以看到最新版本和历史版本 1.1 Python版本的区别 就像…
阅读更多...
express的使用(五) 简单的使用mongodb

express的使用(五) 简单的使用mongodb

原文链接 express的使用(五) 简单的使用mongodb 不要脸的求关注&#xff0c;希望能让大家批评我的不足点&#xff0c;一键三连最好了 看前提示 本篇主要描述关于express中使用mongodb以及mongodb的简单介绍还有初步使用&#xff0c;不涉及任何常用的语法&#xff0c;不建议有…
阅读更多...
算法刷题-双指针-反转链表

算法刷题-双指针-反转链表

反转链表的写法很简单&#xff0c;一些同学甚至可以背下来但过一阵就忘了该咋写&#xff0c;主要是因为没有理解真正的反转过程。 206.反转链表 力扣题目链接 题意&#xff1a;反转一个单链表。 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2-…
阅读更多...
AMD CPU微架构分析

AMD CPU微架构分析

一、SoC架构 1.1 整体架构 Zeppelin 参考链接&#xff1a;wikichip: Zeppelin 通过infinity fabric总线将单die分成多die的SoC架构&#xff0c;每个Die包含两个CPU核&#xff08;CCX&#xff09;、2各DDR通道、USB、低功耗IO以及多个IFOP和IFIS serdes接口。 如下所述中&…
阅读更多...
干翻Mybatis源码系列之第十篇：Mybatis Plugins基本概念与拦截概述

干翻Mybatis源码系列之第十篇：Mybatis Plugins基本概念与拦截概述

给自己的每日一句 不从恶人的计谋&#xff0c;不站罪人的道路&#xff0c;不坐亵慢人的座位&#xff0c;惟喜爱耶和华的律法&#xff0c;昼夜思想&#xff0c;这人便为有福&#xff01;他要像一棵树栽在溪水旁&#xff0c;按时候结果子&#xff0c;叶子也不枯干。凡他所做的尽…
阅读更多...
vue jointjs 拓扑图 自定义shape 按需引入

vue jointjs 拓扑图 自定义shape 按需引入

只展示部分核心代码&#xff0c;完整代码见文章尾部连接 import jointjs/dist/joint.core.css;// 类库 包含: Paper Graph Cell CellView Element Link 等等 import { dia } from jointjs/src/core.mjs; // 样式库 包含多个分组(basic standard custom ...) import * as standa…
阅读更多...
基于Hexo和Butterfly创建个人技术博客，(11) 使用插件增强博客站点能力

基于Hexo和Butterfly创建个人技术博客，(11) 使用插件增强博客站点能力

Butterfly官方网站&#xff0c;请 点击进入 本章目标&#xff1a; 掌握常用的plugin插件的用法&#xff0c;本文中是butterfly主题内置集成的第三方插件(部分插件需要再次安装)&#xff1b; 一、建议开启的三方插件 KaTeX-数学公式 katex:enable: true# true 表示每一页都加载…
阅读更多...
C# NX二次开发:通过UFUN函数获取刀具描述，目录号，库号等信息

C# NX二次开发:通过UFUN函数获取刀具描述，目录号，库号等信息

今天要将的是&#xff0c;在NX中对CAM模块进行二次开发的时候&#xff0c;往往需要获取一些关于刀具使用的信息&#xff0c;这些信息用NXOPEN的的方法录制也可以录制出来&#xff0c;但是录制出来的代码&#xff0c;往往都是一种刀具类型会出现一个Builder。这样在你不知道有多…
阅读更多...
淘宝买家订单API

淘宝买家订单API

目录 下载安装与运行 支持的订单读取方式 请求数据格式一 请求头示例 数据格式说明 数据格式示例 返回数据格式一 返回头示例 数据格式说明 数据格式示例 请求数据格式二&#xff08;根据订单编号&#xff09; 请求头示例 返回数据格式二&#xff08;根据订单编号…
阅读更多...
【随笔记】如何获得铁粉(仅供参考)

【随笔记】如何获得铁粉(仅供参考)

文章目录 一、前言二、秘籍2.1 良好的个人简介2.2 统一的文章格式2.3 详细的专栏划分2.4 有序的博客排版2.4.1 目录部分2.4.2 正文部分2.4.2.1 标题分级2.4.2.2 正文分段2.4.2.3 善用多级列表2.4.2.4 章节分割 三、总结 一、前言 在这篇随笔记的开始&#xff0c;我想声明一下&a…
阅读更多...
ChatGPT将改变教育，而不是摧毁它

ChatGPT将改变教育，而不是摧毁它

01 学校和大学的反应迅速而果断 就在 OpenAI 于 2022 年 11月下旬发布ChatGPT 的几天后&#xff0c;该聊天机器人被广泛谴责为一种免费的论文写作、应试工具&#xff0c;它很容易在作业中作弊。 美国第二大学区洛杉矶联合大学立即阻止了OpenAI网站从其学校网络访问。其他人很…
阅读更多...
【Java】Java核心要点总结 67

【Java】Java核心要点总结 67

文章目录 1. 浮点数运运算会有精度损失2. 构造方法特点 & 不能被重写3. 接口和抽象类的异同4. Object 类的常见方法5. hashCode() 有什么用 为什么要有 hashCode() 1. 浮点数运运算会有精度损失 这个和计算机保存浮点数的机制有很大关系。我们知道计算机是二进制的&#x…
阅读更多...
面试时一定要确认该岗位的直属领导是否在场，如果不在，千万不要接offer，有坑！...

面试时一定要确认该岗位的直属领导是否在场，如果不在，千万不要接offer，有坑！...

对于有心人来说&#xff0c;面试时可以看出许多隐形信息&#xff0c;比如下面这位网友的提醒&#xff1a; 面试时一定要确认这个岗位的直接汇报领导是否参与了面试&#xff0c;如果没有参与&#xff0c;千万不要接offer&#xff01; 该职位的直接领导不参与面试&#xff0c;只能…
阅读更多...
NLP——Topic Modelling

NLP——Topic Modelling

文章目录 A Brief History of Topic ModelsLatent Dirichlet Allocation &#xff08;LDA&#xff09;潜在狄利克雷分布核心思想LDA inputLDA output LDA 如何学习Sampling-based mothods 基于采样的方法Infer Topics For New Documents超参数 Variational methods 变分方法 Ev…
阅读更多...
java协同过滤算法的校园二手图书网站springboot vue

java协同过滤算法的校园二手图书网站springboot vue

用户&#xff1a;&#xff08;商品推荐算法&#xff09; 1)首页主要由导航栏、图书展示页、分页所组成。访客能浏览网站上的待出售图书的信息&#xff0c;但是若要购买&#xff0c;收藏图书&#xff0c;查看卖家信息则会自动跳转到登录界面&#xff0c;已经登录的用户则可以浏…
阅读更多...
WPS AI最全申请与使用手册；AIGC制作游戏音乐；便宜快捷使用完整版SD；人人都能看懂的ChatGPT原理课 | ShowMeAI日报

WPS AI最全申请与使用手册；AIGC制作游戏音乐；便宜快捷使用完整版SD；人人都能看懂的ChatGPT原理课 | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; &#x1f916; 面向虚拟世界的生成式AI市场全景图 作者在这篇文章中探讨了生成式AI在虚拟世界的应用&#xff0c;并绘制了 Market Map V3.0 (市场全景…
阅读更多...
C++ 有用的资源||19道必须掌握的C++面试题

C++ 有用的资源||19道必须掌握的C++面试题

C 有用的资源 C 有用的资源 以下资源包含了 C 有关的网站、书籍和文章。请使用它们来进一步学习 C 的知识。 C 有用的网站 C Programming Language Tutorials − C 编程语言教程。C Programming − 这本书涵盖了 C 语言编程、软件交互设计、C 语言的现实生活应用。C FAQ −…
阅读更多...
chatgpt赋能python：Python中的遍历方法详解

chatgpt赋能python：Python中的遍历方法详解

Python中的遍历方法详解 在Python中&#xff0c;遍历是处理数据的常见操作。Python提供了多种遍历方法&#xff0c;本文将逐一介绍这些方法的特点、适用场景及使用方法。 for循环 for循环是Python中最常用的遍历方法之一&#xff0c;可以遍历任何可迭代对象。 # 遍历列表 f…
阅读更多...
栈的运用——中缀表达式[Java实现]

栈的运用——中缀表达式[Java实现]

⭐作者介绍&#xff1a;大二本科网络工程专业在读&#xff0c;持续学习Java&#xff0c;努力输出优质文章 ⭐作者主页&#xff1a;逐梦苍穹 ⭐所属专栏&#xff1a;数据结构。数据结构专栏主要是在讲解原理的基础上拿Java实现&#xff0c;有时候有C/C代码。 ⭐如果觉得文章写的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023