跟着pink老师前端入门教程-day03

news2024/10/6 20:27:29

6. 表格标签

6.1 表格的主要作用

主要用于显示、展示数据，可以让数据显示的规整，可读性非常好，特别是后台展示数据时，能够熟练运用表格就显得很重要。

6.2 基本语法

    <!--
    1. <table> </table> 是用于定义表格的标签。
    2. <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
    3. <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
    4. 字母 td 指表格数据（table data），即数据单元格的内容。 
    -->
    <table>
        <!-- 一行三列 -->
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
    </table>

6.3 表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示，突出重要性

<th> 标签标识HTML表格的表头部分（table head的缩写）

    <table>
        <!-- 一行三列 -->
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </table>

6.4 表格属性

表格属性要写到表格标签table里面

6.5 表格结构标签

表格过长时，为了更好的表示表格的语义，可以将表格分割成表格头部<thead>和表格主体<tbody>两大部分，都存放在<table></table>

<thead></thead>：表格的头部，其内部必须要有<tr>标签，一般是位于第一行

<tbody></tbody>：表格主体，主要用于放数据本体

6.6 合并单元格

1. 合并单元格方式

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”

2. 目标单元格（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码

跨列：最左侧单元格为目标单元格，写合并代码

3. 合并单元格的步骤

确定跨行还是跨列

找到目标单元格：写合并方式=合并的单元格数量

删除多余的单元格

7. 列表标签

表格是用来显示数据的，而列表是用来布局的，列表的最大特别：整齐整洁有秩序、作为布局会更加自由和方便

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表

7.1 无序列表（重点）

<ul>标签标识HTML页面中项目的无序列表，一般会以项目符号成仙咧表现，而列表现使用<li>标签定义
注意：
1. 无序列表的各个列表项之间没有顺序级别之分，是并列的
2. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或文字的做法是不被允许的
3.<li></li>之间相当于一个容器，可以容纳所有元素
4. 无序列表会带有自己的样式属性，但在实际使用时是通过CSS来设置
应用：侧边导航栏

7.2 有序列表（理解）

有序列表即为排列顺序的列表，其各个列表项会按照一定的顺序排列来定义

在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并使用<li>标签来定义列表项

注意：

1.<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或文字的做法是不被允许

2.<li></li>之间相当于一个容器，可以容纳所有元素

3. 有序列表会带有自己的样式属性，但在实际使用时是通过CSS来设置

7.3 自定义列表（重点）

使用场景：用于对术语或名词进行解释和描述，定义列表的列表前没有任何项目符号

在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用

注意

1. <dl></dl>只能包含 <dt>和 <dd>

2. <dt>和 <dd>个数没有限制，经常是一个 <dt> 对应多个<dd>

应用：底部导航栏

7.4 列表总结

注意

1. 遇到上面是一个标题，下面有几个围绕该标题说明的，就用自定义列表

2. 排列整齐，没有顺序，就用无序列表

8. 表单标签

使用表单目的是收集用户信息

8.1 表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

8.2 表单域

表单域是一个包含表单元素的区域

在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递

<form>会把它范围内的表单元素信息提交给服务器

    <p>表单域</p>
    <form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素空间
    </form>

8.3 表单控件（表单元素）

1. input输入表单元素

在英文单词中，input是输入的意思，而在表单元素中<input>标签用于收集用户信息

在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本、复选框、掩码后的文本控件、单选按钮、按钮等）

<input type="属性值"> <!--单标签-->

 type属性设置不同的属性值用来指定不同的控件类型：

除type属性外，<input>标签还有很多属性：

 1. name和value是每个表单元素都有的属性值，主要给后台人员使用

2. name表单元素的名字，要求单选按钮和复选框要有相同的name值

3. checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素

