客服热线：
手机版
二维码
WEB前端现状
市场缺口
前端程序员缺口非常大，因为它正式成为一个岗位才几年，国内最早出现前端招聘岗位在2012年左右，在此之前，前端工作基本上都是由服务端工程师包办的，或者是由设计师来产出HTML页面。随着现代互联网应用的火爆，前端难度加大，导致后台程序员不能完全搞定，所以企业们急切需要真正懂前端技术的“前端人员”。
发展前景
现在市场上的前端程序员鱼龙混杂，很多自称是前端的人实际上只会页面制作，他们搭着“前端”的顺风车，和企业要着高薪，却应付不了更复杂的工作。这是导致企业对前端需求大的原因，不是缺少前端，而是缺优秀的前端。
职业发展路线
前端页面制作、前端开发、前端架构师
我们的课程体系是每一名前端开发人员都要牢牢掌握的，这些知识如果由页面制作人员摸索学习成为开发人员，可能需要若干年的时间。在这里需要你4个月学完，所以压力可想而知，代码量可想而知！
前端页面制作：利用html+css完成页面的搭建
前端开发：更多的要求javascript技术
前端架构师：要求知识面、实际项目经验、对技术的整体把控。
前端工程师具体在做什么？
Web前端开发工程师，主要职责是利用HTML/CSS/Javascript等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，同时结合后台技术模拟整体效果，致力于通过技术改善用户体验。
谁和前端人员打交道？
产品经理把用户可能的需求提出来，和前端还有后端交涉，这个东西如何实现。确定可行后，由设计设计出UI图，前端把它做出来，第一步可能是静态的，纯html css，然后我们再用angularjs、js实现一些业务方面的功能，最后和后台的接口进行联调，一般会是这么一个过程。那运营呢？有时候会需要你配合他们的营销方案对产品做一些调整，比如圣诞节到了，它要求你对公司的官网加一些雪花的特效。这也是需要你配合的。
常用网站
w3cschool、w3c菜鸟、百度
前端大牛的博客 http://caibaojian.com/some-fe
这个里面收集了许多前端大牛博客的地址，你们有时间要多去学习，里面推荐几个人，阮一峰，有句话叫阮一峰出品，必属精品，他是学金融的，现在在IT方面这么有成就，转行过来的同学是不是更有信心了？
张鑫旭，它博客里面会把一些技术讲的非常细，腾讯的前端。
李松峰，大名鼎鼎，你们学到第二阶段会学习javascript，而javascript非常权威的书箱是《javascript高级程序设计》，就是他翻译的。
IDE环境介绍安装配置
IDE环境介绍」
它是”集成开发环境”的英文缩写。
我们都知道网上的页面是编程人员写出来的，用什么写的呢？用编码工具或IDE集成开发环境。
编码工具
辅助程序员编写源代码的工具，它类似word，我们写文档会打开word文档来编写。写代码也一样，需要借助工具来开发。
常见的编码工具有记事本、sublime Text、notepad++
IDE集成开发环境
用于提供程序开发环境的应用软件，一般包括代码编辑器、编译器、调试器和图形用户界面工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。
它和单纯的编码工具不同，它不仅包含了编辑器，还有分析、编译等功能。它集成了一系列软件开发所需的功能，所以称为“集成开发环境”。
常见前端IDE
这里我们是不推荐使用Dreamweaver，它更多的是针对前端设计人员来用，而不是我们编程人员
其它语言的常见IDE有：eclipse、visio studio等
调试工具：chrome自带的开发者工具、firebug、IE有HttpWatch
当用户第一次运行WebStorm或者没有打开项目，在WebStorm显示的欢迎屏幕上，可以快速访问的主要入口点。包括“新建项目”、“打开项目”、最近项目列表、注册等。
常用操作
1.创建项目
file-->new project-->指定路径-->点击上面的新建按钮创建一个文件夹，然后ok，创建好项目后，项目文件夹中会带有.idea这样一个文件
2.创建文件
右击项目-->new-->html file-->输入文件名-->下面的下拉框可以选择h5还是h4或是xhtml类型的文档，我们选择h5，也就是默认的。写名字的时候不用加html后缀，webstrom会自动为我们加。
3.重命名
右击html文件-->refactor-->rename---改好后回车
4.删除文件
右击html文件-->delete-->ok（或者直接按电脑上的del键，回车）
菜单栏常用
FILE下（通常操作关于文件、工程）
New Project创建工程
New 会弹出一个列表供选择要创建的类型
Open 打开一个项目
Save As 将当前页面另存为
Reopen Project 近几次打开的项目列表
Close Project 点击后回到欢迎页面上
Rename Project 它修改的不是当前项目的文件夹名，而是文件夹目录下.idea的以iml结尾的文件，这个是项目的名字。rename后观察iml文件名的变化。
settings 常用设置
Exit 退出Webstorm
常用操作
鼠标滑到编辑区的右上角，会显示出一排浏览器的图标，如果你电脑中安装了相应浏览器，webstorm会自动关联它，在你想看当前文档的效果时，点击浏览器按钮即会打开
右击编辑区的左边栏，点击show Line Number，可以显示出行号，帮助我们快速定位代码
点击状态栏右下角的click to go to line 可以快速跳到你要找到行，当代码量过千时，这个功能非常有用
webstorm常用配置
1.如何更改主题（字体&配色）
file->setting->editor->colors&fonts->scheme选择你的主题（darcula）
2.如何让webstorm启动的时候不打开工程文件
file->settings->Appearance&Behavior->System settings 去掉reopen last project on startup（在启动的时候总是打开最后的工程）
3.如何完美显示中文
file->settings->appearance中勾选override default fonts by(not recommended)，设置name:NsimSum,Size:12
(appearance外观选项，选中“重写默认字体”，设置名字为NsimSum，它是windows下的宋体字，字号12)。这里设置的是整个IDE显示的文字，包括菜单列表的字。你可以试着把它改成英文，那样再在菜单项中看，中文有的会不正常显示，变成小方块了。
webstorm常用配置
4.如何显示行号
在代码显示区的左边右击选择“show line number”。
5.如何代码自动换行
file-settings-editor->general-> "use soft wraps in editor" 打上钩，代码就自动换行了。
你先试下，在一行中写很长的句子，看会不会换行。
H T M L
HTML是什么
1.超文本标记语言（HyperText Mark-up Language ）
2.用来设计网页的标记语言
3.用该语言编写的文件，以 .html或 .htm为后缀
4.由浏览器解释执行
5.不区分大小写，建议小写
HTML标签标签
1.HTML用于描述功能的符号成为“标签”
2.标签都封装在一对尖括号“
3.封闭类型标记（也叫双标记），必须成对出现,如
4.非封闭类型标记，也叫作空标记，或者单标记，如
HTML 元素
指的是从开始标签（start tag）到结束标签（end tag）的所有代码
HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
HTML属性与值
1.属性是用来修饰元素的
属性必须位于开始标签里
一个元素的属性可能不止一个，多个属性之间用空格隔开
多个属性之间不区分先后顺序
2.每个属性都有值
属性和属性的值之间用等号链接
属性的值包含在引号当中
属性总是以名称/值对的形式出现
注释
1.为代码添加适当的注释是一种良好的编程习惯
2.注释只在编辑文本情况下可见，在浏览器展示页面是并不会显示
3.注释标签不支持任何属性
4.语法：
lang是language的意思，lang=”en”属性对每张页面中的主要语言进行声明，en代表了英文，只是个声明，声明了它，对搜索引擎和浏览器更友好，并不会更改显示内容。它还有常见的值是zh-CN，代表了中文。（搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你的站点是中文站，这些都是html规范，越规范，越容易被收录）
meta标签用来描述一个HTML网页文档的属性，此处的charset=”utf-8”是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式。国外一般会用gbk、gb2312，国内通常使用utf-8。
搜索引擎
根据一定算法搜集数据的平台，比如谷歌、百度。
爬虫
是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本程序。
爬虫指的是搜索引擎用于自动抓取网页的程序（或叫机器人）。这个就是从某一个网址为起点，去访问，然后把网页存回到数据库中，如此不断循环。只要有链接指向我们的网页，爬虫就会自动提取我们的网页。
什么是DTD文档模型，为什么写在HTML当中？
DTD文档模型也称DOCTYPE文档声明，它是document Type Definition的英文缩写，意思是文档类型定义，在HTML文档中，用来指定页面所使用的HTML（或者XHTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就 是DOCTYPE声明。只有确定了一个正确的DOCTYPE，HTML里的标识和CSS才能正常生效。它一般被定义在页面的第一行，html标签之前。
它不是HTML标签。
什么是DTD文档模型，为什么写在HTML当中？
我们写好一份HTML文档，这时候全是代码，用户看不懂，是不是得用浏览器里的引擎给翻译一下？用户才看得到界面。关键是HTML有好多个版本，浏览器怎么知道按哪个版本解释？你老爸让你去扫地，你老妈让你去洗碗，你是听谁的，都是长辈，这时候如果你们家规定好了，凡事都听你老爸的，这个就很好解决了，去扫地。这个DTD文档模型就是这个意思，管它多少个HTML版本，我规定好我写的这个HTML文档以哪个为准就行，那我就知道我最终页面会被解释成一个什么样子。
DTD文档模型=DOCTYPE=DOCTYPE文档声明
DOCTYPE声明
HTML 5
HTML 4.01 Strict 严格
"http://www.w3.org/TR/html4/strict.dtd">
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（framesets）
DOCTYPE声明
HTML 4.01 Transitional 过渡
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集
HTML 4.01 frameset 框架
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
DOCTYPE声明
XHTML中的DTD文档模型
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（framesets）。必须以格式正确的 XML 来编写标记。
xhtml和html的区别
XHTML是HTML向XML的一个过渡语言，在最初W3C组织希望把HTML变成更为严谨的标记语言（比如XML），但HTML的已经应用的太为广泛，全部换掉不太现实。因此产生了XHTML这样一种过度形式。它比HTML更严谨，基本标签都还是沿用了HTML，但废除了“表现层”的标签，同时要求标签的严格嵌套，标签结束等等。
定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
body 元素的内容会显示在浏览器中。
标签用于定义文档的头部，它是所有头部元素的容器。
下面这些标签可用在 head 部分：
、
应该把标签放在文档的开始处，紧跟在后面，并处于标签之前。
文档的头部经常会包含一些
1.可定义文档的标题。
2.它显示在浏览器窗口的标题栏或状态栏上。
3.当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称。
4.标签是标签中唯一必须要求包含的东西，就是说写head一定要写title，不是说其它的不加，而是title一定要加。
5.title写和你网页相关的关键词有利于SEO优化
我会显示在收藏栏里
...
元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
常见的meta有
Keywords(关键字) keywords用来告诉搜索引擎你网页的关键字是什么。
description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。
author作者 标注网页的作者
语义化标签
语义化：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上文章的标题就可以用标题标签 h1-h6,段落用p,地址用address等
好处：
1. 更容易被搜索引擎收录
2. 更容易让屏幕阅读器读出网页内容
图片
1.使用元素将图像添加到页面
2.空标记
3.必须属性：src（存储图像的位置）
4.常用属性：width，height，alt，title
URL" width="300" alt=”替换文本属性”/>
title定义了鼠标经过图片时显示的内容，搜索引擎抓取图片时，是根据title定义的内容来分析图片是什么的
alt当图片未能正常显示时，用于给用户的提示信息
超链接
2.语法：
href属性：链接URL
target属性：目标，可取值_blank,_parent,_self等
name属性：锚点名称
title属性：定义了鼠标经过时的提示文字
