网页开发入门｜01 标记的力量
内容丰富的网页是如何被开发出来的呢？一个网页中的内容和信息是怎么组织起来，又该如何显示呢？这一切都是源自标记的力量。
网页，Webpage。
当我们打开浏览器，输入网址就可以浏览来自世界各地的网页，获取资讯、聊天、购物或者娱乐。
这么多形式多样，内容丰富的网页是如何被开发出来的呢？一个网页中的内容和信息是怎么组织起来，又该如何显示呢？
其实，这一切都是源自标记的力量。
标记是什么？
当我们双击打开电脑上的文件时，如果是歌曲电脑就会启动音乐播放器，如果是图片就会启动图片浏览器，如果是文档就会打开文档编辑器。
但电脑是如何知道一个文件是歌曲，还是图片，还是文档的呢？
其实答案很简单，靠的是文件名中的标记。
电脑上的大多数文件的文件名，都有一个类似这样.xxx的后缀，称作扩展名。
电脑通过识别不同的扩展名来区分不同的文件类型，然后选择合适的应用程序打开文件。
如果你看不到扩展名，有可能是被系统隐藏起来了，你可以通过下面的办法显示文件的扩展名。
常见的扩展名有很多，如：.mp3是音乐文件，.jpg和.png是图片，.mov和.avi是视频，.docx是Word文档，.zip和.rar是压缩文档等等。
小实验
既然扩展名决定了电脑打开文件的默认方式，那让我们做一个小实验吧！
请找到一个.docx类型的文档，将扩展名修改为.zip。再次双击打开这个文件后，会发现是解压软件打开了它。
当你把它的扩展名恢复成.docx，再次双击文件，又会恢复成使用Word来打开它了。
使用MacOS的同学也可以使用.pages文件来进行上述实验，效果是类似的。
之所以能用解压软件打开Word文档，是因为Word文档并不是一个简单的文件哦，它本质上其实是一个压缩包，包里面存放的是资源文件和.xml标记文件。
资源文件比较好理解，简单来说就是插入在文档中的文字、图片、视频等多媒体资源。
而这里的.xml标记文件，标记着文档中的各种资源应该显示在哪里，显示成什么样子。
所见即所得 What You See Is What You Get
当我们用Word编辑文档的时候，使用的是一种「所见即所得」的办法。
比如，当我们需要一个又大又圆的「碗」时，可以选中「碗」这个字，加大它的字号，然后给它加一个圈，还可以调整一下字体颜色。
我们对这个字的每一步操作，都可以立刻看到效果。只要我们保存了文档，即使重启程序，看到的字还是上次编辑后的效果。
看到的就是最终得到的，这就是「所见即所得」。
我们对「碗」字的每一步操作，都可以在Word中立刻看到效果，这就是「所见即所得」。
但在简单的「所见即所得」背后，电脑其实默默做了很多的工作：
- 对「碗」字生成一段「标记」，用于标识「碗」应该被显示成「又大又圆」的样子；
- 将生成的标记「又大又圆」存入某个特定的标记文件中；
- 对「碗」字立刻进行一次刷新，在屏幕上删掉它；
- 加载并识别标记文件中的「又大又圆」和其他的标记信息，决定「碗」字的最终样子；
- 将「又大又圆」的「碗」字重新显示在屏幕上。
- 这个过程的第4、5步，称作渲染Render。
计算机语言中常见的标记方式
一起来想想看，当我们需要一个「又大又圆」的「碗」时，需要哪些要素。
- 第一个当然是要被标记的内容，也就是「碗」这个字。
- 然后是关于字体信息的标记，也就是「又大又圆」。
排列组合一下，标记的方法无外乎以下四种方式：
虽然在不同计算机语言中使用的标记符号可能会有差异，但常见的标记方式就是这四种方式：
1. 后缀式
碗.big //一个大碗
碗.big.circle //一个又大又圆的碗
就像文件名中的扩展名一样，给需要被标记的内容加上后缀来标识信息。
当有多个属性时，就一直往后写下去。
2. 函数式
big(碗) //一个大碗
circle(big(碗)) //一个又大又圆的碗
长得比较像数学中的函数f(x)，所以被称作函数式。f是标记信息，x是被标记的内容。
当有多个属性时，需要使用括号进行嵌套使用。
3. 标签式
<big>碗</big> //一个大碗
<circle><big>碗</big></circle> //一个又大又圆的碗
用一对标签将需要被标记的内容整体包围起来。
通常这对标签的开始和结束的写法会有所区别，在上方的示例代码中，结束标签</big>比开始标签<big>多了一个/。
需要注意有多个标签时的书写顺序：要保证每一对标签的里面，没有未结束（未成对）的标签。
<circle><big>碗</circle></big> //这是错误的写法，在circle标签的内部，big标签还没有结束（成对）
4. 对象式
{content: 碗, size: big} //一个大碗
{content: 碗, size: big, shape: circle} //一个又大又圆的碗
通过列举被标记对象的每一个属性，来描述标记信息。在这种方式下，内容和标记信息通常是平级的。
课后练习：在不同的标记方式下，如何再加上颜色信息？
W3C标准
既然可用标记方式有这么多种，网页中用的是哪种呢？又是由谁决定的呢？
1990年，欧洲粒子物理实验室(CERN)的蒂姆·伯纳斯一李(Tim Berners-Lee)和他的同事们，为了更好的在全球高能物理研究领域交流科学论文和数据，提出了一套关于如何获取和呈现网络资源的标准，并命名为万维网（World Wide Web），简称为www或者web。
在web出现之前，网络几乎只能用来收发信息，而且只有计算机专家才能通过复杂的命令和程序使用网络。
蒂姆在web中，天才般的构想出了「网站」这一概念，网络内容创造者（Up主）可以把内容做成「网页」，并发布在「网站」上。任何人只要知道对应的「网址」，就能便捷的访问到「网站」中的「网页」。
所以web一经推出，便迅速风靡了全球。
1994年，为了进一步发展web技术，蒂姆在麻省理工学院（MIT）计算机科学实验室成立了万维网联盟（World Wide Web Consortium 简称W3C），以吸纳更多的技术公司、研究机构和学术组织，参与到web技术标准的建立和推广中。
W3C成立至今，陆续发布了二百余项web技术标准，其中的超文本标记语言HTML(Hyper Text Markup Language)成为了如今最流行的网页标准。
其实，我们在小实验中看到的.xml格式的文件标准，也是由W3C的确立的。
特别值得一提的是，中国的北京航天航空大学（BUAA）也是W3C的4个全球总部之一，另外三个是美国麻省理工大学（MIT）、欧洲数学与信息学研究联盟（ERCIM）、日本庆应大学（Keio University）。
开发环境准备
好啦，我们了解了许多关于标记的知识，接下来让我们开始写代码吧！
不过在此之前，还有一些准备工作要做。
1. 创建工作空间Workspace
为了避免不小心把代码弄丢，或者写错代码弄坏无辜的文件，你需要在电脑上找到一个相对独立的位置，新建一个文件夹，做为存放课程代码和资源文件的地方。
我们之后会称这个文件夹为「工作空间」或Workspace。
我会把这文件夹命名为intro-to-webpage，你也可以起一个其他你能记住的名字，方便日后查找。
但请注意，命名时不要使用中文、空格或其他特殊字符，如果是Windows系统不要使用大写字母，否则可能会带来一些额外的问题，这些问题不是现阶段应该重点关注的。
2. 编辑器Editor
工欲善其事，必先利其器。
虽然你可以选择直接使用记事本作为编辑器来写代码，但一个好的代码编辑器，可以让我们事半功倍。
在这里，我推荐使用由微软推出的Visual Studio Code（简称为VSCode）做为课程所用的编辑器。VSCode几乎对所有的语言开发者都很友好，也可以很容易的加载其他编辑器的快捷键方案，生手熟手都能很快上手。
VSCode还有很多有趣的插件，让写代码的过程充满乐趣。
3. 浏览器Browser
与Word类似，我们需要一个对HTML文件进行渲染的程序，这种程序就是我们通常说的「浏览器」。
尽管W3C提出了HTML的标准，但并非所有浏览器都完全采纳了这套标准，这导致同样的代码在不同的浏览器里显示的效果会有不同，甚至可能无法正常工作。造成这个问题既有历史原因也有商业原因，等我们有机会再单独探讨。
为了简化学习的过程，保证我们课程上的代码可以顺利工作，请大家在本课程中使用最新版本的Chrome或Edge浏览器。
Hello, World! 你好，世界!
Hello,World! 你好，世界！
终于到了这行著名的代码出场的时间了！
Hello,World!起源自一本C语言书《The C Programming Language》的第一套示例代码，当你可以让电脑正确的显示出Hello,World!，就说明基本准备一切OK，代码可以正常工作了。
1. 在编辑器中编写HTML代码
让我们启动VSCode，点击欢迎页面上的打开文件夹Open folder…，然后选择并打开在我们在准备阶段创建的Workspace文件夹，在我这里就是 intro-to-webpage
点击左上角的New file按钮新建一个文件，并命名为hello.html。
文件被创建后应该会在右侧区域自动打开，你可以在编辑器的右侧看到一个在闪动着的光标，这里便是我们接下来要写代码的地方。
好了让我们在这里写下第一行代码:
Hello, world!
最后，使用ctrl+s(Win)或者command+s(Mac)快捷键，或者点击左上角file菜单中的save，进行保存。
也许你用的VSCode版本与我不一样，安装了主题包或汉化包，或者你干脆选用了另外一个编辑器，所以看到的界面会有些不同。但没关系，如何使用编辑器不是本课程的重点，只要你明白我们上述操作，实际上就是在workspace下创建了一个名为hello.html的文件，并向文件里写入了一些内容，你大可以用你熟悉的办法来实现上述操作。在之后的章节可能也会遇到类似的问题，不再赘述。
2. 用浏览器打开HTML文件
启动Chrome或Edge浏览器，使用ctrl+o或者command+o快捷键，或者点击左上角file菜单中的open file…，然后找到workspace，选择并打开刚刚创建的hello.html
如果Chrome或Edge浏览器是你的默认浏览器，你也可以在资源管理器或访达中找到这个文件，双击打开，或将文件图标拖拽进到浏览器中。
3. 用标记简单装饰一下
HTML采用了我们上边提到的标签式的标记方法来标记网页里的内容。
让我们在刚刚的代码后面在加上两个Hello, world! ，然后分别使用b标签对和i标签对把它们分别包围起来。
最终代码应该类似于这样：
Hello, world! <b>Hello, world!</b> <i>Hello, world!</i>
保存，然后回到浏览器里刷新一下，看看效果如何。
It works!! 🎉🎉🎉
我将本课程所有的代码托管在gitee上了，你可以点击这个链接，或到gitee.com上搜索弦五 网页开发入门，查看和获取本课程的全部代码。