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

快速入门HTML

news 2025/7/3 13:03:37

欢迎关注个人主页：逸狼

创造不易，可以点点赞吗

如有错误，欢迎指出~

目录

第一个html文件

标签

h1~h6

p =>段落标签

br => 换行标签

img =>图片标签

a =>超链接标签

表格标签

表单标签

表单控件

form表单

⽆语义标签:div&span

综合练习:实现一个⽤⼾注册界⾯

HTML(Hyper Text Markup Language),超⽂本标记语⾔. 超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.

第一个html文件

打开vs code ,创建一个html文件

按"!"快捷键快速初始化界面

html标签是整个html⽂件的根标签(最顶层标签)
head标签中写⻚⾯的属性.
body标签中写的是⻚⾯上显⽰的内容
title标签中写的是⻚⾯的标题.

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>我的第一个html文件
</body>
</html>

在网页中使用快捷键F12 ,查看网页源代码

HTML的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容.

h1~h6

h1~h6,数字越大,字体越小

<h1>我是⼀级标题</h1>
<h2>我是⼆级标题</h2>
<h3>我是三级标题</h3>

经过浏览器解析后效果

快速复制上一行的快捷键: alt + shift +上键

p =>段落标签

p标签表示段落标签.

没有缩进
根据浏览器宽度来决定排版
首尾处换行符,空格均无效
文字间输入多个空格或换行相当于一个空格

br => 换行标签

br是break的缩写,如果想实现换行,使用</br>,

br是单标签(没有结束标签)
br标签不像p标签有这么大换行空隙("换行"与"段落和段落间的空隙")
</br>是正确写法,不建议写成br(写成br也能实现效果,浏览器有较好的"鲁棒性",自动帮助补全了)

img =>图片标签

可以使用绝对路径 或者 相对路径,也可以是 网络路径

width/height:控制宽度⾼度.⾼度和宽度⼀般改⼀个就⾏,另外⼀个会等⽐例缩放.否则就会图⽚失衡.
border:边框,参数是宽度的像素.但是⼀般使⽤CSS来设定.

a =>超链接标签

href:必须具备,可以是网络路径,文件地址或者 #,表⽰点击后会跳转到哪个⻚⾯.
target:打开⽅式.默认是_self(表示从当前网页加载).如果是_blank则⽤新的标签⻚打开.

外部链接:href引⽤其他⽹站的地址
内部链接:⽹站内部⻚⾯之间的链接. 写相对路径即可.
空链接:使⽤#在href中占位.

        <a href="https://www.baidu.com">百度</a><a href="test1.html" target="_blank">test1</a><a href="1.rar" target="_blank">下载文件</a><a href="#" target="_blank">空链接</a>

表格标签

able标签:表⽰整个表格
tr:表⽰表格的⼀⾏(使用tr*3,快速生成3行tr标签,其它同样可以使用这个方法)
td:表⽰⼀个单元格
thead:表格的头部区域
tbody:表格的主体区域.

        <table><tr><td>aaa</td><td>bbb</td></tr><tr><td>ccc</td><td>ddd</td></tr><tr><td>eee</td><td>fff</td></tr></table>

运行结果是没有边框的,如果要添加边框,就要配合使用CSS

表格标签有⼀些属性,可以⽤于设置⼤⼩边框等.但是⼀般使⽤CSS⽅式来设置.

这些属性都要放到table标签中.

align是表格相对于周围元素的对⻬⽅式.如align="center"表示居中 (不是内部元素的对⻬⽅式)
border表⽰边框. 1表⽰有边框(数字越⼤,边框越粗),""表⽰没边框.
cellpadding:内容距离边框的距离,默认1像素
cellspacing:单元格之间的距离.默认为2像素
width/height:设置尺⼨.

注意,这些属性,vscode都没有提⽰

表单标签

用于让用户输入信息的重要途径,包含下面两种

表单控件:输⼊框,提交按钮等.重点是input标签.
表单域:包含表单元素的区域.重点是form标签.

表单控件

