走进前端、vscode插件的安装及使用
走进前端
前端简介
web前端定义：前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验
web前端分类
- 静态HTML
- 样式CSS
- 动态JavaScript（简称js）
HTML
通过各种标记符号（标签）来代表网页中的内容元素、将网页中的内容结构化的 超文本标记语言
特点：通过浏览器来解析、文件名为html或htm。
基本结构：
<!--html语言中的注释-->
<!doctype html> <!--html文档的文档类型声明：这是一个html的文档，版本是5-->
<html><!--html标签：html文档正式开始-->
<head><!--html文档的头部区域开始，主要是用来说明html文档的一些相关属性或者设置-->
<meta charset="utf-8"><!--meta标签：元信息标签，用来给网页添加一些相关信息或设置。charset:字符集。指定此网页的编码为UTF-8-->
<!--常见的编码：国际化——utf-8,中文编码——GBK-->
<title>无标题文档</title><!--title标签：设定此网页的标题-->
</head><!--html文档的头部区域结束-->
<body><!--body标签：表示html文档的主体区域开始，对应浏览器的对应呈现窗口-->
</body><!--body标签：表示html文档的主体区域结束-->
</html><!--html标签：html文档正式结束-->
CSS
实现表现与结构分离的样式设计语言。控制网页的视觉表现及简单交互。通过浏览器来解析，文件名为css。
组成部分：对象{样式声明}
基本格式：选择符1{ 属性:值;}
基本结构：
<!doctype html>
<html>
<head>
<title>无标题文档</title>
<link href="css/style.css" rel="stylesheet">
<style>
#first-p { background:#FF0000;}<!--用#号后面表示的是id的名字-->
.text-2em{text-indent:2em;}<!--用.后面是个类别的名字-->
</style>
</head>
<body>
<div><!--新闻标题-->
<p id="first-p" class="text-2em">唔西迪西</p>
<p class="text-2em">玛卡巴卡</p>
</div>
</body>
</html>
JavaScript（简称js）
JavaScript一种直译式脚本语言，一种基于对象和事件驱动并具有安全性的客户端脚本语言；也是一种广泛应用客户端web开发的脚本语言。简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言。
基本结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个JavaScript程序</title>
</head>
<body>
<script>
alert("我的第一个JavaScript");
</script>
</body>
</html>
VScode简要知识点
安装vscode
尽量按如图所示勾选
安装插件
（其实我也不知道具体安装什么，就把我现有的都放上来了）
在浏览器中打开：把编辑的HTML文件等用浏览器打开，查看效果。下载此插件后，写完的HTML页面可使用快捷键Alt+B,使用默认浏览器打开，或者鼠标右击，用浏览器打开。
自动重命名标签：在开始标记的结束括号中键入后，将自动插入结束标记。
汉化包：下载量最多的汉化包，微软出的官方插件。（推荐下载）
实时服务器：提供一个可以实时观看网页效果的本地服务器，最真实的模拟开发环境。
主题：可以更换主题的小插件
使用快捷键
以下快捷键是我目前较为常用的
| Press | Function |
|---|---|
| ！（英文）+Tab | 生成一个基本网页框架 |
| Ctrl+/ | 生成注释 |
| Ctrl+D | 快速删除一行 |
| Ctrl+L | 选中当前行 |
| Ctrl+N | 新建一个HTML/CSS |
| Ctrl+Shift+回车 | 在当前行上面加一行 |
| Ctrl+加号（减号） | 放大（缩小）vscode内容 |
| Shift+Alt+F | 格式化文档 |
前端学习不仅要有深度，还要有广度。以上这些就是我搜集整理学习的一些资料，可能覆盖面不是很全，但也都是我的一些小心得。
选择符（对象）：以html标签作为附件CSS的对象，有多种对象类型：标签本身（标签名称，如div等）、标签的特定属性（id或class）、标签的某种状态（伪类）。
属性（样式声明）：根据不同的视觉表现方式进行分类，如文本的设定、尺寸的设定、色彩的设定。
值（样式声明）：根据样式声明的属性的不同类型，有对应的取值及单位，如色彩的值、尺寸的单位、方向的值。 ↩︎
2317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
