当前位置: 首页 > article >正文

表格、列表和表单标签

表格标签

  1. 表格不是用来布局页面的,而是用来展示数据的,是双标签
  2. 表格的具体用法:
<table>
	<tr>
		<td>单元格内的文字</td>
         ...
     </tr>
     	 ...
</table>
  • <table> </table> 是用于定义表格的标签。
  • <tr> </tr> 标签用于定义表格中的行,必须嵌套在 <table> </table>标签中。
  • <td> </td> 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。表格中没有列的概念
  • 字母 td 指表格数据(table data),即数据单元格的内容。

表头单元格

  1. 表头单元格也是单元格,常用于表格第一行突出重要性,一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示.
  2. <th> 标签表示 HTML 表格的表头部分(table head 的缩写)
  3. 快捷键shift+alt可以批量修改

在这里插入图片描述

表格属性

在这里插入图片描述

  1. 表格标签这部分属性我们实际开发我们不常用,后面通过 CSS 来设置
  2. 目的:记住单词CSS通用,直观感受表格的外观形态
  3. 注意,这些属性要写到table标签里面去

在这里插入图片描述

//如果想要没有边框,需要cellspacing = 0
<table align="center" border=1 cellpadding=20 cellspacing=0>

在这里插入图片描述

表格结构标签

  1. 将表格分割成表格头部和表格主体两大部分
  2. <thead>标签 表格的头部区域<tbody>标签表格的主体区域
  3. <thead> 内部必须拥有 <tr> 标签, 一般是位于第一行
  4. 以上标签都是放在 <table></table> 标签中

合并单元格

  1. 合并单元格方式
  • 跨行合并rowspan = “合并单元格的个数” ,最上侧单元格为目标单元格, 写合并代码
  • 跨列合并colspan = “合并单元格的个数”,最左侧单元格为目标单元格, 写合并代码
    在这里插入图片描述
  1. 合并单元格的步骤
  • 先确定是跨行还是跨列合并。
  • 找到目标单元格,写上合并方式 = 合并的单元格数量。
  • 比如:<td colspan=“2”></td>,再删除多余的单元格。

列表标签

  1. 表格是用来显示数据的,那么列表就是用来布局的
  2. 列表可以分为三大类:无序列表、有序列表和自定义列表

无序列表(重点)

  1. <ul> 标签表示 HTML 页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用 <li> 标签定义
  2. 无序列表的基本语法格式如下:
<ul> 
  <li>列表项1</li>   <li>列表项2</li>   <li>列表项3</li>   		 	 
</ul>
  1. 无序列表的各个列表项之间没有顺序级别之分,是并列的。
  2. <ul></ul>只能嵌套 <li></li>,直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
  3. <li></li> 之间相当于一个容器,可以容纳所有元素
  4. 无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。

有序列表

  1. 有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。
  2. HTML 标签中,<ol> 标签用于定义有序列表,列表排序以数字来显示,并且使用 <li> 标签来定义列表项。有序列表的基本语法格式如下:
<ol>   
	<li>列表项1</li>   <li>列表项2</li>   <li>列表项3</li>
</ol>
  1. <ol></ol>只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
  2. 运行时,会自动添加数字
  3. <li></li>之间相当于一个容器,可以容纳所有元素
  4. 有序列表会带有自己样式属性,但在实际使用时,我们会使用 CSS 来设置

自定义列表(重点)

  1. 常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号
  2. 在 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>

在这里插入图片描述

表单标签

  1. 使用表单目的是为了收集用户信息
  2. HTML 中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和 提示信息3个部分构成

在这里插入图片描述

表单域

  1. 表单域是一个包含表单元素的区域
  2. HTML 标签中, <form> 标签用于定义表单域,以实现用户信息的收集和传递
  3. <form> 会把它范围内的表单元素信息提交给服务器.
<form action = "url地址" method = "提交方式" name = "表单域名称"> 各种表单元素控件 </form>

在这里插入图片描述

表单元素

  1. 表单元素中 <input> 标签用于收集用户信息
  2. <input> 标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)
  3. <input /> 标签为单标签type 属性设置不同的属性值用来指定不同的控件类型
<input type="属性值"  />
  1. type 属性的属性值及其描述如下:

在这里插入图片描述

  1. type 属性外,<input>标签还有其他很多属性,其常用属性如下:

在这里插入图片描述

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

在这里插入图片描述

  1. namevalue是每个表单元素都有的属性,主要给后台人员使用
  2. 单选按钮和复选框可以设置checked属性,当页面打开的时候就可以默认选中这个按钮

在这里插入图片描述


http://www.kler.cn/a/472515.html

相关文章:

  • 用户界面软件02
  • Ungoogled Chromium127 编译指南 MacOS篇(八)- 开始编译
  • Git撤销指定commit并更新远端仓库
  • Kubernetes集群架构
  • CS·GO搬砖流程详细版
  • JVM实战—13.OOM的生产案例
  • JAVA开发学习Day8
  • hive在大数据体系里面起到什么作用
  • CSS 伪类和伪元素:为你的选择器注入更多活力
  • 开源免费GitHub搭建资源分享站
  • NGINX 支持 UDP 协议
  • 【机器学习】农业 4.0 背后的智慧引擎:机器学习助力精准农事决策
  • Element-plus、Element-ui之Tree 树形控件回显Bug问题。
  • 【数据结构-堆】力扣3296. 移山所需的最少秒数
  • 第P5周-Pytorch实现运动鞋品牌识别
  • 英伟达开启“AI 代理时代” | AI日报0108
  • 新手入门 React .tsx 项目:从零到实战
  • Servlet 和 Spring MVC:区别与联系
  • 51c自动驾驶~合集45
  • h264之多视点mvc编码及解码过程(JMVC平台举例)
  • CSS语言的数据结构
  • 条款47:请使用 traits classes 表现类型信息(Use traits classes for information about types)
  • 【利用 Unity + Mirror 网络框架、Node.js 后端和 MySQL 数据库】
  • c#委托和事件
  • 30、论文阅读:基于小波的傅里叶信息交互与频率扩散调整的水下图像恢复
  • 大数据技术(九)—— HBase优化