前面

子曰“工欲善其事,必先利其器”。开始编写HTML代码前,我们该选择一款编辑工具,实际上,HTML作为标记语言,我们甚至可以直接用记事本来编写HTML代码,但记事本实在弱爆了。这里推荐使用Visual Studio,当然,你也可以选择其它你习惯使用的编辑器,甚至可以使用在线的HTML编辑工具。Visual Studio(简称VS)是微软公司的开发工具,有“宇宙第一IDE”的美称,它十分强悍,同时又足够的易用,对于初学者而言,个人认为VS还是比较合适的。

(注:IDE即集成开发环境,就是可以用它来搞开发。后面我们可以用VS开发WEB应用)

那么,该如何得到这款超级IDE呢,没有拐弯,直接官网,在微软官网提供了下载,目前最新版是Visual Studio 2019,共有三个版本可供选择,我们直接装【社区版】即可,【社区版】是针对个人开发者,注意它是免费的。【Professional】和【企业版】供企业团队使用,要钱的。

Visual Studio 2019 安装

Visual Studio 2019官网下载地址:https://visualstudio.microsoft.com/zh-hans/downloads/

下载完成后,直接运行刚下载的安装程序:

继续……然后稍等片刻,让它提取一下文件。

OK,作为宇宙最强IDE,我们可以瞄一眼看到它提供了多少可供安装的开发功能组件。

当然,我们不可能全部安装,假如我只是一个编程入门者,想学习一些 ASP.NET/C++/Python/C# 的编程,勾选这几个大概就可以了,如果后期有需求,也可以再安装。

点击【安装】按钮后,倒上一杯茶,我们可以慢慢的等待了。

终于完成了,没有账户呀,那就以后再说吧。

简单设置一下,开发设置就先选C#吧,这个不重要,颜色主题嘛,人各有爱。

这里就【继续但无需代码】吧,我们先一睹芳容吧。

打开VS 2019后,我们可以看到一个很简洁的界面,界面顶部是功能菜单,工作区主要有【解决方案资源管理器】和【工具箱】。

(注:【解决方案资源管理器】就相当于是个目录列表,常用到,如果不小心关掉了,在【视图】菜单的第一项就能看到。)

使用 VS 2019创建 HTML 文档

OK! 安装完毕,该然后创建一个 HTML 文档呢!

【文件】>>【创建】>>【项目】,打开【创建新项目】对话框,找到并选择【空白解决方案】,然后【下一步】

【创建】完成后,即可在【解决方案资源管理器】里看到“第一个项目”,在上面单击鼠标右键,选中【添加】>>【新建项】,打开【添加新项】对话框。

在【添加新项】对话框中,选中【HTML 页】,然后取个名字,点击【添加】即可。

OK!可以看到,网页已经出来了,VS已经帮我们把基本的代码自动生成了。在<body>标签里写上一句话,然后【保存】一下。

回到电脑,找个刚创建这个项目的文件夹,我刚选的是“G:\网页学习”,双击打开,即可在浏览器中看到刚写的那一句话了。

双击在浏览器中打开,就可以看到效果了。

最后

VS 是不是比想象的要简单,虽然有一点大,但使用确实很方便,特别是后面想接着学习  ASP.NET 的小伙伴,是要长期和  VS  打交道的哟。

------------------END

【WEB基础】HTML & CSS 基础入门(2)选取工具:VS2019安装使用的更多相关文章

  1. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  2. web前端之css快速入门

    css简介 css概述 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与 ...

  3. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  4. web开发:css基础

    一.w3c架构分析 二.css三种引入 三.三种引入的优先级 四.基础选择器 五.长度单位与颜色 六.文件样式操作 七.display 一.w3c架构分析 <!DOCTYPE html> ...

  5. 好程序员web前端分享CSS基础篇

    学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 ...

  6. Web前端开发CSS基础

    CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...

  7. Web前端开发css基础样式总结

    颜色和单位的使用    颜色        用颜色的名字表示颜色,比如:red        用16进制表示演示 比如:#FF0000        用rgb数值表示颜色,rgb(红,绿,蓝),每个值 ...

  8. 前端基础之CSS快速入门

    前一篇写了我们的Html的常用组件,当然那些组件在我们不去写样式的时候都是使用的浏览器的默认样式,可以说是非常之丑到爆炸了,我们肯定是不能让用户去看这样丑到爆炸的样式,所以我们在这里需要使用css样式 ...

  9. web前端之css基础

    CSS选择器 元素选择器 p{color:red;} ID选择器 #li{ background-color:red; } 类选择器 .c1{ font-size:15px; } 注意: 样式类名不要 ...

  10. 一、HTML和CSS基础--HTML+CSS基础课程--第5部分

    第九章 CSS盒模型 元素分类
: 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的 ...

随机推荐

  1. JavaScript初探系列(九)——BOM

    一.什么是BOM? BOM:Browser Object Model 是浏览器对象模型,浏览器对象模型提供了独立与内容的.可以与浏览器窗口进行互动的对象结构,BOM由多个对象构成,其中代表浏览器窗口的 ...

  2. Linux下安装和使用MySQL数据库

    因为这个工具需要用到MySQL,https://github.com/ENCODE-DCC/caper,不得不再Linux服务器上安装. 首先服务器本身是有MySQL的, $ /usr/bin/mys ...

  3. linux下使用clamav排查病毒

    clamav wget http://www.clamav.net/downloads/production/clamav-0.102.0.tar.gz ### Installyum -y insta ...

  4. 使用 Microsoft.Extensions.DependencyInjection 进行依赖注入

    没有 Autofac DryIoc Grace LightInject Lamar Stashbox Unity Ninject 的日子,才是好日子~~~~~~~~~~ Using .NET Core ...

  5. LiveCD 修复Grub引导

    /usr/sbin/grub-probe: error: failed to get canonical path of /cow 如果你是从这句报错search过来的,恭喜您!看来你也是一个调皮的孩 ...

  6. java判断是excel2003还是2007以上

    public static Workbook create(InputStream in) throws IOException,InvalidFormatException { if (!in.ma ...

  7. Celery 服务搭建

    整个项目工程如下 __init__.py """ 注意点:python3.7 需要执行 pip install --upgrade https://github.com/ ...

  8. WebGL学习笔记(九):阴影

    3D中实现实时阴影技术中比较常见的方式是阴影映射(Shadow Mapping),我们这里也以这种技术来实现实时阴影. 阴影映射背后的思路非常简单:我们先以光的位置为视角进行渲染,我们能看到的东西都将 ...

  9. Android Studio 开发

    Android studio安装与配置 (收藏) https://www.cnblogs.com/gufengchen/p/10991886.html ------------------------ ...

  10. tp中model加载机制

    $user_model = D('User'); 如果当前模块下面有UserModel,就优先使用当前模块下的UserModel.如果当前模块下没有UserModel,就回去Common模块下找Use ...