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

快速入门HTML

news 文章来源：https://blog.csdn.net/2301_80898480/article/details/143264645 2024/11/2 2:35:34

欢迎关注个人主页：逸狼

创造不易，可以点点赞吗

如有错误，欢迎指出~

目录

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

pytorch + d2l环境配置

文章目录 前言一、安装软件二、配置具体环境 前言 一直想写一篇 pytorch d2l的深度学习环境配置。但一直都不是很顺利&#xff0c;配置过很多次&#xff0c;都会遇到一些各种依赖项的兼容性问题。但这个是没有办法的&#xff0c;各种开源包都在不断维护过程中&#xff0c;版本…...

编程日记 2024/10/27 21:50:25

Go使用exec.Command() 执行脚本时出现：file or directory not found

使用 Go 提供的 exec.Command() 执行脚本时出现了未找到脚本的 bug&#xff0c;三个排查思路 &#xff1a; exec.Command(execName, args…) 脚本名字不允许相对路径 exec.Command(execName, args…) execName 只能有脚本名&#xff0c;不允许出现参数 如果你是使用 Windows …...

编程日记 2024/10/27 21:49:24

细节性知识（宏定义解析与宏的外部引用）

目录 一、问&#xff1a;#define N 50 中的N可以用来做运算比较吗&#xff1f; 二、宏定义怎么外部引用&#xff1f; 例子 总结 一、问&#xff1a;#define N 50 中的N可以用来做运算比较吗&#xff1f; 解析&#xff1a;在C语言中&#xff0c;#define N 50 是一个预处理指…...

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

面试中的JVM：结合经典书籍的深度解读

写在前面 &#x1f525;我把后端Java面试题做了一个汇总&#xff0c;有兴趣大家可以看看&#xff01;这里&#x1f449; ⭐️在无数次的复习巩固中&#xff0c;我逐渐意识到一个问题&#xff1a;面对同样的面试题目&#xff0c;不同的资料来源往往给出了五花八门的解释&#…...

编程日记 2024/10/27 21:42:17

使用语音模块的开发智能家居产品（使用雷龙LSYT201B 语音模块）

在这篇博客中&#xff0c;我们将探讨如何使用 LSYT201B 语音模块 进行智能设备的语音交互开发。通过这个模块&#xff0c;我们可以实现智能设备的语音识别和控制功能&#xff0c;为用户带来更为便捷和现代的交互体验。 1. 语音模块介绍 LSYT201B 是一个基于“芯片算法”的语音…...

编程日记 2024/10/27 21:40:15

深入理解支持向量机：从基本原理到实际应用

第6章 支持向量机 在本章中&#xff0c;我们将深入探讨支持向量机&#xff08;SVM&#xff09;这一强大的分类算法。SVM在模式识别和机器学习领域广泛应用&#xff0c;尤其在处理高维数据时表现出色。我们将依次讨论间隔与支持向量、对偶问题、核函数、间隔与正则化、支持向量…...

编程日记 2024/10/27 21:39:13

每天一题：洛谷P2041分裂游戏

题目描述 有一个无限大的棋盘&#xff0c;棋盘左下角有一个大小为 n 的阶梯形区域&#xff0c;其中最左下角的那个格子里有一枚棋子。你每次可以把一枚棋子“分裂”成两枚棋子&#xff0c;分别放在原位置的上边一格和右边一格。&#xff08;但如果目标位置已有棋子&#xff0c…...

编程日记 2024/10/27 21:33:08

简单的 curl HTTP的POSTGET请求以及ip port连通性测试

简单的 curl HTTP的POST&GET请求以及ip port连通性测试 1. 需求 我们公司有一个演示项目&#xff0c;需要到客户那边进行项目部署&#xff0c;项目部署完成后我们需要进行项目后端接口的测试功能&#xff0c;但是由于客户那边么有条件安装类似于postman这种的测试工具&am…...

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

ubuntu下快捷键启动程序

背景&#xff1a;公司自开发的软件&#xff0c;经常需要启动&#xff0c;每次去找目录启动很麻烦&#xff0c;所以想快捷启动 方法1&#xff1a; 通过编辑.baserc启动 例如启动程序是toolA, 放在/home/user/software/目录下&#xff0c;那么在~/.baserc里面加入一行代码 al…...

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

Yii2 init 初始化脚本分析

脚本目的&#xff1a; init 脚本主要的作用是&#xff1a;从 environments 目录中复制配置文件&#xff0c;确保应用适配不同环境&#xff08;例如开发、生产环境等&#xff09;。 工作流程&#xff1a; 获取 $_SERVER 的 argv 参数 加载 environments/index.php 文件&#…...

编程日记 2024/10/27 21:28:03

广南网站建设/网络优化基础知识

本文由曹素杰&#xff08;阿里云 MVP 石化盈科信息技术有限责任公司 高级工程师&#xff09;提供&#xff0c;若使用请标明出处。 内存溢出的表现&#xff1a;a) CPU会飙升到100%&#xff0c;如果是多核则乘以核数b) 日志中会出现OutOfMemoryError 分析原因步骤&#xff1a;a) …...

编程日记 2024/11/1 18:05:06

wordpress商业授权/首页排名优化公司

Activity的四种状态&#xff1a;--Active/Runing 一个新 Activity 启动入栈后&#xff0c;它在屏幕最前端&#xff0c;处于栈的最顶端&#xff0c;此时它处于可见并可和用户交互的激活状态。 --Paused 当 Activity 被另一个透明或者 Dialog 样式的 Activity 覆盖时的状态。此时…...

编程日记 2024/11/1 12:36:31

设计制作费属于什么服务/seo优化技术是什么

冥王峡谷黑苹果之苹果网卡转接板选择分析拆过冥王峡谷的都清楚主板的资源分布了&#xff0c;这里重点介绍3个2接口的&#xff0c;如图&#xff0c;2个nvme固态接口并排在左侧&#xff0c;支持2280和2242。1个无线网卡接口位于左下测&#xff0c;确确的说应该是位于其中一个nvme…...

编程日记 2024/11/1 12:10:13

网站开发的最后五个阶段/网站建设方案及报价

有朋友会问“为什么我的在每天晚上10点钟运行的非常缓慢&#xff1f;”。有经验的朋友会想到为CBO提供了自动收集数据库对象统计信息的功能&#xff0c;称之为“”。与之对应的Job正是在周一至周五的晚上10:00到第二天早上的6:00以及周六周日全天这个中来完成的。我们探索一下A…...

编程日记 2024/11/1 9:14:12

自己做电影下载网站/郑州百度seo网站优化

格式化输出 定义&#xff1a;就是符合某种规范的输出&#xff0c;而这里的规范就叫做格式化 三种格式化方式 第一种方式&#xff08;占位符&#xff09;是基于python3.0版本的输出方式这种输出方式的好处是可以对任意类型的字符串进行拼接&#xff0c;占位符有两个表现形式&am…...

编程日记 2024/11/1 7:42:59

eclipse做购物网站/福州seo技术培训

对于刚开始学QT的同学&#xff0c;在网上搜索许久之后会发现&#xff1a;一个简 单的 Qt 程序下面这个小程序&#xff0c;估计大家会感到比较亲切。似乎有相当多的中文用户尝试写过这样的代码&#xff1a;#include #include int main(int argc, char **argv){QApplication app(…...

编程日记 2024/11/1 6:06:29