一些基本概念

写在前面

我们可以将 Web 简单理解为网站、网页,要触碰它相关的基础技术,需要从整体上,对一些基本技术概念做简单的梳理,本文就是如此目的。

本文内出现的(技术)关键词,不求甚解,当是见个面,可以眼熟一些;如果遇到自己特别想要知道的,使用搜索引擎去了解就可以了。
一般也无需在某个“词”上太过于纠结,比如 HTML 也称 超文本标记语言,没有必要去硬记,大概知道即可。


网站与网址

网站

  • 网站是由网页组成,网页一般都会对应一个网址
  • 网页一般可分为静态(纯 HTML)、动态(访问网页时由代码自动生成 HTML)两种类型

URL (网址)

你或许看到过 URL、URI、URN 这些不同名词,不用关心区别,把 URL 当 网址 的意思就可以了。

如何理解一个 URL 的含义?
比如这个网址: http://yourdomain.com/category/index.html

  • 其中 http 表示协议名称,其它类似的你或许看到过 https://ftp://
  • yourdomain.com 是域名,一般本地 (自己电脑) 开发时能看到 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 转义:

  • URL 是全英文的,如果在浏览器上看到有中文字符的,说明是浏览器特殊处理了
  • 比如 /中文test 这样的眼睛看到的 URL,实际上应该 (转义) 为 /%E4%B8%AD%E6%96%87test
  • 如果遇到非 URL 字符的,也需要进行转义,比如一个空格会转义为 %20

GET & POST

常见的网页请求方式 (Method) 是 GET 以及 POST (注意,全大写)。
本质上,GET 与 POST 并无不同;GET 是默认的方式,主要用于浏览,一般在提交数据到服务器端的时才使用 POST 方式。
GET 与 POST 都是传递数据的方式,GET 主要体现为 URL 上,末尾加上了 ? 作为变量传递,多个变量之间,用 & 拼接,一般情况,我们也会叫这些变量为 URL 变量,有时也叫 GET 变量:

  • URL 中一个变量 http://domain.com/page?v1=abc
  • URL 中多个变量 http://domain.com/page?v1=abc&v2=567

除了 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 变量 显然不严谨,但不影响实际交流就好)。

注意:

  • 由于前端技术的发展(主要是 Javascript),还有一种常见的 URL 组织方式,比如 http://domain.com/page?v1=abc&v2=567#hello,带 # 的,叫 hash,默认情况下,相当于当前页面内的位置定位的跳转,此时它并不会触发一次 Request。
  • HTML 是超文本,意味着从 URL、Request 过来的变量还是文本,比如在 URL 中传递 v2=567,最终获得 v2 这个变量,并不是整数,而是文本
  • 题外话,除了 HTML 是文本之外,以后你肯定会接触到 JSON 这个数据格式,多数人讲到 JSON,默认是指已经被解析后的数据对象,这属于一种误读,JSON 首先是文本格式。

基本技术

网页在浏览器上呈现,由于诸多约定俗成,浏览器天然支持的是 HTML+CSS+Javascript。
如果一定要类比:

  • HTML 相当于毛坯房;
  • CSS 相当于各种装潢;
  • Javascript 相当于可以控制各种设备的脚本中心 (类似 Siri、捷径的角色),但跟现实世界不一样的是,Javascript 可以改变所有,包括 HTML 结构以及 CSS 样式。

掌握 HTML+CSS 到可用的状态,应该算是简单的。
掌握 Javascript 作为页面的辅助工具,会难一点,但也还好。
但是要作为专业的前端工程师精通 Javascript,这个难度很高,不在本课程的范畴。

HTML

HTML 的语法,除了极个别的元素外,基本都是 <div>hello world</div> 这样头尾闭合作为一个元素,也叫 Dom 元素,或者叫“对象”(这个词能用在很多地方,相当泛指)。
其中 DIV 这个叫 标签名称 (TagName),是 HTML 标签的一种常见类型。如果起步遇到困惑,可以使用搜索引擎搜索 html 图片 标签html 换行 标签html 段落 标签 类似的关键词去寻找基础知识的线索就可以了。

如下所示,一个 HTML 页面,基本的框架元素是 html -> head + bodybody 标签内的才是内容主体,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

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 ;
  • 纯字母开头的,比如 body、div、span、p 等,表示标签名称 (TagName)。

另外,多个名称以空格连接起来的,是一个(父子)层级的逻辑,比如 #dom_id .class_name span 表示下面这种层级:

<div id="dom_id">
    <div class="class_name">
        <span>Hello World</span>
    </div>
</div>

如何在 HTML 中引入 CSS?

<!-- 一种是引入某个 css 文件的 URL -->
<link href="/template/style.css" type="text/css" rel="stylesheet"/>

<!-- 一种是直接写 CSS 相关的源码,一般临时性、局部的修正,不作为通用的手段使用 -->
<style type="text/css">
    body {font-size:16px; color:red}
</style>

Javascript

如何在 HTML 中引入 Javascript?

<!-- 一种是直接引入一个 .js 的 Javascript 的文件 -->
<script src="/template/my.js"></script>

<!-- 一种是直接在页面内运行 Javascript 的脚本 -->
<script>
    console.log("hello world")
</script>

注释

每种编程语言,都有自己的注释语法,HTML、CSS、Javascript 都是如此。注释让代码在未来的维护中会起到不少作用,但一般来说,也要按需,不过度注释。
课程里的 注释 会很重要,因为在本课程中一些 Demo 的源码里,会有注释的说明作为引导。