前端自学1——HTML基础及vs code一些插件、技巧

已于 2024-07-09 17:51:41 修改
阅读量293 收藏 4
点赞数 5
文章标签： 前端 html vscode
于 2024-07-09 17:39:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57364534/article/details/140302352
版权

1.web标准的构成：结构、表现、行为

结构

用于对网页元素进行整理和分类，html

表现

用于设置网页元素的板式、颜色、大小等外观样式，css

行为

指网页模型的定义及交互的编写，JavaScript

web标准提出的最佳体验方案：结构、样式、行为相分离

2.HTML标签定义

标签名

定义

说明

<html></html>

HTML标签

根标签，页面中最大的标签

<head></head>

文档的头部

在head标签中必须设置的标签是title

<title></title>

文档的标题

让页面拥有属于字节的网页标签

<body></body>

文档的主体

元素包含文档的所有内容

3.利用vscode创建html文件

（1）保存文件，后缀为.html

（2）自动生成页面骨架结构：输入!按下Tab键

（3）F5运行页面

4.vscode插件

（1）Auto Rename Tag，修改开始标签，结束标签自动变化

（2）设置，格式化两个√

（3）open in browser，右键选择第一个，或Alt+B打开页面

（4）实时预览， live server，打开目录文件，编写后ctrl＋s，页面自动更新

（5）vscode-icons，设置文件图标主题

（6）会了吧，自动翻译

5.vscode快捷键

（1）快速复制一行：shift+alt+上下键 或者cv

（2）添加多个光标：ctrl+alt+上下箭头

