# 目标
- 唠叨的话
- 计算机基础知识
- 软件开发流程
- 前端核心技术
- 互联网原理
- HTML初步认识
# 唠叨的话
>整套全栈体系写完,应该分为三个阶段, 前端基础,前端进阶,和全栈框架.
## 循序渐进,脚踏实地
第一阶段是前端基础, 内容都是后期日常工作中最基础最本能需要的东西.切记扎实基础.
基础内容包含如下三部分:
1. HTML
2. CSS
3. JavaScript
这也是网页的"三大剑客",最核心的技能!
## 学习看文档
生活中技艺的学习起步阶段都是学习前人的经验. 我们计算机编程更是如此, 现有的知识体系先学习,学懂, 精通后灵活的组合现有的技术就能创造新的东西了.
两个前端手册网站(也叫API帮助文档),必须推荐下.
W3School: [W3School](http://www.w3school.com.cn/)
菜鸟教程: [菜鸟教程](http://www.runoob.com/)
## 练习再练习
成才的关键我想可能只是"唯手熟尔"
# 计算机基础知识
>使用电脑看电影,打游戏应该是我们普通人最熟悉的了,可即将成为一个专业程序员还是需要简单的为大家整理下必备的技能.
## 文件和文件夹管理
- 熟练掌握文件和文件夹的管理
1. 创建
2. 删除
3. 重命名 ( 快捷键 F2)
4. 复制 (Ctrl +C)
5. 剪切 (Ctrl +X )
不多说 (^__^) 大家都会.
- 熟练掌握"文件扩展名/后缀名" 的意义
在window下,所有的文件名都有两部分组成,语法: 文件名.扩展名
比如 *.jsp 是图片格式, *.mp3 是音乐格式, *.doc 是word文档,*.txt 是文本格式
`一般,操作系统是不显示扩展名的,需要我们自己设置`
我以win7举例:
双击计算机-->工具---文件夹选项-- 查看---去掉勾选:"隐藏已知文件扩展名"
win8 更简单哦,自己琢磨或百度下!
- 会使用桌面,知道"快捷方式"的概念
注意,桌面是一个特殊的文件,位置在: `C:\Users\Administrator\Desktop`,所以后期重做系统的时候移动要记得备份桌面的重要数据哦,不然会丢失文件的!
快捷方式是:程序快速打开的一个入口,双击就能直接打开程序,任意的软件或文件夹都可以创建快捷方式.下面是为 画图,在做桌面创建一个快捷方式
所有快捷方式,都有一个小箭头图标.就是一个快捷入口,所以删除这个图标,程序还在.
## 特殊按键和快捷键
键盘上出除了字母,数字以外,还有一些特殊的功能按键: ctrl, shift, alt tab 等
- Ctrl 是英文 `control` 控制的意思,. 单独按没有作用,要和其他按键一起才有作用比如:ctrl+C ,同时按住 ctrl键 和 C 键, 这是复制功能. ctrl+V 是粘贴
- Shift 是英文 `Shift` 换挡的意思, 按下这个按钮,打字母,打出的就是大写字母.
- Alt 是 `alternate` 调整的意思. 和ctrl 一样,自己没啥用,需要和其他按键一起按下才有用.比如 alt+F4 标示关闭当前窗口. 老板来了,正在玩游戏可以按alt+F4 快速关闭窗口
- Tab: 是 `Table` 制表符的意思,写文档时按下此键盘可以自动缩进一些空格! 又比如:在word中同时打开两个文档可以用 ctrl+tab 键在两个文档之间切换
必须熟悉以下快捷键
>
ctrl+c 复制
ctrl+v 粘贴
ctrl+x 剪切（就是移动文件，在原来的文件夹ctrl+x一个文件，然后在新文件夹中ctrl+v粘贴）
ctrl+tab 切换（具体切换什么，要看是什么软件）
alt+F4 关闭程序
F2 重命名
F5 刷新，比如看网页的时候，想刷新网页，按f5
ctrl+z 撤销，就是这一步干错了，就ctrl+z撤销
windows+E 打开资源管理器
windows+D 显示桌面
>
## 打字速度
打字速度是必备的素养！
1） 严禁二指神功，必须养成正确的指法；比如打`{`时，要按住`shift+[`。
正确的按键方法，是左手小拇指按住左边的`shift`键，右手中指按`[`键。
2） 金山打字通。前几天内容,简单,没啥事儿就用`金山打字通`练习打字。
不要练习中文打字，只练习英文打字就行了。英文文章一定要练习到`每分钟100字`以上
一定把打英文速度提上来,不然跟不上老师讲课节奏的!
# 软件开发流程
>开发流程中我们就处于中间环节,将设计师的网页图片转化为代码,然后交给后台程序员,由他们编写服务器端代码,讲页面上的静态数据替换为动态数据! 我们需要和设计师沟通,需要和产品经理沟通,需要和后台工程师沟通!
设计师会给我们一张网页设计图,这仅仅是一张图片哦,不能点的!
而我们前端工程师需要把它变成这样.......,以下大家看到的是网页"源代码",浏览器打开网页按F12可以查看到
# 我们主要学习哪些内容?
- HTML 语言：负责网页的结构，又称语义层
- CSS 语言：负责网页的样式，又称视觉层
- JavaScript 语言：负责网页的逻辑和交互，又称逻辑层或交互层
# 互联网的原理
> 上网就是请求数据
## 上网就是请求数据
网页上的内容,怎么就被我们看到了? 什么是上网?
我们通过一个实验看以下. 我们每个人电脑都有一个神秘的文件夹,`C:\Users\Administrator\AppData\Local\Microsoft\Windows\Temporary Internet Files` 这个文件夹角`临时文件夹` 我们清空这个文件夹中的全部内容
当我们打开IE浏览器时,我们看几个网页.结果,这个文件夹中又多了很多东西:
上网时,是有真实的物理文件传输的,所以我们经常感觉第二次打开页面比第一次快,因为第一次打开网页时,所有的图片等都已经保存过了.所以也能解释,为什么每次360都能清理一堆垃圾.
我们现在可以回答刚才的问题了 '上网就是什么': 上网就是请求数据,就是文件传输.
>服务器上存放着网页相关的文件,包括 html文件,css文件,js文件,图片等,当我们打开浏览器,输入网址,我们的计算机就会对这些文件发出HTTP请求.服务器接到请求后会把这些文件通过HTTP协议,传输到我们的计算机中(保存在临时文件夹中),谢谢文件,讲在我们计算机本地的浏览器,进行 渲染,呈递. 也就是说，本来人家文件好好的在服务器上睡大觉，你一输入网址，就把这些文件传输到本地计算机来了。这些文件在本地的计算机中，进行渲染。
## 服务器Service
- 服务器就是计算机，只不过比咱们用的笔记本的配置牛逼了很多，并且24小时不断电，不关机。
- 服务器上存储着网页的相关文件。一旦有访问者浏览网站，服务器就将发送这些文件给访问者。
- 服务器一旦关机，网站就无法访问了。
- 服务器的更多知识，我们在Ajax课上将深入学习。基础课程我们只需要知道，上述知识即可。
## 浏览器
浏览器是安装在客户的电脑里面的，是一个软件，能够让用户上网。
浏览器众多而且有版本之分，有浏览器兼容问题，我们的课程将详细介绍浏览器兼容问题。
## HTTP
>超文本传输协议，Hypertext Transfer Protocol。
这是一个文件的传输协议，我们上网的时候，所有的文件都是通过HTTP这个协议，从服务器上传输到客户的电脑里面的。
现在，我们只需要知道这些即可，我们的Ajax课程上，将详细讲解HTTP这个东西哦~
`承诺一下，如果大家学习劲头足，我会抽时间讲如何购买www域名和空间`
现在我们必须要树立一个思想，就是每一个网址，都对应着确定的服务器上的文件。
比如网址：
http://www.zzy.com/1.html
就是服务器上面的1.html文件
http://www.zzy.com/
看似没有精确到一个文件，但是有一个规定，就是index.html是默认的首页文件。
index就是英语“目录”的意思。
http://www.zrgk.com/aaa/b.html
服务器上面有一个aaa文件夹，这个文件夹里面有一个b.html文件。
>上面都没听懂没事，就记住：
网页是真实物理的文件。并且一个网页是很多的物理文件组成的：html文件、图片文件、js文件、css文件。这些文件要通过特殊软件才能上传到服务器上。然后就能让用户看了。用户通过浏览器，访问网址，服务器上面的文件就会通过http请求悄悄地传输到用户的电脑中的临时文件夹中，在用户的电脑中执行、渲染、呈递
>
# HTML初步认识
## 认识什么是纯文本文件txt
windows中自带一个软件，叫做记事本。记事本保存的文档格式就是txt格式，就是英语text的缩写。术语上，称呼这个文件叫做“纯文本文件”。
我们现在要花15分钟，好好研究凭什么这个txt文件叫做“纯文本文件”。
我们做了一个小实验，`发现doc这个文件能够保存内容和样式，字有红的、蓝的。传给大家看，是一样的。`
但是txt格式有点不同：
`txt文件，只能保存文本内容，是无法记录文本样式的。`
所以，doc和txt存储同样的内容，doc比txt大.
>
纯文本文件就是这样的文件：
1） 只有文本，没有样式；
2） 用记事本等纯文本编辑器可读，不是乱码
html、css、js都是纯本文的。
>
## HTML是负责描述文档语义的语言
>HTML是英语HyperText Markup Language的缩写，超文本标记语言。
.html,或.htm 就是网页的格式。
现在，来制作我们人生中第一个网页，
新建一个txt文件：
也就是说，html本质上和txt没有任何区别，他们都是纯文本文件。
我们强行把这个文件的拓展名，从txt更改为html，我们会发现小图标就变成浏览器的小图标了：
在“打开方式”中，用记事本可以编辑它。
现在要养成 `编辑器里面编辑 → 保存ctrl+s → 浏览器里面刷新F5` 的习惯。
html到底干嘛用的，看下面的例子：
纯文本txt文件是不能描述文档的语义的，文档中不知道谁是主标题，谁是副标题，谁是段落。所以html应运而生。
下面就是一个html文件的演示，就是通过html标签对儿，来给文本增加语义：
```
<h1>Angelababy简介</h1>
<h2>基本信息</h2>
<p>杨颖（Angelababy），1989年2月28日出生于上海，13岁时移居香港，中国影视女演员。</p>
<p>2009年主演电影《全城热恋》。2012年，凭借爱情片《第一次》获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗、杨幂、倪妮共同当选为新一代“四小花旦”；同年在徐克导演的影片《狄仁杰之神都龙王》中担任女主角，并且获得第21届北京大学生电影节最受欢迎女演员奖；4月，Angelababy主演电视剧《大汉情缘之云中歌》。2014年加盟综艺节目《奔跑吧兄弟》并主演电影版；同年主演顾长卫导演的电影《微爱之渐入佳境》，票房突破2.8亿。2015年5月参演好莱坞电影《独立日2》；7月，主演电影《摆渡人》。
</p>
<h2>早年经历</h2>
<p>1989年2月28日，Angelababy出生在上海，中文名杨颖。杨颖自小随家人到上海定居，在上海的演艺学校学演戏及跳舞。13岁时，杨颖回香港加入了Talent Bang，还担任Viva Club Disney主持。</p>
<h2>个人生活</h2>
<p>2015年5月27日，黄晓明和Angelababy（杨颖）在青岛民政局领证完婚。</p>
<p>2015年10月8日，黄晓明和Angelababy在上海展览中心正式举办婚礼。上午8点，Angelababy工作室曝光了一两人的婚纱照，照片中，两人以巴黎地标建筑为背景，浪漫亲吻。</p>`
```
```
html提供了很多标签对儿，可以给文本增加不同的语义。比如：
<h1> </h1>标签对儿，主标题。
<h2> </h2>标签对儿，二级标题。
<p> </p> 标签对儿，普通段落。
````
>现在的业界的标准，网页技术严格的三层分离：html就是负责描述页面的语义；css负责描述页面的样式；js负责描述页面的动态效果的。
所以，html不能让文字居中，不能更改文字字号、字体、颜色。因为这些都是属于样式范畴，都是css干的事儿；html不能让盒子运动起来，因为这些属性行为范畴，都是js干的事儿。
html只能干一件事儿，就是通过标签对儿，给文本增加语义。这是html唯一能做的。
`html中，除了语义，其他什么都没有。`
html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。
所以，接下来，我们肯定要学习一堆html中的标签对儿，这些标签对儿能够给文本不同的语义。
```
标签对儿是由起始标签和结束标签组成的：
<h1>Angelababy简介</h1>
<h1> 起始标签
</h1> 结束标签
比如，面试的时候问你，h1标签有什么作用？
正确答案：给文本增加主标题的语义
错误答案：给文字加粗、加黑、变大
`````
# html结构和开发工具
一款合适的开发工具能加快我们的开发效率! 可以根据自己习惯任意选择!
百度网盘下载地址:
工作中常用开发工具分两大类：
1. 小巧的:文本编辑器
Notepad++, Sublime[推荐使用]
3. 大型软件 IDE(集成开发环境)
图形界面操作简单,可集成大量插件! 提示丰富!
Hbuilder[国产,开源免费推荐使用]
VSCode: 微软,开源免费,可看源码 [推荐使用]
WebStorm: 这个收费! 打开太慢!
[点我从官网下载](http://www.dcloud.io/)
网盘地址：https://pan.baidu.com/s/1sjAi8D8gZZzbWrCjAleg9A 密码：hgzl
骨架抽象出来
```
<html>
<头>
中文字符集
<标题>标题</标题>
</头>
<主体>
各种标签 ,用户可见内容
</主体>
</html>
```
head标签中，描述网页的配置；body中的内容，才是用户可以看见的内容。
# 总结
- 踏实,练习,学看API
- 计算机基础知识
- 软件开发流程
- 前端核心技术
- 互联网原理
- HTML初步认识
# Good End !!!