4. maxlength是用户可以在表单元素输入的最大字符数，一般较少使用

    <form action="demo.php" method="post" name="name1">
        <!-- text向里面输入文本 -->
        <!-- value 默认值，将输入的值送到后台 -->
        <!-- maxlength输入字段的最大值 -->
        用户名：<input type="text" name="user" value="输入用户名" maxlength="6"><br>
        <!-- password用于密码，有加密功能 -->
        密码：<input type="password"><br>

        <!-- 单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮 -->
        <!-- radio单选按钮，可以实现多选 -->
        <!-- name 是表单元素名字 性别单元按钮必须要有相同的名字name，才可以实现多选 -->
        性别：男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">
        人妖<input type="radio" name="sex" value="人妖"><br>
        <!-- checkbox 复选框 可以实现多选 -->

        爱好：吃饭 <input type="checkbox" value="吃饭"> 睡觉 <input type="checkbox" value="睡觉"> 打豆豆<input type="checkbox"
            value="打豆豆"><br>

        <!-- submit 提交按钮，默认文字是“提交”，可以通过value修改默认文字 -->
        <!-- 点击提交按钮，可以把表单域form里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册"><br>

        <!-- reset 提交按钮，默认文字是“重置”，可以通过value修改默认文字 -->
        <!-- 点击重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写"><br>

        <!-- button 普通按钮，无默认文字 可以通过value修改默认文字 -->
        <!-- button后期结合js 搭配使用 -->
        <input type="button" value="获取短信验证码"><br>

        <!-- 文件域使用场景：上传文件使用 -->
        上传文件：<input type="file">
    </form>

 注意：

1、有些表单元素想刚打开页面就默认显示几个文字怎么做?

答: 可以给这些表单元素设置 value 属性=“值” 
用户名: <input type="text" value="请输入用户名" />

2、页面中的表单元素很多，如何区别不同的表单元素?

答: name 属性：当前 input 表单的名字，后台可以通过这个 name 属性找到这个表单。页面中的表单很多，

name 的主要作用就是用于区别不同的表单。 

用户名: <input type="text" value="请输入用户名" name="username" />

name 属性后面的值，是自定义的 

