当前位置：首页 > news >正文

【海贼王航海日志：前端技术探索】HTML你学会了吗？(二)

news 文章来源：https://blog.csdn.net/weixin_74809706/article/details/140857716 2025/4/29 10:43:18

1 -> HTML常见标签

1.1 -> 表格标签

1.1.1 -> 基本使用

1.1.2 -> 合并单元格

1.2 -> 列表标签

1.3 -> 表单标签

1.3.1 -> form标签

1.3.2 -> input标签

1.4 -> label标签

1.5 -> select标签

1.6 -> textarea标签

1.7 -> 无语义标签：div & span

2 -> Emmet快捷键

3 -> HTML特殊字符

4 -> 小结

1 -> HTML常见标签

1.1 -> 表格标签

1.1.1 -> 基本使用

<table>标签：表示整个表格。
<tr>标签：表示表格的一行。
<td>标签：表示一个单元格。
<th>标签：表示表头单元格。会居中加粗。
<thead>标签：表格的头部区域(注意和<th>标签区分，范围比<th>标签要大)。
<tbody>标签：表格得到主体区域。

<table>标签包含<tr>标签，<tr>标签包含<td>标签或者<th>标签。

表格标签有一些属性，可以用于设置大小边框等。但是一般使用CSS方式来设置。

这些属性都要放到<table>标签中。

align是表格相对于周围元素的对齐方式。align="center" (不是内部元素的对齐方式)。
border表示边框。1表示有边框(数字越大，边框越粗)，"" 表示没边框。
cellpadding表示内容距离边框的距离，默认1像素。
cellspacing表示单元格之间的距离。默认为2像素。
width/height：设置尺寸。

注意，这几个属性，在vscode都提示不出来。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table align="center" border="1" cellpadding="20" cellspacing="0" width="500"height="500"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>枫叶丹1</td><td>男</td><td>21</td></tr><tr><td>枫叶丹2</td><td>男</td><td>21</td></tr></table></body>
</html>

结果展示：

1.1.2 -> 合并单元格

跨行合并：rowspan="n"。
跨列合并：colspan="n"。

步骤：

先确定跨行还是跨列。
找好目标单元格(跨列合并，左侧是目标单元格；跨行合并，上方是目标单元格)。
删除的多余的单元格。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table align="center" border="10" cellpadding="20" cellspacing="0" width="500"
height="500"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>枫叶丹1</td><td colspan="2">男</td></tr><tr><td>枫叶丹2</td><td>男</td><td>21</td></tr></table></body>
</html>

结果展示：

1.2 -> 列表标签

主要使用来布局的。整齐好看。

无序列表(重要) <ul>标签、<li>标签。
有序列表(用的不多) <ol>标签、<li>标签。
自定义列表(重要) <dl>总标签、<dt>小标题、<dd>围绕标题来说明上面有个小标题。

注意：

元素之间是并列关系。
<ul>标签/<ol>标签中只能放<li>标签不能放其他标签，<dl>标签中只能放<dt>标签和<dd>标签。
<li>标签中可以放其他标签。
列表带有自己的样式，可以使用CSS来修改。(例如前面的小圆点都会去掉)。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h3>无序列表</h3><ul><li>王路飞</li><li>刘索隆</li><li>山治君</li></ul><h3>有序列表</h3><ol><li>王路飞</li><li>刘索隆</li><li>山治君</li></ol><h3>自定义列表</h3><dl><dt>One Piece</dt><dd>王路飞</dd><dd>刘索隆</dd><dd>山治君</dd></dl></body>
</html>

结果展示：

1.3 -> 表单标签

表单是让用户输入信息的重要途径。

分成两个部分：

表单域：包含表单元素的区域。重点是<form>标签。
表单控件：输入框，提交按钮等。重点是<input>标签。

1.3.1 -> form标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="test.html">... [form 的内容]</form></body>
</html>

描述了要把数据按照什么方式，提交到哪个页面中。(关于<form>标签需要结合服务器&网络编程来进一步理解。)

1.3.2 -> input标签