各种输⼊控件,单⾏⽂本框,按钮,单选框,复选框.

type(必须有),取值种类很多,按钮button,复选框checkbox,文本框text,文件file,图片image,密码password,单选按钮radio等.
name:给input起了个名字.尤其是对于单选按钮,具有相同的name才能多选⼀.
value:input中的默认值. checked:默认被选中.(⽤于单选按钮和多选按钮)

    日期,可以选择日期<input type="date" name="" id=""><br/>文本框<input type="text"><br/>密码<input type="password"><br/>文件<input type="file"><br/>邮箱<input type="email"><br/>单选按钮 <input type="radio" name="gender" checked="checked">男 <input type="radio" name="gender">女<br/>复选框 <input type="checkbox">唱跳 <input type="checkbox">rap<input type="checkbox">篮球<br/>普通按钮 <input type="button" value="我是一个按钮,可以点击"><br/>提交按钮 <input type="submit"><br/>下拉菜单 <select ><option value="">北京</option><option value="">上海</option><option value="">广州</option><option value="">深圳</option></select><br/>文本域<textarea rows="5" cols="20"></textarea>

注意

单选框之间必须具备相同name属性,才能实现多选⼀效果.
这里的普通按钮当前点击了没有反应.需要搭配JS使⽤
提交按钮必须放到form标签内.点击后就会尝试给服务器发送请求

form表单

form表单用于提交数据,要和submit配合使用

action的值表示要提交的页面(可以是前端链接或后端链接)

    <form action="test1.html" method="get">用户名: <input type="text" name="username" id=""><br/>密码: <input type="password" name="password" ><br/><input type="submit"></form>

⽆语义标签:div&span

div标签,division的缩写,含义是分割 span标签,含义是跨度就是两个盒⼦.⽤于⽹⻚布局

div是独占⼀⾏的,是⼀个⼤盒⼦
span不独占⼀⾏,是⼀个⼩盒⼦.

综合练习:实现一个⽤⼾注册界⾯

<h1>用户注册</h1><table><tr><td>用户名</td><td><input type="text" name="" id="" placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="text" name="" id="" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><input type="password" name="" id="" placeholder="请输入密码"></td></tr></table><div><input type="button" value="注册"><span>已有账号?</span><a href="#">登录</a></div>

加入div和span方便"拿取"调用选择

快速入门HTML

欢迎关注个人主页：逸狼创造不易，可以点点赞吗如有错误，欢迎指出~ 目录第一个html文件标签 h1~h6 p >段落标签 br > 换行标签 img >图片标签 a >超链接标签表格标签表单标签表单控件 form表单⽆语义标签:div&span 综…...

编程日记 2024/10/27 22:23:59

RabbitMQ是一个开源的消息代理和队列服务器

RabbitMQ是一个开源的消息代理和队列服务器，它基于AMQP（Advanced Message Queuing Protocol，高级消息队列协议）协议实现，同时也支持其他消息协议如STOMP、MQTT等。作为一个可靠的消息传递服务，RabbitMQ在分…...

编程日记 2024/10/27 22:22:58

经典算法思想--并查集

前言 （最近在学习Java，所有函数都是用Java语言来书写的）前言部分是一些前提储备知识在并查集（Union-Find）数据结构中，rank（中文称为“秩”）是用来表示树的高度或深度的一种辅助信息…...

编程日记 2024/10/27 22:21:57

挑战Java面试题复习第2天，百折不挠

挑战第 2 天 ArrayList和linkedList的区别HashMap和HashTable的区别Collection 与 Collections 的区别Java的四种引用泛型常用特点 ArrayList和linkedList的区别底层数据结构： ArrayList：基于动态数组实现，支持快速随机访问。LinkedList&a…...

编程日记 2024/10/27 22:20:55

【vue之道】

vue之道 1. 一生二，二生万物思想2. 变化之律3. 变化之实在哪？4.而后学于形乃已！4.1 展示之形变4.2 动之气谓之指令4.3 血之养分的载体，于vue之绑定载具4.4 vue之道（万法规一篇） 1. 一生二，二生万…...

