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

快速入门HTML

news 2026/1/2 6:34:29

欢迎关注个人主页：逸狼

创造不易，可以点点赞吗

如有错误，欢迎指出~

目录

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

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/12/28 4:23:22

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2025/8/4 18:55:37

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/12/31 12:35:38

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2025/12/31 11:31:27

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2026/1/1 22:18:05

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/12/29 15:43:26

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

编程新知 2025/11/1 2:00:51

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

编程新知 2025/12/24 22:20:30

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28