whfdcd！
关注
【HTML】常用标签语义及用法、VSCode开发常用插件
weixin_45895411的博客
03-07 5100
本文介绍HTML基础知识，包括编辑器的使用，html的结构以及常用标签
从零开始学WEB前端——网页的骨架——HTML理论讲解
m0_67266585的博客
03-06 314
??项目介绍 先做个自我介绍，本人是一个没人写前端所以就自学前端的后端程序员??。在此项目中我会和大家一起从零基础开始学习前端，从后端程序员的视角来看前端，受限于作者的水平本项目暂时只会更新到前端框架VUE，不会涉及node.js。该项目适合零基础的小白或者和我一样开发网站没人写前端所以自学前端的后端程序员??。 该项目的学习顺序是按照我自己学习时总结出来的，其中的每个知识点都是我认真去理解的，同时也查了很多的资料，所有的参考资料我都放在了文章末尾。尊重开源，尊重知识产权。每一个案例我都亲手写过并觉得不错才
vscode 插件-常用插件
u012732909的博客
09-08 1万+
三.VSCode常用插件(安装步骤同汉化) 3.1Auto Close Tag (自动闭合HTML/XML标签) 3.2Auto Rename Tag (自动帮你完成尾部闭合标签的同步修改，不过有些bug。) Prettier(Prettier 是目前 Web 开发中最受欢迎的代码格式化程序) 安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint，那么还有个 Prettier ...
VSCode常用扩展(html js相关),非常强大的plugin
zhaoyy0513的博客
02-02 6003
版本可能会有所不同 但是重要的是名字！   Name: AutoFileName Id: jerryhong.autofilename Description: auto complete file name Version: 0.1.3 Publisher: JerryHong VS Marketplace Link: https://marketplace.visualstudio.com...
vs code中编写html的配置，插件安装
最新发布
weixin_43794311的博客
08-24 496
vs code好用的几款插件
vscode 前端常用插件推荐
m0_61418075的博客
04-12 3248
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料一个人可以走的很快，但一群人才能走的更远。
Vs code好用的插件
weixin_50582284的博客
02-23 1063
自己想用插件的时候发现都是英文名不好记，就在这写一篇vs code 的插件目录。大多都是自己使用过的。在网上收集了 插件的具体是干什么的。以后还会基本插件1.Chinese。
从零开始学WEB前端——前置知识以及环境搭建
m0_67266042的博客
03-06 1102
??项目介绍 先做个自我介绍，本人是一个没人写前端所以就自学前端的后端程序员??。在此项目中我会和大家一起从零基础开始学习前端，从后端程序员的视角来看前端，受限于作者的水平本项目暂时只会更新到前端框架VUE，不会涉及node.js。该项目适合零基础的小白或者和我一样开发网站没人写前端所以自学前端的后端程序员??。 该项目的学习顺序是按照我自己学习时总结出来的，其中的每个知识点都是我认真去理解的，同时也查了很多的资料，所有的参考资料我都放在了文章末尾。尊重开源，尊重知识产权。每一个案例我都亲手写过并觉得不错才
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
vs code 安装 HTML+CSS 书写增强型插件
weixin_52275610的博客
10-03 4551
首先在扩展商店中搜索 HTML，下载框中的三个插件，第一个用于对 HTML 的一些书写支持（俺也不太清楚，看视频选的，但是好像被禁用了，说是有其他的插件对其受限，怀疑是因为和第二个起了冲突）；（如果是下图情况，直接回车即可），即可在 vscode 中查看刚刚写的页面，然后我们要修改时，只要保存完成那么这个内嵌的页面窗口就会立即自动刷新，而不用我们手动进行刷新。最后，本文会持续修改和更新，如果对本分栏的其他知识也感兴趣，可以移步目录导航专栏，查看本分栏的目录结构，也更方便对于知识的系统总结！
vs code 工具HTML、css、javaScript、Vue、等代码插件安装
cyz141001的博客
11-01 2474
2、files: Auto Save Delay 默认值为：1000这个是自动保存时间，可更改。1、files:Auto Save将值更改为afterDelay, 这个是设置自动保存。8、Path Intellisense 这个是路径提示插件推荐安装，插入图片时自动提示图片路径。10、Vue 3 Snippets 这个是vue插件个人学习用的 ,代码提示。3、HTML CSS Support 这个时CSS代码提示。9、Vetur 这个是vue插件个人学习用的。
vscode使用插件和快捷总结
周家大小姐
03-11 3万+
官网：https://code.visualstudio.com/简介VSCode是微软出的一款轻量级代码编辑器，免费而且功能强大，对JavaScript和NodeJS的支持非常好，自带很多功能，例如代码格式化，代码智能提示补全、Emmet插件等。VSCode推荐一个项目以文件夹的方式打开。一、设置首选项下载安装完成后，打开编辑器，首先要设置主题、字体大小等。1. 设置主题文件→首选项→颜色主题2...
VSCode插件制作：HTML代码自动填充
yushulx的专栏
12-13 6万+
Visual Studio Code不但跨平台，还有良好的扩展性。我们可以在Visual Studio Marketplace上找到各种各样的插件。这里分享下怎样制作一个简单的用于代码填充的插件。 自定义代码片段 键盘快捷键Ctr+Shift+P搜索关键字snippet： 选择HTML： 这个时候在C:\Users\\AppData\Roaming\Code\User\snippe
visual Studio Code（VS code）软件中HTML超级好用的一个插件 liveserver，vs code浏览网页
wang_9909的博客
10-04 1875
这个插件可以让我们在visual Studio Code中自己浏览html网页 安装教程： 1.点击左侧的这个 2.在搜索框输入liveserver 点击install安装即可。 3.配置本地VS code浏览网页 点击 选择 扩展设置 找到这个，如果勾上就能使用VS code浏览本地网页了。 ...
vscode编写html，常用快捷方式与插件
weixin_33858336的博客
01-31 2万+
一、tab键补全 1.1打开vscode新建html文件，在第一行输入!，然后按下tab键，会直接出现编写html语言的基本框架标签 效果如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie...
VScode插件：前端篇（方便HTML+CSS+JavaScript开发）
STAR_LORD
08-21 1万+
插件收集 插件名称 功能 Chinese (Simplified) Language Pack for Visual Studio Code 中文界面 vscode-icons 图标集，资源管理器一目了然 Live Server 标准HTML页面浏览器自动刷新 Markdown Preview Enhanced Markdown文件预览增强 HTML CSS Su...
VS Code 必备插件推荐
小贤笔记
08-12 1万+
插件 说明 备注 Auto Close Tag 自动添加HTML / XML关闭标签 Auto Rename Tag 自动重命名配对的HTML / XML标签 Beautify 格式化代码 (查看使用方法) Bracket Pair Colorizer 颜色识别匹配括号 Code ...
使用Visual Studio Code编写VUE所使用的插件
qq_42786138的博客
12-12 536
Auto Close Tag自动闭合HTML标签 Auto Rename Tag修改HTML标签时，自动修改匹配的标签 Bookmarks添加行书签 Can I UseHTML5、CSS3、SVG的浏览器兼容性检查 Code Runner运行选中代码段（支持大量语言，包括Node） CodeBing在VSCode中弹出浏览器并搜索，可编辑搜索引擎 Color Highlight颜色值在代码中高亮显示 Color Picker拾色器 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值