HTML标签(下)

一、表格标签

1.1表格的主要作用

主要用于显示、展示数据

1.2表格的基本语法

<td>单元格中的文字</td>

如果是表头单元格的话,eg:姓名,年龄<th> 姓名</th>(th是table head);

作用:表头会加粗居中

 1.3表格属性(不常用)

目的:1.记住英语单词

           2.更能直观的感受表格的外观形态

 理解:cellpadding是指文字与单元格之间的距离

 cellspacing是指单元格与单元格之间的距离,eg:cellspacing ="0",那么就没有空隙。

1.4小说排行榜

1.5表格的结构标签

<thead></thead>表头部分,里边必须有<tr></tr>,再里边有<th></th>

<tbody></tbody>表格的主体部分

1.6合并单元格

1.合并单元格的方式

1°跨行合并:rowspan="合并单元格的个数"

2°跨列合并:   colspan="合并单元格的个数"

2.目标单元格

简记:如果是同一行,那就是跨列合并

           如果是同一列,那就是跨行合并

3.合并单元格的步骤

1°先分析是跨行还是跨列

2°如果是跨列,那就先找到最左边的单元格是第几行的(跨几列数字就填多少),

(如果是跨行,那就先找到最上边的单元格是第几行的)

然后就是<td rowspan="2"> 单元格的内容</td>。

 3°删除多余的单元格,如果说是跨列,第二个和第三个需要合并,那就是

<tr>

        <td>单元格内容</td>

        <td colspan="2">单元格内容</td>

</tr>

 跨行:

 二、列表标签

表格用来展示数据,那么列表就是用来布局的

列表的特点是整齐、整洁、有序,它作为布局会更加自由和方便。

2.1无序列表(重点)

<ul>

        <li>内容随意</li>

        <li>   <!--也可以是-->

                 <p>123</p>

        </li>

        <li></li>

</ul>

注:<li></li>里边可以放任何东西,但是<ul></ul>里边只能有<li></li>

2.2有序列表 (理解)

<ol>

        <li>列表一</li>

        <li>列表二</li>

        <li>列表三</li>

</ol>

有序列表与无序列表基本一致,但是它要求列表一二三有顺序要求,eg:排行榜

 2.3自定义列表(重点)

使用场景:

自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。

以下图为例

<dl>

        <dt>关于我们</dt>

        <dd>新浪微博</dd>

        <dd>官方微信</dd>

        <dd>联系我们</dd>

</dl>

2.4列表总结

三、表单标签

表单包括表单域、表单控件(也可以称之为表单元素)和提示信息

3.1表单域

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

<form></form>标签用于定义表单域,会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="get或post" name="表单域名称">

        各种表单元素控件

</form>

谨记两点:

1°在写表单元素之前,应该有个表单域把他们进行包含。

2°表单域是form标签。

3.2表单控件(元素)

3.2.1<input>输入表单元素

表单元素中<input>标签用于收集用户信息。

<input>标签中,包含一个type属性,根据不同的type属性,选择文本字段或者按钮等控件。

<input />为单标签

<input type="属性值" />

在单选按钮和复选框中,name和value是必须写的,主要是给后台人员看的。单选按钮和复选框的name值都是一样的。value主要是给后台一个信息用户到底选择了哪一个。  

(checked="checked"是指一打开页面就会有一个默认选项)

补:写name的必要性

如果单选按钮不写相同的name值,那么最后所有的选项都会被选择。只有这样,才能真正实现多选一。 

 (重点)label标签

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

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

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

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

3.2.2select下拉表单元素

比如:<form>

                籍贯:<select>

                                <option>选项一</option>

                                <option>选项二</option>

                        </select>

             </form>

3.2.3textarea文本域元素

四、综合案例

 

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

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

相关文章

用Python处理PDF:拆分与合并PDF文档

