HTML标签（二）

 

目录

表格标签

表格的主要作用

表格的具体用法

表头单元格标签

表格属性

 表格结构标签

合并单元格

 合并单元格的方式：

跨行合并：

跨列合并：

列表标签

无序列表

有序列表

自定义列表

表单标签

表单域

 表单域的常用属性

 表单元素（表单控件）

<input>元素

type属性

 其他属性

表格标签

表格的主要作用

  1. 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理
  2. 表格不是用来布局页面的,而是用来展示数据的。

表格的具体用法

 <table>

            <tr>    <!--行-->

                <td>单元格内的文字</td>    <!--列-->

                ...

            </tr>

            ...

        </table>

 注意事项：

  1. <table> </table> 是用于定义表格的标签。
  2. <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
  3. <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
  4. 字母 td 指表格数据（table data），即数据单元格的内容。  

表头单元格标签

表头标签的具体实现：

<table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            ...
        </tr>
        ...
    </table>

  1. 一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.
  2.         <th> 标签表示 HTML 表格的表头部分(table head 的缩写)
  3. 表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会加粗居中

表格属性

表格属性一般通过css来设定。下面是html中的一些属性

属性名属性值描述
alignleft，right，center规定表格相对周围元素的对齐发生（页面中的位置）
border1或""规定表格单元是否有边框，默认位""，表示没有边框
cellpadding像素值规定单元边沿与其内容之间的空白，默认1像素（即文字与左边框的距离）
cellspacing像素值规定单元格之间的空白，默认2像素
width像素值或百分比规定表格的宽度

 表格结构标签

表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部 和 表格主体 两大部分.
在表格标签中，分别用：<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域. 这样可以更好的分清表格结构。 

 总结：

  1. <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
  2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。
  3. 以上标签都是放在 <table></table> 标签中。  

合并单元格

 

 合并单元格的方式：

跨行合并：

rowspan="合并单元格的个数"

​ 最上侧单元格为目标单元格, 写合并代码

跨列合并：

colspan="合并单元格的个数"

​ 最左侧单元格为目标单元格, 写合并代码

 方法：

  1. 先确定是跨行还是跨列合并。
  2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。
  3. 比如：<td colspan=“2”></td>。删除多余的单元格。

列表标签

表格是用来显示数据的，那么列表就是用来布局的。 
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。无序列表的基本语法格式如下：

<ul>

<li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...

</ul>
  1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。
  2. <ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
  3. <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。
  4. 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。有序列表的基本语法格式如下：

<ol> 
<li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... 
</ol>
  1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
  2. <li> 与 </li>之间相当于一个容器，可以容纳所有元素。
  3. 有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。

自定义列表

自定义列表的使用场景:

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。语法如下：

 <dl>   
<dt>名词1</dt>   
<dd>名词1解释1</dd>   
<dd>名词1解释2</dd> 
</dl>
  1.  <dl></dl>里面只能包含<dt>和<dd>。
  2. <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。
  3. <dd>里面可以容纳任何标签

 例子：

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。 

表单标签

 HTML 表单用于搜集不同类型的用户输入。

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

表单域

表单域是一个包含表单元素的区域。
在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。
<form> 会把它范围内的表单元素信息提交给服务器.
实现代码：

<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>

 表单域的常用属性

属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序的url地址，如果省略 action 属性，则 action 会被设置为当前页面。
methodget/post用于设置表单数据的提交方式
name名称用于指定表单的名称，以区分同一个页面中的多个表单域

 表单元素（表单控件）

<input>元素

type属性

在英文单词中，input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息。在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="属性值"  />

<input /> 标签为单标签 type 属性设置不同的属性值用来指定不同的控件类型  。

