Web前端基础知识⼊门学习
⼀、前端⼯程师的⾓⾊
⼀个⽹站的建设需要以下⾓⾊：
①策划⼈员：⽅案
②美⼯/UI设计师：设计图 （.psd  .rp）
③前端⼯程师：静态⽹页
④后端⼯程师：获取数据 ( Java  PHP  .NET)
我还是要推荐下我⾃⼰创建的web前端资料分享606721798，这是web前端学习交流的地⽅，不管你是⼩⽩还是⼤⽜，⼩编都欢迎，不定期分享⼲货，包括我整理的⼀份适合零基础学习web前端的资料和⼊门教程。
⼆、Web的基础知识
1、Web（万维⽹）与Internet（因特⽹）
①Internet简介：定义、主要服务、基本实现技术
②Web与Internet关系
Web是Internet提供的服务。
③Web简介：万维⽹
2、Web的⼯作原理
①Web的⼯作原理
②Web的组成部分
1)Web服务器：监听客户端连接请求、接收请求，返回响应内容。
产品：TOMCAT;IIS;APACHE
Apache Httpd市场占有率最⾼(>60%) ，开源免费 。
⼀般称的Apache服务器默认指Apache Httpd服务器。
2)Web客户端：（⽬前）浏览器和移动设备的APP（数据传输，HTML5是趋势）
五个常⽤浏览器：IEtester（可以运⾏各种IE浏览器），Google Chrome（近Safari），（）⽕狐，（）欧朋，Safari 。
国产的浏览器没有⾃⼰的内核。
3)HTTP协议：定义Web服务器和客户端的通讯细节
3、Web的相关技术
①常见的服务器端技术（运⾏在服务器上）：
JSP (Java)/PHP/ASPX
②常见的客户端技术（运⾏在浏览器）：
HTML/ CSS /JavaScript/SWF 前端学的主要是客户端技术。
☆补充⼀：怎么安装和使⽤Apache服务器。
TIPS：命令⾏程序窗⼝内按键盘的“上键”可以再调出来⼀遍命令。
到⼀定层次很多软件都是英⽂的。
（1）下载：
（2）安装：
①必须填写Network Domain（域名）；Server Name（服务器名字）和 管理员邮箱地址
②端⼝号默认80 ---服务器服务进程的地址。Http服务器端⼝（port）号为80.
③⼀般选典型安装
④服务器安装路径：不要有中⽂和空格，有时候会出现莫名其妙的问题。⼀般直接安装在C盘下C:\Apache 2.2\
安装好后，要准备就绪。
（3）启动Httpd服务器：
两种途径：
①服务控制程序（可以看见的）
网络前端需要学什么
②操作系统的服务控制台【⿏标操作（计算机--右键--管理--服务）或快捷键windows+r--services.msc】
③直接CMD命令启动：net start Apache2.2（直接安装在C盘是有原因的，简化命令⾏）
【停⽌：net stop Apache2.2 重启：net restart Apache 2.2】
如何确定服务器真正开启？
因为服务器是后台程序，运⾏在操作系统底层的，⽤户看不见。
服务器开启且占⽤了其端⼝号，才真正开启。
可以查看系统打开的端⼝号，确认Httpd是否已经启动。
netstat -anb 确认80端⼝是Httpd服务器进程占⽤，迅雷等端⼝可能会占⽤。如被占⽤则关掉其他程序（进程）。才能真正启⽤服务器。
（4）访问服务器
<1>访问服务器的两种途径：
①通过Windows IP配置的 IP可以访问任何⼈（包括⾃⼰）的服务器（联⽹的情况下）；
②127.0.0.1当前计算机（本机）的IP地址，仅限访问⾃⼰的本地服务器。
两者区别：
127.0.0.1仅在当前计算机使⽤，⼀般是⼀直可以⽤的。任何时候联⽹或断⽹都可以访问⾃⼰的服务器；但是常规 Windows IP配置的 IP则仅限在联⽹的情况下访问⾃⼰或别⼈的服务器。
<2>访问服务器下的⽹页
①访问⽅式：路径直接127.0.0.1或IP则显⽰默认⽹页index.html
（只有访问index.html⽂档不⽤写⽂件名，其他在IP地址后必须写⽂件名。）
②服务器下的⽹页不能随便放在任何路径下；⽹页必须放在Apache Httpd服务器能够识别的路径下。
⽹页⽂档存储在htdocs⽂件夹⾥才能访问到（C→Apache2.2 →htdocs）
☆补充⼆：浏览器控制台。
前端⼯程师必须要熟练使⽤浏览器控制台！
试⼀下标签：<marquee>hello world!</marquee>---跑马灯的效果
****右键单击----审查元素----浏览器控制台---纠错调错⽤的。
（1）浏览器控制台---主界⾯菜单和Elements （元素）界⾯（见图1）：
Elements 元素【⽂档内容、样式css、盒⼦模型解决纠错】
Network ⽹络
Sources  源代码
Console 控制台
Timeline 时间线
Profiles 归档
Resources 资源
Security 安全
Audits 审计
（2）浏览器控制台学习---Network（⽹络）界⾯（见图2）
Method ⽅法  GET ⽅法（此图没有）
Status 状态  304响应
Type ⽂档类型
Initiator 发起者
Size ⼤⼩；尺⼨
Time 时间（延时）
Timeline 时间线【请求发送、等待、内容下载】
Timeline是做web页⾯的前端优化必须懂的！我们的⽹页发送了多少个请求和哪个请求最耗时使我们的症结所在。我们对Web页⾯进⾏了前端优化的⽬的就是，缩短请求时间，使Web⽹页打开时间变短。
（3）浏览器操作台-network-点击⽹页名（见图3）
Headers  标题
Preview 预览
Response 响应
Timeing 计时
☆补充三：直接本地打开⽂件html⽂件和通过IP地址访问服务器打开html⽂件的区别。
（1）⾸先路径显⽰有区别
（2）是否符合Web模型的区别。
通过IP地址访问服务器查看页⾯：通过HTTP协议，⽹络浏览器发送⼀个请求，得到服务器的响应页⾯是这样的。包含了web的三要素。
直接本地双击打开⽂件html⽂档查看页⾯：没有经过服务器，没有遵循http协议，不符合web模型。虽然简单页⾯两者效果⼀样，但是复杂页⾯就不⼀样了。这样的访问没有经过页服务器，服务器端会对⽂档加以处理，少了处理访问的效果就有可能与⽤户不⼀样，所以访问时尽量的架服务器，把⽹页放在htdocs。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。