PDF文档在信息共享和数据保存方面被广泛使用&#xff0c;处理PDF文档也成为常见需求。其中&#xff0c;合并和拆分PDF文档能够帮助我们更有效地管理PDF文档&#xff0c;使文档内容分布更合理。通过合并&#xff0c;可以将相关文档整合成一个文件&#xff0c;以便更好地组织和提…

深入了解C编译管道

文章目录 引言1. 预处理阶段2. 编译阶段3. 汇编阶段4. 链接阶段5.流程图结论 引言 C编译管道是软件开发中至关重要的工具&#xff0c;它负责将C语言源代码转换为可执行的机器代码。理解C编译管道的工作原理有助于提高代码的可读性、可维护性&#xff0c;并有助于优化生成的可执…

20231222给NanoPC-T4(RK3399)开发板的适配原厂Android10的挖掘机方案并跑通AP6398SV

20231222给NanoPC-T4(RK3399)开发板的适配原厂Android10的挖掘机方案并跑通AP6398SV 1、简略步骤&#xff1a;rootrootrootroot-X99-Turbo:~/3TB/3399-android10$ cat Rockchip_Android10.0_SDK_Release.tar.gz0* > Rockchip_Android10.0_SDK_Release.tar.gz rootrootrootro…

SUSE Linux服务器使用zypper安装nginx

SUSE Linux 的云服务器用户&#xff0c;不能yum,安装软件&#xff0c;可通过 zypper 快速安装软件。 使用 root 账号登录 openSUSE 操作系统的云服务器。 执行 zypper service-list 或 zypper sl 命令 列出软件源 安装软件包 执行 zypper search 或 zypper se 命令&#…

扫码展示多视频怎么做?视频的活码制作技巧

现在扫码看视频的应用场景越来越多&#xff0c;用这种方式不仅能够简单有效的低成本完成视频传播&#xff0c;而且也符合用户的习惯。那么当需要将视频制作二维码来展示内容时&#xff0c;多个视频文件生成二维码的制作方法是怎么操作的呢&#xff1f;下面教大家使用视频二维码…

运用ETL快速拉取吉客云平台订单信息

吉客云介绍 吉客云是一家中国的云计算服务提供商。它提供了包括云服务器、云数据库、云存储、云网络等各种云计算产品和解决方案&#xff0c;帮助企业和个人搭建高效、可靠、安全的云计算环境。 吉客云特点和优势&#xff1a; 大规模分布式架构&#xff1a;吉客云基于自主研发…

安装nodejs,配置环境变量并将npm设置淘宝镜像源

安装nodejs并将npm设置淘宝镜像源 1. 下载nodejs 个人不喜欢安装包&#xff0c;所以是下载zip包的方式。这里我下载的node 14解压包版本 下载地址如下&#xff1a;https://nodejs.org/dist/v14.15.1/node-v14.15.1-win-x64.zip 想要其他版本的小伙伴去https://nodejs.org/di…

【【迭代16次的CORDIC算法-verilog实现】】

迭代16次的CORDIC算法-verilog实现 -32位迭代16次verilog代码实现 CORDIC.v module cordic32#(parameter DATA_WIDTH 8d32 , // we set data widthparameter PIPELINE 5d16 // Optimize waveform)(input …

opencv入门到精通——改变颜色空间

目录 目标 改变颜色空间 对象追踪 如何找到要追踪的HSV值&#xff1f; 目标 在本教程中&#xff0c;你将学习如何将图像从一个色彩空间转换到另一个&#xff0c;像BGR↔灰色&#xff0c;BGR↔HSV等 除此之外&#xff0c;我们还将创建一个应用程序&#xff0c;以提取视频中的…

Mapmost Alpha上新啦!新增移动端的丝滑且强大功能!

本文目录 一、Mapmost Alpha 介绍1.1 Maopmost 数字孪生平台1.2 Mapmost 产品能力1.3 Mapmost Alpha 产品优势 二、移动端功能介绍三、Mapmost Alpha 总结 一、Mapmost Alpha 介绍 Hello&#xff0c;各位铁铁&#xff0c;今天给大家推荐一款好用的三维城市场景创建工具。 这款…

