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>

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

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

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

相关文章

如何使用labelme上次的标记结果继续制作图像的标签

如何使用labelme上次的标记结果继续制作图像的标签

众所周知&#xff0c;labelme 软件可以对图像进行标签的制作&#xff0c;本文就来讲解一下如何根据labelme上次的标记结果&#xff0c;继续对图像的标签进行制作。 首先&#xff0c;确保创建的虚拟环境中已经安装了labelme软件&#xff0c;关于labelme的安装在此我就不赘述了&…
阅读更多...
[极客大挑战 2019]LoveSQL1

[极客大挑战 2019]LoveSQL1

万能密码测试&#xff0c;发现注入点 注意这里#要使用url编码才能正常注入 测试列数&#xff0c;得三列 查看table&#xff0c;一个是geekuser另一个是l0ve1ysq1 查看column&#xff0c;有id&#xff0c;username&#xff0c;password&#xff0c;全部打印出来&#xff0c;…
阅读更多...
【医学图像数据增强】切割-拼接(CS-DA)

【医学图像数据增强】切割-拼接(CS-DA)

切割-拼接CS-DA CS-DA 核心思想自然图像和医学图像之间的关键差异CS-DA 步骤确定增强后的数据数量 代码复现 CS-DA 核心思想 论文链接&#xff1a;https://arxiv.org/ftp/arxiv/papers/2210/2210.09099.pdf 大多数用于医学分割的数据增强技术最初是在自然图像上开发的&#x…
阅读更多...
如何实现动态代理(俩种方式)

如何实现动态代理(俩种方式)

文章目录 基于接口的动态代理&#xff1a;基于类的动态代理&#xff1a; 基于接口的动态代理&#xff1a; 通过Java的反射机制来动态创建代理对象&#xff0c;代理对象实现了一个或多个接口。 Java提供了java.lang.reflect包中的Proxy类和InvocationHandler接口来实现基于接口…
阅读更多...
ORM-06-jooq 入门介绍

ORM-06-jooq 入门介绍

拓展阅读 The jdbc pool for java.(java 手写 jdbc 数据库连接池实现) The simple mybatis.&#xff08;手写简易版 mybatis&#xff09; JOOQ JOOQ 可以通过数据库直接生成 java 代码&#xff0c;通过 flent-api 进行数据库操作。 SQL builder JOOQ 非常的灵活和强大。你可…
阅读更多...
加载服务端发送的模型文件_unity开发进阶

加载服务端发送的模型文件_unity开发进阶

加载服务端发送的模型文件 前言一、服务端搭建二、unity请求文件三、加载模型结语 前言 之前我们学习制作的都是离线状态下的东西&#xff0c;今天我们学习制作一个小demo。 内容就是我们用unity请求后台&#xff0c;接受后台发送过来的模型&#xff0c;然后将模型加载到场景中…
阅读更多...
0125-2-Vue深入学习1—mustache模板引擎原理

0125-2-Vue深入学习1—mustache模板引擎原理

[mustache] 是 “胡子”的意思&#xff0c;因为它的嵌入标记 {{ }} 旋转过来很像[胡子]&#xff0c;Vue中的 {{ }} 语法也引用了mustache&#xff0c;这也是我深入学习的目的。 1、原始js方式使 数据 变为视图 <ul id"list"></ul><script>var arr …
阅读更多...
k8s---安全机制

k8s---安全机制

k8s的安全机制&#xff0c;分布式集群管理工具&#xff0c;就是容器编排。安全机制的核心&#xff1a;APIserver。为整个集群内部通信的中介&#xff0c;也是外控控制的入口。所有的机制都是围绕apiserver来进行设计&#xff1a; 请求api资源&#xff1a; 1、认证 2、鉴权 …
阅读更多...
快速上手的AI工具-文心一言绘本创作

快速上手的AI工具-文心一言绘本创作

前言 大家好晚上好&#xff0c;现在AI技术的发展&#xff0c;它已经渗透到我们生活的各个层面。对于普通人来说&#xff0c;理解并有效利用AI技术不仅能增强个人竞争力&#xff0c;还能在日常生活中带来便利。无论是提高工作效率&#xff0c;还是优化日常任务&#xff0c;AI工具…
阅读更多...
js计算皮尔逊相关系数

js计算皮尔逊相关系数

