本博文大纲
什么是HTML、CSS?css
宇宙第一编辑器 VS Codehtml
chrome浏览器？前端
深刻了解网站开发web
Web前端的三大核心技术：chrome
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 举例说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
div{ color: red; font-style: italic;}
</style>
<title>Document</title>
</head>
<body>
<div>HTML+CSS课程系列</div>
</body>
<script>
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);
};
</script>
</html>