【HTML】——VSCode 基本使用入门和常见操作

news2024/12/26 17:53:00

 8e19eee2be5648b78d93fbff2488137b.png

阿华代码,不是逆风,就是我疯

你们的点赞收藏是我前进最大的动力!!

希望本文内容能够帮助到你!!

目录

零:HTML开发工具VSCode的使用

1:创建项目

2:创建格式模板:!+enter

3:修改标题title

4:标题标签h

5:段落标签p

6:换行标签

7:图片标签

8:超链接  a

9:表格标签

10:input标签

举例①:按钮+文本框

举例②:单选框+复选框

举例③:密码框+提交按钮

举例④:表单

11:select标签

12:div和span

一:引入

1:前端的源代码,可以直接在右键鼠标查看

2:前端的调试工具,也在浏览器中

二:HTML测试引入

1:html

2:h1~h6标签



建议可以先看看引入部分

零:HTML开发工具VSCode的使用

我们先安装好VSCode这款软件

1:创建项目

选择一个文件夹

输入名字并加上后缀.html,创建成功

2:创建格式模板:!+enter

3:修改标题title

注意注意:写完的代码一定要ctrl+s保存一下,不然浏览器界面是不会更新的

4:标题标签h

5:段落标签p

p标签首行不会缩进

6:换行标签<br/>

换行标签是一个单标签

7:图片标签<img src="图片路径">

效果如下

8:超链接  a

href:(使用超链接,就需要使用这个)表示点击后跳转的界面

target:打开方式

①默认为_self

②如果是_blank就是用新的标签页打开

9:表格标签

border = "1px"给表格加上边框

10:input标签

举例①:按钮+文本框

type是类型选项

按钮搭配value

placeholder是默认的

效果

举例②:单选框+复选框

type类型为radio(译为按钮)

name中的属性一致才可以多选一(这里用gender<性别>是自定义的,也可以改为sex)

复选(可以选多个)checkbox 


实现效果:

举例③:密码框+提交按钮

实现效果

举例④:表单
描述了要把数据按照什么⽅式, 提交到哪个⻚⾯中
< form action = "test.html" >
... [form 的内容 ]
</ form >

11:select标签

实现效果

12:div和span

重点理解:div独占一行

实现效果

一:引入

我们说的JavaEE是企业级开发,主要是学习Java在企业中如何应用。

PC端的应用开发结构模式主要分为C/S结构(客户端/服务器)和B/S结构(浏览器/服务器)

前端三剑客:HTML,CSS,JavaScript,三者相互协作作为前端的支柱

我们看到的这些网页都是由前端代码构建的

1:前端的源代码,可以直接在右键鼠标查看

2:前端的调试工具,也在浏览器中

F12

这是调试的工具栏:控制台,源代码,应用程序等等

使用一下这个工具

会跳到指定的代码处可以看到这是一个图片的链接,可以修改图片

如果我们想要修改一下文字

二:HTML测试引入

1:html

HTML超文本标记语言

超文本:在普通文本的基础上还可以进行字体,段落,行间距等修改,拆入图片,音频等

标记语言:由标签构成的语言

2:h1~h6标签

我们新建一个txt文档,输入下方红色框中的内容,保存,修改文件后缀为html,

浏览器呈现的效果

这个代码本身是不规范的,但是浏览器能够解析,是因为浏览器有很好的鲁棒性(你对它越粗鲁,它越棒)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2235255.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ssm057学生公寓管理中心系统的设计与实现+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;学生公寓管理中心系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本学生公寓管理…

WAL日志

1.WAL概述 PG WAL&#xff08;Write-Ahead Logging&#xff09;日志是PostgreSQL数据库中的一种重要机制&#xff0c;用于保证数据库的完整性和数据恢复。 1.1定义与功能 WAL日志是PostgreSQL的持久性技术&#xff0c;它将所有对数据库的修改操作&#xff08;如INSERT、UPDA…

算法练习:1658. 将 x 减到 0 的最小操作数

题目链接&#xff1a;1658. 将 x 减到 0 的最小操作数 这道题目的意思就是&#xff0c;给定一个整数数组&#xff0c;和一个x&#xff0c;只能从数组最左边或者最右边进行删除&#xff0c;使得x恰好等于0&#xff0c;并且要操作次数最少的情况&#xff0c;否则返回-1. 这道题直…

51c大模型~合集17

我自己的原文哦~ https://blog.51cto.com/whaosoft/11599989 #关于大模型「越狱」的多种方式 此项目是由伊利诺伊大学香槟分校&#xff08;UIUC&#xff09;的汪浩瀚教授主导&#xff0c;汇集了多名intern的共同努力而成。长久以来&#xff0c;这个跨学科的团队一直在前沿科…

Vue前端开发之自定义动画样式

在上一小节中&#xff0c;我们介绍了动画的实现源于6个类别样式&#xff0c;它们的名称默认前缀是一个“v”字母或者指定的名称&#xff0c;如“sc”&#xff0c;其实&#xff0c;也可以不使用这些固定的类别样式&#xff0c;开发者可以自定义任意的类别样式&#xff0c;供动画…

数据库SQL学习笔记

第 1 章 绪论 1.1 数据库系统概述 1.1.1 四个基本概念 数据库系统(DBS) 定义&#xff1a;是指在计算机系统中引入数据库后的系统构成 构成&#xff1a;数据库&#xff0c;数据库管理系统&#xff08;及其开发工具&#xff09;&#xff0c;应用系统&#xff0c;数据库管理员…

前端好用的网站分享——CSS(持续更新中)