type 属性的属性值及其描述如下：

 其他属性

 

  1. name和value是每个表单元素都有的属性值主要给后台人员使用
  2. name表单元素的名字，要求单选按钮和复选框要有相同的name值
  3. checked属性主要针对于单选按钮和复选框主要作用一打开页面，就要可以默认选中某个表单元素.
  4. maxlength是用户可以在表单元素输入的最大字符数一般较少使用. 

<label>元素

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

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

 <label for="sex">男</label>

    <input type="radio" name="sex"  id="sex" />

 注意：<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<select>元素

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

<select>

   <option>选项1</option>

   <option>选项2</option>

   <option>选项3</option>

   ...

 </select>

//eg
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
  •  <option> 元素定义待选择的选项。
  • 列表通常会把首个选项显示为被选选项。
  • 您能够通过添加 selected 属性来定义预定义选项。

<textarea> 元素

  1. 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。
  2. 在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。
  3. 使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
<textarea rows="3" cols="20">   文本内容 </textarea>


//eg
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

通过 <textarea> 标签可以轻松地创建多行文本输入框。cols=“每行中的字符数” ，rows=“显示的行数”，

总结

input 输入表单元素,select 下拉表单元素 ,textarea 文本域表单元素.这三组表单元素都应该包含在form表单域里面,并且有 name 属性.

<form>

		<input type=“text " name=“username”>

		<select name=“jiguan”>  

		 <option>北京</option>

		</select> 

		<textarea name= "message">

		</textarea>

	</form>

 --------------------------------------------------------------------------------------------------------------------------------如果你觉得这篇文章对你有帮助的话，可以点赞关注一下吗❤，有问题的话也可以留言评论🌹🌹

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

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

相关文章

阿里云幻兽帕鲁服务器租用价格表，免费？

阿里云幻兽帕鲁服务器租用价格表，免费？

幻兽帕鲁异常火爆自建幻兽帕鲁服务器不卡又稳定&#xff0c;继腾讯云推出幻兽帕鲁自建服务器教程和4核16G幻兽帕鲁专用特价游戏服务器后&#xff0c;阿里云坐不住了&#xff0c;直接推出特价4核32G和4核16G的palworld专属游戏机&#xff0c;另外还可以申请免费3个月的4核8G无影…
阅读更多...
系统移植，GNU命令，Uboot移植

系统移植，GNU命令，Uboot移植

一.GNU命令 1、addr2line 把程序地址转换为文件名和行号 做调试 2、ar 建立&#xff0c;修改&#xff0c;提取归档文件 3、Id:GNU arm-none-linux-gnueabi-ld start.o main.o -Tmap.lds -o uart.elf 链接器 4、as 主要用来编译GNU编译器gcc输出的汇编文件&a…
阅读更多...
git本地分支的合并/切换分支时遇到的问题

git本地分支的合并/切换分支时遇到的问题

目录 第一章、本地分支的切换测试1.1&#xff09;切换之前的master分支下文件内容1.2&#xff09;切换到develop分支后修改文件1.3&#xff09;切回master分支出现报错&#xff1a; 第二章、解决方式2.1&#xff09;方式1&#xff1a;commit提交修改2.2&#xff09;方式2&#…
阅读更多...
电脑文件mfc140.dll丢失的解决方法指导，怎么快速修复mfc140.dll

电脑文件mfc140.dll丢失的解决方法指导，怎么快速修复mfc140.dll

mfc140.dll 文件的缺失是个普遍的问题&#xff0c;在日常使用中可能会时不时遇到。本文主要目的是详细介绍一旦遇到 mfc140.dll 文件缺失&#xff0c;应该如何进行下载和安装的步骤。不再赘言&#xff0c;下面就一起深入了解mfc140.dll丢失的解决方法指导。 一. mfc140.dll的作…
阅读更多...
VBA即用型代码手册之改变主窗口标题栏名称及隐藏工作表

VBA即用型代码手册之改变主窗口标题栏名称及隐藏工作表

