没错，我又遇到了垂直居中的问题。我的最终目的是将含有文本信息的一个 div 垂直 & 水平居中，看起来似乎很难在 CSS 中实现，但是还是需要这样做。

于是我打开了 Google，搜索「CSS 垂直居中」，得到如下结果：

然而经过考察，几乎（因为我没有全部试过）所有的办法都惨败。所以我打算自己摸索办法。

从水平居中开始

一般来讲，写 CSS 的都知道如何水平居中图片：

.image-center {
    display: block;
    margin: auto;
}

这是最基础的，将它变为一个块元素，然后自动计算 margin。那么对于我的一整个文本 div 是否起作用呢？先看看这个 div 到底是什么结构：

<div class="mdui-container">
    <div class="mdui-typo content">
        <div class="inner">
            <h1>Hello World!</h1>
            <p>Interesting sample.</p>
            <p>Second paragraph.</p>
        </div>
    </div>
</div>

那么我们首先的样子是这样的：

这个时候，我们用上面的方法是不可以做到水平居中的，就算做到了，也并不是很好，因为文本本身是 inline 元素，所以我们直接想到了 text-align: center;，问题解决。然而事情并没有我们想象的那么简单，详见下文。

垂直居中

垂直居中，牺牲低版本兼容性，就能够很容易地达到想要的效果。我们这次使用的是 CSS 中比较好用的一个，flex 布局。

