重回百度前端技术学院第一天

之前经历了考试月导致之前的很多知识点都模糊了，所以特意重新回忆一下基础知识

网址访问过程和下图差不多，浏览器和服务器交流，服务器和数据库交流（有时候数据库就在服务器那台机子上）

HTML 5 与 XHTML
像人的语言一样，网络上的网页里的 HTML 代码也不一定是标准的，好比有时候你发音不太标准，别人会去猜测你说的到底是什么一样，有些时候前端程序猿不小心写错了 HTML，浏览器也会试图猜测他们原来想写的是什么，做对应的渲染，而猜是要有一个常识做依据的。加上有些浏览器支持一些标签，有一些又不支持，以及其他混乱的情况，为了防止大家鸡同鸭讲，我们需要对 HTML 代码里能有什么标签，标签怎么写，标签可以有什么属性这些东西有一定的共识，建立一个通行的标准，HTML5 就是其中一个比较新的标准。这个标准新加了很多可以用的标签和属性，然后各大浏览器也吭哧吭哧按这个标准去实现了很多这些新加的标签和属性，本来前端程序员要写一堆代码去实现的效果，现在浏览器都给你实现好了，只要写两三行，调用一下浏览器给你实现的部分就能搞定，简单愉快，所以很多人都在热情地推广这个标准~（当然新标准也不可能是完美的，总会有一些问题，怕跑题这里按下不表~）

一个普通网站访问的过程
简单概括一下，对于我们普通的网站访问，涉及到的技术就是：

用户操作浏览器访问，浏览器向服务器发出一个 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写入数据之类的），把资源返回给客户端，客户端用得到的资源来实现动态效果或其他改变。

总结：

前端：HTML、CSS、JavaScript

后端：PHP、ASP.NET

然后就是我看到的一个优秀笔记，关于什么是Web、HTML、CSS、JavaScript

1.What is web？
web 包括了web客户端、web服务端，采用常见的(B/S)计算机结构，中间可有通信协议，如http,https
web简单的工作原理：web客户端通过URL网址链接提交请求到web服务端申请拿取数据，web服务端响应请求，根据其要求找到相应的数据并返回数据给客户端(双方买卖的过程)
web客户端是啥？常见的浏览器咯，web服务器又是啥？一台24小时工作的电脑(嘻嘻,取个独特的名字增强神秘感)保存有页面啊~,数据等，相对浏览器而言。什么？就是那些网页早就弄好了，
如果你要，你就发送请求给我，我发给你。(简单介绍)
那么

2.What is HTML ?
Html(Hypertext Markup Language) 超文本标记语言，主要用在web中，是搭建起web网页的结构，嗯……，就是相当于人体的骨架嘛(确实没啥美观，可人家实用啊)
Html和普通的编程语言的区别(Html不是真正的编程语言)，不是一路人~~
Html 中的几个关键词元素(elements),标签(tags),内容(content),属性(Attribute).
接下来解析以下几个与html相关的关键词：
{
Html是由一系列元素(elements)组成的。
元素(elements)是由标签(tags)+内容(content)组成的。
元素(elements)这个家伙还有属性(Attribute)，放在开始标签(tags)中
属性(Attribute)带有属性值(就像家属一样)
}
有了基本的Html的组成认识，现在来看下Html页面的基本结构

    {
        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8">
            <title>My test page</title>
          </head>
          <body>
            <img src="images/firefox-icon.png" alt="My test image">
          </body>
        </html>
    }
    <!DOCTYPE html> — 文档类型（doctypes）,必须带上(规则嘛~)
    <html>根元素,包含整个页面的内容
    <head> 元素,常可用于引用css样式(后面讲)、字符编码等,用户不可见的(好像挺神秘的)
    <meta charset="utf-8"> 文档所使用的字符编码
    <title></title> 页面的标题，显示在浏览器标签上(网页被收藏为标签的默认名称)

3.What is CSS ?
CSS(Cascading Style Sheets)层叠样式表，样式表达语言(非真正编程语言);有啥用？纯html文档太丑了，不符合我们人类的审美观，所以得弄些画面好看的样式放上去，
css就是干这活的(即是为Html文档添加你想要的样子的一种表达式)。既是美化HTML文档的东西，得有些规矩吧(不能乱改乱涂呢，咱又不是小学生~)。
下面来看CSS规则：

p{
color:red;
}
p: 选择符(Selector)
color:red :声明(Declaration)
color: 属性(Property)
red : 属性值(Property Value)

大括号里面放除选择符外的声明
冒号分离属性和属性值
分号分离每个声明

往下扩展可有选择符的扩展、声明的扩展等
CSS 有一个重要的东西叫做盒子模型
4.What is JavaScript?
javascript 跟Java没有半毛钱关系一个编程语言，应用于HTML文档，可以在网站上提供动态交互。
展开的话就很多东西要讲了，反正现在记住它是提供网页交互的就是了嘛。

重回百度前端技术学院 第一天

总结：

然后就是我看到的一个优秀笔记，关于什么是Web、HTML、CSS、JavaScript

猜你喜欢

重回百度前端技术学院第一天