我给VBA下的定义&#xff1a;VBA是个人小型自动化处理的有效工具。可以大大提高自己的劳动效率&#xff0c;而且可以提高数据的准确性。我这里专注VBA,将我多年的经验汇集在VBA系列九套教程中。 作为我的学员要利用我的积木编程思想&#xff0c;积木编程最重要的是积木如何搭建…
阅读更多...
IMU用于室内定位

IMU用于室内定位

在室内环境中&#xff0c;全球定位系统&#xff08;GPS&#xff09;的信号受限&#xff0c;因此&#xff0c;开发高精度的室内定位技术成为了研究的热点。近日&#xff0c;来自印度的研究团队采用了粒子滤波算法和多传感器融合技术&#xff0c;探讨了IMU和UWB测量数据的融合&am…
阅读更多...
Redis解决方案：NOAUTH Authentication required（连接jedis绑定密码或修改redis密码）

Redis解决方案：NOAUTH Authentication required（连接jedis绑定密码或修改redis密码）

Redis解决方案&#xff1a;NOAUTH Authentication required&#xff08;连接jedis绑定密码或修改redis密码&#xff09; Java使用jedis连接redis时出现错误NOAUTH Authentication required 一、问题报错和原因 本地设置了redis的密码&#xff0c;但在远程连接时并没有输入密…
阅读更多...
web系统架构基于springCloud的各技术栈

web系统架构基于springCloud的各技术栈

博主目前开发的web系统架构是基于springCloud的一套微服务架构。 使用的技术栈&#xff1a;springbootmysqlclickhousepostgresqlredisrocketMqosseurekabase-gatewayapollodockernginxvue的一套web架构。 一、springboot3.0 特性&#xff1a;Spring Boot 3.0提供了许多新特性…
阅读更多...
绘图软件Visio入门必备！Visio版本|下载|替代软件|模具图库|使用技巧

绘图软件Visio入门必备！Visio版本|下载|替代软件|模具图库|使用技巧

Visio是什么软件&#xff1f; Visio&#xff0c;全称为Microsoft Visio&#xff0c;是微软旗下的一款图表和矢量图形应用程序&#xff0c;属于Microsoft 365系列的一部分。Visio最初是由前美国软件公司Visio Corporation于1992年推出&#xff0c;微软于2000年收购了Visio Corp…
阅读更多...
【华为 ICT HCIA eNSP 习题汇总】——题目集6

【华为 ICT HCIA eNSP 习题汇总】——题目集6

1、IEEE 802.11g 标准支持的最大协商速率为&#xff08;&#xff09;。 A、300Mbps B、150Mbps C、54Mbps D、1200Mbps 考点&#xff1a;无线局域网 解析&#xff1a;&#xff08;C&#xff09; IEEE 802.11系列标准如下表&#xff1a; 标准数据传输速率主要技术IEEE 802.111M…
阅读更多...
20240124在GoogleEarth中输入GPS坐标查看位置

20240124在GoogleEarth中输入GPS坐标查看位置

20240124在GoogleEarth中输入GPS坐标查看位置 2024/1/24 18:08 缘起&#xff1a;斯蒂夫●霍金邀请来自未来的时间旅行者赴宴&#xff01; 有空我也想过去围观一下&#xff01; 于是好奇地找了一下这个地方&#xff01; https://movie.douban.com/subject// 与霍金一起了解宇宙…
阅读更多...
7、机器学习中的数据泄露（Data Leakage）

7、机器学习中的数据泄露（Data Leakage）

找到并修复这个以微妙的方式破坏你的模型的问题。 数据泄露这个概念在kaggle算法竞赛中经常被提到，这个不同于我们通常说的生活中隐私数据暴露，而是在竞赛中经常出现某支队伍靠着对极个别feature的充分利用，立即将对手超越，成功霸占冠军位置，而且与第二名的差距远超第二名…
阅读更多...
低代码是不需要代码？

低代码是不需要代码？

