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

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

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

相关文章

基于深度学习的红肉新鲜过期判决系统matlab仿真

基于深度学习的红肉新鲜过期判决系统matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 系统构成与流程 4.2 模型训练与优化 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 ...............................................…
阅读更多...
C#使用一个泛型方法操作不同数据类型的数组

C#使用一个泛型方法操作不同数据类型的数组

目录 一、泛型方法及其存在的意义 二 、实例 1.源码 2.生成效果 再发一个泛型方法的示例。 一、泛型方法及其存在的意义 实际应用中&#xff0c;查找或遍历数组中的值时&#xff0c;有时因为数组类型的不同&#xff0c;需要对不同的数组进行操作&#xff0c;那么,可以使用…
阅读更多...
蓝桥杯冲C＋＋组还是选Python组从零开始？

蓝桥杯冲C＋＋组还是选Python组从零开始？

蓝桥杯冲C&#xff0b;&#xff0b;组还是选Python组从零开始&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「c的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家…
阅读更多...
Stable Diffusion 模型分享：Dark Sushi Mix 大颗寿司Mix

Stable Diffusion 模型分享：Dark Sushi Mix 大颗寿司Mix

本文收录于《AI绘画从入门到精通》专栏，专栏总目录：点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十
阅读更多...
关于fastjson中JSONPath的使用

关于fastjson中JSONPath的使用

关于fastjson中JSONPath的使用 1 简介2 API3 语法4 案例 在项目中, 经常会涉及到对json字符串,进行查询, 添加,删除的处理操作. 传统方法需要一步一步进行处理,并且处理完需要将值进行封装. 而fastjson中提供的JSONPath, 可以更加简单的实现上述功能. 1 简介 JsonPath是一种简…
阅读更多...
Mongodb $text详解

Mongodb $text详解

在建立文本索引的集合中&#xff0c;使用$text&#xff0c;mongodb能够支持文本检索。本文结合mongodb官方文档详细描述$text的定义&#xff0c;用法&#xff0c;注意事项并实践官网给出的应用举例。 定义 $text在包含文本索引字段的集合中&#xff0c;执行文本检索。 语法 …
阅读更多...
苍穹外卖Day02——总结2

苍穹外卖Day02——总结2

前期文章 文章标题地址苍穹外卖Day01——总结1https://blog.csdn.net/qq_43751200/article/details/135466359?spm1001.2014.3001.5501苍穹外卖Day01——解决总结1中存在的问题https://lushimeng.blog.csdn.net/article/details/135473412 总结2 前期文章1. 新增员工模块1.1 …
阅读更多...
Linux-Project

Linux-Project

1.【minishare】 1.1项目要求 1.1.1编写项目文档 1.项目需求项目背景描述实现该原因及背景需求分析分析项目要求(不涉及技术)概要设计根据需求设计相关技术实现功能软件框图:各个模块之间的功能及其关系模块设计具体每个功能的模块设计流程图:每个模块实现功能的具体步骤及方…
阅读更多...
抖店类目怎么选？七大类目详尽分析，总有一个适合你！

抖店类目怎么选？七大类目详尽分析，总有一个适合你！

我是电商珠珠 在类目的选择上&#xff0c;很多人都会大意。认为类目跟风选一个热销的&#xff0c;后期着重选品就可以了。但做店铺最重要的就是类目&#xff0c;类目作为一个店铺的方向&#xff0c;决定着店铺的流量和后期的订单量。所谓的确定类目&#xff0c;就相当于你写作…
阅读更多...
分布式学习Day5

分布式学习Day5

文章目录 初始ES介绍倒排索引ES和MYSQL对比安装ES及其组件1.1.创建网络1.2.加载镜像1.3.运行2.1.部署 分词器 操作索引库文档操作RestAPI介绍 初始ES 介绍 倒排索引 ES和MYSQL对比 安装ES及其组件 1.1.创建网络 因为我们还需要部署kibana容器&#xff0c;因此需要让es和kiban…
阅读更多...
【鸿蒙 HarmonyOS 4.0】网络请求

【鸿蒙 HarmonyOS 4.0】网络请求

一、介绍 资料来自官网&#xff1a;文档中心 网络管理模块主要提供以下功能&#xff1a; HTTP数据请求&#xff1a;通过HTTP发起一个数据请求。WebSocket连接&#xff1a;使用WebSocket建立服务器与客户端的双向连接。Socket连接&#xff1a;通过Socket进行数据传输。 日常…
阅读更多...
如何在Linux搭建Inis网站，并发布至公网实现远程访问【内网穿透】