.content {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

这样就直接做到了垂直居中，然而我们的结构里，.content 的子元素只有一个 div，就是 .inner，所以我们仅仅是垂直居中了这一个 div，而这个 div 包含文本内容，所以我们的文本内容也被垂直居中了。

那么这时，垂直居中成功了，文本内容的水平居中还有效吗？我们给定

.inner {
    text-align: center;
}

发现现在文本并不会自动到中间去了，而是以「居中」的排版形式呈现在原地：

这怎么办呢？此时这个 div 属于 flex 的 align-item，我们可以近似地看作是一个整体，那也就是块级元素。于是，

.inner {
    text-align: center;
    margin: auto;
}

如果担心的话，可以 display: block;。这样，用到了上文中提到的水平居中块级元素的办法，我们同时垂直居中、水平居中了一个元素，此时，这个元素就位于页面的正中间了。并且，会根据 .content 的 height 和 width 自行变换位置，十分方便。

完整代码：

.content {
    height: <依据需求设定或者不定>;
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.inner {
    text-align: center;
    display: block;
    margin: auto;
}

以下简称 TypeScript 为 TS。

许久之前，我就听说过 TS，然而我却认为它是一门新的语言，只是与 JS 有相近的语法（现在想起来好像不是很合理）。由于手头项目一般都很紧，所以就没有想去入坑。然而就在最近，我才了解到 TS 原来就是 JS，它通过编译器将它的代码转化为 JS。不过，添加强类型语法以外，也添加非常多的新功能。

强类型

用了一段时间 TS 后，给我整个人的感觉只有两个字：

的确非常严格，因为

事实上并没有这几行文字说的那么简单，对于一般的第三方库，需要一种叫做声明文件的东西，它以 .d.ts 结尾，所以仍然是 TS。它让 TS 认识第三方库以确定它的「类型」。对于 JQuery 这种大型的库来讲当然很容易就能找到，但是对于 MDUI 这种，原作者对 TS 并没有了解，该怎么办？

下面是 JQuery 声明文件的内容：

最恐怖的是：

这就使得开发者无法自己编写声明文件。那么只能用下面这种很迷的方法，虽然很万能，但是并不是规范的，只是为了绕过编译器而已：

declare var JQuery: any;

这样，在编译器允许 any 类型的情况下，就可以直接通过。

综上，TS 的确是非常的强类型，干啥都要求要有「Type」，这大概也是它的特性吧。

简洁严谨

TS 的严谨是有好处的，若是如 JS 那样不严谨，写啥都一样，这样就会导致开发者不自觉地同一种功能写不一样的代码，看起来让人脑阔疼。

在 TS 中严谨的总是类型。如果我们要在 ES6 中编写出一个类，大概下面这样就可以摸完了

class Foo {
    constructor() {
        this.bar = "foobar";
    }
    
    greeting() {
        console.log("Hello, " + this.bar);
    }
}

而在 TS 中

class Foo {
    public bar: string;
    constructor() {
        this.bar = "foobar";
    }

    public greeting(): void {
        console.log("Hello, " + this.bar);
    }
}

这样，看起来严谨了不少，并且可读性也丝毫没有降低，并且还可以享受规定参数类型时候的快感乐趣。

强大的编译器

在 TS 中可以随便使用 ES6 语法，以至于很多从前梦寐以求的语法在这里都能得到实现。只需要凭着自己的感觉，怎么简单怎么写，编译器会帮助你处理掉所有的事情——只要不犯错。

使用 TS 的过程中根本无需考虑语法的兼容性，因为编译器可以最远选择到 ES3。这样 ES6 编译为 ES3 也是秒秒钟的事情了。从前用 JS 写 class 的时候提心吊胆的感觉没有了。

使用 ES6 来写 TS 的感觉真的非常好，你可以想象一下你的类被编译以后成了啥样

class Foo {
    static var = "foobar";
    constructor() { }
    public static bar(): void {
        console.log(this.var);
    }
}

Foo.bar();

编译成 ES5 就成了 Function 对象。

var Foo = (function () {
    Foo.var = "foobar";
    function Foo () { };
    Foo.bar = function () {
        console.log(Foo.var);
    }
    return Foo;
}());

似乎完全看不懂了呢。就算看懂了也很难理解为什么要这样写，因为我既然用 Foo.bar = function() 定义成员函数，那还需要类干啥？

所以...千万不要看编译以后的代码。

总结

总的来说，TS 还是非常棒的，至少它的强类型特性非常好用。一般的成员属性 public、protected、private 等都能够在这里使用了。

所有的代码都只需要一句 tsc 就可以编译成 JS 投入到使用，并且不会出兼容性问题。如果我想的话，TS 用来写大项目应该会很吃香。

的确，博客是有一段时间很奇怪，但是估计也没有多少人会在意到吧。

我刚接触 Archeb 大佬的这个主题的时候，我就已经爱上它了！（这句话怎么...）所以，我很想用它。刚开始的一段时间挺正常，我也蛮开心，就用自己的奇妙代码强行加了一些 MD 元素（虽说 Archeb 大佬说这个主题并不是围绕 MD 设计的）。后来就开始奇妙了！只能显示前几篇文章，后面的文章全部无法显示，且 console 里报 pjax 加载的 404 错误。

我很纳闷，想象最近也没怎么动网站啊，就是改了个代码而已。于是果断删代码重装，经过三四次的删库重装，仍然没有解决这个问题。最后我鼓起勇气去看了一下 m.js，发现了这几行：

if(categoryInfo && backArchive==true){
    nextPageURL=categoryInfo.url + (categoryInfo.pageNow+1) + "/";
    categoryInfo.pageNow++;
    targetElement=".category-container .article-list";
}else if(pageInfo.permaLink){
    nextPageURL=pageInfo.permaLink + (parseInt(pageInfo.currentPage) + 1) + "/";
}else if(pageInfo.type == "index" || pageInfo.type == "index_page" ){
    nextPageURL="/page/" + (parseInt(pageInfo.currentPage) + 1) + "/";
}else if(pageInfo.type=="category"){
    nextPageURL=window.location + (parseInt(pageInfo.currentPage) + 1) + "/";
}

我想就是这个了，于是看了一下控制台的报错，果然有 /page/！（小学生の程序揣摩逻辑）此时我灵机一动，发现自己好像用的是 website/index.php/archives/1 这样的格式，果断 /page/ 改成 /archives/ 后来我就被自己给蠢哭了。

我很好奇这个 page 哪里来的，于是我试着访问 website/page/2 却发现 404，我又想到应该是没开伪静态的原因，所以加了一个 index.php 进去。我...这不就是我丢掉的文章吗？原来 Typecho 里的 page 是用来分页的啊（卧槽我什么时候这么...），原来这个 pjax 的实现原理就是直接把所有页里的东西在滚动的时候顺带加载了啊！

于是我果断开了伪静态，一切 OK。

魔幻现实主义。

在上一期中，我们提到了对「标签」和「元素」的定义，以及梳理了它们之间的关系。首先我们是有测试题安排的，请看。

一般意义上，HTML 属于
A. 编程语言
B. 标记语言
C. 记事语言
D. 人类语言

下列标签中，最可能没有任何意义的是
A. <widkhweidhiwfh>
B. <article>
C. <section>
D. <dialog>

XML 与 HTML 的关系是
A. $ XML \in HTML $
B. $ HTML \in XML $
C. $ XML \rightarrow HTML $
D. $ HTML \rightarrow XML $

在数据结构 <a><b><c></c></b></a> 中，下列说法正确的是
A. 这三个标签都不是元素。
B. <a> 是 </a> 的直系。
C. <a> 是 <c> 的直系。
D. <a> 是数据结构的根元素。

在第二期中，我们将介绍一些最基础的元素和它们的使用方式。首先，我们来了解一下一个最基本的 HTML 文件结构。

文件结构

HTML 文件的扩展名为 .html 或 .htm，现在常用 .html 且也较为正式。我们直接用纯文本文件改扩展名得到 HTML 文件即可。一个 HTML 文件的基本结构大概是：

<!DOCTYPE HTML>
<html>
    <header>
        ...
    </header>
    <body>
        ...
    </body>
    <footer>
        ...
    </footer>
</html>

我知道，你可能是懵逼的。因为这些元素你先前都没有见到过，我们一条一条来解释：

<!DOCTYPE html>

这个第一行就十分复杂。它不是元素。它声明了当前的文件类型，从而让浏览器决定该如何读取。幸运的是，在 HTML5 标准中，<!DOCTYPE> 的用法有且只有一种，即<!DOCTYPE>。其余在 HTML4、XHTML1 等旧式格式中，这个的用法很繁琐。

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

以上 DOCTYPE 声明来自 http://www.w3school.com.cn/tags/tag_doctype.asp

这些在过去简直就是噩梦，但是在 HTML 5 中，你甚至可以不需要写<!DOCTYPE HTML>，浏览器就能读懂你的代码；但是 HTML4 却不一样，如果你没有声明，那么你的文档浏览器一般是无法读懂的。

需要注意的是，<!DOCTYPE HTML> 只有写在文档的第一行才有用。如果不写在第一行，那么跟没写差不多。

第二行是 <html>，定义 HTML 文件的主体。在 <html> 里可以写文档的内容。

接下来我们就不用行数来分析了，而是用「第几个标签」来分析。下一个标签是 <header>，它的中文名称叫做「页眉」，用来编写一些对当前文件（网站）的介绍，以及对一些文件的引用（CSS、JS 等）。需要注意的是，不一定所有的 JS 文件引用都会写在页眉。

下个标签是 <body>，它的中文名称叫作「页体」，指的是网站的主体部分。基本上整个网站都是在 <body> 里。最后的 <footer> 用来编写页脚的内容，但常常它其实也可以属于 <body>。如果你喜欢，可以单独写一个 <footer> 来容纳你的页脚。

也就是说，整个 HTML 文件由「文件声明」、「内容声明」、「页眉」、「页体」、「页脚」构成。截至目前，我们认识了 4 个 HTML 元素：

<html> <header> <body> <footer>

需要注意的是，这些元素都不是必须的。如果你删去了这些元素，甚至整个文档只有纯文字，你的 HTML 文件照常能被识别。就算你不声明 <body>，你照样可以为自己的元素规定样式等，浏览器也照样能够识别。但是这样做的劣势是文件版本、用法模糊不清。没有人知道你这到底是 HTML5 还是 HTML4，还是什么稀奇古怪的用法。另外，元素的名称不一定需要小写，可以全部大写，包括它们的属性。但是这样，你的代码将会变得十分杂乱无章。

W3C 建议编写者能够按照标准格式和结构来编写 HTML，以便 HTML5 标准的普及。

我们不妨回顾一下我们上一期学到的内容。这些元素之间的关系照样可以用上一期的内容来表述。比如「<html> 是整个文件的根元素」、「<header>、<body>、<footer> 分别会充当父元素的角色」等。除此之外，我们还可以说「<header>、<body>、<footer> 是相互并列的。

基本元素

我们首先会想到，一个文档会有「标题」、「正文」等，那么在 HTML 中该如何规定呢？

HTML 赋予了 6 个基本的标题样式和 1 个正文文本元素。它们是

<h1> <h2> <h3> <h4> <h5> <h6> <p>

其中，<h1> ~ <h6> 分别是 1~6 级标题，1 级最大，6 级最小。开发者之间一般互相约定，1~3 级标题为基本样式标题，也就是说它们具有「最基本的标题功能」，即将大的内容划分开来。而 4~5 级标题则总是出现在小结里。6 级标题一般不会被用到，因为它在有的时候连正文的优先级都不达。

<p> 是正文元素，英文名为 Paragraph，即段落。<p> 一般被当作正常的正文元素来使用，用来划定一段的内容。我们来看如上元素的示例。

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

正文：我们都知道女装是一种神圣的存在，它打破了人类性别的限制，让人类能够释放自己的本性，投身于自己喜爱的服装里。女装无罪，有罪的是心灵！所以，救救女装吧！在女装事业日渐衰退的今天，让我们拿起自己的女装，穿上，大喊，女装万岁！！！

示例中的任何文字大小因网站而异

那么，我们现在知道了如何为一个文章确定标题、正文，接下来，我们看看到底该如何写吧！

<!DOCTYPE HTML>
<html>
    <body>
        <h1>Hello World!</h1>
        <p>这是我的第一篇 HTML 文档，恭喜！</p>
    </body>
</html>

显然，这是一个只有页体的 HTML。至于页眉和页脚到哪里去了，这个只会在我们涉及到更加复杂的工作时用到。

复制以上代码到你的 HTML 文件里，双击用浏览器打开（HTML 文件的默认打开方式就是浏览器），你将会看到你的成果。

超链接

在网络时代，不管多么遥远的距离，都可以被一个「超链接」连接起来，轻快而又便捷。HTML 中划定超链接的元素是 <a>，这将是我们接触到的第一个具有固有属性的元素。

如其它元素一样，<a> 照样是可以被嵌套的。它通常被嵌套在 <p> 内，形成类似于 <p><a></a></p> 这样的结构。首先我们知道，如果我们写入

<p>这里是正文，哦耶！</p>

那么显示出来的也将会是

这里是正文，哦耶！

那么 <a> 呢？我们不妨来看看

<a>这里是链接，哦吼！</a>

那么显示出来的结果是

你会发现文字的样式改变了，变得具有下划线了。然而你点击它，却不会有任何反应。这是因为，你没有规定这个元素的指向属性。指向属性的全称是 Hypertext Reference（超文本链接），简称 href。如果我们要指定一个 <a> 的指向属性，我们可以按照先前介绍的方式，我们可以推出 <a> 的基本使用方式：

<a href="链接地址">链接文本</a>

比如，我们输入

<a href="baidu.com">百度</a>

那么会显示

但是不久你会发现，点击这个链接，跳转到的并不是百度（废话这么慢肯定是你站）。为什么呢？因为我们没有规定协议名称，因此 href 属性自动指向了相对路径，即当前目录下的一个名叫 baidu.com 的文件夹。

可能这个概念不是很好理解。我们举个例子。比如，你当前正在 example.com/example/1.html 里，那么你在 href 里输入了 baidu.com，这样跳转到的将会是 example.com/example/baidu.com，而并不是你想要的 baidu.com。

初学者非常容易犯这个错误，因此我们要小心。那么究竟如何跳转到 baidu.com 呢？其实只需要我们规定一下协议名称即可。协议目前有很多种，主流的，用来传递文本信息的有 http 和 https，其中 https 是 http 的加密安全版本。如果我们想要跳转到百度，我们必须这样写：

<a href="https://baidu.com">百度</a>

那么出现的将会是

点击一下，你看是不是到百度了？要问我为什么不带 www，需要知道的是，www 在很多时候并不是必须的，这取决于域名的「解析」部分。如果不带 www，那么就是最纯粹的根域名。如果带上了 www 而解析的部分没有设置对 www 的解析，那么就会导致访问出错。这不是 www 的「劣势」，而是应该了解的事实。

上面，我们所用到的协议是 https，其实如果直接用 http 也可以，只不过现在很少使用，因为它不安全，就算用 http，在大多数情况下也会被自动跳转到 https，首先是浏览器会优先选择 https，其次某些大型网站会刻意设置永久（301）重定向。

因为 http/https 都十分普遍，所以每一次我们写协议名称的时候不必要刻意去带着它们，而可以简写，即 //baidu.com。比如

<a href="//baidu.com">百度</a>

这样照样可以指向百度这个网站。但是这个对于是 http 还是 https 的规定不是确定的，但是主流的浏览器都会选择 https。

绝对路径和相对路径

在前文中我们提到了一个名词——「相对路径」。众所周知，「路径」是我们日常在计算机中访问文件所要接触到的一种对文件位置的描述。那么，在 href 属性中，也需要用到路径来指定目标的网页或者文件。

其实在一般的计算机上，也有绝对路径和相对路径的区别，只不过一般区分在命令行里而已。

首先我们了解一下绝对路径。绝对路径中的「绝对」，实际上是「完整」的意思。也就是说，它指定的一个文件的位置，是绝对的。比如 https://baidu.com 就是一个绝对路径，打开这个链接后，不会跑到任何其它的位置，唯独 baidu.com。

再拿我们日常使用的 Windows 系统来举例，C:\Windows\System32\cmd.exe 也是一个绝对路径，它指定了一个独有的 cmd.exe，且不可能再指向其它的文件。

绝对路径就是这么简单，一旦你规定了一个「完整」的路径地址，那么我们就说它是「绝对」的。

相对路径相比绝对路径来说，使用起来更加方便，但是不定性却更大。在开发中会产生困难。以下是相对路径的基本用法

以上信息可能需要花一定的时间来理解，但是理解过后，相对路径基本上就这些了。

比如我们当前在 C:\Windows\，那么此时的相对路径 ./System32/ 所代表的绝对路径就是 C:\Windows\System32。

再举个例子，如果我们当前在 C:\Windows\System32\drivers\etc，那么 ../../../../ 所代表的绝对路径就是原路径的上上上上级目录，我们可以逐步推演。

第一个 ../ 代表的是 ...\etc（三个点是省略号）的上级目录，即 ...\drivers。第二个 ../ 代表的是 ...\drivers 的上级目录，即 ...\System32，以此类推。从 etc 一直返回 4 个上级，第一个上级返回到 drivers，第二个上级返回到 System32，第三个上级返回到 Windows，第四个上级返回到 C:\。

也就是说，此时 ../../../../ 相当于 /。如果是 ../../../，那么就代表绝对路径 C:\Windows。

我们可以总结一个规律。我们依次将路径标号：

我们假定一个概念，叫作「总目录数值」

$$ n_{总目录}=n_{目录名总数}-1 $$

在上面，我们的目录名总数为 5，包含根目录。那么，总目录数值就是 5-1=4，每一个 ../ 减去一个总目录数值，比如 ../../../，那么就代表减去 3 个总目录数值，4-3=1，那么我们得到的目录就是序号为 1 的目录，即 Windows，拼合之前的目录，得到的绝对路径就是 C:\Windows。这是我自创的一个办法，实际使用中并不会用到，因为它太复杂了。

你只需要知道 ../ 代表的上级目录，../../ 代表的上上级目录，以此类推，逐步推演就可以了。

那么这些路径本质上还是确定的啊？「相对」在哪里呢？

假定你在 C:\Windows\ 下有一个 1.html 的文件，在这个文件里有如下代码

<a href="../">上级目录</a>

那么你点击以后，跳转到的是哪里？没错，跳转到的是 C:\，因为是上级目录。而如果把这个 1.html 里，代码原封不动，只动文件位置，把它转移到 C:\Windows\System32 下，那么此时点击上级目录，跳转到的又是哪里？没错，跳转到的是 C:\Windows\，这也是上级目录。

也就是说，相对路径基本上是绝对的，但是仅限于目录、文件都不发生改变的情况下。一旦改变，那么相同的相对路径就有可能指向不同的绝对路径。

我们可以给出定义，任何相对路径都可以转换为绝对路径，但是仅限于目录、文件都不发生改变的情况下。

你知道吗？

1. <header> 元素在早期被写成 <div class="head">，<div> 是我们稍后要了解的一个元素，它没有实际的意义，但是却十分重要而必不可少。class 也是我们日后要了解到的一个「普遍属性」，意即「任何元素都可以拥有的属性」。
2. 已经在根目录（没有上级目录了，最开始的那个目录，比如 C:\）了，那么还是跳转到 ../ 会发生什么？不会发生什么。你此时仍然在根目录。

课后习题

访问 google.com，以下写法正确的是
A. <a href="google.com">GOOGLE</a>
B. <a href="链接地址是 https://google.com">链接文本是 GOOGLE</a>
C. <A HREF="//GOOGLE.COM">GOOGLE</A>
D. <a href=//google.com>GOOGLE</a>

假设当前在 E:\wamp\Apache2\conf\extra\，那么 ../../../../../../../../../ 代表的是
A. /
B. E:\wamp\
C. ⑨ 个 ../
D. 我的电脑上没有这个目录，所以我不知道。

假设在 E:\wamp\ 下有一个 1.html，下列说法正确的是
A. 它的上级目录是 E:\wamp
B. 它的父级目录是 E:\wamp
C. 此时 ./ 代表 E:\wamp\1.html
D. 它的根目录是 E:\