吐槽 我看到网上把低代码直接定义为需要很少甚至不需要代码&#xff0c;这是一种错误的描述。试想向一个不了解这个概念的人这样解释&#xff0c;人家还以为你用“意念”写出来的应用程序。 我的理解 所谓低&#xff0c;指的是低量&#xff0c;少量&#xff0c;所以低代码应…
阅读更多...
Leetcode刷题笔记题解（C++）：LCR 153. 二叉树中和为目标值的路径

Leetcode刷题笔记题解（C++）：LCR 153. 二叉树中和为目标值的路径

思路&#xff1a;利用回溯的思想&#xff0c;回溯的退出条件为当前节点为空&#xff0c;是符合路径的判断条件为路径和为目标值且叶子节点包含了&#xff0c;代码如下&#xff1a; /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *…
阅读更多...
【Android】Android中的系统镜像由什么组成？

【Android】Android中的系统镜像由什么组成？

文章目录 总览Boot Loader 的加锁与解锁Boot 镜像内核RAM diskARM 中的设备树 (Device Tree) /System 和/Data 分区镜像参考 总览 各种Android设备都只能刷专门为相应型号的设备定制的镜像。 厂商会提供一套系统镜像把它作为“出厂默认”的 Android 系统刷在设备上。 一个完…
阅读更多...
中国城市二氧化碳排放数据，农业服务业工业等行业排放量均有~有shp和excel格式

中国城市二氧化碳排放数据，农业服务业工业等行业排放量均有~有shp和excel格式

基本信息. 数据名称: 中国城市二氧化碳排放数据 数据格式: Shpexcel 数据几何类型: 面 数据坐标系: WGS84 数据来源&#xff1a;网络公开数据 数据字段&#xff1a; 序号字段名称字段说明1ny农业排放量&#xff08;万吨&#xff09;2fwy服务业排放量&#xff08;万吨…
阅读更多...
无刷电机学习-方波电调 电路篇

无刷电机学习-方波电调 电路篇

想要彻底的理解无刷电机的驱动&#xff0c;那必然少不了学习他的驱动电路和程序。这里用开源的AM32无刷电调&#xff08;方波驱动&#xff09;来作为学习无刷电机笔记。 https://github.com/AlkaMotors附上作者github地址 AM32_Hardware: 基于AT32MCU的AM32PCB另一位大佬开源…
阅读更多...
【python文件】生成的csv文件没两行数据之间有一个空行

【python文件】生成的csv文件没两行数据之间有一个空行

问题描述 用python代码将数据写入csv文件&#xff0c;但生成的csv文件没两行数据之间有一个空行&#xff0c;如下图所示&#xff1a; 解决办法 在open函数中添加newline&#xff0c;如以下代码所示&#xff0c;即可解决这一问题。 with open(r"C:\Users\xxx\Desktop\DR…
阅读更多...
Java实现桃花峪滑雪场租赁系统 JAVA+Vue+SpringBoot+MySQL

Java实现桃花峪滑雪场租赁系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 游客服务2.2 雪场管理 三、数据库设计3.1 教练表3.2 教练聘请表3.3 押金规则表3.4 器材表3.5 滑雪场表3.7 售票表3.8 器材损坏表 四、系统展示五、核心代码5.1 查询教练5.2 教练聘请5.3 查询滑雪场5.4 滑雪场预定5.5 新…
阅读更多...
Universal Approximation Capabilities of Mixture of Weibulls （混合韦布尔分布的万能近似）

Universal Approximation Capabilities of Mixture of Weibulls （混合韦布尔分布的万能近似）

找了好久都没有找到混合韦布尔分布是否有万能近似性质&#xff0c;下面这个算是一点线索&#xff0c;不过看不太懂。 回答1&#xff1a;Ultimately this sounds tautological: just define “well-behaved” as any density that can be approximated, according to some speci…
阅读更多...
最新文章

Copyright @ 2022~2023