前端基础 - HTML简介及开发环境
前端基础 - HTML简介及开发环境
HTML简介及开发环境
HTML简介:
英文:Hyper Text Markup Language(超级文本标记语言)
超级文本:普通文本只能显示文字,超级文本,除了显示几本文字之外
显示图片,视频,音频,文件特殊效果等
标记:是HTML的组成元素
语言:一门编程语言
HTML特点:
- 不需要编译
- 后缀名*.html或*htm
标签特点:
- 标签是预定好的,我们只要了解其功能,直接拿过来使用即可
- 标签的名字是不区分大小写的
- 通常情况下标签由开始标签和结束标签组成,如果没有内容,那么可以写成自闭和标签
开发环境
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。
现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的APP开发解决方案。同事,javascript的应用也越来越常广泛,而且它还能和Node.JS在后端协同工作,快速搭建易于扩展的网络应用。实际上,为了应对前端开发复杂度所带来的挑战,开发人员创建了许多工具来简化开发流程。从测试框架,到分析工具,前端开发工具已经非常成熟了,正是得益于这些有用的工具才让用户体验到最佳的互联网服务。
chrome浏览器
这是目前最好的前端开发工具。自从其诞生以来,Chrome在其开发者工具中投入了大量精力,而且直到现在,谷歌仍在不断优化这些工具。一般而言,谷歌会在每六周发布对Chrome开发者工具的优化,并推出一些全新功能。
前端开发环境安装与配置
前端开发,我们主要使用Angular JS框架来开发JavaScript代码,CSS样式表我们使用Less进行开发,而开发环境则使用Gulp进行包管理和批处理编译。
软件安装
Node.js
去官网下载并安装, https://nodejs.org/dist/v5.10.1/node-v5.10.1-x64.msi (若是Mac/Linux,选择对应版本下载)
安装在任意目录下,安装好之后运行Node.js command prompt,输入node -v 命令,显示node.js版本号即安装成功
Sublime Text 3
去官网下载并安装,http://www.sublimetext.com/3 ,安装完成后自行搜索激活码激活即可
Sublime Text 插件
使用Package Control组件安装
1、按 Ctrl + ` 调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音)
2、输入以下代码并回车
import urllib.request,os; pf = ‘Package Control.sublime-package’;
ipp = sublime.installed_packages_path();
urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) );
open(os.path.join(ipp, pf), ‘wb’).write(urllib.request.urlopen( ‘http://sublime.wbond.net/’ + pf.replace(‘ ’,‘%20’)).read())
3、 重新启动Sublime Text 3
4、若在Perferences-》package settings中看到package control这一项,则表示安装成功。
5、按下Ctrl + Shift + P调出命令板
6、输入install调出Install Package选项并回车,然后在列表中选择需要的插件进行安装
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wwjr5vzS-1600766695686)(D:\大三上\typora文件\图片\1.png)]
建议安装以下插件
Angula JS : AngulaJS代码提示
Doc Blockr:注释生成器,当我们使用/**的时候会自动加入注释模板
Emmet:HTML快速开发插件
Side Bar:左侧栏
Convert To UTF-8:当我们打开非UTF-8的文档的时候,会自动转换成UTF-8
HTML/CSS/JS Prettify:代码格式化插件
Git客户端
官网下载并安装,https://git-scm.com/download/win
iis WEB服务器
这是Windows系统自带的,安装与配置方法参考http://jingyan.baidu.com/article/eb9f7b6d8410ab869364e835.html
安装Gulp
安装Gulp之前,先把npm升级到最新版本(npm是Node.js的包管理工具,在Node.js安装的同时已经被安装了,可以直接使用npm命令)
打开Node.js command prompt,输入命令npm install npm -g
接着配置npm的全局路径
Windows下的Nodejs npm路径是appdata,可能不是我们想要的路径,可以改成我们指定的路径方便管理。
在cmd下执行以下命令
npm config set cache “X:\xxxxx\node_cache”
npm config set prefix “X:\xxxxx\node_global”
如果命令无效,可以去nodejs的安装目录中找到node_modules\npm\npmrc文件,这个文件存放npm的userconfig配置。
修改如下即可:
prefix = X:\xxxxx\node_global
cache = X:\xxxxx\ node_cache
建议配置在node.js的安装路径下,(我的node.js安装在E:\web-dev\node.js,后续内容都发生在此路径或者E:\web-dev下)
在E:\web-dev 下新建个文件夹,任意取名,这个文件夹即开发工程根目录(我取名为learning)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7mlQ4ytr-1600766695688)(D:\大三上\typora文件\图片\2.png)]
1、全局安装
打开Node.js command prompt,进入learning路径,输入命令npm install -g gulp
安装完毕后输入gulp -v,如果提示不是内部或外部命令,说明没有配置系统变量path,手动去配置pasth,地址是prefix的地址。
2、本地安装
输入命令npm init,初始化Node环境,根据实际情况填写内容
输入命令npm install gulp -save-dev
3、安装gulp相关插件
首先安装 npm install –save-dev gulp-load-plugins
后面选择自己需要的安装,这里我安装了以下插件
npm install –save-dev gulp-rename 用来重命名文件流中的文件
npm install –save-dev gulp-uglify 用来压缩js文件,使用的是uglify引擎
npm install –save-dev gulp-minify-css 要压缩css文件时可以使用该插件
npm install –save-dev gulp-minify-html 用来压缩html文件
npm install –save-dev gulp-jshint 用来检查js代码
npm install –save-dev jshint 安装了gulp-jshint,一定要同时安装jshint
npm install –save-dev gulp-concat 用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等,这样就能减少页面的http请求数了
npm install –save-dev gulp-less less使用gulp-less
npm install –save-dev gulp-sass sass使用gulp-sass
npm install –save-dev gulp-imagemin gulp-imagemin插件来压缩jpg、png、gif等图片
npm install –save-dev gulp-livereload 当代码变化时,它可以帮我们自动刷新页面
该插件最好配合谷歌浏览器来使用,且要安装livereload chrome extension扩展插件
npm install –save-dev gulp-htmlhint 校验HTML语法
npm install –save-dev gulp-sourcemaps CSS Source Map生成
npm install –save-dev gulp-notify 通知栏(出错后会在Windows右下方提示错误)
npm install –save-dev gulp-plumber 错误处理兼容
插件安装完毕后在工程根目录下的package.json文件里能看到,如图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G15ulsnE-1600766695690)(D:\大三上\typora文件\图片\3.png)]
安装Bower
首先初始化Bower配置文件,进入learning路径(E:\web-dev\learning),输入命令bower init即可,和gulp的init类似,按实际情况填写,其中有4个问题提示,分别输入y、y、n、y。
输入命令安装Bower: npm install bower -g
注:Bower的作用主要是管理我们需要的开发包,例如Angula JS、jQuery等等。
配置开发依赖包路径
Bower的作用是来管理开发包,所以需要对开发包的路径做个配置
在根路径下建一个.bowerrc文件,并写入内容,如图所示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-84L4AW45-1600766695692)(D:\大三上\typora文件\图片\4.png)]
配置批处理任务
此时需要把工程目录创建好,工程目录如图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BfipyHjZ-1600766695693)(D:\大三上\typora文件\图片\5.png)]
其中dist目录下存放的是最终编译生成的文件,src目录下存放的是开发编辑的文件
在根路径下(E:\web-dev\learning)新建个js文件,gulpfile.js,文件内容如图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RoDapkoX-1600766695694)(D:\大三上\typora文件\图片\6.png)]
在命令行下执行命令 gulp,不输出错误信息以及一直处于等待状态即为配置成功
后续在src下的js、css里编写完代码后,在根路径命令行下执行gulp命令,在dist下的js、css里会生成对应的编译文件
开发环境配置
在这里实际上就是使用Bower来安装开发包
打开Node.js command prompt,进入工程根路径(E:\web-dev\learning),安装所需要的开发包,我安装的开发包如下
bower install –save angularjs
bower install –save angular-animate
bower install –save echarts
bower install –save jquery
bower install –save sparkline
bower install –save ng-stomp
径(E:\web-dev\learning),安装所需要的开发包,我安装的开发包如下
bower install –save angularjs
bower install –save angular-animate
bower install –save echarts
bower install –save jquery
bower install –save sparkline
bower install –save ng-stomp
至此,前端环境已安装配置完毕,可根据自己需要修改工程的开发目录
前端基础 - HTML简介及开发环境相关推荐
- 【菠萝狗四足机器人】二次开发教程--第一章 【简介与开发环境搭建】
Py-apple Dynamics 简介与开发环境搭建 1 简介 1.1 何为 菠萝狗 和 Py-Apple Dynamics 1.2 目前支持的功能 2 开发环境搭建 2.1 硬件的搭建 2.1 软 ...
- ASP.NET就业实例视频教程(1)基础入门——搭建网站开发环境教学视频-徐照兴-专题视频课程...
ASP.NET就业实例视频教程(1)基础入门--搭建网站开发环境教学视频-356人已学习 课程介绍 [课程特色] 1.课程设计循序渐进.讲解细致.通俗易懂.非常适合自主学习 2.教学过 ...
- SpringSecurity权限管理系统实战—一、项目简介和开发环境准备
源码获取: github或者gitee 文章目录 系列目录 前言 一.简介 二.什么是RBAC 三.系统功能 四.环境搭建 五.技术栈 六.说明 七.项目截图 八.请作者喝杯卡布奇诺 系列目录 Spr ...
- Python基础笔记_Day01_计算机基础知识和Python开发环境搭建
Day01_计算机基础知识和Python开发环境搭建 目录 01.01_计算机基础知识(计算机概述)(了解) 01.02_计算机基础知识(软件开发和计算机语言概述)(了解) 01.03_计算机基础知识 ...
- 51单片机学习笔记1 简介及开发环境
51单片机学习笔记1 简介及开发环境 一.51单片机 1. STC89C52单片机简介 2. 命名规则 3. 封装 (1)PDIP (2)LQFP (3)PLCC (4)PQFP 二.STC8051结 ...
- 【ArcGIS Engine二次开发】入门基础(1):ArcGIS Engine简介及开发环境搭建
文章目录 ArcGIS Engine概述 ArcGIS Engine与ArcObjects的关系 ArcGIS Engine下载及安装 ArcGIS Engine概述 ArcGIS Engine简介 ...
- Java基础(1):Java简介和开发环境配置
写在前面: 其实一直都想做一个自己的博客或者说是网站,来记录自己学习的一些心得的一些自己也需要注意的知识点,因为我也总是忘.网上的文章随便一翻都是千篇一律的,可能我的文章也是一样的,我相信很多人做个人 ...
- 前端零基础入门-002-集成开发环境
本篇目标 了解市面上常用的前端集成开发环境(ide) 掌握 HBuiberX 的使用:下载安装,新建项目.网页.运行网页. 内容摘要 本篇介绍了市面上流行的几款前端集成开发环境(ide),并介绍了 H ...
- java判断读到末尾_Java Web入门之java--第一节 java 简介及开发环境安装
本篇博客是Java web入门的第一篇博客,这篇博客主要讲述java语言的一些简介. 一)先从Java语言的诞生说起. 1991年,Sun公司在一个叫做James Gosling的人的带领下,成立了一 ...
最新文章
- 在Eclipse中安装ADT
- 微信打开网页下载东西时如何调用其他浏览器下载
- 面向对象(下)知识点
- 高并发測试工具webbench
- 从功能层次,阐述CPU、接口和外设之间的交互
- nltkdata路径设置linux,NLTK data路径设置
- 大厂程序员辞职创业,赚的还没原来多!
- ecshop实现弹出登录框
- 免费杀软中的王者:德国小红伞评测
- itext 生成pdf、pdf模板生成pdf
- mybatis 文档 学习
- Matlab中不定积分和定积分的实现
- 阿里云主机项目根目录指向public目录下
- 开机就提示“请安装TCP/IP协议,error=10106”的解决的方法
- 预告 | 互联网人吐槽大会系列漫画 要来啦~
- 有一种女人,她们并不漂亮,但看上去却很舒服!
- pandas取出特定行列数据
- android多指触控失效,安卓--多指触控
- MT4 CRM 系统开发(一)
- 计算机应用基础19秋在线作业2答案,东师计算机应用基础19秋在线作业2题目【标准答案】...
热门文章
- lzg_ad:如何制作U盘引导的XPE操作系统
- 带着协议学习 OkHttp
- python视频教程大全集下载
- 系统校验矩阵怎么求_保护未成年人的又一举措 微信小游戏健康系统上线
- RGB图像是3通道才有颜色,1通道只能是灰色
- 诊断由 System.gc() 导致的 CPU 飙升和 GC overhead alert
- GIS(电子地图,地理信息系统)未来两年内的发展趋势
- 腾讯云2022web前端开发校招一面面试总结一
- Should Geithner Resign?
- 【计算机毕业设计】基于web的网上体育用品商城系统