前端秘法引言(配置vscode, 以及html的基础)

简介: 前端秘法引言(配置vscode, 以及html的基础)



一.配置环境vscode

vscode官网https://code.visualstudio.com/

点击右上角的download

根据不同的操作系统进行下载安装,我这里选的是Windows x64

安装好后打开,点击左上角的文件(Files)->打开文件夹(open folder)->创建新文件->选择

点击第一个图标,创建一个后缀名为.html的文件即可

二.配置插件

这里我们配置四个插件

大概说一下,第一个插件是为了保证我们在修改标签时同时修改<></>这两个

第二个是配置汉语言包,可有可无

第三个是我们能够直接在vscode界面运行代码打开浏览器

第四个是我们再修改并保存代码后不用刷新浏览器

三.vscode的实用小技巧

1.快速生成代码大纲

!+回车即可

lang = 'en'是默认语言为英语

charset="UTF-8"是默认的解码规则为UTF-8,因为大部分浏览器的编码规则是UTF-8

name="viewport" content="width=device-width, initial-scale=1.0"

这个解释起来有点麻烦,不过通俗来讲是为了让你的程序在移动端也能运行

2.Ctrl+s

快速保存代码,代码只有保存后才能在浏览器上显示出来效果

3.Ctrl+/

批量注释代码,html的注释语言为<!--  -->

四.标题段落换行标签

事实上html语言本身就是一种数据结构--Dom树,通过编写代码实现对数据的增删查改,而html语言是有一个一个标签组成的,这些标签实际就是树的节点,而其中又通过缩进来区分不同的层级,<html>是根,<body>与<head>同级

标题标签

<title>

在这个位置显示

段落标签

<p>

换行标签

<br>

五.格式化标签

1.加粗,strong,b

2.倾斜,em,i

3.删除线,del,s

4.下划线,ins,u

每种格式化标签都有两种代码表达方式,区别就是前者就有强调性

相关文章
|
7月前
|
Python
在VScode环境下配置Python环境的方法
经过上述步骤,你的VSCode环境就已经配置好了。请尽情享受这扇你为自己开启的知识之窗。如同你在冒险世界中前行,你的探索之路只有越走越广,你获得的知识只会越来越丰富,你的能力只会越来越强。
724 37
|
8月前
|
移动开发 前端开发 安全
|
9月前
|
人工智能 前端开发 JavaScript
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
1547 2
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
|
9月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
8159 23
|
10月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
298 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
11月前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
514 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
8月前
|
前端开发
|
8月前
|
前端开发 JavaScript
|
11月前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
557 26
|
11月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
365 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章