如何在Linux搭建Inis网站，并发布至公网实现远程访问【内网穿透】

如何在Linux搭建Inis网站&#xff0c;并发布至公网实现远程访问【内网穿透】 前言1. Inis博客网站搭建1.1. Inis博客网站下载和安装1.2 Inis博客网站测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3.…
阅读更多...
【Week-P8】YOLOv5-C3模块实现天气识别

【Week-P8】YOLOv5-C3模块实现天气识别

YOLOv5-C3模块实现天气识别 一、环境配置二、准备数据三、搭建网络结构-YOLO-C3模块四、开始训练五、查看训练结果六、总结&#xff08;forward函数内部没有调用新增加的层&#xff0c;训练所使用的网络结构还是原来的结构&#xff0c;注意通道参数的一致&#xff0c;训练结果待…
阅读更多...
MATLAB 导出可编辑的eps格式图像

MATLAB 导出可编辑的eps格式图像

任务描述&#xff1a;部分期刊要求提交可编辑的eps格式图像&#xff0c;方便美工编辑对图像进行美化 我试了直接print或者在figure窗口导出&#xff0c;发现导出的文件放到Adobe AI中并不能编辑&#xff0c;经Google找到解决办法&#xff1a; %EPS exportgraphics(gcf,myVect…
阅读更多...
79.SpringBoot的核心注解

79.SpringBoot的核心注解

一、SpringBoot的核心注解 SpringBootApplication注解&#xff1a;这个注解标识了一个SpringBoot工程&#xff0c;它实际上是另外三个注解的组合&#xff0c;这三个注解是&#xff1a;SpringBootConfiguration&#xff1a;这个注解实际就是一个Configuration&#xff0c;表示启…
阅读更多...
细说MSVC和MinGW生成库的差异及如何相互调用

细说MSVC和MinGW生成库的差异及如何相互调用

文章目录 MSVC和MinGW的区别静态库和动态库的调用MSVC和MinGW 静态库互相调用MSVC和MinGW 动态库互相调用MSVC不同版本静态库、动态库调用MinGW不同版本动态库、静态库兼容性MSVC和MinGW的区别 MSVC是微软官方提供的C/C++编译器，与Windows平台紧密集成，得到微软官方的支持和…
阅读更多...
Linux中的各类时间 与 find命令的常用参数

Linux中的各类时间 与 find命令的常用参数

之前研究wal日志清理的副产物&#xff0c;wal日志名被修改后文件的哪个时间会变&#xff1f;应该如何删除&#xff1f;由此整理一下Linux中atime、mtime、ctime的区别&#xff0c;以及find的常见用法。 一、 Linux中的各类时间 1. 各类时间的定义 Linux中有三种用于文件时间戳…
阅读更多...
逻辑回归的输出值为什么可以作为概率？

逻辑回归的输出值为什么可以作为概率？

为什么逻辑回归的输出值可以作为概率&#xff1f;或者说为什么逻辑回归要求假设因变量符合伯努利分布&#xff1f; 这是因为逻辑回归&#xff08;Logistic Regression&#xff09;的Sigmoid函数是符合广义线性模型&#xff08;General Linear Model&#xff09;的伯努利分布&a…
阅读更多...
解决Uncaught SyntaxError: Cannot use import statement outside a module(at XXX)报错

解决Uncaught SyntaxError: Cannot use import statement outside a module(at XXX)报错

报错原因&#xff1a;这个错误通常是因为你正在尝试在一个不支持 ES6 模块语法的环境中使用 import 语句。这可能是因为你的代码是在一个只支持 CommonJS 或 AMD 模块系统的环境中运行的&#xff0c;或者你的代码运行的环境没有正确配置以支持 ES6 模块。如果是在浏览器环境&am…
阅读更多...
2024最佳住宅代理IP服务商推荐

2024最佳住宅代理IP服务商推荐

跨境出海已成为了近几年的最热趋势&#xff0c;大批量的企业开始开拓海外市场&#xff0c;而海外电商领域则是最受欢迎的切入口。新兴的tiktok、Temu&#xff0c;老牌的Amazon、Ebay&#xff0c;热门的Etsy、Mecari等等都是蓝海一片。跨境入门并不难&#xff0c;前期的准备中不…
阅读更多...
最新文章

Copyright @ 2022~2023