编程日记 2024/10/27 22:15:50

基于麻雀优化算法SSA的CEEMDAN-BiLSTM-Attention的预测模型

往期精彩内容： 时序预测：LSTM、ARIMA、Holt-Winters、SARIMA模型的分析与比较全是干货 | 数据集、学习资料、建模资源分享！ EMD、EEMD、FEEMD、CEEMD、CEEMDAN的区别、原理和Python实现（一）EMD-CSDN博客 EMD、EEM…...

编程日记 2024/10/27 22:13:48

Linux：指令再认识

文章目录前言一、知识点1. Linux下一切皆文件，也就是说显示器也是一种文件2. 指令是什么？3. ll 与 ls -l4. 日志5. 管道6. 时间戳二、基本指令1. man指令2. cp指令3. mv指令4. 查看文件1）cat/tac指令——看小文件2）more/less指令…...

编程日记 2024/10/27 22:09:44

PHP如何抛出和接收错误

在PHP中，抛出和接收错误通常涉及异常处理机制，以及错误和异常的处理函数。以下是如何在PHP中抛出和接收错误的详细指南： 抛出错误（异常） 在PHP中，你可以使用throw关键字来抛出一个异常。这通常在你检测到…...

编程日记 2024/10/27 22:08:43

计算机网络：网络层 —— IPv4 地址的应用规划

文章目录 IPv4地址的应用规划定长的子网掩码变长的子网掩码 IPv4地址的应用规划 IPv4地址的应用规划是指将给定的 IPv4地址块 (或分类网络)划分成若干个更小的地址块(或子网)，并将这些地址块(或子网)分配给互联网中的不同网络，进而可以给各网络中的主机…...

编程日记 2024/10/27 22:07:42

Mongodb命令大全

Mongodb命令大全一、数据库相关命令二、集合相关命令三、文档(数据)相关命令1、_id 字段说明2、查询2.1、查询操作符2.2、内嵌文档查询2.3、数组文档查询2.4、去重查询2.5、查询排序 sort2.6、分页查询2.7、指定列投影查询返回2.8、查询统计个数 count 3、聚合查询3.1、查询用…...

编程日记 2024/10/27 22:06:42

宇视设备视频平台EasyCVR视频融合平台果园/鱼塘/养殖场/菜园有电没网视频监控方案

在那些有电无网的偏远地区，如果园、鱼塘、养殖场或菜园，视频监控的实现面临着独特的挑战。宇视设备视频平台EasyCVR提供了一种创新的解决方案，通过结合太阳能供电和4G摄像头技术，有效地解决了这些场景下的监控需求。在有电没网的…...

编程日记 2024/10/27 22:05:41

面试题：ABCD四个线程，A线程最后执行

我觉得是一个很高频的面试题，ABCD四个线程，A线程要等到BCD线程执行完再执行，怎么做因为我刚复习完AQS，所以立马想到了CountDownLatch，但是看面试官反应他最想听到的应该是join方法，所以面试后就总结了几种…...

编程日记 2024/10/27 22:04:39

代码随想录算法训练营第46期Day43

