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

 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.mzph.cn/pingmian/59309.shtml

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

相关文章

Redis数据库测试和缓存穿透、雪崩、击穿

Redis数据库测试实验 实验要求 1.新建一张user表&#xff0c;在表内插入10000条数据。 2.①通过jdbc查询这10000条数据&#xff0c;记录查询时间。 ②通过redis查询这10000条数据&#xff0c;记录查询时间。 3.①再次查询这一万条数据&#xff0c;要求根据年龄进行排序&#…

Pyecharts使用本地文件绘制美国地图

访问我的github仓库outer_resources中的USA.json文件: big_data_analysis/outer_resources/USA.json at main Just-A-Freshman/big_data_analysis 保存到当前目录下; 随后运行代码: from pyecharts import options as opts from pyecharts.charts import Map from pyechar…

学习党的二十大精神,推动科技创新和发展

党的二十大提出了“创新是引领发展的第一动力”的重要思想&#xff0c;这也是我一直以来坚持的理念。在工作中&#xff0c;注重培养自己的创新精神和实践能力&#xff0c;不断探索前沿科技&#xff0c;提高自己的工作能力和科技创新水平。 网络安全建设是保障国家能源安全、提升…

LaTeX 中如何实现空格、空行与换行

诸神缄默不语-个人CSDN博文目录 在 LaTeX 中&#xff0c;空格和换行的处理方式与普通文本编辑器不同。本文将详细讲解 LaTeX 中如何插入空格、空行和换行&#xff0c;帮助大家更灵活地排版。 文章目录 1. 空格特殊空格符号使用 \hspace 插入水平空格使用 \quad 和 \qquad 2. 空…

zabbix 7.0 安装(服务器、前端、代理等)

https://www.zabbix.com/download 使用上面的地址&#xff0c;按教程执行命令安装

andrular输入框input监听值传递

效果图&#xff1a; step1: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.html <button mat-button (click)“openDialog()”>Open dialog step2: E:\projectgood\ajnine\untitled4\src\app\apple\apple.component.ts import {Component, inject}…

考公人数攀升?地信、测绘、地质、遥感等专业,能报考哪些单位

近年来&#xff0c;考公人数持续飙升&#xff0c;国考报名人数更逐年攀升。2025年国家公务员考试共有341.6万人通过资格审查&#xff0c;报录比达86:1。国考报名人数再创新高。 国家公务员考试时间安排 地理学相关岗位分析 地信属于地理科学类&#xff0c;测绘类中不包括地信&…

Git操作命令

Git操作命令 1、删除未加入git的文件 1、删除未加入git的文件 D:\Idea_Workspace\rightcloud-v397\rightcloud-schedule>git clean -f -d -n Would remove src/main/java/cn/com/cloudstar/rightcloud/schedule/system/task/push/S.java Would remove src/main/java/cn/com…

如何设置定时关闭或启动整个docker而不是某个容器

如果你想定时关闭和启动整个Docker服务&#xff0c;而不是单个容器&#xff0c;可以使用系统级别的定时任务&#xff08;如Cron&#xff09;来实现。以下是如何操作的具体步骤&#xff1a; 使用Cron来定时关闭和启动Docker服务 打开Cron表: 打开终端。输入 crontab -e 编辑当前…

Pr 视频效果:超级键

视频效果/键控/超级键 Keying/Ultra Key 超级键 Ultra Key效果是 Premiere Pro 中功能强大的抠像工具&#xff0c;主要用于绿幕/蓝幕抠像。通过选择要抠除的颜色&#xff08;通常是绿幕或蓝幕的颜色&#xff09;&#xff0c;即可以将该颜色的像素设为透明&#xff0c;实现主体与…

24-11-1-读书笔记(三十一)-《契诃夫文集》(五)下([俄] 契诃夫 [译] 汝龙)生活乏味但不乏魅力。

文章目录 《契诃夫文集》&#xff08;五&#xff09;下&#xff08;[俄] 契诃夫 [译] 汝龙&#xff09;生活乏味但不乏魅力。目录阅读笔记总结 《契诃夫文集》&#xff08;五&#xff09;下&#xff08;[俄] 契诃夫 [译] 汝龙&#xff09;生活乏味但不乏魅力。 休息&#xff0c…

戴尔电脑 Bios 如何进入?Dell Bios 进入 Bios 快捷键是什么?

BIOS&#xff08;基本输入输出系统&#xff09;是计算机启动时运行的第一个程序&#xff0c;它负责初始化硬件并加载操作系统。对于戴尔电脑用户来说&#xff0c;有时可能需要进入 BIOS 进行一些特定的设置调整&#xff0c;比如更改启动顺序、调整性能选项或解决硬件兼容性问题…

rediss数据结构及其底层实现

Redis 是一个基于内存的高性能键值对数据库&#xff0c;它支持多种数据结构&#xff0c;每种数据结构都有其特定的底层实现。以下是Redis中一些主要数据结构及其底层实现&#xff1a; 字符串&#xff08;String&#xff09;&#xff1a; Redis的字符串类型使用简单动态字符串&a…

如何正确进行activemq服务搭建及性能调优?

引言 ActiveMQ是一个开源的消息中间件&#xff0c;广泛应用于企业级应用中&#xff0c;以实现异步通信和解耦。 随着分布式系统和微服务架构的普及&#xff0c;消息中间件的需求日益增加。 本文将详细介绍如何正确搭建ActiveMQ&#xff0c;并进行性能调优&#xff0c;以满足…

【C++】内存管理(二):operator new/delete

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解C的operator new/delete&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 1 new/delete的底层2 new/delete的底层调用顺序3 delete[ ]调用析构函数的次数…

transformers 框架使用详解,bert-base-chinese

以 bert-base-chinese 模型为例&#xff0c;模型目录 model_name "C:/Users/Administrator.DESKTOP-TPJL4TC/.cache/modelscope/hub/tiansz/bert-base-chinese" bert-base-chinese 模型大小只有400多兆&#xff0c;参数的量级在百万级别&#xff0c;与现在动辄几十…

acmessl.cn提供接口API方式申请免费ssl证书

目录 一、前沿 二、API接口文档 1、证书可申请列表 简要描述 请求URL 请求方式 返回参数说明 备注 2、证书申请 简要描述 请求URL 请求方式 业务参数 返回示例 返回参数说明 备注 3、证书查询 简要描述 请求URL 请求方式 业务参数 返回参数说明 备注 4、证…

使用 JWT 实现安全认证的技术详解

一、概述 **JWT&#xff08;Json Web Token&#xff09;** 是一种用于安全地在客户端和服务器之间传递信息的机制。JWT 在网络应用环境中扮演重要角色&#xff0c;特别适合用于分布式系统中的单点登录&#xff08;SSO&#xff09;&#xff0c;实现跨站点、跨应用的身份验证。 …

【那些年踩过的坑-前端篇- Mac版本】npm init vite 失败,报错`CERT_HAS_EXPIRED npm ERR

CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to htt 开发中vue3项目执行npm init vite 命令报错了&#xff0c;vite 需要node.js版本> 12.0.0 beiluobeiluodeMBP vue3-demo % node -v v16.13.0 beiluobeiluodeMBP vue3-demo % npm init vite npm E…

问:Redis常见性能问题及解法?

Redis 作为一个高性能的键值存储系统&#xff0c;在实际应用中可能会遇到各种性能问题。本文将探讨 Redis 的常见性能问题&#xff0c;并提供相应的解决建议。主要针对五个关键问题进行讨论&#xff1a;Master 节点的持久化工作、Slave 节点的数据备份、主从复制的网络环境、主…