一些基本概念

写在前面

我们可以将 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 + 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

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 的源码里，会有注释的说明作为引导。