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

 

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

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

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

目录

零：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，

浏览器呈现的效果

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