当前位置: 首页 > news >正文

【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.lryc.cn/news/477052.html

相关文章:

  • 从0开始搭建一个生产级SpringBoot2.0.X项目(八)SpringBoot 使用Redis
  • Ubuntu20.04两种安装及配置中文界面、输入法、换源、共享文件夹实现,及注意事项
  • 后端Java学习:springboot之文件上传(阿里云OSS存储)
  • python通过lunarcalendar库使用农历日期
  • MySQL高级--范式与反范式
  • 实验05多重循环---7-02 打印矩形图案
  • 明源地产ERP WFWebService.asmx 反序列化RCE漏洞复现
  • 学习笔记:黑马程序员JavaWeb开发教程(2024.11.4)
  • 开源自托管数据管理工具全面指南
  • 护工系统|护工陪护软件|护工系统设计
  • 电商领域软件系统实战:基于TiDB的分布式数据库应用
  • 鸢尾博客项目开源
  • Google封号潮来袭!跨境卖家如何解封?
  • 路径规划 | ROS中多个路径规划算法可视化与性能对比分析
  • 使用 PyCharm 构建 FastAPI 项目:零基础入门 Web API 开发
  • Prim算法与Dijstra算法
  • 水经微图IOS版5.6.1发布,新增图源二维码分享并修订徒步模式功能
  • 复现第三周
  • Django---数据库(多表关联)
  • 2024系统架构师---论软件可靠性设计及其应用论文
  • SpringBoot在线教育系统:云部署策略
  • Zabbix 6.0 部署
  • 用Python遍历输出烟感名称和状态
  • Redis的持久化以及性能管理
  • Docker部署Meta-Llama-3.1-70B-Instruct API openai格式,vLLM速度对比
  • USB协议学习
  • TDengine 数据订阅 vs. InfluxDB 数据订阅:谁更胜一筹?
  • 用户批评 SAP 的人工智能战略
  • Jest进阶知识:React组件的单元测试
  • MATLAB——矩阵操作