radio (或者checkbox）如果是一组，我们必须给他们命名相同的名字 

<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
3、 如果页面一打开就让某个单选按钮或者复选框是选中状态?
答: checked 属性：表示默认选中状态。用于单选按钮和复选按钮。 
性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
4、如何让input表单元素展示不同的形态? 比如单选按钮或者文本框
答: type属性：type属性可以让input表单元素设置不同的形态. 
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="text" value=“请输入用户名”>
2. <lable>标签

<label>标签为input元素定义标注（标签）

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

核心：<label>标签for属性应当与相关元素的id属性相同

3. select下拉表单元素

使用场景：在页面中，有多个选项让用户选择，并且想要节约页面空间时，可以使用<select>标签控件定义下拉列表

注意

<select>中至少包含一对<option>

在<option>中定义selected=“selected”时，当前项即为默认选中项

4. textarea文本域元素

使用场景：当用户输入内容较多的情况下，可以使用<textarea>标签

在表单元素中，<textarea>标签是用于定义多行文本输入的条件

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板、评论

    <p>今日反馈</p>
    <!-- 一行rows写cols字，-->
    <textarea cols="50" rows="5">
    那些酗酒和吸毒的人，通常都知道这样会毁了自己，但是内心就是不够坚定，没有办法戒掉。这一类的软弱，就像我们前面谈过的那种难以面对创伤的情形，常常是一种人格上的特质。
    </textarea>

注意

1. 通过<textarea>标签可以轻松地创建多行文本输入框

2. cols=“每行中的字符数”，rows=“显示的行数”，实际开发中都是用CSS改变大小

总结
有三个名字非常相似的标签:
(1) 表单域 form 使用场景: 提交区域内表单元素给后台服务器
(2) 文件域 file 是input type 属性值 使用场景: 上传文件
(3) 文本域 textarea 使用场景: 可以输入多行文字, 比如留言板 网站介绍等

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

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

相关文章

MySQL的内部XA的二阶段提交

MySQL的内部XA的二阶段提交

内部XA 可能大家一听感觉很陌生&#xff0c;什么是XA&#xff1f;XA是一种分布式事务管理规范&#xff0c;MySQL内部有一个XA事务管理器来支持分布式事务&#xff0c;可能这么一听更懵了&#xff0c;那么我这么解释一下&#xff0c;MySQL是支持主从的&#xff0c;主从分布在不…
阅读更多...
导入失败，报错：“too many filtered rows xxx, “ErrorURL“:“

导入失败，报错：“too many filtered rows xxx, “ErrorURL“:“

一、问题&#xff1a; 注&#xff1a;前面能正常写入&#xff0c;突然就报错&#xff0c;导入失败&#xff0c;报错&#xff1a;“too many filtered rows xxx, "ErrorURL":" {"TxnId":769494,"Label":"datax_doris_writer_bf176078-…
阅读更多...
预处理/预编译详解（C/C++）

预处理/预编译详解（C/C++）

在上一篇的bolg中的编译与链接中提到过预处理&#xff0c;但只是较为简单的讲解&#xff0c;本篇将会对预处理进行详细的讲解。 其中在预处理中很重要的一个一个知识点是#define定义常量与宏&#xff0c;还区分了宏与函数的区别&#xff0c;以及#和##符号&#xff0c;还涉及条件…
阅读更多...
【Java SE】类和对象详解

【Java SE】类和对象详解

文章目录 1.什么是面向对象2. 类的定义和使用2.1 简单认识类2.2 类的定义格式 3. 类的实例化3.1 什么是实例化3.1.1 练习&#xff08;定义一学生类&#xff09; 3.2 类和对象的说明 4. this 引用5. 构造方法6. 对象的初始化6.1 默认初始化6.2 就地初始化 7. 封装7.1 封装的概念…
阅读更多...
Angular系列教程之单向绑定与双向绑定

Angular系列教程之单向绑定与双向绑定

文章目录 介绍单向绑定双向绑定在自定义组件中实现双向绑定属性总结 介绍 在Angular开发中&#xff0c;数据的绑定是非常重要的概念。它允许我们将应用程序的数据与用户界面进行交互&#xff0c;实现数据的动态更新。在本文中&#xff0c;我们将探讨Angular中的两种数据绑定方…
阅读更多...
学习k8s的应用（三）

学习k8s的应用（三）

一、k8s部署ngnix 1、一些查看命令 1-1、所有命令空间 kubectl get pod --all-namespaces kubectl get svc --all-namespaces1-2、指定命令空间 kubectl get pod -n yabin kubectl get svc -n yabin2、单节点集群兼容 # 因为目前只有一个master节点&#xff0c;默认安装后…
阅读更多...
workflow源码解析：ThreadTask

workflow源码解析：ThreadTask

1、使用程序&#xff0c;一个简单的加法运算程序 #include <iostream> #include <workflow/WFTaskFactory.h> #include <errno.h>// 直接定义thread_task三要素 // 一个典型的后端程序由三个部分组成&#xff0c;并且完全独立开发。即&#xff1a;程序协议算…
阅读更多...
解决C语言wprintf函数无法打印中文的问题

解决C语言wprintf函数无法打印中文的问题

在Visual Studio中&#xff0c;wchar_t[]字符数组用来存储UTF-16编码的字符串&#xff0c;但C语言库函数wprintf无法打印含有汉字的wchar_t字符串。 解决办法是用WriteConsoleW函数重新实现一个自己的my_wprintf函数。 #include <stdio.h> #include <Windows.h>//…
阅读更多...
PDF文件中字体乱码的一种简单的处理方法

PDF文件中字体乱码的一种简单的处理方法

要解决问题先得碰到问题&#xff0c;碰到问题就迈出了解决问题的关键一步。 问题PDF文件的下载链接 这文件用Acrobat打开&#xff0c;无法搜索文本&#xff0c;复制文本出来也都是乱码。但用sumatra PDF打开就不存在这个问题&#xff01; 用Acrobat的印前检查解决。prefligh…
阅读更多...
Python网络爬虫进阶：自动切换HTTP代理IP的应用

Python网络爬虫进阶：自动切换HTTP代理IP的应用

前言 当你决定做一个网络爬虫的时候&#xff0c;就意味着你要面对一个很大的挑战——IP池和中间件。这两个东西听起来很大上&#xff0c;但其实就是为了让你的爬虫不被封杀了。下面我就来给你讲讲如何搞定这些东西。 第一步&#xff1a;创建爬虫IP池的详细过程 首先&#xf…
阅读更多...
电商数据分析--常见的数据采集工具及方法

电商数据分析--常见的数据采集工具及方法

数据采集|数据运营和数据分析 走进数据&#xff0c;一起学习数据处理&#xff0c;数据分析&#xff0c;数据挖掘&#xff0c;一起成长&#xff0c;相信通过一起努力&#xff0c;未来2-3年我们都会成为公司的中流砥柱。懂数据&#xff0c;会分析&#xff0c;会挖掘&#xff0c;…
阅读更多...
mathtype2024版本下载与安装（mac版本也包含在内）

mathtype2024版本下载与安装（mac版本也包含在内）

安装包补丁主要是mathtype的安装包&#xff0c;与它的补丁。 详细安装过程&#xff1a; step1&#xff1a; 使用方法是下载完成后先安装MathType-win-zh.exe文件&#xff0c;跟着步骤走直接安装就行。 step2&#xff1a; 关闭之后&#xff0c;以管理员身份运行MathType7PJ.exe…
阅读更多...
【linux】visudo

【linux】visudo

碎碎念 visudo命令是用来修改一个叫做 /etc/sudoers 的文件的&#xff0c;用来设置哪些 用户 和 组 可以使用sudo命令。并且使用visudo而不是使用 vi /etc/sudoers 的原因在于&#xff1a;visudo自带了检查功能&#xff0c;可以判断是否存在语法问题&#xff0c;所以更加安全 …
阅读更多...
单节点部署 Gpmall 商城系统

单节点部署 Gpmall 商城系统

目录 实验中使用的技术 实验过程 实验中使用的技术 Java Redis Elasticsearch&#xff08;先不用&#xff09; Nginx MariaDB ZooKeeper Kafka 实验过程 1.Xnode1克隆虚拟机gpmall CRT连接&#xff08;root密码&#xff1a;000000&#xff09; 2修改主机名 [root…
阅读更多...
纵行科技参加“十四五”国家重点研发计划课题“工业化建造自动识别与数据采集（AIDC）成套技术”工程试点

纵行科技参加“十四五”国家重点研发计划课题“工业化建造自动识别与数据采集（AIDC）成套技术”工程试点

近期&#xff0c;“十四五”国家重点研发计划NQI课题组“产学研用”联合团队开展的“工业化建造自动识别与数据采集&#xff08;AIDC&#xff09;成套技术”工程建造场景集成应用试点&#xff08;第一阶段&#xff09;&#xff0c;在广州白云国际机场T3航站楼项目西指廊及北港湾…
阅读更多...
uniapp使用安装sass

uniapp使用安装sass

1.首先你要安装node-sass npm install node-sass --save-dev2.安装sass-loader npm install sass-loader --save-dev3.修改style标签&#xff0c;声明使用sass <style lang"scss" scoped>
阅读更多...
AI工具（20240116）：Copilot Pro，Fitten Code等

AI工具（20240116）：Copilot Pro，Fitten Code等

Copilot Pro Copilot Pro是微软推出的Copilot的付费增强版本,通过提供优先访问GPT-4等最新AI模型,大大提升用户的创造力和工作效率。该服务可与Microsoft 365订阅捆绑使用,支持在Word、Excel等Office应用内直接使用Copilot功能,帮助用户更快速地起草文档、电子邮件和演示文稿等…
阅读更多...
【CV】使用 matplotlib 画统计图，并用 OpenCV 显示静图和动图

【CV】使用 matplotlib 画统计图，并用 OpenCV 显示静图和动图

1. 效果 静图 动图 2.思路 准备数据使用 pyplot 画统计图图片写入流&#xff0c;流转图&#xff08;numpy&#xff09;matplotlib 颜色 RGB 转 OpenCV 颜色 BRG 4. 静图 代码过程有注释&#xff0c;很简单的实现。注意 matplotlib RGB 转 OpenCV BGR image image[:, :,…
阅读更多...
刘知远LLM入门到实战——自然语言基础

刘知远LLM入门到实战——自然语言基础

文章目录 自然语言处理基础词表示语言模型N-gram ModelNeural Language Model: 为什么NLP等领域的模型越来越大&#xff1f; 大模型会带来哪些新的范式和挑战&#xff1f; 自然语言处理基础 让计算机理解人类语言&#xff0c;图灵测试就是基于对话的方式。 研究历史&#xff…
阅读更多...
shell简单截取curl GET返回的body消息体

shell简单截取curl GET返回的body消息体

目录 需求背景&#xff1a; 示例&#xff1a; 解决方式&#xff1a; 需求背景&#xff1a; 用shell解析 curl命令GET到的消息体&#xff0c;获取body消息体里的某个字段的值,只是个简单的示例&#xff0c;可以在此基础上更改满足自己的需求 示例&#xff1a; curl一个API…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023