走进前端、VScode插件安装及使用

走进前端、vscode插件的安装及使用

  • 走进前端
    • 前端简介
    • HTML
    • CSS
    • JavaScript(简称js)
  • VScode简要知识点
    • 安装vscode
    • 安装插件
    • 使用快捷键

走进前端

前端简介

web前端定义:前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,合适的动效设计,给用户带来极高的用户体验

web前端分类

  • 静态HTML
  • 样式CSS
  • 动态JavaScript(简称js)

HTML

通过各种标记符号(标签)来代表网页中的内容元素、将网页中的内容结构化的 超文本标记语言

特点:通过浏览器来解析、文件名为html或htm。

基本结构


doctype html> 
<html>
<head>
	<meta charset="utf-8">
	
	<title>无标题文档title>
head>
 
<body>
body>
html>

CSS

实现表现与结构分离的样式设计语言。控制网页的视觉表现及简单交互。通过浏览器来解析,文件名为css。

组成部分:对象{样式声明}

基本格式:选择符1{ 属性:值;}

基本结构

doctype html>
<html>
 
<head>
	<title>无标题文档title>
	<link href="css/style.css" rel="stylesheet">
	<style>
	#first-p { background:#FF0000;}
	.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

尽量按如图所示勾选
走进前端、VScode插件安装及使用_第1张图片

安装插件

(其实我也不知道具体安装什么,就把我现有的都放上来了)

在浏览器中打开:把编辑的HTML文件等用浏览器打开,查看效果。下载此插件后,写完的HTML页面可使用快捷键Alt+B,使用默认浏览器打开,或者鼠标右击,用浏览器打开。
在这里插入图片描述

自动重命名标签:在开始标记的结束括号中键入后,将自动插入结束标记。
在这里插入图片描述

汉化包:下载量最多的汉化包,微软出的官方插件。(推荐下载)
在这里插入图片描述
实时服务器:提供一个可以实时观看网页效果的本地服务器,最真实的模拟开发环境。
在这里插入图片描述
主题:可以更换主题的小插件
在这里插入图片描述

使用快捷键

以下快捷键是我目前较为常用的

Press Function
!(英文)+Tab 生成一个基本网页框架
Ctrl+/ 生成注释
Ctrl+D 快速删除一行
Ctrl+L 选中当前行
Ctrl+N 新建一个HTML/CSS
Ctrl+Shift+回车 在当前行上面加一行
Ctrl+加号(减号) 放大(缩小)vscode内容
Shift+Alt+F 格式化文档

前端学习不仅要有深度,还要有广度。以上这些就是我搜集整理学习的一些资料,可能覆盖面不是很全,但也都是我的一些小心得。


  1. 选择符(对象):以html标签作为附件CSS的对象,有多种对象类型:标签本身(标签名称,如div等)、标签的特定属性(id或class)、标签的某种状态(伪类)。
    属性(样式声明):根据不同的视觉表现方式进行分类,如文本的设定、尺寸的设定、色彩的设定。
    值(样式声明):根据样式声明的属性的不同类型,有对应的取值及单位,如色彩的值、尺寸的单位、方向的值。 ↩︎

你可能感兴趣的:(前端)