【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;要求根据年龄进行排序&#…

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;测绘类中不包括地信&…

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;比如更改启动顺序、调整性能选项或解决硬件兼容性问题…

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

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

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

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

【docker】docker 环境配置及安装

本文介绍基于 官方存储库 docker 的环境配置、安装、代理配置、卸载等相关内容。 官方安装文档说明&#xff1a;https://docs.docker.com/engine/install/ubuntu/ 虚拟机环境 Ubuntu 20.04.6 LTS 安装步骤 添加相关依赖 sudo apt-get update sudo apt-get install ca-certifi…

机器学习在时间序列预测中的应用与实现——以电力负荷预测为例(附代码)

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 1. 引言 随着数据采集技术的发展&#xff0c;时间序列数据在各个领域中的应用越来越广泛。时间序列预测旨在基于过去的时间数据来…

uniapp+vue加油服务系统 微信小程序

文章目录 项目介绍具体实现截图技术介绍mvc设计模式小程序框架以及目录结构介绍错误处理和异常处理java类核心代码部分展示详细视频演示源码获取 项目介绍 基于微信小程序的加油服务系统设计为微信小程序和后台管理两个服务端&#xff0c;并对此设计相应的功能模块如下&#x…

大数据新视界 -- 大数据大厂之 Impala 资源管理:并发控制的策略与技巧(下)(6/30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

Linux(CentOS)设置防火墙开放8080端口,运行jar包,接收请求

1、查看防火墙状态 systemctl status firewalld 防火墙开启状态 2、运行 jar 包&#xff0c;使用8080端口 程序正常启动 3、使用 postman 发送请求&#xff0c;失败 4、检查端口是否开放&#xff08;需更换到 root 用户&#xff09; firewall-cmd --zonepublic --query-por…

跳表原理-课堂笔记

课程地址 跳表是一种基于随机化的有序数据结构&#xff0c;它提出是为了赋予有序单链表以 O(logn) 的快速查找和插入的能力 创建 首先在头部创建一个 sentinel 节点&#xff0c;然后在 L1 层采用“抛硬币”的方式来决定 L0 层的指针是否增长到 L1 层 例如上图中&#xff0c;L…

Mybatis学习笔记(二)

八、多表联合查询 (一) 多表联合查询概述 在开发过程中单表查询不能满足项目需求分析功能&#xff0c;对于复杂业务来讲&#xff0c;关联的表有几张&#xff0c;甚至几十张并且表与表之间的关系相当复杂。为了能够实业复杂功能业务&#xff0c;就必须进行多表查询&#xff0c…

基于 JAVASSM(Java + Spring + Spring MVC + MyBatis)框架开发一个九宫格日志系统

基于 JAVASSM&#xff08;Java Spring Spring MVC MyBatis&#xff09;框架开发一个九宫格日志系统 步骤一&#xff1a;需求分析 明确系统需要实现的功能&#xff0c;比如&#xff1a; 用户注册和登录添加日志&#xff08;包含标题、内容、图片&#xff09;查看日志列表…

rom定制系列------小米8青春版定制安卓14批量线刷固件 原生系统

&#x1f49d;&#x1f49d;&#x1f49d;小米8青春版。机型代码platina。官方最终版为 12.5.1安卓10的版本。客户需要安卓14的固件以便使用他们的软件。根据测试&#xff0c;原生pixeExpe固件适配兼容性较好。为方便客户批量进行刷写。修改固件为可fast批量刷写。整合底层分区…

浅谈UI自动化

⭐️前言⭐️ 本篇文章围绕UI自动化来展开&#xff0c;主要内容包括什么是UI自动化&#xff0c;常用的UI自动化框架&#xff0c;UI自动化原理等。 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f349;博主将持续更新学习记录收获&#xff0c;友友们有任何问题…

blender导入的图片渲染看不见,图片预览正常,但渲染不出

在使用Blender时&#xff0c;我们经常会遇到导入图片后在预览渲染中显示&#xff0c;但在实际渲染时图片消失的问题。本文将提供详细的解决方法&#xff0c;帮助大家解决“Blender导入的图片渲染图像不显示”的问题。 问题原因 导入的图片在Blender中只是一张图&#xff0c;并…