各种输入控件，单行文本框，按钮，单选框，复选框。

type(必须有)，取值种类很多，button、checkbox、text、file、image、password和radio等。
name：给<input>标签起了个名字。尤其是对于单选按钮，具有相同的name才能多选一。
value：<input>标签中的默认值。
checked：默认被选中。(用于单选按钮和多选按钮)。
maxlength：设定最大长度。

1. 文本框

<input type="text">

2. 密码框

<input type="password">

3. 单选框

性别: 
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

注意：

单选框之间必须具备相同的name属性，才能实现多选一的效果。

4. 复选框

爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">
打游戏

5. 普通按钮

<input type="button" value="我是个按钮">

当前点击了没有反应。需要搭配JS使用。

<input type="button" value="我是个按钮" onclick="alert('hello')">

6. 提交按钮

<form action="test.html"><input type="text" name="username"><input type="submit" value="提交">
</form>

提交按钮必须放到<form>标签内。点击后就会尝试给服务器发送。

7. 清空按钮

<form action="test.html"><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空">
</form>

清空按钮必须放在<form>标签中。点击后会将<form>标签内所有的用户输入内容重置。

8. 选择文件

<input type="file">

点击选择文件，会弹出对话框，选择文件。

1.4 -> label标签

搭配<input>标签使用。点击<label>标签也能选中对应的单选/复选框，能够提升用户体验。

for属性:指定当前<label>标签和哪个相同<id>标签的<input>标签对应。(此时点击才是有用的)。

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

1.5 -> select标签

下拉菜单

option中定义selected="selected" 表示默认选中。

<select><option>北京</option><option selected="selected">上海</option>
</select>

注意：可以给第一个选项作为默认选项。

<select><option>--请选择年份--</option><option>2024</option><option>2025</option><option>2026</option><option>2027</option><option>2028</option>
</select>

1.6 -> textarea标签

<textarea rows="3" cols="50"></textarea>

文本域中的内容，就是默认内容。

注意：空格也会有影响。

rows和cols也都不会直接使用，都是用CSS来改的。

1.7 -> 无语义标签：div & span

<div>标签，division的缩写，含义是分割。

<span>标签，含义是跨度。

就是两个盒子，用于网页布局。

<div>标签独占一行，是一个大盒子。
<span>标签不独占一行，是一个小盒子。

<div><span>王路飞</span><span>王路飞</span><span>王路飞</span>
</div>
<div><span>刘索隆</span><span>刘索隆</span><span>刘索隆</span>
</div>
<div><span>山治君</span><span>山治君</span><span>山治君</span>
</div>

2 -> Emmet快捷键

1. 快速输入标签

input [tab]

2. 快速输入多个标签

div*3 [tab]

3. 标签带id

div#sex [tab]

4. 标签带类名

div.sex [tab]

5. 标签带子元素

ul>li*3 [tab]

6. 标签带兄弟元素

span+span

7. 标签带内容

div{hello}

8. 标签带内容(带编号)

div{$.hello}

除此之外还有很多。

3 -> HTML特殊字符

有些特殊的字符在html文件中是不能直接表示的，例如：

空格：&nbsp；
小于号：&lt；
大于号：&gt；
按位与：&amp；

<html>标签就是用<>表示的。因此内容里如果存在<>就会发生混淆。

参考内容：

HTML特殊字符编码对照表

4 -> 小结

HTML只是描述了页面的骨架结构。

使用CSS可以针对页面进行进一步美化。

感谢各位大佬支持！！！

互三啦！！！

【海贼王航海日志：前端技术探索】HTML你学会了吗？(二)

目录 1 -> HTML常见标签 1.1 -> 表格标签 1.1.1 -> 基本使用 1.1.2 -> 合并单元格 1.2 -> 列表标签 1.3 -> 表单标签 1.3.1 -> form标签 1.3.2 -> input标签 1.4 -> label标签 1.5 -> select标签 1.6 -> textarea标签 1.7 -> …...

编程日记 2024/8/5 9:31:51

