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

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

news 2025/12/24 23:20:51

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

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...

编程新知 2025/12/24 2:50:30

【kafka】Golang实现分布式Masscan任务调度系统

要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。服务端程序： 从kafka消费者接收…...

编程新知 2025/12/22 9:15:22

centos 7 部署awstats 网站访问检测

一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/12/16 16:08:36

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/11/1 8:36:48

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上，看到基于小智 AI DIY 玩具的演示，感觉有点意思，想着自己也来试试。如果只是想烧录现成的固件，乐鑫官方除了提供了 Windows 版本的 Flash 下载工具之外，还提供了基于网页版的 ESP LA…...

编程新知 2025/12/21 9:43:13

C++ 基础特性深度解析

目录引言一、命名空间（namespace） C 中的命名空间与 C 语言的对比二、缺省参数 C 中的缺省参数与 C 语言的对比三、引用（reference） C 中的引用与 C 语言的对比四、inline（内联函数…...

编程新知 2025/10/17 0:18:22

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

【Linux】Linux 系统默认的目录及作用说明

博主介绍：✌全网粉丝23W，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围：SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2025/12/21 4:10:46

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 -> 小结

相关文章：