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

快速入门HTML

news 2025/7/4 14:10:01

欢迎关注个人主页：逸狼

创造不易，可以点点赞吗

如有错误，欢迎指出~

目录

第一个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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制一、引言二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...

编程新知 2025/6/27 2:57:24

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台，覆盖应用全生命周期测试需求，主要提供五大核心能力： 测试类型检测目标关键指标功能体验基…...

编程新知 2025/7/2 5:50:49

【决胜公务员考试】求职OMG——见面课测验1

2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/6/16 3:46:00

GitHub 趋势日报 (2025年06月08日)

📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/6/17 3:05:21