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

快速入门HTML

news 2025/12/16 6:44:21

欢迎关注个人主页：逸狼

创造不易，可以点点赞吗

如有错误，欢迎指出~

目录

第一个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的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容.

标签

  • 标签名(body)放到<>中 
  • ⼤部分标签成对出现.<h1>为开始标签,</h1>为结束标签.
  • 少数标签只有开始标签,称为"单标签".
  • 开始标签和结束标签之间,写的是标签的内容.
  • 开始标签中可能会带有"属性".id属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).

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

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

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

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

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

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

经典算法思想--并查集

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

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

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

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

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

【vue之道】

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

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

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

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

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

Linux：指令再认识

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

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

PHP如何抛出和接收错误

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

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

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

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

编程日记 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视频融合平台果园/鱼塘/养殖场/菜园有电没网视频监控方案

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

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

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

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

编程日记 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代表的在某个数值下最小的硬币数&#xff0c;要求是最小的硬币数&#xff0c;所以初始值要尽可…...

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

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

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

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

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

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

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

Git使用问题汇总附带解决方法（持续更新）

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

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

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

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

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

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

在实际中工作&#xff0c;我们经常需要使用 el-dialog 来做一个弹框的功能。最常见的就是在父组件中点击一个按纽&#xff0c;然后弹出一个框。而这个框就是子组件。同时&#xff0c;父子组件是分布在不同的文件中。 <!--父组件--> <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商品详情接口主要有以下步骤&#xff1a; 一、注册开发者账号&#xff1a; 访问 1688 开放平台&#xff0c;进行开发者账号注册。这是获取 API 接口使用权限的第一步&#xff0c;注册信息要确保真实准确。 二、了解接口规范和政策&#xff1a; 在 1688 开放平台…...

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

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2025/12/15 4:11:20

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/12/8 15:25:27

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/12/15 5:43:03

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/12/15 4:22:24

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2025/9/17 22:26:02