体系结构论文导读（三十一）（下）：Soft errors in DNN accelerators: A comprehensive review

第五部分：DNN加速器中的软错误本部分回顾和分析了有关人工神经网络（ANN）可靠性的研究。特别是关注通过DNN加速器解决DNN可靠性的研究，从软错误的角度进行探讨。许多前期工作声称ANN本身对故障具有固有的容错能力。然而&#xff…...

编程日记 2024/8/5 9:30:50

Python在指定文件夹下创建虚拟环境

基于不同python版本和第三方包版本开发的项目，为了方便学习和管理python环境，可以在指定的文件夹里创建项目所需的虚拟环境。具体流程如下： (1) 以管理员身份打开Ananconda Prompt，查看当前虚拟环境，输入命令如下&…...

编程日记 2024/8/5 9:28:47

【SpringBoot】定时任务之任务执行和调度及使用指南

【SpringBoot】定时任务之任务执行和调度及使用指南 Spring框架分别通过TaskExecutor和TaskScheduler接口为任务的异步执行和调度提供了抽象。Spring还提供了支持应用程序服务器环境中的线程池或CommonJ委托的那些接口的实现。最终，在公共接口后面使用这些实现&…...

编程日记 2024/8/5 9:23:40

理解 Objective-C 中 +load 方法的执行顺序

在 Objective-C 中，load 方法是在类或分类（category）被加载到内存时调用的。它的执行顺序非常严格，并且在应用启动过程中可能会导致一些令人困惑的行为。理解 load 方法的执行顺序对调试和控制应用的初始化过程非常重要。 load 方…...

编程日记 2024/8/5 9:21:37

切面条问题算法的详解

切面条问题是一个经典的动态规划问题，也称为切钢条问题。问题描述为：给定一根长度为n的钢条和一个价格表P[i]，表示长度为i的钢条的价格。求解如何切割钢条使得收益最大。解决这个问题的关键是找到一个最优子结构和递推关系。首先&#xf…...

编程日记 2024/8/5 9:20:35

JNDI注入

🎼个人主页：金灰 😎作者简介:一名简单的大一学生;易编橙终身成长社群的嘉宾.✨ 专注网络空间安全服务,期待与您的交流分享~ 感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持！❤️ 🍊易编橙终身成长社群&#…...

编程日记 2024/8/5 9:19:34

目录 1. 使用分割备份 (Split Backup) 2. 使用文件和文件组备份 (File and Filegroup Backup) 3. 使用压缩备份 (Compressed Backup) 4. 逻辑备份 (BCP工具) 5. 使用导出工具 (SQL Server Management Studio) 6. 部分备份 (Partial Backup) 7. 使用第三方工具 1. 使用分割…...

编程日记 2024/8/5 9:18:33

学习日志8.4--DHCP攻击防范

目录 DHCP饿死攻击 DHCP Sever仿冒攻击 DHCP攻击防范 DHCP动态主机配置协议，是给主机提供自动获取IP地址等配置信息的服务。在主机对DHCP服务器发送DHCP Discover请求之后，服务器回复offer，主机再回复request，最后服务器回复AC…...

编程日记 2024/8/5 9:16:31

解决多个Jenkins Master实例共享Jenkins_home目录的问题（加锁解锁机制）

在Jenkins的持续集成和持续部署（CI/CD）环境中，JENKINS_HOME目录扮演着至关重要的角色。它存储了Jenkins的配置、插件、作业历史记录等核心数据。然而，在某些场景下，我们可能面临多个Jenkins master实例需要共享同一个J…...

编程日记 2024/8/5 9:15:29

postgresql array 反向截取

postgresql array 反向截取 array_to_string((string_to_array(REPLACE(delcell.小区网管名称,‘‘,’-‘),’-‘))[:array_length(string_to_array(REPLACE(delcell.小区网管名称,’’,‘-’),‘-’),1)-1],‘-’) as 基站名称在PostgreSQL中，如果你想要对数组进…...

编程日记 2024/8/5 9:12:25