leetcode.322零钱兑换 class Solution { public: //无限个硬币->完全背包int coinChange(vector<int>& coins, int amount) {vector<int> dp(10010,INT_MAX);//dp代表的在某个数值下最小的硬币数，要求是最小的硬币数，所以初始值要尽可…...

编程日记 2024/10/27 22:03:38

前端处理API接口故障：多接口自动切换的实现方案

因为在开发APP，一个接口如果不通（被挂了）又不能改了重新打包让用户再下载软件更新，所以避免这种情况，跟后端讨论多备用接口地址自动切换的方案，自动切换到备用的接口地址，并保证后续所有的请求都…...

编程日记 2024/10/27 22:01:36

多租户架构的全景分析(是什么？基本概念、实现策略、资源管理和隔离、数据安全与隔离、性能优化、扩展性与升级、案例研究)

文章目录 1. 多租户的基本概念2. 多租户的实现策略2.1 独立数据库模式2.2 共享数据库-独立Schema模式2.3 共享数据库-共享Schema模式 3. 资源管理和隔离4. 数据安全与隔离5. 性能优化6. 扩展性与升级7. 案例研究总结多租户架构在云计算和SaaS应用中越来越流行，因为…...

编程日记 2024/10/27 21:59:34

Git使用问题汇总附带解决方法一 git pull 代码时报错： Auto packing the repository in background for optimum performance. See “git help gc“ 一 git pull 代码时报错： Auto packing the repository in background for optimum performance. See …...

编程日记 2024/10/27 21:58:34

Spring Boot驱动的植物健康监测革命

1系统概述 1.1 研究背景随着计算机技术的发展以及计算机网络的逐渐普及，互联网成为人们查找信息的重要场所，二十一世纪是信息的时代，所以信息的管理显得特别重要。因此，使用计算机来管理植物健康系统的相关信息成为必然。开发合适…...

编程日记 2024/10/27 21:56:32

element 中 el-dialog 在不同的文件中使用

在实际中工作，我们经常需要使用 el-dialog 来做一个弹框的功能。最常见的就是在父组件中点击一个按纽，然后弹出一个框。而这个框就是子组件。同时，父子组件是分布在不同的文件中。  <template> <div> <…...

编程日记 2024/10/27 21:55:31

QT中采用QCustomPlot 实现将buffer中的数据绘制成折线图，并且图形随着数据更新而更新

QT中采用QCustomPlot 实现将buffer中的数据绘制成折线图，并且图形随着数据更新而更新为了在 Qt 中将缓冲区的数据动态绘制成折线图，并随着数据的更新而实时更新，可以使用 QCustomPlot 或 Qt 自带的绘图功能，比如 QGraphicsView，或者在更简单的情况下使用 QPainter 在 QW…...

编程日记 2024/10/27 21:54:30

1688API商品详情接口如何获取

获取 1688API商品详情接口主要有以下步骤： 一、注册开发者账号： 访问 1688 开放平台，进行开发者账号注册。这是获取 API 接口使用权限的第一步，注册信息要确保真实准确。二、了解接口规范和政策： 在 1688 开放平台…...

编程日记 2024/10/27 21:51:27

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。一、环境准备 1、VMware 基于VMware构建Linux虚拟机是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案所以VMware虚拟机方案是必须要学习的。 （1）设置网关打开VMware虚拟机，点击编辑…...

编程新知 2025/6/29 11:32:31

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/7/1 2:32:35

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

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

编程新知 2025/6/24 5:44:40

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现第一章需求分析 1.1 需求总体介绍本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...

编程新知 2025/6/28 14:35:38

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识主要参考博文： 一文入门汽车毫米波雷达基本原理 ：https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2025/6/25 10:16:54

k8s从入门到放弃之HPA控制器

k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率（或其他自定义指标）来调整这些对象的规模，从而帮助应用程序在负…...

编程新知 2025/6/27 21:22:51

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的，需要先安…...

编程新知 2025/7/2 15:17:27

绕过 Xcode？使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节：强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说，这一套流程并不友好。特别是当你的项目主要在 Windows 或 Linux 下开发（例如 Flutter、React Na…...

编程新知 2025/6/20 21:39:09

多模态大语言模型arxiv论文略读（110）

CoVLA: Comprehensive Vision-Language-Action Dataset for Autonomous Driving ➡️ 论文标题：CoVLA: Comprehensive Vision-Language-Action Dataset for Autonomous Driving ➡️ 论文作者：Hidehisa Arai, Keita Miwa, Kento Sasaki, Yu Yamaguchi, …...

编程新知 2025/6/26 1:15:54

AWSLambda之设置时区

目标希望Lambda运行的时区是东八区。解决只需要设置lambda的环境变量TZ为东八区时区即可，即Asia/Shanghai。参考使用 Lambda 环境变量...

编程新知 2025/7/2 5:23:34