k8s部署elastic+kibana

1.软件版本说明 1.1软件版本说明 软件版本kubernetes1.23.17elasticsearch7.17.3kibana7.17.3 1.2硬件环境说明 宿主机使用windows10安装vmware17.5.0&#xff0c;虚拟机安装linux系统&#xff08;centos7.9&#xff09; 说明&#xff1a; elasticserch和kibana的版本尽量…

NTFS权限与文件系统:深入解析与实践指南

在当今的信息时代&#xff0c;数据安全和管理成为了每个组织和个人的重要议题。NTFS权限作为Windows操作系统中的一个核心功能&#xff0c;为文件和文件夹的安全管理提供了强大的支持。本文将深入解析NTFS权限的基本概念&#xff0c;并通过实际操作指导如何有效地利用这些权限来…

MySQL的hash索引

MySQL有BTree 索引及Hash索引等索引类型&#xff0c;BTree索引类型是MySQL采用最多的索引类型。Hash索引使用场景比较有限&#xff0c;文章将从Hash索引的底层结构出发&#xff0c;来分析Hash索引的利与弊。 1 hash数据结构 hash数据结构由键、哈希函数及哈希表组成。 键&am…

【3D生成与重建】SSDNeRF:单阶段Diffusion NeRF的三维生成和重建

系列文章目录 题目&#xff1a;Single-Stage Diffusion NeRF: A Unified Approach to 3D Generation and Reconstruction 论文&#xff1a;https://arxiv.org/pdf/2304.06714.pdf 任务&#xff1a;无条件3D生成&#xff08;如从噪音中&#xff0c;生成不同的车等&#xff09;、…

提前预测刚体移动轨迹 预测运动轨迹

提前预测刚体移动轨迹 预测运动轨迹 一、效果二、介绍三、脚本RigidbodyExtension.cs 计算工具类DrawLine.cs 画线工具类 四、资源分享 一、效果 二、介绍 通过计算Unity物理系统的运动方位来判断下一步移动的位置&#xff0c;主要用于物体运动的提前预测&#xff0c;通常使用…

比 Eslint 快 100 倍!新一代 JS Linter 发布!

比 Eslint 快 100 倍&#xff01;新一代 JS Linter 发布&#xff01; Oxc 是用 Rust 编写的 JavaScript 语言的高性能工具集合。他们的目标是构建 JavaScript 的基本编译器工具&#xff1a;解析器、linter、格式化程序、转译器、压缩器和解析器等等&#xff0c;这次他们发布了一…

3.18 Linux 防火墙

1、iptables 概述 a. 概念介绍 自Centos7.X开始,系统自带的防火墙是filewalld,但是也同样支持iptables, 我们仍然可以用iptables来作为防火墙。 netfilter/iptables&#xff1a;IP信息包过滤系统&#xff0c;它实际上由两个组件netfilter 和 iptables 组成。 netfilter 组件…

Nginx 安装(源码编译安装)

Nginx服务器提供了Windows和Linux版本&#xff0c;本文为Linux环境下Nginx服务器的详细安装步骤。 安装环境&#xff1a; Linux服务器操作系统&#xff1a;CentOs 8.1.1911 Nginx版本&#xff1a;1.21.4&#xff08;Linux&#xff09; 安装步骤&#xff1a; 1、安装GCC、aut…

过度加大SSD内部并发何尝不是一种伤害-part1

之前存储随笔有发布过一篇关于如何通过IO并发度提升性能相关的文章&#xff1a; 扩展阅读&#xff1a;SSD基础架构与NAND IO并发问题探讨 SSD整体优化策略就是要低延迟&#xff0c;高带宽&#xff0c;增加NAND的并发度。 本文&#xff0c;我们从另外一个角度来做一些讨论。现…

MySQL代码笔记

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;题目大解析&#xff08;3&#xff09; 目录 &#x1f449;&#x1f3fb;表的增删查改创建表格&…
最新文章