【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.xdnf.cn/news/7043.html

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

相关文章

区块链的安全性与透明性:Web3如何重塑信任机制

在数字化时代的浪潮中&#xff0c;信任机制的建立显得尤为重要。随着Web3的崛起&#xff0c;区块链技术以其独特的安全性与透明性&#xff0c;正在重塑我们对信任的理解。区块链不仅为去中心化的互联网架构提供了基础&#xff0c;还通过加密技术和分布式账本&#xff0c;实现了…

[OS] Assignment 3-VM

虚拟机设置 虚拟机登录与使用说明 因为项目3基于 xv6 系统运行&#xff0c;它需要一系列支持工具链。我们已经为您准备好了所有必要的环境。 我们提供了 CSC3150_a3_xv6.ova 文件供 x64 架构 用户使用&#xff08;可以导入到 VirtualBox 或 VMware 中&#xff09;&#xff0…

Redis 位图实现签到之长时间未签到预警

#目前通行系统项目中有一个新需求【通过对通行记录数据定时分析&#xff0c;查询出长时间没 有刷卡/刷脸通行的学生】 #一看到通行签到相关&#xff0c;就想到了redis的位图&#xff0c;理由也有很多帖子说明了&#xff0c;最大优点占用空间小。 一.redis命令行 SETBIT&#…

java 多态

1.认识多态 class animals{String name"animals";public void run(){} } class cat extends animals{String name"cat";Overridepublic void run(){System.out.println("cat run");} } class dog extends animals{String name"dog";Ov…

Android TextView自动换行文本显示不全解决

某些情况下&#xff0c;TextView自动换行后&#xff0c;会出现每行结尾处显示不全的问题&#xff0c; 如图&#xff1a; 常见解决方案&#xff1a; 设置TextView的“ellipsize”属性为“end” 实测无效&#xff01;将TextView外部的Layout改为RelativeLayout 实测无效&…

基于springboot+vue实现的养老院管理系统(源码+L文+ppt)

基于springbootvue实现的养老院管理系统&#xff08;源码L文ppt&#xff09;4-106 养老院系统管理是一个综合性养老在线平台&#xff0c;旨在综合并简化养老机构中的照护流程。该系统集成了多种功能&#xff0c;以支持医生、护士、家属及管理员等不同角色的需求。对于医务人员而…

智慧城市的守护者——智能井盖监测终端

城市化进程的加速推进使得基础设施建设成为提升城市品质的关键环节。然而&#xff0c;在这一进程中&#xff0c;市政公用设施中的井盖与地下线缆的安全问题却日益凸显。由于缺乏有效的实时监控与管理体系&#xff0c;给犯罪分子留下了可趁之机&#xff0c;频繁发生的井盖被盗及…

uniApp之uni-file-picker使用踩坑

标题党~也不算坑吧 就是初体验 上传是需要存储一下子的&#xff0c;我以为uniApp是自己免费开的服务给大家中转使用&#xff0c;就没管这个事&#xff0c;但是官网是这么说的&#xff1a; 就我是怎么发现的&#xff0c;使用了一段时间后&#xff0c;上传的图片都裂了&#xff…

动态规划理论基础和习题【力扣】【算法学习day.23】

前言 ###我做这类文档一个重要的目的还是给正在学习的大家提供方向&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;&#xff09;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非常非常高滴&am…

Docker:介绍与安装

Docker官网与仓库地址 docker官网&#xff1a;http://www.docker.comopenDocker Hub官网: https://hub.docker.com/open Docker三要素 镜像 (Image) 镜像是Docker的核心概念之一&#xff0c;它是不可变的、只读的&#xff0c;并包含了一套文件系统&#xff0c;里面包含了运…

基于SpringBoot的微信小程序学生运动打卡系统【附源码】

基于SpringBoot的微信小程序学生运动打卡系统 效果如下&#xff1a; 系统主页面 论坛页面 登陆页面 我的页面 系统登录页面 管理员主页面 公告信息页面 研究背景 随着数字化时代的到来&#xff0c;大学生的生活节奏日益加快&#xff0c;学习压力与社交活动并行不悖。如何在繁…

【go从零单排】go中的nil到底是啥意思?

Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 nil 在Go语言中&#xff0c;nil 是一个预定义的标识符&#xff0c;用于表示指针、切片、映射、通道、接口和函数的…

forEach可以遍历不可枚举属性吗

首先第一个问题,forEach能不能遍历对象的属性 const obj { a: 1, b: 2, c: 3 }; obj.forEach((item) > console.log(item))运行这段代码我们发现发生了一个错误 这说明forEach是不可以遍历对象的属性的 在js中,forEach 方法用于遍历数组或类数组对象&#xff08;如 NodeL…

书生大模型实战营第四期-入门岛-1. Linux前置基础

入门岛-Linux前置基础 书生大模型实战营-第四期-Linux前置基础&#xff1a; 任务&#xff1a;https://github.com/InternLM/Tutorial/blob/camp4/docs/L0/linux/task.md 文档&#xff1a;https://github.com/InternLM/Tutorial/tree/camp4/docs/L0/linux 任务描述完成所需时…

Webserver(4.9)本地套接字的通信

目录 本地套接字 本地套接字 TCP\UDP实现不同主机、网络通信 本地套接字实现本地的进程间的通信&#xff0c;类似的&#xff0c;一般采用TCP的通信流程 生成套接字文件 #include<arpa/inet.h> #include<stdio.h> #include<stdlib.h> #include<unistd.h&…

ubuntu22.04 docker-compose搭建apisix高可用

首先你得先确保每台主机安装了docker和docker-compose 3台主机 没有安装docker和docker-compose的可以看我前两篇博客 可以先克隆仓库 git clone https://github.com/apache/apisix-docker.git 进入example目录 拷贝dashboard配置文件 将all-in-one中apisix-dashboard文件夹拷…

stable diffusion 大模型

本节内容&#xff0c;给大家带来的是stable diffusion的基础模型课程。基础模型&#xff0c;我们有时候也称之为大模型。在之前的课程中&#xff0c;我们已经多次探讨过大模型&#xff0c;并且也见识过一些大模型绘制图片的独特风格&#xff0c;相信大家对stable diffusion大模…

AI-Prompt、RAG、微调还是重新训练?选择正确的生成式AI的使用方法

生成式人工智能正在快速发展&#xff0c;许多人正在尝试使用这项技术来解决他们的业务问题。一般情况下有4种常见的使用方法&#xff1a; Prompt Engineering Retrieval Augmented Generation (RAG 检索增强生成) 微调 从头开始训练基础模型(FM) 本文将试图根据一些常见的…

数字化装配助力柔性制造与快速换型,驱动效率飞跃

数字化装配是利用先进的数字化技术&#xff0c;如三维建模、仿真分析、物联网、大数据、人工智能等&#xff0c;对装配过程进行精确设计、优化控制和智能管理的一种现代化生产方式。它打破传统装配依赖于人工经验和物理样机的局限&#xff0c;通过模拟环境进行预装配验证&#…

软件测试学习笔记丨Vue常用指令-输入绑定(v-model)

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/23461 指令 指令是将一些特殊行为应用到页面DOM元素的特殊属性 格式都是以v-开始的&#xff0c;例如&#xff1a; v-model&#xff1a;双向绑定v-if和v-else&#xff1a;元素是否存在v-sho…