Web前端学习笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_44537588/article/details/105343563

学习Web前端的第一天：为什么有那么多人要做前端？

目标

大概知道什么是Web，什么是HTML，CSS，JavaScript

问题探究

What is Web？

Web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
来源：《科普中国·科学百科》

What is HTML？

超文本标记语言 (英语：Hypertext Markup Language，简称：HTML ) 是一种用来结构化 Web网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="测试图片">
  </body>
</html>

What is CSS？

层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。

来源《MDN CSS基础》

What is JavaScript？

JavaScript 编程语言允许你在 Web 页面上实现复杂的功能。如果你看到一个网页不仅仅显示静态的信息，而是显示依时间更新的内容，或者交互式地图，或者 2D/3D 动画图像，或者滚动的视频播放器，等等——你基本可以确定，这需要 JavaScript 的参与。
来源《MDN JavaScript》

了解完以上之后，正式进入web前端的学习！首先先欣赏一下国外的网站（效果超级炫酷）

上面这些网站效果都是使用Web前端技术实现的。有不少前端开发者选择入行的原因，就是希望通过技术做出类似这些美好的东西，用技术带给用户最优美的体验。我也开始期待着一天，我也可以用技术实现如此美妙的画面。

阅读

笔记

浏览器和服务器交流，服务器和数据库交流
HTML 与 CSS：浏览器渲染好从服务器中取得的HTML代码，是一些默认样式，不符合正常人的眼光。再使用CSS——通用的规定样式的语言，自定义样式，让浏览器画出自己的风格。
HTML 5：就是其中HTML中一个比较新的标准。
XHTML：XHTML，就是 HTML 的近亲 XML 和 HTML 自己的杂交品种，对语法要求比较严格，并且为了兼容 XML，在语法上与HTML 有一些不同~
JS：有了表示内容和语义的 HTML，规定样式的 CSS，得到的是一个静态的页面，于是我们有了 Javascript（JS）来给页面添加一些动态的效果，增加用户和网页的交互。

后端：

Web Server：提供 Web Service， Web Server 还会兼顾很多功能，包括提供缓存，平衡负载。常见的现成的 Web Server 有开源的 Apache、Nginx和微软的IIS，你也可以用一些工具（比如 Node.js ）自己定制一个。
服务器脚本：但是没登陆和登陆之后看到的东西不一样，登陆之后每个人看到的导航栏的用户信息，关注的动态，都不一样。服务器脚本可以对这些不同的状态，生成不同的页面，交给Web Server 返回给浏览器。
PHP：就是一种常见的用来写服务器脚本的语言。
Web Framework：为了方便，我们在写服务器脚本的时候，通常还会用个同语言写的 Web Framework来处理各种细节，防御一些常见的攻击，提供跨站认证（比如用已有的微博账号注册其他网站）的接口，利用cookie处理登陆状态和用户设置，生成网页模版之类的。
AJAX：实现了自动更新需要刷新的数据的效果

一个普通网站访问的过程：

用户操作浏览器访问，浏览器向服务器发出一个 HTTP 请求；
服务器接收到 HTTP 请求，Web Server 进行相应的初步处理，使用服务器脚本生成页面；
服务器脚本（利用Web Framework）调用本地和客户端传来的数据，生成页面；
Web Server 将生成的页面作为 HTTP 响应的 body，根据不同的处理结果生成 HTTP header，发回给客户端；
客户端（浏览器）接收到 HTTP 响应，通常第一个请求得到的 HTTP 响应的 body 里是 HTML代码，于是对 HTML代码开始解析；
解析过程中遇到引用的服务器上的资源（额外的 CSS、JS代码，图片、音视频，附件等），再向 Web Server 发送请求，Web Server 找到对应的文件，发送回来；
浏览器解析 HTML 包含的内容，用得到的 CSS 代码进行外观上的进一步渲染，JS 代码也可能会对外观进行一定的处理；
用户与页面交互（点击，悬停等等）时，JS 代码对此作出一定的反应，添加特效与动画；
交互的过程中可能需要向服务器索取或提交额外的数据（局部的刷新，类似微博的新消息通知），一般不是跳转就是通过 JS代码（响应某个动作或者定时）向 Web Server 发送请求，Web Server再用服务器脚本进行处理（资源or写入数据之类的），把资源返回给客户端，客户端用得到的资源来实现动态效果或其他改变。

总结

2020/4/6 学习时间3小时
再次对HTML CSS JS后端进行了解，学习Web前端原来需要掌握这些知识，希望可以早点把基础知识学好，自己制作一个关于我和女朋友的网站。我今年大三下学期了，对网工专业仍然有一点迷，最后我还是选择了Web前端，因为我觉得相比学习路由交换，网络基础，网页设计感兴趣一点，没有那么枯燥。每个方向都有它难的地方，学懂一点点皮毛没有用，只有对它有更深的了解才算高手。我在b站跟着尚硅谷的老师学习HTML+CSS+JS的基础，挺有趣的，坚持下去，我会变强的。为了找到工作，自己必须要掌握一门过硬的技术才行~加油!

(本篇文章属于我个人的学习笔记，有复制其他网站的一些知识，才此声明我并不是用来商业化)