程序设计基础(c语言)_补充_1

1、编程应用双层循环输出九九乘法表 #include <stdio.h> #include <stdlib.h> int main() {int i,j;for(i1;i<9;i){for(j1;j<i;j)if(ji)printf("%d*%d%d",j,i,j*i);elseprintf("%d*%d%-2d ",j,i,j*i);printf("\n");}return 0…...

编程日记 2024/8/5 9:10:23

8.4 day bug

bug1 忘记给css变量加var 复制代码到通义千问，解决 bug2 这不是我的bug，是freecodecamp的bug 题目中“ 将 --building-color2 变量的颜色更改为 #000” “ 应改为” 将 #000 变量的颜色更改为 --building-color2 “ bug3 又忘记加var(–xxx) 还去问…...

编程日记 2024/8/5 9:09:22

【Material-UI】Autocomplete中的禁用选项：Disabled options

文章目录一、简介二、基本用法三、进阶用法1. 动态禁用2. 提示禁用原因3. 复杂的禁用条件四、最佳实践1. 一致性2. 提供反馈3. 优化性能五、总结 Material-UI的Autocomplete组件提供了丰富的功能，包括禁用特定选项的能力。这一特性对于限制用户选择、提供更好的用…...

编程日记 2024/8/5 9:07:20

Pytest测试报告生成专题

在 pytest 中，你可以使用多个选项生成不同格式的测试报告。以下是几种常用的生成测试报告的方法： 1. 生成简单的测试结果文件你可以使用 pytest 的 --junitxml 选项生成一个 XML 格式的测试报告，这个报告可以与 CI/CD 工具集成。 pytest --junitxml=report.xml这将在当前…...

编程日记 2024/8/5 9:06:19

QT 笔记

HTTPS SSL配置下载配置子父对象 QTimer *timer new QTimer; // QTimer inherits QObject timer->inherits("QTimer"); // returns true timer->inherits("QObject"); // returns true timer->inherits("QAbst…...

编程日记 2024/8/5 9:05:16

【redis 第七篇章】动态字符串

一、概述 string 类型底层实现的简单动态字符串 sds，是可以修改的字符串。它采用预分配冗余空间的方式来减少内存的频繁分配。二、SDS动态字符串动态字符串是以 \0 为分隔符。最大容量是 redis 主动分配的一块内存空间，实际存储内容是具体的存的数…...

编程日记 2024/8/5 9:04:15

rk3588 部署yolov8.rknn

本文从步骤来记录在rk3588芯片上部署yolov8模型主机：windows10 VMware Workstation 16 Pro 硬件：RK3588 EVB板模型： RK3588.rknn 软件开发环境： c cmake step1: 主机上执行： 将rknn_model_zoo 工程文件下载…...

编程日记 2024/8/5 9:03:13

【正点原子i.MX93开发板试用连载体验】中文提示词的训练

本文首发于电子发烧友论坛：【正点原子i.MX93开发板试用连载体验】基于深度学习的语音本地控制 - 正点原子学习小组 - 电子技术论坛 - 广受欢迎的专业电子论坛! 好久没有更新了，今天再来更新一下。我们用前面提到的录音工具录制了自己的中文语音&#…...

编程日记 2024/8/5 9:02:12

WordPress资源下载类主题 CeoMax-Pro_v7.6绕授权开心版

CeoMax-Pro强大的功能在不久的将来Ta能实现你一切幻想！我们也在为此而不断努力。适用于资源站、下载站、交易站、素材站、源码站、课程站、cms等等等等，Ta 为追求极致的你而生。多风格多样式多类型多行业多功能源码下载：ceomax-pro7.6.zip…...

编程日记 2024/8/5 9:01:10

使用GCC编译Notepad++的插件

Notepad的本体1是支持使用MSVC和GCC编译的2，但是Notepad插件的官方文档3里却只给出了MSVC的编译指南4。网上也没有找到相关的讨论，所以我尝试在 Windows 上使用 MinGW，基于 GCC-8.1.0 的 posix-sjlj 线程版本5，研究一下怎么编译…...

