作为未接触过web开发的小白，了解一下关于html,http,css,JS的概念是有必要。我拜读了廖雪峰写的几篇文章，做了下面的读书笔记：
什么是HTTP协议：
- HTML：用来定义网页的文本
- HTTP：用于网络上传输HTML的协议，用于浏览器和服务器之间通信
用Chrome Developer Tools可以方便的查看浏览器与服务器之间的通信，选择Network，并确保工具上的红点是点亮的，在浏览器中输入 www.baidu.com后，选择其中一条Name,相关的Responese, Request信息就在工具右侧展现出来。
Request Headers
GET / HTTP/1.1 : GET是读取请求 ; / 是URL路径，表示首页 ; HTTP/1.1 表示采用的HTTP协议版本是1.1
Host: www.baidu.com 表示请求的服务器
Response Headers
HTTP/1.1 200 OK : 200表示成功响应， 类似的还有 3xx表示重定向 4xx表示客户端发送请求有错 5xx表示服务器端出来有错
Content-Encoding: gzip 表示用的zip压缩，减少Body的大小，加快传输
Content-Type: text/html; charset=uft-8 text/html表示是HTML网页，是响应类型 uft-8编码方式
*************************摘自廖神的文章：
HTTP请求的步骤：
跟踪了新浪的首页，我们来总结一下HTTP请求的流程：
步骤1：浏览器首先向服务器发送HTTP请求，请求包括：
方法：GET还是POST，GET仅请求资源，POST会附带用户数据；
路径：/full/url/path；
域名：由Host头指定：Host: www.sina.com.cn
以及其他相关的Header；
如果是POST，那么请求还包括一个Body，包含用户数据。
步骤2：服务器向浏览器返回HTTP响应，响应包括：
响应代码：200表示成功，3xx表示重定向，4xx表示客户端发送的请求有错误，5xx表示服务器端处理时发生了错误；
响应类型：由Content-Type指定；
以及其他相关的Header；
通常服务器的HTTP响应会携带内容，也就是有一个Body，包含响应的内容，网页的HTML源码就在Body中。
步骤3：如果浏览器还需要继续向服务器请求其他资源，比如图片，就再次发出HTTP请求，重复步骤1、2。
Web采用的HTTP协议采用了非常简单的请求-响应模式，从而大大简化了开发。当我们编写一个页面时，我们只需要在HTTP请求中把HTML发送出去，不需要考虑如何附带图片、视频等，浏览器如果需要请求图片和视频，它会发送另一个HTTP请求，因此，一个HTTP请求只处理一个资源。
HTTP协议同时具备极强的扩展性，例如，浏览器请求的是http://www.sina.com.cn/的首页，但是新浪在HTML中可以链入其他服务器的资源，比如<img src="http://i1.sinaimg.cn/home/2013/1008/U8455P30DT20131008135420.png">，从而将请求压力分散到各个服务器上，并且，一个站点可以链接到其他站点，无数个站点互相链接起来，就形成了World Wide Web，简称WWW。
******************************
什么是CSS:
css用来控制HTML里的元素如何展现。
为什么要CSS呢？ 它解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
所有的主流浏览器均支持层叠样式表。
什么是Javascript:
JavaScript是为了让HTML具有交互性而作为脚本语言添加的，JavaScript既可以内嵌到HTML中，也可以从外部链接到HTML中。
练习写一个含CSS, Javascript的HTML
Step1: 在notepad++中选择写HTML语言，然后编写如下一个HTML并保存，用浏览器打开。
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
step2: 加入css代码，让其更漂亮点
<html>
<head>
<title>Hello</title>
<style>
h1{
color: #333333;
font-size: 48px;
text-shadow: 3px 3px 3px #666666;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Step3: 加入对鼠标点击反馈的Javascript,点击后字体变红
<html>
<head>
<title>Hello</title>
<style>
h1{
color: #333333;
font-size: 48px;
text-shadow: 3px 3px 3px #666666;
}
</style>
<script>
function change() {
document.getElementsByTagName('h1')[0].style.color = '#ff0000';
}
</script>
</head>
<body>
<h1 onclick="change()">Hello, world!</h1>
</body>
</html>