代码如下; let XGX {correlationCoefficient(pA, pB) {let covXY -pA * pBlet varX pA * (1-pA) let varY (1-pB)* pBlet res covXY / (Math.sqrt(varX*varY, 2))return res},correlation(x,y){x[0.3,50.2,99.5,199.3,299,398];y[0.1,50,99.9,200,300,400];// 计算均值con…
阅读更多...
Linux操作系统概念

Linux操作系统概念

绪论​&#xff1a; “心灵纯洁的人&#xff0c;生活充满甜蜜和喜悦。——列夫托尔斯泰”&#xff0c;本章的主要内容是介绍了硬件的组成结构冯诺依曼体系结构以及操作系统的概念和操作系统的作用&#xff0c;本章的内容主要是理论他起到承上启下的作用只有理解了操作系统的运行…
阅读更多...
SAP创建资产号码和分配资产价值

SAP创建资产号码和分配资产价值

文章目录 1 Creat new asset2 View asset3 Create old asset4 Transfer value5 Summary 1 Creat new asset T-code(AS01) 2 View asset T-CODE : AS03 3 Create old asset T-code(as91) 4 Transfer value T-code(ABLDT) If there is following information a…
阅读更多...
Typora + PicGo + GitHub搭建图床

Typora + PicGo + GitHub搭建图床

Typora PicGo GitHub搭建图床 1. Typora下载破解 这一步自行百度 2. PicGo下载 PicGo is Here | PicGo 自行下载安即可 3. GitHub仓库设置 gitHub注册略过&#xff0c;如果不能访问请科学上网 创建仓库 生成访问token 点击右上角头像 -> setting -> 点击左边最…
阅读更多...
Hotspot源码解析-第25章-类的初始化

Hotspot源码解析-第25章-类的初始化

第25章-类的初始化 这一章主要是讲类的初始化操作&#xff0c;后续类加载章节中也会用到这一章的知识&#xff0c;只不过&#xff0c;这里就讲&#xff0c;是因为虚拟在初始化过程中&#xff0c;需要对基础类&#xff0c;比如System/Thread等类进行初始化操作&#xff0c;所以…
阅读更多...
第三季《乐队风暴》全国总决赛圆满落幕

第三季《乐队风暴》全国总决赛圆满落幕

2024年1月21日&#xff0c;由广东珠江、盛娱星汇海选联合主办的第三季《乐队风暴》全国海选歌手赛道全国总决赛在广州罗格镇MUSIC LIVE&#xff08;太古仓店&#xff09;正式打响&#xff0c;第三季《乐队风暴》全国海选开启以来共有超8000人报名渴望登上绚丽舞台&#xff0c;从…
阅读更多...
二叉搜索树、二叉排序树（查找、插入和删除）——Java版本

二叉搜索树、二叉排序树（查找、插入和删除）——Java版本

1. 概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树: 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点的值它的左右子树也分别…
阅读更多...
2024年mongodb自建三节点副本集详细教程

2024年mongodb自建三节点副本集详细教程

环境说明 系统centos7.9 自建服务器或云服务器&#xff0c;硬件要求不低于2核2G内存&#xff0c;20G硬盘&#xff0c;文件系统默认是ext4即可。 生产环境最好单独一个磁盘存放数据库&#xff0c;方便数据备份和还原&#xff0c;避免干扰到其他磁盘的运作。 mongodb 4.4.27 …
阅读更多...
HTML-表格

HTML-表格

表格 1.基本结构 一个完整的表格由&#xff1a;表格标题、表格头部、表格主体、表格脚注&#xff0c;四部分组成 表格涉及到的标签&#xff1a; table&#xff1a;表格 caption&#xff1a;标题 thead&#xff1a;表格头部 tbody&#xff1a;表格主体 tfoot&#xff1a;表格注…
阅读更多...
android:persistent和android:priority的区别，对进程优先级有什么影响？

android:persistent和android:priority的区别，对进程优先级有什么影响？

前言&#xff1a;写的apk因为系统busy给我kill了&#xff0c;(adj 900): kill all background&#xff0c;在AndroidManifest.xml添加android:persistent"true"后&#xff0c;被甲方要求不能这样做&#xff0c;还是得从adj改&#xff0c;把 priority改成1000 android…
阅读更多...
可Pin to Pin兼容DRV8837的国产H桥电机驱动芯片，具大电流，短gnd，短电源保护功能

可Pin to Pin兼容DRV8837的国产H桥电机驱动芯片，具大电流，短gnd，短电源保护功能

在国产牙刷&#xff0c;电子锁设计中&#xff0c;以前方案很多采用TI的DRV8837做直流电机驱动&#xff0c;随着中美贸易战和牙刷&#xff0c;电子锁等产品价格平民化普及&#xff0c;很多大厂在做国产化替代设计方案&#xff0c;GLOBALCHIP 的电机驱动芯片GC8837&#xff0c;价…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023