编程日记 2024/8/5 8:57:04

技术周总结 2024.07.29 ~ 08.04周日(MyBatis, 极限编程)

文章目录一、08.01 周四1.1）mybatis的 xml文件中的 ${var} 和 #{var}的区别？ 二、08.03 周六2.1）极限编程核心价值观核心实践实施极限编程的好处极限编程的挑战适用场景三、08.04 周日3.1）《计算机信息系统安全保护等级划分准则…...

编程日记 2024/8/5 8:56:03

C语言调试宏全面总结（六大板块）

C语言调试宏进阶篇：实用指南与案例解析C语言调试宏高级技巧与最佳实践C语言调试宏的深度探索与性能考量C语言调试宏在嵌入式系统中的应用与挑战C语言调试宏在多线程环境中的应用与策略C语言调试宏在并发编程中的高级应用 C语言调试宏进阶篇：实用指南与案…...

编程日记 2024/8/5 8:55:02

unity万向锁代数法解释

unity的矩阵旋转乘法顺序是yxz 旋转x的90度的矩阵: 1 0 0 0 0 -1 0 1 0旋转y和z的矩阵假设角度为y和z，矩阵略不写了按顺序乘完yxz之后结果是 cos(y-z) sin(y-z) 0 0 0 -1 -sin(y-z) cos(y-z) 0这个结果和Rx(pi/2) *Rz(某个角度)的结果是一个形式，Rx和…...

编程日记 2024/8/5 8:54:02

stm32入门学习10-I2C和陀螺仪模块

（一）I2C通信 （1）通信方式 I2C是一种同步半双工的通信方式，同步指的是通信双方时钟为一个时钟，半双工指的是在同一时间只能进行接收数据或发送数据，其有一条时钟线（SCL）…...

编程日记 2024/8/5 8:53:00

GDB常用指令

GDB调试：GDB调试的是可执行文件，在gcc编译时加入-g参数，告诉gcc在编译时加入调试信息，这样gdb才能调试这个被编译的文件。此外还会加上-Wall参数尽量显示所有警告信息。 GDB命令格式： 1、start：程序在第一…...

编程日记 2024/8/5 8:51:59

Nginx 高级扩容与高效

Nginx高级第一部分：扩容通过扩容提升整体吞吐量 1.单机垂直扩容：硬件资源增加云服务资源增加整机：IBM、浪潮、DELL、HP等 CPU/主板：更新到主流网卡：10G/40G网卡磁盘：SAS(SCSI) HDD（机械…...

编程日记 2024/8/5 8:50:58

pythonflaskMYSQL自驾游搜索系统32127-计算机毕业设计项目选题推荐（附源码）

目录摘要 1 绪论 1.1研究背景 1.2爬虫技术 1.3flask框架介绍 2 1.4论文结构与章节安排 3 2 自驾游搜索系统分析 4 2.1 可行性分析 4 2.2 系统流程分析 4 2.2.1数据增加流程 5 2.3.2数据修改流程 5 2.3.3数据删除流程 5 2.3 系统功能分析 5 2.3.1 功能性分析 6 2.3.2 非功…...

编程日记 2024/8/5 8:49:57

C++ vector的基本使用(待补全)

std::vector 是C标准模板库(STL)中的一个非常重要的容器类，它提供了一种动态数组的功能。能够存储相同类型的元素序列，并且可以自动管理存储空间的大小，以适应序列大小变化，处理元素集合的时候很灵活 1. vector的定义构造函数声…...

编程日记 2024/8/5 8:48:56

1 -> HTML常见标签

1.1 -> 表格标签

1.1.1 -> 基本使用

1.1.2 -> 合并单元格

1.2 -> 列表标签

1.3 -> 表单标签

1.3.1 -> form标签

1.3.2 -> input标签

1.4 -> label标签

1.5 -> select标签

1.6 -> textarea标签

1.7 -> 无语义标签：div & span

2 -> Emmet快捷键

3 -> HTML特殊字符

4 -> 小结

相关文章：