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

 

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

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

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

目录

零：HTML 开发工具 VSCode 的使用

1：创建项目

2：创建格式模板：！+enter

3：修改标题 title

4：标题标签 h

5：段落标签 p

-toc” style=”margin-left:40px;”>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 标签首行不会缩进

“>7：图片标签

效果如下

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，

浏览器呈现的效果

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