百度前端学习日记01——什么是web,html,css,JavaScript

1.what is web ?

a.百度百科

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

b.个人理解

web通俗的来说就是客户端与服务端通过internet来互相传输数据。

c.什么是客户端,什么是服务端

客户端可以是你的电脑,平板,手机等等一切可以联网的东西。

服务端可以理解为一台24小时接受客户端数据和给客户端发送数据的电脑。

(如果你想,你的电脑也可以变成服务端。ps:前提是你不怕它运作过度烧毁)

d.客户端与服务端怎么连接

那当然是通过网络连接,也就是你的宽带。

e.当你访问一个网站的时候,客户端和服务端是怎么运作的

首先来补充一些其他知识,引用一下MDN网站的话(具体可以戳一下链接)把客户端比作你家,而服务端比作商店。

网络连接: 允许你在互联网上发送和接受数据。基本上和你家到商店的街道差不多。
TCP/IP: 传输控制协议和因特网互连协议是定义数据如何传输的通信协议。这就像你下订单,去商店和买东西时所使用的传输机制。这里就像是一辆汽车或自行车(或是你能想到的其他可能)。
DNS: 域名系统服务器像是一本网站通讯录。当你在浏览器内输入一个网址时,浏览器获取网页之前将会查看域名系统。
浏览器需要找到存放你想要的网页的服务器,才能发送 HTTP 请求到正确的地方。就像你要知道商店的地址才能到达那。 HTTP: 超文本传输协议是一个定义客户端和服务器间交流的语言的协议(protocol )。就像你下订单时所说的话一样。 组成文件: 一个网页由许多文件组成,就像商店里不同的商品一样。这些文件有两种类型: 代码 : 网页大体由 HTML、CSS、JavaScript组成,不过你会在后面看到不同的技术。 资源 : 这是其他组成网页的东西的集合,比如图像、音乐、视频、Word文档、PDF文件。

那访问一个网址的时候到底是怎么运作的?继续引用MDN网站的原话(MDN说的太好,根本不用修饰)

1.浏览器在域名系统服务器上找出存放网页的服务器的实际地址(找出商店的位置)。
2.浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端(你走到商店并下订单)。 
   这条消息,包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协 
   议传输的。
3.服务器同意客户端的请求后,会返回一个“200 OK”信息,意味着“你可以查看这个网页,给 
   你~”,然后开始将网页的文件以数据包的形式传输到浏览器(商店给你商品,你将商品带回 
   家)。
4.浏览器将数据包聚集成完整的网页然后将网页呈现给你(商品到了你的门口 —— 新东西,好 
   棒!)。

2.what is HTML? what is CSS? what is javaScript?

(因为这三个是难分难解的好基友,我就一起说了)

a.数据包是什么?

如果你有认真看上面的内容,你就知道什么是数据包。

数据包就是服务端同意客户端请求后发给客户端的网页文件的打包。而这个网页文件大部分就是HTML文件,当然还有其他各种各样的(jsp,asp)

b.what is HTML?

百度百科

1.超文本标记语言,标准通用标记语言下的一个应用。
2.“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
3.超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

那我们看看一个标准的html文件是怎么样的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>百度前端</h1>
        <p>百度前端</p>
    </body>
</html>

<!DOCTYPE html> — 文档类型(doctypes),告诉浏览器这是一个什么类型的文档

<html>根元素,包含整个页面的内容

<head> 元素,常可用于引用css样式(后面讲)、字符编码等,用户不可见的(好像挺神秘的)

<meta charset="utf-8"> 文档所使用的字符编码

<title></title> 页面的标题,显示在浏览器标签上(网页被收藏为标签的默认名称

<h1><p>就是我在网页中看到的内容,标题和段落了

实际网页显示的样子

c.what is CSS?

简单的来说css就用来装饰HTML

我们直接来看案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        p{
            color: red;
        }
    </style>
    <body>
        <h1>百度前端</h1>
        <p>百度前端</p>
    </body>
</html>

其中的<style>中的内容就是css,那我们来看看发生了什么变化

文字变红了,这就是css

d.what is javaScript?

javaScript可以说是HTML的灵魂,如果你想让上面这段文字在你面前跳舞就要用JavaScript了

引用百度百科

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,
最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

e.三者的关系

简单粗暴一点来形容,HTML是名词,CSS是形容词,JavaScript是动词!

猜你喜欢

转载自www.cnblogs.com/no-wing/p/9264863.html