1.CSS Scan 点击进入CSS Scan CSS盒子阴影大全 2.渐变背景 点击进入color.oulu 3.CSS简化压缩 点击进入toptal 4.CSS可视化 点击进入CSS可视化 这个强推&#xff0c;话不多说&#xff0c;看图! 5.Marko 点击进入Marko 有很多按钮样式 6.getwaves 点击进入getwaves 生…

云集电商:如何通过 OceanBase 实现降本 87.5%|OceanBase案例

云集电商&#xff0c;一家聚焦于社交电商的电商公司&#xff0c;专注于‘精选’理念&#xff0c;致力于为会员提供超高性价比的全品类精选商品&#xff0c;以“批发价”让亿万消费者买到质量可靠的商品。面对近年来外部环境的变化&#xff0c;公司对成本控制提出了更高要求&…

软考高级架构 - 8.3 - ATAM方法架构评估实践 - 超详细讲解+精简总结

总结&#xff1a; ATAM时评估架构的质量属性方法&#xff0c;帮助权衡和识别风险&#xff0c;分为四个阶段。 阶段1——演示 介绍ATAM方法&#xff0c;介绍软件商业目标和关键需求&#xff0c;详细介绍要被评估的架构。 阶段2——调查和分析 深入分析系统架构&#xff0c;评估…

Redis - Hash 哈希

一、基本认识 ⼏乎所有的主流编程语⾔都提供了哈希&#xff08;hash&#xff09;类型&#xff0c;它们的叫法可能是哈希、字典、关联数 组、映射。在Redis中&#xff0c;哈希类型是指值本⾝⼜是⼀个键值对结构&#xff0c;形如key"key"&#xff0c;value{{ field1, v…

C++上机实验|多态性编程练习

1.实验目的 (1)理解多态性的概念。 (2)掌握如何用虚函数实现动态联编 (3)掌握如何利用虚基类。 2.实验内容 设计一个飞机类 plane,由它派生出歼击机类fighter和轰炸机类 bomber,歼击机类fighter 和轰炸机类bomber 又共同派生出歼轰机(多用途战斗机)。利用虚函数和虚基类描述…

岛屿数量 广搜版BFS C#

和之前的卡码网深搜版是一道题 力扣第200题 99. 岛屿数量 题目描述 给定一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的矩阵&#xff0c;你需要计算岛屿的数量。岛屿由水平方向或垂直方向上相邻的陆地连接而成&#xff0c;并且四周都是水域。…

动态规划 之 路径问题 算法专题

一. 不同路径 不同路径 状态表示 dp[i][j] 表示走到[i][j]位置, 有几种不同的路径状态转移方程 以离[i][j] 最近的位置划分问题 1.从[i - 1][j] 到[i][j], 到[i][j]位置的不同路径数 就是和 到[i - 1][j]位置的不同路径数相同, 即dp[i][j] dp[i - 1][j] 2.从[i][j - 1] 到[i…

别名路径联想设置

如何使用/进行路径提示&#xff1f; 找到jsconfig.json文件&#xff0c;如何项目中没有的话&#xff0c;自行创建 {"compilerOptions": {"paths": {"/*": ["./src/*"]}},"exclude": ["node_modules", "dis…

40V耐压 降压恒压芯片 SL3061替换XL4301 支持2.5A电流 内置MOS管

一、基本性能参数对比 二、替换可行性分析 耐压能力&#xff1a;SL3061的耐压能力为40V&#xff0c;而XL4301的工作电压范围为8V至40V&#xff0c;最大耐压可能更高&#xff08;达到45V&#xff09;。在多数应用场景下&#xff0c;SL3061的耐压能力应能满足需求&#xff0c;但…

字节青训-小D的 abc 变换问题

问题描述 小D拿到了一个仅由 "abc" 三种字母组成的字符串。她每次操作会对所有字符同时进行以下变换&#xff1a; 将 a 变成 bc将 b 变成 ca将 c 变成 ab 小D将重复该操作 k 次。你的任务是输出经过 k 次变换后&#xff0c;得到的最终字符串。 例如&#xff1a;对于初…

设计模式09-行为型模式2(状态模式/策略模式/Java)

5.4 状态模式 5.4.1 状态模式的定义 1.模式动机&#xff1a;有些对象具有多种状态&#xff0c;这些状态在某些情况下能够相互转换&#xff0c;对象在不同的状态下将具有不同的行为&#xff0c;将拥有状态的对象中和状态的行为分离。 2.模式定义&#xff1a;允许一个对象在其…

Postman上传图片如何处理

打开Postman&#xff0c;创建一个新的请求 URL: http://90.104.232.49:80/dev-api/appcommon/upload 如果有解密进入上传就在请求头添加 点击“Body”选项卡。 选择“form-data”类型。 在“KEY”列中输入文件字段的名称&#xff0c;例如file。 在“VALUE”列中&#xff0…

MongoDB笔记03-MongoDB索引

文章目录 一、前言1.1 概述1.2 MongoDB索引使用B-Tree还是BTree&#xff1f;1.3 B 树和 B 树的对比1.4 总结 二、索引的类型2.1 单字段索引2.2 复合索引2.3 其他索引 三、索引的管理操作3.1 索引的查看3.2 索引的创建3.2.1 单字段索引3.2.2 复合索引 3.3 索引的移除3.3.1 指定索…

MongoDB Shell 基本命令(三)聚合管道

管道含义 类似Linux中的管道&#xff0c;前一个命令的输出作为后一个命令的输入。 显示网络连接、路由表和网络接口统计信息 netstat -ano -netstat:network statistics 网络统计 -a:显示所有连接和监听端口&#xff0c;包括所有活动的TCP和UDP连接。 -n:以数字形式显示地址…