作者 | web小二
来源 | web前端开发（web_qdkf）
大学毕业，一张车票，从长沙来到上海，成了众多沪漂中的一员。认识HTML先生和CSS小姐也是在那时候。今天我为了感谢我的这两位朋友，所以特意邀请他们来我【web前端开发】做客，当然，是友情演出。
来，HTML，跟大家先打个招呼。
HTML先生：
Hello World，不好意思，Hello，大家好，我是HTML先生，我的全名叫Hyper Text Markup Language（超文本标记语言 ）。
我出生于1993年6月，是典型的90后，虽然我的名字有点长，不过没有关系，你只要记得我的简称就好了，HTML。但是为了展现你的技术素养，我建议你把我的全名也记住。
HTML发展简史：
超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
HTML 5——2014年10月28日，W3C推荐标准
ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准。
因为不知道，哪天你的女朋友就会来问你，
亲爱的，你在干嘛呢？
你说，我在看HTML。
接着，她又问，HTML是什么？然后，你就只能说，HTML就是HTML，搞不好，她还以为你交了一个外国女朋友呢。
所以全面而深入的了解我，非常有必要。这样你就可以跟她解释，HTML，是一种****超文本标记语言 ，全名叫Hyper Text Markup Language，****（说一串英文，你女朋友马上对你另眼相看）是一种应用在网站开发上的标记语言。
我主要是通过各种标签来描述网页，我是一种标记标签语言，不是编程语言，请大家记住我的这个特点。
最后，关于我的更多秘密，请记得关注，我哥们web小二的公众号【web前端开发】，以后我会常来露面。
谢谢哥们HTML这么捧场，站在HTML旁边这位漂亮的小姐姐就是我的闺蜜，（小二，你是男的还是女的？哈哈，这个重要吗？）CSS小姐。
来，有请，我们漂亮的CSS小姐闪亮登场。
CSS小姐：
Hi，web前端开发的读者朋友们，大家好，我是CSS小姐，我的全名叫Cascading Style ****Sheets（层叠样式表），我出生于1996年12月，也是90后，跟HTML先生是非常要好的朋友，只要有他的地方，基本我都会出现。我是HTML的造型师，因为只从WEB前端开发技术火了以后，HTML先生就成了名人了，只要一提到前端开发，必须会提到HTML。
但是，HTML这个人嘛，不太注重个人形象，每次接受采访都穿得不好看不得体，导致现在都还没有交过女朋友，网上对他吐槽的人也不少，所以我的出现。首先，是为了减轻HTML先生的负担，俗话说，男女搭配干活不累；其次，就是为了提升网页的维护性，减轻程序员们的负担；第三，就是为了让他变得好看一点，帅一点。
CSS发展：
1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为w3c的推荐标准。
1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。
其讨论结果组成了1998年5月出版的CSS规范第二版。
我非常简单，如果你不喜欢造型师这个词，你也可以把我当成化妆师，就是可以让网页变得漂亮的那个小姐姐。
其实，你也可以把我看成是一名魔术师，因为我可以把不好看的文字，不喜欢的颜色，都可以变成好看，变成你喜欢的样子，魔术师，其实，我个人非常喜欢这个称号。
那么，我到底是干啥的呢？
下面我们一起来看一下，小二设计的这个【有课网】截图，这个是一个还没有做标注的页面截图。如果HTML先生把它那部分内容表述出来，会是这么样的呢？
接下来的时间就交给我们的HTML先生。
image
▲有课网设计稿截图
HTML先生：
其实，我也比较简单，没有各位想的那么难，我主要包括：html DOCTYPE声明、网页头部（head）、网页标题（title）、网页编码声明（ charset="utf-8"），网页主体（body）五大部分内容。
以下就是我一个完整的HTML的基本结构了。
以有课网为例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>有课网-职场人的学习游乐园</title>
<meta name="keywords" content="HTML，CSS，Javascript，Jquery，Bootstrap，PHP，Java，Python，MySQL，SQL，Json，微信小程序，工具，图书，写作，摄影" />
<meta name="description" content="有课网，是一个以编程，设计，写作，英语，摄影为主要学习模块的学习游乐园，让每一个来有课网学习的人，都能像小孩子去游乐场那样开心愉快，娱乐与学，与学为乐，通过愉快的心情去学习，同时掌握两种以上技能，让自己不被这个时代淘汰。技多不压身，也是我们提倡的一种理念。" />
</head>
<body>
有课网正文内容从这开始
</body>
</html>
如果你还不知道我的各个部分在网络里是怎么工作运行的话，我会在接下来的时间，跟你慢慢聊，让你全面而深入的了解我，并且喜欢上我。
当我们把上面那段代码直接在记事本里敲完后，保存一个index.html的文件时，我们就可以直接双击这个文件把它打开，然后就可以看到我的真面目了，是不是很期待呀？
image
▲看，这个就是裸着的我，啥都没有
现在，我来解释一下，看看我是怎么在网络里混得风生水起。
<!DOCTYPE html> ：这个是文档类型声明，其对应代码如下：
<!DOCTYPE html>
这行代码就是告诉浏览器我是html，我就是这个类型。
就好像我哥们告诉我他就是叫小二一样，你可以把当成是我在浏览器那里的一个名称，只要告诉浏览器这个名称，浏览器就会识别出来，然后亮路灯，让我通过。
<head>：这个是我（html）的头部，行里人把它叫做网页的头部，其主要作用就是定义网页头部的一些信息，对应代码如下：
<head>
<meta charset="utf-8">
<title>有课网-职场人的学习游乐园</title>
<meta name="keywords" content="HTML，CSS，Javascript，Jquery，Bootstrap，PHP，Java，Python，MySQL，SQL，Json，微信小程序，工具，图书，写作，摄影" />
<meta name="description" content="有课网，是一个以编程，设计，写作，英语，摄影为主要学习模块的学习游乐园，让每一个来有课网学习的人，都能像小孩子去游乐场那样开心愉快，娱乐与学，与学为乐，通过愉快的心情去学习，同时掌握两种以上技能，让自己不被这个时代淘汰。技多不压身，也是我们提倡的一种理念。" />
</head>
例如，<meta>元素，在<head>里出现，但是不会直接显示在正文内容里。主要用于记录一些与网页相关的信息，作者，网页描述，网页关键字等内容。
另外，说一下，<head>是一个有始有终的家伙，所以有<head>开始，就必须有</head>结束。必须成对出现，否则，浏览器哥们会不认识，就直接报错，亮红灯哦。
<title>：这个是网页的标题部分，呈现在浏览器的标题栏那里，相对应的页面代码如下：
<title>有课网-职场人的学习游乐园</title>
这个标题就是为了区别，我与其他网页的不同，例如，这是有课网的标题，叫有课网-职场人的学习游乐园****；像淘宝的标题叫淘宝网-淘我喜欢，是不是很好理解呀。
所以说嘛，我HTML没有你想的那么复杂。
我接着说，那就是**<body> **了。
<body>：网页的主体，相对应的页面代码如下：
<body>
有课网正文内容从这开始
</body>
body，从名称来看，就是知道，这个就是网页的主体内容了，所有，你需要呈现给你的朋友看的那部分，都可以放在body里，你不想让你朋友知道的信息，你可以放在head里，你可以这样来理解，就是还在我脑中里的东西，还没有告诉别人的东西，都放在head里。
最后，再来聊一下网页编码声明（** charset="utf-8"），这个网页编程声明，其实，在计算机的世界里，有很多编码，例如，ANSI编码，扩展ANSI编码，GB2312编码，GBK编码 ， GB18030编码，UNICODE编码，UTF-8，UTF-16，每编码都有自己的应用场景，因为文章篇幅，这里就说一下，UTF-8**这个编码。
UTF-8是世界性通用代码，也能完美的支持中文编码，如果做网站想让国外用户正常的访问，就最好用UTF-8。所以这个编码不用去修改它。
web小二：
今天HTML先生，给我们大家详细的介绍了他自己，不知道各位，记住了没有？
但是，因为时间关系，我们今天的分享，暂时告一段落，下次，我们将隆重介绍CSS小姐，在结束之前，我先把今天的有课网头部标注的截图发给大家，有兴趣的朋友，可以自己先去想想怎么去写。下期，我们将会介绍怎么具体实现，分享关于有课网的诞生。
image
▲有课网标注设计稿
网友评论