vscode如何选择写HTML还是css,什么是HTML和CSS，vscode编辑器

本博文大纲

什么是HTML、CSS?

宇宙第一编辑器 VS Code

chrome浏览器？

深入了解网站开发

Web前端的三大核心技术：

html+css+js 举例说明

什么是HTML、CSS?

是做网站的编程语言。

浏览器把代码解析后的样子就是我们看到的网站。如何看到网站的原始代码呢？通过鼠标右键选择查看网页源代码。

如何去写代码？写到哪里呢？

一个网站就是由N多个网页组成的。每一个网页都是一个 .html文件

举例：电视剧40集，每集都是一个.mp4文件

宇宙第一编辑器 VS Code

VS Code,全称 Visual Studio Code,来自微软，是一个开源的、基于 Electron 的轻量代码编辑器。

下载 VS Code：https://code.visualstudio.com

安装好了的 vscode 是英文的。

安装插件？

点击 extensions 图标 -- > 搜索关键字  -- > 找到对应的 -- > 安装

关键字：Chinese (Simplified) Language、open in browser、View In Browser

怎样写一个html文件呢？怎样在浏览器中运行 html 文件呢？

打开 VS Code

点击菜单  文件 --> 打开文件夹 --> 选择想要的文件夹  ==》就可将想要的文件夹加到了资源管理器中

就可以在想要的文件夹下创建 html 文件了

编辑 相应的 html 文件

保存

右键 --> open in default browser | open in other browser

编辑器的基本使用？

ctrl + s    保存

创建文件、文件夹，重命名、删除

ctrl + a

ctrl + x

ctrl + c

ctrl + v

ctrl + z

ctrl + y

文字横向到了边界自动折行？

文件 --> 首选项 --> 设置 --> 搜索 word  --> word wrap 设置为 on

设置 编辑器 字体大小？

文件 --> 首选项 --> 设置 --> 搜索 font --> font size 设置为 自己想要的大小

还可以设置很多

选中到行尾  shift + end

选中到行首  shift + home

快速复制一行   shift + alt + 光标上、下键

快速移动一行  alt + 光标上、下键

向后缩进  tab

向前缩进 shift + tab

alt + 左键    多光标

选中(一个单词)+ ctrl + d      选中多个相同的单词

点击 搜索 --> 关键字 可以搜索到被打开的文件夹下所有文件中的内容所包含的关键字 --> 替换

chrome浏览器？

chrome 下载地址：  https://www.google.cn/intl/zh-CN/chrome/

百度统计浏览器市场份额：   https://tongji.baidu.com/data/browser

深入了解网站开发

UI设计师:     设计稿

web前端开发工程师(H5开发)

设计稿 --> 代码

数据库里的数据 --> 显示到页面

HTML + CSS

HTML: 结构

CSS： 样式

web后端开发工程师

Web前端的三大核心技术：

HTML:   结构

CSS:      样式

Javascript： 行为

怎样关闭 chrome 浏览器的 js 功能

打开谷歌浏览器，点击右上方菜单栏 - 选择“设置” - 选择“隐私设置” - 选项“内容设置” - 选择“JavaScript” - 选择“不允许任何网站运行JavaScript”。

ctrl + 鼠标滚轮     放大/缩小页面的显示内容

ctrl + 0  还原成原始大小

html+css+js 举例说明

div{ color: red; font-style: italic;}

Document

HTML+CSS课程系列

let div = document.querySelector('div');

let timer = null;

let flag = true;

div.onmouseover = function(){

timer = setInterval(()=>{

if (flag) {

div.style.color = 'blue';

div.style.fontStyle = 'normal';

} else {

div.style.color = 'red';

div.style.fontStyle = 'italic';

}

flag = !flag;

},500);

};

div.onmouseout = function(){

clearInterval(timer);

};