Chery6721
Chery6721

搭建初始前端操作环境

一、安装Visual Studio Code（推荐前端开发工具）

官网地址：https://code.visualstudio.com/

搭建初始前端操作环境_第1张图片

 

下载不同操作系统的安装包

Windows 32位/Windows 64位/MacOs/Linux

搭建初始前端操作环境_第2张图片

搭建初始前端操作环境_第3张图片

 

本地解压安装，安装成功之后

搭建初始前端操作环境_第4张图片

 

 

二、安装vsCode的常用几个插件

搭建初始前端操作环境_第5张图片

推荐的几个常用的vscode插件，安装后重启vscode生效

搭建初始前端操作环境_第6张图片

搭建初始前端操作环境_第7张图片

 

三、新创建一个文件夹中的新html文件并运行

文件夹内新建一个html文件，命名为index.html。

搭建初始前端操作环境_第8张图片

文件内输入（英文）"!" 再回车，会展示一个默认的html通用格式的demo搭建初始前端操作环境_第9张图片

在body中输入文案，并选中文件右键"Open In Default Browser"搭建初始前端操作环境_第10张图片

浏览器展示页面效果如下

搭建初始前端操作环境_第11张图片

 

四、HTML的demo分析

 

    

    

    Document

 

    这是我第一次尝试用vscode写前端代码

 

HTML文件的类型说明

标签开头，表示页面，设置语言是english

 

标签开头，表示页面头部信息

单标记标签，设置编码格式=UTF-8

——

 

标签开头，表示页面标题，以结尾

标签结束

 

标签开头，表示页面主体内容开始

页面展示内容，无格式的纯文本

标签结束

 

标签结束

 

 

 

