市场缺口
前端程序员缺口非常大，因为它正式成为一个岗位才几年，国内最早出现前端招聘岗位在2012年左右，在此之前，前端工作基本上都是由服务端工程师包办的，或者是由设计师来产出HTML页面。随着现代互联网应用的火爆，前端难度加大，导致后台程序员不能完全搞定，所以企业们急切需要真正懂前端技术的“前端人员”。
发展前景
现在市场上的前端程序员鱼龙混杂，很多自称是前端的人实际上只会页面制作，他们搭着“前端”的顺风车，和企业要着高薪，却应付不了更复杂的工作。这是导致企业对前端需求大的原因，不是缺少前端，而是缺优秀的前端。
职业发展路线
前端页面制作、前端开发、前端架构师
我们的课程体系是每一名前端开发人员都要牢牢掌握的，这些知识如果由页面制作人员摸索学习成为开发人员，可能需要若干年的时间。在这里需要你4个月学完，所以压力可想而知，代码量可想而知！
前端页面制作：利用html+css完成页面的搭建
前端开发：更多的要求javascript技术
前端架构师：要求知识面、实际项目经验、对技术的整体把控。
谁和前端人员打交道？
产品经理把用户可能的需求提出来，和前端还有后端交涉，这个东西如何实现。确定可行后，由设计设计出UI图，前端把它做出来，第一步可能是静态的，纯htmlcss，然后我们再用angularjs、js实现一些业务方面的功能，最后和后台的接口进行联调，一般会是这么一个过程。那运营呢？有时候会需要你配合他们的营销方案对产品做一些调整，比如圣诞节到了，它要求你对公司的官网加一些雪花的特效。这也是需要你配合的。
IDE集成开发环境
用于提供程序开发环境的应用软件，一般包括代码编辑器、编译器、调试器和图形用户界面工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。
它和单纯的编码工具不同，它不仅包含了编辑器，还有分析、编译等功能。它集成了一系列软件开发所需的功能，所以称为“集成开发环境”。
调试工具： chrome自带的开发者工具、firebug、IE有HttpWatch
推荐使用的浏览器：需要考虑兼容的浏览器
前两者都非常的优秀，它们比其它浏览器优先之处在于
1.速度快，不是指打开的速度，而是指解析页面CSS、JS的速度
2.支持更多新的功能，比如最新的标准html5、css3的一些新功能
3.插件化开发，chrome和firefox提示了应用商店，你可以安装自己喜欢的插件，定制自己的浏览器。
当打开了一个项目的时候，WebStorm会显示主窗口，包含有六个部分，分别是菜单栏、工具栏 、导航栏、状态栏 、编辑器、WebStorm 工具窗口，如下图所示，图中已用红色标示。
常用操作
1.创建项目
file-->newproject-->指定路径-->点击上面的新建按钮创建一个文件夹，然后ok，创建好项目后，项目文件夹中会带有.idea这样一个文件
2.创建文件
右击项目-->new-->htmlfile-->输入文件名-->下面的下拉框可以选择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会自动关联它，在你想看当前文档的效果时，点击浏览器按钮即会打开
右击编辑区的左边栏，点击showLine Number，可以显示出行号，帮助我们快速定位代码
点击状态栏右下角的clickto go to line 可以快速跳到你要找到行，当代码量过千时，这个功能非常有用
webstorm常用配置
1.如何更改主题（字体&配色）
file->setting->editor->colors&fonts->scheme选择你的主题（darcula）
2.如何让webstorm启动的时候不打开工程文件
file->settings->Appearance&Behavior->Systemsettings 去掉reopen last project on startup（在启动的时候总是打开最后的工程）
3.如何完美显示中文
file->settings->appearance中勾选overridedefault 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" 打上钩，代码就自动换行了。
你先试下，在一行中写很长的句子，看会不会换行。
webstorm快捷键
1.TAB
自动补全 *
2.复制当前行
ctrl+d >
3.删除当前行
Ctrl+y
4.注释当前行|取消注释
ctrl+/
5.注释多行|取消注释
ctrl+shift+/
6.撤销
ctrl+z
7.同时编辑
alt
8.新建多个
9.包含关系
HTML是什么
1.超文本标记语言（HyperText Mark-up Language ）
2.用来设计网页的标记语言
3.用该语言编写的文件，以 .html或 .htm为后缀
4.由浏览器解释执行
5.不区分大小写，建议小写
HTML标签标签
1.HTML用于描述功能的符号成为“标签”
2.标签都封装在一对尖括号“<...>”之中,如<html>就是一个标签
3.封闭类型标记（也叫双标记），必须成对出现,如<p></p>
4.非封闭类型标记，也叫作空标记，或者单标记，如<br/>
Web浏
HTML元素
指的是从开始标签（start tag）到结束标签（endtag）的所有代码
HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
Web浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
HTML属性与值
1.属性是用来修饰元素的属性必须位于开始标签里一个元素的属性可能不止一个，多个属性之间用空格隔开多个属性之间不区分先后顺序。
2.每个属性都有值属性和属性的值之间用等号链接、属性的值包含在引号当中、属性总是以名称/值对的形式出现。
注释
1.为代码添加适当的注释是一种良好的编程习惯
2.注释只在编辑文本情况下可见，在浏览器展示页面是并不会显示
3.注释标签不支持任何属性
4.语法：
<!--注释的文本内容 -->
HTML的基本结构
<head lang="en">
lang是language的意思，lang=”en”属性对每张页面中的主要语言进行声明，en代表了英文，只是个声明，声明了它，对搜索引擎和浏览器更友好，并不会更改显示内容。它还有常见的值是zh-CN，代表了中文。（搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你的站点是中文站，这些都是html规范，越规范，越容易被收录）
<metacharset="UTF-8">
META标签用来描述一个HTML网页文档的属性，此处的charset=”utf-8”是说当前使用的是utf-8编码格式，GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准,GBK编码专门用来解决中文编码的,是双字节的。UTF－8 编码是用以解决国际上字符的一种多字节编码。
搜索引擎
根据一定算法搜集数据的平台，比如谷歌、百度。
什么是DTD文档模型，为什么写在HTML当中？
DTD文档模型也称DOCTYPE文档声明，它是DocumentTypeDefinition的英文缩写，意思是文档类型定义，在HTML文档中，用来指定页面所使用的HTML（或者XHTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，HTML里的标识和CSS才能正常生效。它一般被定义在页面的第一行，html标签之前。
它不是HTML标签。
什么是DTD文档模型，为什么写在HTML当中？
我们写好一份HTML文档，这时候全是代码，用户看不懂，是不是得用浏览器里的引擎给翻译一下？用户才看得到界面。关键是HTML有好多个版本，浏览器怎么知道按哪个版本解释？你老爸让你去扫地，你老妈让你去洗碗，你是听谁的，都是长辈，这时候如果你们家规定好了，凡事都听你老爸的，这个就很好解决了，去扫地。这个DTD文档模型就是这个意思，管它多少个HTML版本，我规定好我写的这个HTML文档以哪个为准就行，那我就知道我最终页面会被解释成一个什么样子。
DTD文档模型=DOCTYPE=DOCTYPE文档声明
DOCTYPE声明
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict 严格
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
该 DTD 包含所有HTML 元素和属性，但不包括展示性的和弃用的元素（比如font）。不允许框架集（Framesets）
DOCTYPE声明
HTML 4.01 Transitional 过渡
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
该DTD 包含所有HTML 元素和属性，包括展示性的和弃用的元素（比如font）。不允许框架集
HTML 4.01 Frameset 框架
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">该DTD 等同于HTML 4.01 Transitional，但允许框架集内容。
DOCTYPE声明
XHTML中的DTD文档模型
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
该 DTD包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。
xhtml和html的区别
XHTML是HTML向XML的一个过渡语言，在最初W3C组织希望把HTML变成更为严谨的标记语言（比如XML），但HTML的已经应用的太为广泛，全部换掉不太现实。因此产生了XHTML这样一种过度形式。它比HTML更严谨，基本标签都还是沿用了HTML，但废除了“表现层”的标签，同时要求标签的严格嵌套，标签结束等等。
<html>
定义HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
<html>
<head>
<title>我的第一个HTML 页面</title>
</head>
<body>
<p>body元素的内容会显示在浏览器中。</p>
</body>
</html>
<head>
标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：
<title>、<meta>、<link>、<style>、 <script>。
应该把 <head> 标签放在文档的开始处，紧跟在 <html> 后面，并处于 <body> 标签之前。
文档的头部经常会包含一些 <meta> 标签，用来告诉浏览器关于文档的附加信息。
<meta>
元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
常见的meta有
Keywords(关键字) keywords用来告诉搜索引擎你网页的关键字是什么。
<meta name="keywords"content="web前端,尚学堂培训">
description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。
<meta name="description"content="北京尚学堂,web前端培训">
author作者 标注网页的作者
<metaname="author" content="root,root@xxxx.com">
标签嵌套
标签之间可以相互嵌套，但要注意嵌套顺序
语义化标签
语义化：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上文章的标题就可以用标题标签h1-h6,段落用p,地址用address等
好处：
1.更容易被搜索引擎收录
2. 更容易让屏幕阅读器读出网页内容
HTML中常用标签
HTML中常用标签
1.使用<img>元素将图像添加到页面
2.空标记
3.必须属性：src（存储图像的位置）
4.常用属性：width，height，alt，title
<imgsrc="URL"width="300" alt=”替换文本属性”/>
title定义了鼠标经过图片时显示的内容，搜索引擎抓取图片时，是根据title定义的内容来分析图片是什么的
alt当图片未能正常显示时，用于给用户的提示信息
超链接
1.使用<a></a>元素创建一个超链接
2.语法：
<ahref="" target="" title=””>文本</a>
href属性：链接URL
target属性：目标，可取值_blank,_self等
name属性：锚点名称
title属性：定义了鼠标经过时的提示文字
联系客服
