我们可以将 Web 简单理解为网站、网页,要触碰它相关的基础技术,需要从整体上,对一些基本技术概念做简单的梳理,本文就是如此目的。
本文内出现的(技术)关键词,不求甚解,当是见个面,可以眼熟一些;如果遇到自己特别想要知道的,使用搜索引擎去了解就可以了。
一般也无需在某个“词”上太过于纠结,比如 HTML
也称 超文本标记语言
,没有必要去硬记,大概知道即可。
你或许看到过 URL、URI、URN 这些不同名词,不用关心区别,把 URL 当 网址
的意思就可以了。
比如这个网址: http://yourdomain.com/category/index.html
http
表示协议名称,其它类似的你或许看到过 https://
或 ftp://
;
localhost
或某个具体的 (局域网) IP;
/category/index.html
则是具体的路径,要注意这是 /
开头的,如果不是 /
开头,则是一个相对路径。以后应该也会看到 ./
这种有 .
的路径,一般不用在意,遇到的时候,试一试就能明白具体含义了。
127.0.0.1
(一般)等同于 localhost
,表示本地(电脑)的意思。
http://domain.com/page
实际上完整的是 http://domain.com:80/page
。默认约定, http 对应 80 端口,https 对应 443 端口, 所以 http & https 协议对应的 URL 中不需要特别声明端口。但我们在一些测试环境下,会使用非约定的端口,则要补全,比如 8080 端口为例,则对应的 URL 为 http://localhost:8080/page
。
关于 URL 转义:
/中文test
这样的眼睛看到的 URL,实际上应该 (转义) 为 /%E4%B8%AD%E6%96%87test
%20
常见的网页请求方式 (Method) 是 GET
以及 POST
(注意,全大写)。
本质上,GET 与 POST 并无不同;GET 是默认的方式,主要用于浏览,一般在提交数据到服务器端的时才使用 POST 方式。
GET 与 POST 都是传递数据的方式,GET 主要体现为 URL 上,末尾加上了 ?
作为变量传递,多个变量之间,用 &
拼接,一般情况,我们也会叫这些变量为 URL 变量
,有时也叫 GET 变量
:
除了 GET 与 POST 之外,后续也出现了 PUT、DELETE 这些特定含义的Method,你甚至可以自定义一个 Method,比如叫 HELLO
。
至于某个 Method 是否被支持,主要看自己的后端(服务端)代码中是否对应了处理的逻辑。
HTTP
叫 超文本协议
,网页作为 HTTP 的呈现,本质上就是以文本的编码在网络上进行传输,至于接受这个『文本』的服务器怎么处理,就具体问题具体分析了。所谓的 Method,实质不过是 超文本
中的小段字符串,用于声明而已。
(浏览器)直接访问一个 URL,属于 GET
的方式,比如 http://domain.com/page?v1=abc
,但是,对于这个 URL,同样可以进行 POST
(比如使用 Javascript 进行数据的提交),此时的 Method 自然是 POST,但我们在服务器端除了获得 POST 过来的变量,也可以从 URL 上获取变量 (此时 URL 上的变量叫 GET 变量
显然不严谨,但不影响实际交流就好)。
http://domain.com/page?v1=abc&v2=567#hello
,带 #
的,叫 hash,默认情况下,相当于当前页面内的位置定位的跳转,此时它并不会触发一次 Request。
超文本
,意味着从 URL、Request 过来的变量还是文本,比如在 URL 中传递 v2=567
,最终获得 v2
这个变量,并不是整数,而是文本。
文本
之外,以后你肯定会接触到 JSON 这个数据格式,多数人讲到 JSON,默认是指已经被解析后的数据对象,这属于一种误读,JSON 首先是文本
格式。
网页在浏览器上呈现,由于诸多约定俗成,浏览器天然支持的是 HTML+CSS+Javascript。
如果一定要类比:
掌握 HTML+CSS 到可用的状态,应该算是简单的。
掌握 Javascript 作为页面的辅助工具,会难一点,但也还好。
但是要作为专业的前端工程师精通 Javascript,这个难度很高,不在本课程的范畴。
HTML 的语法,除了极个别的元素外,基本都是 <div>hello world</div>
这样头尾闭合作为一个元素,也叫 Dom 元素,或者叫“对象”(这个词能用在很多地方,相当泛指)。
其中 DIV
这个叫 标签名称
(TagName),是 HTML 标签的一种常见类型。如果起步遇到困惑,可以使用搜索引擎搜索 html 图片 标签
、html 换行 标签
、html 段落 标签
类似的关键词去寻找基础知识的线索就可以了。
如下所示,一个 HTML 页面,基本的框架元素是 html -> head + body
,body
标签内的才是内容主体,head
中主要是一些页面额外的声明。
<!DOCTYPE html>
<html>
<head>
<title>我是页面的标题</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="/template/style.scss" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="dom_id" class="class_name">
<p>hello world</p>
</div>
<!--我是注释内容,只在源码中存在,不会出现在最终页面中-->
</body>
</html>
注意: HTML “读” 的时候可以四个字母单独发声,为了说起来顺溜,多数时候 ML
会连读接近 魅欧(轻声)
的音,而不是 ai m ai l
。但怎么读,都无所谓的……
CSS 的基本语法,就像是一个规则名+具体描述(使用 {}
包裹),:
body {color:red; font-size:12px}
.class_name {color: red}
#dom_id {color: red}
#dom_id .class_name span {color:red}
参考上面 HTML 介绍中的代码片段,在 CSS 中的规则,最终影响到 HTML 的呈现(渲染):
#
开头的,对应的是一个 id (id 是 HTML 全局应该唯一的);
.
开头的,对应的是一个 class ;
标签名称
(TagName)。
另外,多个名称以空格连接起来的,是一个(父子)层级的逻辑,比如 #dom_id .class_name span
表示下面这种层级:
<div id="dom_id">
<div class="class_name">
<span>Hello World</span>
</div>
</div>
<!-- 一种是引入某个 css 文件的 URL -->
<link href="/template/style.css" type="text/css" rel="stylesheet"/>
<!-- 一种是直接写 CSS 相关的源码,一般临时性、局部的修正,不作为通用的手段使用 -->
<style type="text/css">
body {font-size:16px; color:red}
</style>
<!-- 一种是直接引入一个 .js 的 Javascript 的文件 -->
<script src="/template/my.js"></script>
<!-- 一种是直接在页面内运行 Javascript 的脚本 -->
<script>
console.log("hello world")
</script>
每种编程语言,都有自己的注释语法,HTML、CSS、Javascript 都是如此。注释让代码在未来的维护中会起到不少作用,但一般来说,也要按需,不过度注释。
课程里的 注释 会很重要,因为在本课程中一些 Demo 的源码里,会有注释的说明作为引导。