你可能感兴趣的:(前端从入门到放弃)

  • 前端从入门到放弃 javascript
    helloworld本文由博客群发一文多发等运营工具平台OpenWrite发布
  • 前端从入门到放弃 javascript
    helloworld本文由博客群发一文多发等运营工具平台OpenWrite发布
  • Web前端从入门到放弃（js事件的分类和介绍） 杜克灿
    js事件的分类和介绍一、一般的js事件（红色为常用的）1、鼠标事件：onclick——鼠标点击时触发此事件ondblclick——鼠标双击时触发此事件onmouseover——当鼠标移动到某对象范围的上方时触发此事件onmouseout——当鼠标离开某对象范围时触发此事件onmousemove——鼠标移动时触发此事件（抚摸）onmousedown——按下鼠标时触发此事件onmouseup——鼠标按
  • Web前端从入门到放弃(css3选择器的总结) 杜克灿 web前端从入门到放
    Web前端从入门到放弃(css3选择器的总结)一、基本选择器选择器类型功能描述*通配选择器选择文档中所有的html元素E元素选择器选择指定的类型的html元素idID选择器选择指定ID属性值为“id”的任意类型的元素.class类选择器选择指定的class属性值为“class”的任意类型的任意多元素selector1，selector2群组选择器将每一个选择器匹配的元素集合并二、层次选择器选择器类
  • Web前端从入门到放弃(jq选择器的归纳总结) 杜克灿
    jq选择器的归纳总结一、什么是jqjq就是人家把js的函数封装好的一个库。二、为什么要用jq1、简化了js的复杂操作2、无需在去关心兼容性问题（最爽的一点）3、提供了大量的使用方法三、jq的选择器1、基本选择器#id通过元素的id属性中给定的值$("#myDiv");element指向DOM节点的标签名$("div");.class一个元素可以有多个类，只要有一个符合就能被匹配$(".myClas
  • Web前端从入门到放弃（js函数声明和调用、有参函数和无参函数、有返回值） 杜克灿
    js函数声明和调用、有参函数和无参函数、有返回值一、js函数声明和调用1、js函数声明：方法一：关键字函数名、形参根具体据情况写（形参可不写）function函数名(形参){函数体}方法二：直接量varfn=function函数名(形参){函数体}方法三：构造函数法varfn=newFunction(函数体);2、js函数调用：*函数名就等于函数体，函数名（）等于执行函数*functionaa()
  • Web前端从入门到放弃(js全局变量、局部变量、闭包) 杜克灿
    js全局变量、局部变量、闭包一、js全局变量在方法外部声明的变量声明方式1：vartest;vartest=5;需注意的是该句不能包含在function内，否则是局部变量。这是第一种方式声明全局变量。声明方式2：test=5;没有使用var，直接给标识符test赋值，这样会隐式的声明了全局变量test。即使该语句是在一个function内，当该function被执行后test变成了全局变量。声明方
  • Web前端从入门到放弃（js数据类型、变量命名规范） 杜克灿
    js数据类型、变量命名规范一、js数据类型1、基本数据类型String——字符串Number——数字a.该类型的表示方法有两种形式，第一种是整数，第二种为浮点数。b.整数可以通过十进制，八进制，十六进制的字面值来表示（10进制的值=parseInt(变量，进制)）Boolean——布尔a.布尔类型有两个值：truefalseb.Bloolean()函数，可以将其他类型的值转换为布尔类型Null——
  • Web前端从入门到放弃（js事件的分类和介绍） 杜克灿
    js事件的分类和介绍一、一般的js事件（红色为常用的）1、鼠标事件：onclick——鼠标点击时触发此事件ondblclick——鼠标双击时触发此事件onmouseover——当鼠标移动到某对象范围的上方时触发此事件onmouseout——当鼠标离开某对象范围时触发此事件onmousemove——鼠标移动时触发此事件（抚摸）onmousedown——按下鼠标时触发此事件onmouseup——鼠标按
  • Web前端从入门到放弃（ 固定顶部菜单） 杜克灿
    固定顶部菜单当鼠标滚动到200px时，出现固定在顶部的菜单*{margin:0;padding:0;border:none;}#box{width:950px;height:4135px;background:#9BD7F8;margin:0auto;position:relative;}#head{width:950px;height:150px;background:#C2351D;posit
  • Javascript中，长犯的错误（转载） lxt410725
    十个JavaScript中易犯的小错误，你中了几枪前端从入门到放弃部落在今天，JavaScript已经成为了网页编辑的核心。尤其是过去的几年，互联网见证了在SPA开发、图形处理、交互等方面大量JS库的出现。如果初次打交道，很多人会觉得js很简单。确实，对于很多有经验的工程师，或者甚至是初学者而言，实现基本的js功能几乎毫无障碍。但是JS的真实功能却比很多人想象的要更加多样、复杂。JavaScrip
  • 面向对象面向过程 3213213333332132 java
    面向对象：把要完成的一件事，通过对象间的协作实现。 面向过程：把要完成的一件事，通过循序依次调用各个模块实现。 我把大象装进冰箱这件事为例，用面向对象和面向过程实现，都是用java代码完成。 1、面向对象 package bigDemo.ObjectOriented; /** * 大象类 * * @Description * @author FuJian
  • Java Hotspot: Remove the Permanent Generation bookjovi HotSpot
      openjdk上关于hotspot将移除永久带的描述非常详细，http://openjdk.java.net/jeps/122   JEP 122: Remove the Permanent Generation Author Jon Masamitsu Organization Oracle Created 2010/8/15 Updated 2011/
  • 正则表达式向前查找向后查找,环绕或零宽断言 dcj3sjt126com 正则表达式
    向前查找和向后查找 1. 向前查找：根据要匹配的字符序列后面存在一个特定的字符序列(肯定式向前查找)或不存在一个特定的序列(否定式向前查找)来决定是否匹配。.NET将向前查找称之为零宽度向前查找断言。     对于向前查找，出现在指定项之后的字符序列不会被正则表达式引擎返回。 2. 向后查找：一个要匹配的字符序列前面有或者没有指定的
  • BaseDao 171815164 seda
    import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java.sql.PreparedStatement; import java.sql.ResultSet; public class BaseDao { public Conn
  • Ant标签详解--Java命令 g21121 Java命令
            这一篇主要介绍与java相关标签的使用         终于开始重头戏了，Java部分是我们关注的重点也是项目中用处最多的部分。           1
  • [简单]代码片段_电梯数字排列 53873039oycg 代码
           今天看电梯数字排列是9 18 26这样呈倒N排列的,写了个类似的打印例子，如下:       import java.util.Arrays; public class 电梯数字排列_S3_Test { public static void main(S
  • Hessian原理 云端月影 hessian原理
    Hessian 原理分析 一．      远程通讯协议的基本原理 网络通信需要做的就是将流从一台计算机传输到另外一台计算机，基于传输协议和网络 IO 来实现，其中传输协议比较出名的有 http 、 tcp 、 udp 等等， http 、 tcp 、 udp 都是在基于 Socket 概念上为某类应用场景而扩展出的传输协
  • 区分Activity的四种加载模式----以及Intent的setFlags aijuans android
      在多Activity开发中，有可能是自己应用之间的Activity跳转，或者夹带其他应用的可复用Activity。可能会希望跳转到原来某个Activity实例，而不是产生大量重复的Activity。 这需要为Activity配置特定的加载模式，而不是使用默认的加载模式。 加载模式分类及在哪里配置 Activity有四种加载模式： standard singleTop
  • hibernate几个核心API及其查询分析 antonyup_2006 html.netHibernatexml配置管理
    (一)  org.hibernate.cfg.Configuration类         读取配置文件并创建唯一的SessionFactory对象.(一般,程序初始化hibernate时创建.)         Configuration co
  • PL/SQL的流程控制 百合不是茶 oraclePL/SQL编程循环控制
    PL/SQL也是一门高级语言,所以流程控制是必须要有的,oracle数据库的pl/sql比sqlserver数据库要难,很多pl/sql中有的sqlserver里面没有   流程控制; 分支语句 if 条件 then 结果 else 结果 end if ; 条件语句 case when 条件 then 结果; 循环语句 loop
  • 强大的Mockito测试框架 bijian1013 mockito单元测试
    一.自动生成Mock类        在需要Mock的属性上标记@Mock注解，然后@RunWith中配置Mockito的TestRunner或者在setUp()方法中显示调用MockitoAnnotations.initMocks(this);生成Mock类即可。二.自动注入Mock类到被测试类  &nbs
  • 精通Oracle10编程SQL(11)开发子程序 bijian1013 oracle数据库plsql
    /* *开发子程序 */ --子程序目是指被命名的PL/SQL块，这种块可以带有参数，可以在不同应用程序中多次调用 --PL/SQL有两种类型的子程序：过程和函数 --开发过程 --建立过程：不带任何参数 CREATE OR REPLACE PROCEDURE out_time IS BEGIN DBMS_OUTPUT.put_line(systimestamp); E
  • 【EhCache一】EhCache版Hello World bit1129 Hello world
    本篇是EhCache系列的第一篇，总体介绍使用EhCache缓存进行CRUD的API的基本使用，更细节的内容包括EhCache源代码和设计、实现原理在接下来的文章中进行介绍   环境准备 1.新建Maven项目   2.添加EhCache的Maven依赖 <dependency> <groupId>ne
  • 学习EJB3基础知识笔记 白糖_ beanHibernatejbosswebserviceejb
    最近项目进入系统测试阶段，全赖袁大虾领导有力，保持一周零bug记录，这也让自己腾出不少时间补充知识。花了两天时间把“传智播客EJB3.0”看完了，EJB基本的知识也有些了解，在这记录下EJB的部分知识，以供自己以后复习使用。   EJB是sun的服务器端组件模型，最大的用处是部署分布式应用程序。EJB (Enterprise JavaBean)是J2EE的一部分，定义了一个用于开发基
  • angular.bootstrap boyitech AngularJSAngularJS APIangular中文api
    angular.bootstrap 描述：     手动初始化angular。     这个函数会自动检测创建的module有没有被加载多次，如果有则会在浏览器的控制台打出警告日志，并且不会再次加载。这样可以避免在程序运行过程中许多奇怪的问题发生。   使用方法：     angular .
  • java-谷歌面试题-给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数 bylijinnan java
    public class SearchInShiftedArray { /** * 题目：给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数。 * 请在这个特殊数组中找出给定的整数。 * 解答： * 其实就是“旋转数组”。旋转数组的最小元素见http://bylijinnan.iteye.com/bl
  • 天使还是魔鬼？都是我们制造 ducklsl 生活教育情感
    ----------------------------剧透请原谅，有兴趣的朋友可以自己看看电影，互相讨论哦！！！     从厦门回来的动车上，无意中瞟到了书中推荐的几部关于儿童的电影。当然，这几部电影可能会另大家失望，并不是类似小鬼当家的电影，而是关于“坏小孩”的电影！     自己挑了两部先看了看，但是发现看完之后，心里久久不能平
  • [机器智能与生物]研究生物智能的问题 comsci 生物
          我想,人的神经网络和苍蝇的神经网络,并没有本质的区别...就是大规模拓扑系统和中小规模拓扑分析的区别....       但是,如果去研究活体人类的神经网络和脑系统,可能会受到一些法律和道德方面的限制,而且研究结果也不一定可靠,那么希望从事生物神经网络研究的朋友,不如把
  • 获取Android Device的信息 dai_lm android
    String phoneInfo = "PRODUCT: " + android.os.Build.PRODUCT; phoneInfo += ", CPU_ABI: " + android.os.Build.CPU_ABI; phoneInfo += ", TAGS: " + android.os.Build.TAGS; ph
  • 最佳字符串匹配算法（Damerau-Levenshtein距离算法）的Java实现 datamachine java算法字符串匹配
    原文：http://www.javacodegeeks.com/2013/11/java-implementation-of-optimal-string-alignment.html------------------------------------------------------------------------------------------------------------
  • 小学5年级英语单词背诵第一课 dcj3sjt126com englishword
    long 长的 show 给...看，出示 mouth 口，嘴 write 写   use 用，使用 take 拿，带来 hand 手 clever 聪明的   often 经常 wash 洗 slow 慢的 house 房子   water 水 clean 清洁的 supper 晚餐 out 在外   face 脸，
  • macvim的使用实战 dcj3sjt126com macvim
    macvim用的是mac里面的vim, 只不过是一个GUI的APP, 相当于一个壳   1. 下载macvim https://code.google.com/p/macvim/   2. 了解macvim :h               vim的使用帮助信息 :h macvim  
  • java二分法查找 蕃薯耀 java二分法查找二分法java二分法
    java二分法查找 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 11:40:03 星期二 http:/
  • Spring Cache注解+Memcached hanqunfeng springmemcached
    Spring3.1 Cache注解  依赖jar包： <!-- simple-spring-memcached --> <dependency> <groupId>com.google.code.simple-spring-memcached</groupId> <artifactId>simple-s
  • apache commons io包快速入门 jackyrong apache commons
    原文参考 http://www.javacodegeeks.com/2014/10/apache-commons-io-tutorial.html   Apache Commons IO 包绝对是好东西，地址在http://commons.apache.org/proper/commons-io/，下面用例子分别介绍：   1）  工具类   2
  • 如何学习编程 lampcy java编程C++c
    首先,我想说一下学习思想.学编程其实跟网络游戏有着类似的效果.开始的时候,你会对那些代码,函数等产生很大的兴趣,尤其是刚接触编程的人,刚学习第一种语言的人.可是,当你一步步深入的时候,你会发现你没有了以前那种斗志.就好象你在玩韩国泡菜网游似的,玩到一定程度,每天就是练级练级,完全是一个想冲到高级别的意志力在支持着你.而学编程就更难了,学了两个月后,总是觉得你好象全都学会了,却又什么都做不了,又没有
  • 架构师之spring-----spring3.0新特性的bean加载控制@DependsOn和@Lazy nannan408 Spring3
    1.前言。    如题。 2.描述。    @DependsOn用于强制初始化其他Bean。可以修饰Bean类或方法，使用该Annotation时可以指定一个字符串数组作为参数，每个数组元素对应于一个强制初始化的Bean。 @DependsOn({"steelAxe","abc"}) @Comp
  • Spring4+quartz2的配置和代码方式调度 Everyday都不同 代码配置spring4quartz2.x定时任务
    前言：这些天简直被quartz虐哭。。因为quartz 2.x版本相比quartz1.x版本的API改动太多，所以，只好自己去查阅底层API……   quartz定时任务必须搞清楚几个概念： JobDetail——处理类 Trigger——触发器，指定触发时间，必须要有JobDetail属性，即触发对象 Scheduler——调度器，组织处理类和触发器，配置方式一般只需指定触发
  • Hibernate入门 tntxia Hibernate
      前言   使用面向对象的语言和关系型的数据库，开发起来很繁琐，费时。由于现在流行的数据库都不面向对象。Hibernate 是一个Java的ORM（Object/Relational Mapping）解决方案。   Hibernte不仅关心把Java对象对应到数据库的表中，而且提供了请求和检索的方法。简化了手工进行JDBC操作的流程。   如
  • Math类 xiaoxing598 Math
    一、Java中的数字（Math）类是final类，不可继承。 1、常数 PI：double圆周率 E：double自然对数 2、截取（注意方法的返回类型） double ceil(double d) 返回不小于d的最小整数 double floor(double d) 返回不大于d的整最大数 int round(float f) 返回四舍五入后的整数 long round
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他