首页 > 代码库 > How to build a blog 01:Web基础知识
How to build a blog 01:Web基础知识
一、Internet基础知识
1. Internet的出现后,我们可以从本地(客户端)访问世界各地(服务器)的各种资源,最基本的客户端就是Web浏览器。
2. HTTP协议,则定义了客户端与服务器应该如何通讯,比如规定传输的数据的格式,这样的话我们就不用去担心数据在传输过程中是否会损坏。所以,你可以发现网站的开头,大多数是HTTP开头的,代表了使用该协议进行通讯
3. 但是,服务器众多,比如单单视频网站就有youku、爱奇艺、乐视、搜狐TV等,为了识别不同的服务端,每台服务就有了自己的独特的名字,叫做URL,例如,获取Google的logo资源,对应的url如下:“http://google.com/images/logo.gif”
该URL包括了以下三个部分:
协议类型 http://
服务器的因特网地址 google.com
指定某个资源 images/logo.gif
4. 服务器与客户端的每一次交流叫做一次事务,包括了请求与响应两个部分
5. 那么我们的浏览器怎么知道如何显示一个页面呢?这就是HTML的存在意义,HTML告诉浏览器我们所请求的页面的结构和内容
2. HTML基础知识
1. HTML描述了网页的结构和内容,简单来说,包括以下几个部分:
- 文本(what you see:你所看到的实际内容)
- 标签(what it look like:这些内容是如何显示的)
- 关联其他文件(references to other documents)
- 关联其他页面(links to other pages)
2. 首先介绍标签,标签由以下部分构成
<开始标签>内容<结束标签>
<Name> contents </Name>
合起来称为元素,例如:
加粗(blod):<b> 内容将会加粗 </b>
强调(emphasis):<em> 内容将会被强调 </em>
3. 属性为元素提供了更多的相关信息
图像(Images) <img src ="http://www.mamicode.com/url" alt="text">
链接(Anchor)<a href="http://www.mamicode.com/www.cnblogs.com"> 博客园 </a>
从<img>标签可以发现:有的元素没有结束标签,理由很简单,因为这些元素没有内容
4. HTML不会自动换行
可以通过以下两种标签来实现换行功能:
空行(break):<br>
段落(paragraph):<p> content </p>
这两者有何区别?<br>标签是内联标签,而<p>则是块标签,块标签就好像是给文本加上了一个盒子状的外壳(invisible box)
5. 为了进一步区别内联标签和块标签,可以看看<span>和<div>标签,两者都用于组织文档,唯一的区别在于<span>是内联元素,而<div>这是块元素,也就是说,我们可以对整个块的相关信息进行设置
<span class ="foo"> text </span>
<div class ="bar"> text </div>
因为<span>标签是内联标签,所以不会换行
而<div>标签是块元素,就好像被一个看不见的盒子包围,所以会独立成行
6. 最后,来看看HTML的基本结构
三、URL基础知识
URL:Uniform Resource Locator
1. 之前已经介绍过,URL包括协议、地址以及具体资源路径三个部分
2. 实际上,URL包括的内容更加复杂,比如:
查询参数(Query Parameters):?p=1
指向内部信息:#fragment
端口(port):默认端口为80,一般被省略
四、HTTP基础知识
HTTP:Hypertext Transfer Protocol
1. 之前已经介绍过服务器和客户端的交流,服务器与客户端的每一次交流叫做一次事务,包括了请求与响应两个部分
2. 那么,具体的请求和响应是怎样的呢?例如,在豆瓣上查看《HTML和XHTML权威指南》这本书
我向服务器发送了如下请求
请求的格式:
- 方法 路径 版本
- GET /subject/1171117 Http/1.1
当然,内容远不止一条,有兴趣的话可以安装Live HTTP Headers插件来查看
同理,豆瓣也会作出响应:
响应的格式:
姓名:值:描述
HTTP/1.1 200 OK
全部内容包括如下
3. 最后,说一下,返回的内容包括了静态和动态两种。例如,请求google的logo信息时,返回的是静态的内容,但是搜索的时候,返回的是动态的内容,以后会介绍。
How to build a blog 01:Web基础知识