开篇寄语：
我们之所以迷茫是因为：明知是脑子饿极了，却只会拼命喂肚子。
人表达的永远不是他所说的内容，而是渴望被理解的心情。
之前做了一期关于Oracle的系列，很多同学给悠悠反馈说很希望看到这样有干货又连贯的内容。所以，今天开始做一期关于前端的系列。没学过的有服气了，如果已经学过了，可以夯实一下自己的基础。
不多说，直接开始吧。
一、HTTP和WEB工作原理
超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。
WEB本意是蜘蛛网和网的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本（hypertext）、超媒体（hypermedia）、超文本传输协议（HTTP）等。
当你想进入一个网页，或者其他网络资源的时候，通常你要首先在你的浏览器上键入你想访问网页的统一资源定位符（Uniform Resource Locator)，或者通过超链接方式链接到那个网页或网络资源。这之后的工作首先是URL的服务器名部分，被名为域名系统的分布于全球的因特网数据库解析，并根据解析结果决定进入哪一个IP地址。
接下来的步骤是给所要访问的网页，向在那个IP地址工作的服务器发送一个HTTP请求。在通常情况下，HTML文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户。
网络浏览器接下来的工作是把HTML、CSS和其他接受到的文件所描述的内容，加上图像、链接和其他必须的资源，显示给用户。这些就构成了你所看到的“网页”。
大多数的网页自身包含有超链接指向其他相关网页，可能还有下载、源文献、定义和其他网络资源。像这样通过超链接，把有用的相关资源组织在一起的集合，就形成了一个所谓的信息的“网”。这个网在因特网上被方便使用，就构成了最早在1990年代初蒂姆·伯纳斯-李所说的万维网。
二、什么是HTML
HTML就是万维网中的超文本，==HTML也叫做超文本标记语言。==”超文本”就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。在Web服务中，信息一般是使用HTML格式以超文本和超媒体方式传送的，所使用Internet协议是HTTP协议。
HTML 是用来描述网页的一种语言。
-
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
-
HTML 是一种标记语言 (markup language)
-
标记语言是一套标记标签 (markup tag)
-
HTML 使用标记标签来描述网页
它是一种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。
HTML网页文件可以使用记事本、写字板、HBuilder、Sublime等编辑工具来编写，以.htm或.html为文件后缀名保存。将HTML网页文件用浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
三、HTML基础语法
<!DOCTYPE html>
格式一：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 格式二：<!DOCTYPE html> 推荐的方式 Document Type HyperText Mark-up Language，文档中超文本标记语言的类型，可告知浏览器怎么解析该文档。
由于使用的场景或者版本的更替间，HTML使用的标准不同，所以需要浏览器按照不同的标准来解析HTML文本内容，这就需要告知浏览器我当前的HTML页面是按照那种方式进行编写的。没有该声明，将是你HTML噩梦的开始。这行代码必须写且务必在文档首行。
<!DOCTYPE html><!-- 必须写在HTML文件首行 -->
<html></html>
<html>标签用于HTML文档的最开始，用来标识HTML文档的开始。而</html>标志放在HTML文档的结束，用来标识HTML文档的结束，两个标志必须一块使用。
<!DOCTYPE html><!-- 必须写在HTML文件首行 -->
<html><!-- HTML文档的开始 -->
</html><!-- HTML文档的结束 -->
<head></head>
<head>和</head>构成HTML文档的开头部分。<head>和</head>标签之间的内容是不会在浏览器的框内显示出来的，两个标志必须一块使用。
在此标志对之间可以使用<title></title>、<meta>、<link>、<script></script>等标签。
<meta>：用来提供关于文档的信息，起始属性为：charset="utf8"。表示告诉浏览器页面采用什么编
码解析文档，一般来说我们就用 utf8。当然，文件保存的时候也是utf8，而浏览器也设置 utf8 即可正确显示文。
<link>：用来引入css文件。
<style></style>：编写css代码。
<script></script>：用来引入js文件或编写js代码。
<!DOCTYPE html><!-- 必须写在HTML文件首行 -->
<html><!-- HTML文档的开始 -->
<head><!-- HTML文档的开头部分 -->
<meta charset="UTF-8"><!-- 文档属性 -->
<title></title><!-- 文档标题 -->
<link href="css文件的路径" /><!-- 引入css文件 -->
<style></style><!-- 编写css代码 -->
<script src="js文件的路径"></script><!-- 引入js文件或者编写js代码 -->
</head><!-- HTML文档的开头结束 -->
</html><!-- HTML文档的结束 -->
<title></title>
<title>定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
注意：<title>标签位于<head>标签内，是<head>标签中唯一要求包含的东西。
<meta></meta>
<meta/>用来提供关于文档的信息
<!DOCTYPE html><!-- 必须写在HTML文件首行 -->
<html><!-- HTML文档的开始 -->
<head><!-- HTML文档的开头部分 -->
<!-- SEO搜索引擎优化策略 -->
<!-- 网站标题 -->
<title></title>
<!-- 详细描述 -->
<meta name="description" content="这里写网站内容描述" />
<!-- 关键词 -->
<meta name="keywords" content="这里写关键词" />
</head><!-- HTML文档的开头结束 -->
</html><!-- HTML文档的结束 -->
以上三部分是SEO搜索引擎优化的主要部分
<body></body>
一般情况下浏览器上显示的内容的都放在body中，不排除其他标签可以不用body，比如frameset框架集标签。
<body>和</body>是HTML文档的主体部分，在此标志对之间可包含<p></p>、<h1></h1>、<br>、<hr>等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。
<!DOCTYPE html><!-- 必须写在HTML文件首行 -->
<html><!-- HTML文档的开始 -->
<head><!-- HTML文档的开头部分 -->
<!-- SEO搜索引擎优化策略 -->
<!-- 网站标题 -->
<title></title>
<!-- 详细描述 -->
<meta name="description" content="这里写网站内容描述" />
<!-- 关键词 -->
<meta name="keywords" content="这里写关键词" />
</head><!-- HTML文档的开头结束 -->
<body><!-- HTML文档的主体部分开始 -->
</body><!-- HTML文档的主体部分结束 -->
</html><!-- HTML文档的结束 -->