前端开发:表格、列表、表单

server/2025/1/15 22:37:35/
htmledit_views">

1.表格标签

align 是表格相对于周围元素的对齐方式. align="center" (表格相对于网页剧中对齐)

border 表示边框. 1px 表示有边框(数字越大, 边框越粗), "" 表示没边框.

cellpadding: 内容距离边框的距离, 默认 1 像素

cellspacing: 单元格之间的距离. 默认为 2 像素

width / height: 设置尺寸

table 标签: 表示整个表格

tr: 表示表格的一行 t是table的缩写 r是row行的缩写;依次类推;

td: 表示一个单元格

th: 表示表头单元格. 会居中加粗

thead: 表格的头部区域         //thead就是为了区分表头和表身体的,只是范围;

tbody: 表格得到主体区域.

单元格合并

跨行合并 : rowspan="n"
跨列合并 : colspan="n"
1. 先确定跨行还是跨列
2. 找好目标单元格 ( 跨列合并 , 默认向右合并 ; 跨行合并 , 默认向下合并 )
3. 删除的多余的单元格
 举例:
<table align = "center" border = "1" cellpadding = "20" cellspacing = "0" width = "500"
height = "500" >
<thead>
<tr>
<th> 姓名 </th>
<th> 性别 </th>
<th> 年龄 </th>
</tr>
</thead>
<tbody>
<tr>
<td> 张三 </td>
<td rowspan="2" > </td>
<td> 10 </td>
</tr>
<tr>
<td> 张三 </td>
<td> </td> //注释掉
<td> 10 </td>
</tr>
<tr>
<td> 张三 </td>
<td colspan="2" > </td>
<td> 10 </td>
</tr>
</tbody>
</table>

2.列表标签

2.1无序列表

 快捷键:ul>li*4 回车        //快速生成4个标签

ul:“unordered list”(无序列表)

li:list列表

<h1>这是无序标签</h1>

<!-- disc  square   circle -->        //type类型有3种;实心圆,方块,空心圆;

    <ul type="disc">        

        <li>这是内容1</li>

        <li>这是内容2</li>

        <li>这是内容1</li>

        <li>这是内容1</li>

    </ul>

2.2有序列表 

ol:order list        //有序列表

li:list         //列表

他自带序号;也可以通过type属性进行自我设置;变成罗马数字

<!-- a 表示小写英文字母编号 A 表示大写英文字母编号 i 表示小写罗马数字编号

    I 表示大写罗马数字编号 1 表示数字编号(默认) -->

<ol type="a" start="2"> //从第二个数开始计数;

        <li>你好</li>

        <li>hello</li>

        <li>hi</li>

</ol>

 2.3自定义列表

<dl>自定义一个列表

<dt> 这个列表叫什么名字

<dd>每一个列表是什么;

 <h1>这是一个自定义列表</h1>

    <dl>

        <dt>自定义列表显示内容</dt>

        <dd>猫</dd>

        <dd>兔</dd>

        <dd>阿叶君</dd>

    </dl>

3.表单标签 

使用表单标签来完成和服务器的交互;

表单域 : 包含表单元素的区域 . 重点是 form 标签 . //表示的是一个区域标签;里面填写各种东西
表单控件 : 输入框 , 提交按钮等 . 重点是 input 标签

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。


http://www.ppmy.cn/server/158670.html

相关文章

【Linux】Linux基础命令(二)

locate命令 locate命令可以用于快速查找文件的路径&#xff0c;比如我要查找所有.cpp文件的路径&#xff1a; sudo locate *.cppless 命令 less命令和more命令类似&#xff0c;都是查看文件内容&#xff0c;但less命令更强大 可以使用光标上下&#xff08;左右&#xff09;…

操作笔记:使用Everything工具实现大文件快速上传至虚拟机

问题描述&#xff1a; 在尝试通过Xhell上传大文件时&#xff0c;遇到了文件大小超出限制的异常。为了克服这个障碍并能高效地传输大文件到虚拟机中&#xff0c;可以采用以下解决方案。 解决方案概述&#xff1a; 利用Everything工具设置HTTP服务器功能&#xff0c;以此来实现…

【HarmonyOS NAPI 深度探索4】安装开发环境(Node.js、C++ 编译器、node-gyp)

【HarmonyOS NAPI 深度探索4】安装开发环境&#xff08;Node.js、C 编译器、node-gyp&#xff09; 要使用 N-API 开发原生模块&#xff0c;第一步就是配置好开发环境。虽然HarmonyOS Next中提供了DevEco-Studio一站式IDE&#xff0c;可以直接帮助我们完成开发环境的搭建&#…

HTML5 语义元素:网页构建的新时代

HTML5 语义元素&#xff1a;网页构建的新时代 HTML5&#xff0c;作为网页开发的新标准&#xff0c;引入了一系列语义元素&#xff0c;这些元素不仅为网页内容提供了明确的含义&#xff0c;还极大地提高了网页的可访问性和搜索引擎优化&#xff08;SEO&#xff09;效果。本文将…

2501,wtl显示html

原文 在MFC程序中有专门封装的CHTMLView来显示超文本文件,如果在对话框中显示网页可用CDHTMLDialog,甚至可实现多页超文本向导风格的对话框,但是在WTL中却没有单独封装超文本的对应控件,这是因为COM组件的使用和编写本来就是ATL的强项,WTL扩展的是ATL欠缺的桌面应用的功能部分…

潜力巨大但道路曲折的量子计算:探索未来科技的无限可能

### 潜力巨大但道路曲折的量子计算&#xff1a;探索未来科技的无限可能 在科技日新月异的今天&#xff0c;量子计算作为一项前沿技术&#xff0c;正逐渐从理论走向实践&#xff0c;成为科技界乃至全球关注的焦点。它以其独特的计算方式和巨大的潜力&#xff0c;被誉为能够颠覆…

Android SystemUI——使用Dagger2加载组件(四)

SystemUI 是 Android 系统中的一个重要模块,负责绘制系统栏(如状态栏、导航栏)、锁屏、快捷设置等用户界面元素。由于其复杂性,良好的架构设计和依赖管理对于保持代码的可维护性和扩展性至关重要。这就是 Dagger2 在此发挥重要作用的地方。 一、Dagger2介绍 Dagger2 是一个…

day09_kafka高级

文章目录 kafka高级今日课程内容核心概念整理Kafka的数据位移offset**为什么 Kafka 的 offset 就像是“书签”&#xff1f;****实际意义** Kafka的基准/压力测试测试生产的效率测试消费的效率 Kafka的分片与副本机制kafka如何保证数据不丢失生产者端Broker端消费者端相关参数 K…