首页 前端知识 【HTML】——VSCode 基本使用入门和常见操作

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

2024-11-05 23:11:29 前端知识 前端哥 990 570 我要收藏

 8e19eee2be5648b78d93fbff2488137b.png

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

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

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

目录

零:HTML开发工具VSCode的使用

1:创建项目

2:创建格式模板:!+enter

3:修改标题title

4:标题标签h

5:段落标签p

6:换行标签

-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标签首行不会缩进

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 


实现效果:

举例③:密码框+提交按钮

实现效果

举例④:表单
描述了要把数据按照什么⽅式, 提交到哪个⻚⾯中
转载请注明出处或者链接地址:https://www.qianduange.cn//article/20058.html
标签
VSCode使用
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
浏览器升级提示:您的浏览器版本较低,建议您立即升级为知了极速浏览器,极速、安全、简约,上网速度更快!立即下载
复制成功!