01_互联网基本原理和HTML入门

作者: 王裕杰 | 来源:发表于2019-02-18 23:05 被阅读6次

从“上网”说开去

1.上网就是请求数据

老师现在进行一个互联网原理的整体感知的教学，你注意，整体感知中，一些具体的细节，可能令你没有安全感（很多的知识盲点）。没有关系，老师进行的是“整体感知”，就是为了让你宏观地学习一些东西，先不要在意细节。

网页是真实的物理存在，我们现在来看一下老师购买的一个服务器的操作。

服务器

所以我们就能通过网址www.shaoshanhuan.com/aaa.html来查看这个页面。

页面

我们来看看文件夹的情况：

文件夹

www.shaoshanhuan.com/ccc/ddd.html

小问题：我们想访问www.shaoshanhuan.com/haha/xixi/hehe.html

那么请问，我们的网页应该放在哪里？

答案：放在haha文件夹中的xixi文件夹中里面。

更深入的问题：我们平时输入网址，都是www.shaoshanhuan.com ，没有后缀

实际上等价于访问了www.shaoshanhuan.com/index.html文件。

index是英语目录、列表的意思，这是默认的首页文件。

文件夹的默认文件，也是index.html

www.shaoshanhuan.com/aaa

等价于
www.shaoshanhuan.com/aaa/index.html

总结一下，一会儿我们马上展开研究：

也就是说，上网就是一个请求数据的过程。当我们输入一个网址www.shaoshanhuan.com/aaa/1.html的时候，我们的计算机将对远程服务器发出一个HTTP请求。我要请求你的aaa文件夹中的1.html文件。服务器响应了这个请求，将1.html这个网页文件，通过HTTP请求，传输到用户的计算机中。用户的浏览器，对这个文件进行渲染。

上网就是一个请求文件、回馈文件的过程，没有持久连接。

2.HTTP协议

HTTP大家肯定不陌生，一说网址，装X的人就爱说：

http://www.shaoshanhuan.com

HTTP的全称叫做Hypertext Transfer Protocal，超文本传输协议。干嘛用的？就是浏览器和服务器之间传输文件用的。（建议大家背诵简称的全名，面试的时候吓死面试官！）

HTTP是有两部分，请求request、响应response。当你输入网址的时候，此时浏览器会发出一个HTTP请求，请求服务器上的响应页面。服务器收到请求之后，会再次通过HTTP将页面传输回来。

注意：

访问一个网页的时候，并不一定只有一次HTTP请求发出！如果页面上有图片、视频、音频，那么将产生更多的HTTP请求。
不光输入网址能够产生HTTP请求，我们点击超级链接的时候，也能够产生HTTP请求。

Ajax课程上我们拓展学习HTTP，现在先学这么多。

服务器

3.服务器

服务器server就是计算机，也有CPU、硬盘、内存，也安装软件。可能没有显示器、鼠标、键盘（用普通计算机远程管理它）。

服务器

服务器上存放文件的，服务器要24小时开机，不能断点，一旦断点，就无法访问网站了。

我们可以通过管理软件，来远程管理服务器，比如老师演示的8U-FTP。

4.浏览器

浏览器browser，就是渲染网页的一个软件，安装在客户的电脑里面。

HTTP请求的发起、接收，都是由浏览器来完成的。

浏览器都有临时文件夹，比如IE的临时文件夹就是：

C:\Users\Danny\AppData\Local\Microsoft\Windows\Temporary Internet Files

你请求的所有网页文件，都是存放在这个临时文件夹中的。所有的网页都是在计算机本地进行渲染的。所以，有些时候，第一次打开网页速度慢，第二次打开网页速度快，这是因为第一次已经把文件传输过来了，就不用传输了。

HTML初步

HTML的全称叫做Hypertext Markup Language，超文本标记语言，是网页的文件格式。网页的格式，还有PHP、JSP、ASP等等，那么HTML是最最基本的网页文件格式。

1.纯文本

我们现在先来学习什么是“纯文本”。

拓展名的含义：

拓展名

不同的拓展名： .mp3音乐文件， .jpg 图片文件， .docx 文档

要让我们的操作系统，显示出文件的拓展名。

显示文件拓展名

我们来看一个实验：
1.doc和1.txt中，都是只有“哈哈”两个字。但是doc文件，尺寸很大；而txt文件，尺寸只有4字节。
这是因为txt文件是纯文本文件，里面只有文字，没有其他的任何东西，没有样式、没有字号、没有颜色。
而doc文件，里面存放着页边距、行高、颜色、字号、字体这些信息。

文件对比

HTML文件是纯文本文件。

我们这么创建一个网页：

创建网页

创建出来一个txt文件：

创建txt

强行更改txt这个拓展名为html：

更改拓展名为html

这个html文件就是一个网页文件了。

网页文件

不要给我提什么DreamWeaver了！因为HTML文件是纯文本文件，所以任何的纯文本编辑器，都能够编写网页！

HTML的制作，不依赖于任何编辑器。

网页的制作和浏览，分别使用记事本和浏览器：

我的第一个html

2.HTML是负责描述文本语义的语言

什么是语义

我们用标签对文字添加语义：

添加语义

比如下面的文字：
刘诗诗简介
它是没有任何语义的文字。
而：
<h1>刘诗诗简介</h1>
给这几个字添加了“1级标题”的语义。

比如下面的文字，
刘诗诗，1987年3月10日出生于北京。中国内地影视女演员，毕业于北京舞蹈学院芭蕾舞专业2006届本科班。

也是没有任何语义的文字。
而：
<p>刘诗诗，1987年3月10日出生于北京。中国内地影视女演员，毕业于北京舞蹈学院芭蕾舞专业2006届本科班。</p>

给这些文字增加了“段落”的语义。

HTML不过如此，就是通过一对儿一对儿的标签，来给文本增加语义的语言。

<p> 叫做起始标签
</p> 叫做结束标签

页面渲染的时候，<h1>这些标签，是不会显示在页面上的，这就是“超”字的含义：一些文本，就是文本；而一些文本（标签），是描述别的文本语义的文本，不会照搬显示在页面上。 这种文件就是超文本文件。

也解释了什么是“标记”，就是一对儿一对儿的标签对儿。

超文本标记语言HTML： Hypertext Markup Language。

你加上h1标签之后，文本就是主标题的语义，浏览器此时会默认将h1的文字变得大、黑、粗，这个是浏览器的默认样式，和语义是无关的。浏览器会默认给一些语义的文字加上合适的样式。

但是，一定要记住,任何HTML标签，都和样式无关的，只能表达语义。

面试的时候，人家问h1什么意思啊？
~~错误的答案：让字变得大、黑、粗。~~

正确的答案：让文字加上1级标题的语义。

Sublime安装和使用方法

1.安装

再次强调，做网页和用什么软件无关。任何的纯文本编辑器，都能够制作网页；相反的，任何的能够制作网页的软件，吹破天了，本质上都是纯文本编辑器。

现在比较有名的制作网页的软件：sublime、WebStorm、Atom、DreamWeaver、NotePad++、Editplus、frontpage。

sublime是英语宏大的、壮丽的意思，冷门词汇。

sublime这个编辑器近些年非常流行，能够编辑多种语言，Java、PHP、C语言都能编写。

官网：http://www.sublimetext.com/

2.使用

sublime能够编辑很多很多语言！所以，在新建了一个文件之后，一定要记得先保存，保存的时候，要刻意地加上.html后缀。

sublime

Sublime的常见快捷键：

Ctrl+N 新建文件
Ctrl+S 保存功能。这里提一嘴，Sublime不怕突然掉电。它不是实时保存，而是实时缓存。

Sublime

Ctrl+F 查找
Ctrl+Z 撤销。Sublime提供无限次的撤销。
Ctrl+C 复制
Ctrl+V 粘贴

输入标签名，然后按tab键，能自动生成标签对儿。

Ctrl+Shift+D 复制当前行
Ctrl+X 删除当前行（和剪切是一个快捷键）
Ctrl+鼠标滚轮

按住鼠标滚轮，拖拽，就可以产生多行光标。

支持快速输入法，比如

p*10 然后按tab键，就能生成10个p标签。

HTML的基本骨架

直接在sublime中，输入：

html:xt

然后按tab键，如果tab键不管用，那么就按ctrl+E键，就会自动展开为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

段落

抽象一下：

<!DTD >
<html>
   <head>
   </head>

   <body>
   </body>

</html>

接下来我们就要一行一行的讲解HTML基本骨架的含义。

1.文档声明头DTD

就是HTML第一行语句：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

所谓的DTD就是DocType Definition 文档类型定义, 也有人翻译为DocType
Declartion 文档类型声明。

HTML文件的第一行，都是这个DTD，干什么用的？这一行语句，告诉浏览器我是什么版本的HTML文件。

HTML、CSS这两个语言，官网维护者就是总部位于美国的W3C组织，简称W3。全称World
Wide Web Consortium国际万维网联盟。官网：https://www.w3.org/

中文的网站就是w3scholl.com.cn，

里面的各种DTD手册：http://www.w3school.com.cn/tags/tag_doctype.asp

HTML从诞生到现在，最新的版本HTML5。不是所有的浏览器都兼容哦，现在还有一部分人使用的浏览器过旧，所以现在很多公司还在使用HTML的上一个版本，HTML4.01。

HTML4.01又有三个小版本：

HTML4.01 Strict 严格版：不能使用font、b、u、i等等的废弃标签，不能使用框架集，结构和样式分离。

HTML4.01 Transitional 过渡版（通用版）：没有那么多限制，可以使用font等废弃标签，不能使用框架集

HTML4.01 Frameset：框架集版：可以使用框架集

讲一下历史，在2007、08年之前，人们制作一个红色的标题：
<h1><font color="red">我是一个主标题</font></h1>
现在font标签已经被废弃了，改用CSS来描述页面的样式。W3C事儿多，发现HTML还不够严格。比如，标签到底是大写字母还是小写字母呀？

<H1></H1>

是对的么？

再比如，属性可不可以用单引号？
<a href=’2.html’></a>

所以，W3C为了解决这个问题，推出了XHTML版本。X表示extensional“拓展的”HTML。

在XHTML1.0中，严格规定了标签必须是小写，所有的属性都必须用双引号封闭啊，必须有结尾反斜杠……

XHTML1.0版本中，延续了HTML4.01的3个小版本：

XHTML1.0 Strict 严格版：不能使用font等等的废弃标签，不能使用框架集，结构和样式分离。
XHTML1.0 Transitional 过渡版（通用版）：没有那么多限制，可以使用font等废弃标签，不能使用框架集
XHTML1.0 Frameset：框架集版：可以使用框架集

总结一下，一共有6种DTD。HTML4.01有3种，XHTML1.0有3种。6种版本，就有6种DTD。

按严格程度：
XHTML1.0 Strict > HTML4.01 Strict > XHTML1.0 transitionl > HTML4.01
transitionl

Sublime生成DTD，只需要更改冒号后面的词语，xs就能生成XHTML1.0 Strict版本。

Sublime生成DTD

严格版本中，font、b、u、i标签都是废弃的。而这些标签我们将来要使用它做一些“小心思”、“小创意”，所以不能一棒子打死。

如果没听懂，别废话，老老实实用html:xt就行了。只要记住，一共有6种。

HTML5是新的版本，不在设立strict、transitional、frameset等版本了。XHTML1.0随着HTML5的诞生，也没有了。这就是W3C，在啪啪啪自己打脸。

2.命名空间

在DTD下面一行，就是html标签对儿：

<html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

</html>

html是一个标签，xmlns是它的一个属性， xml:lang也是它的一个属性

<html 属性1=”值” 属性2=”值”>
</html>

键值对儿，键就是属性的名字，值就是属性的值。简称K-V对儿， k就是key键， v就是value值的意思。

xmlns这个属性是干嘛的呢？xmlns的全称，叫做XML NameSpace， HTML是XML中的一种，但是我们现在不准备展开说这事儿。Ajax课上会详细介绍XML这个东西。NameSpace叫做命名空间。很简单，就是你的文章里面的h1表示的是1级标题的，别人的是不是也是1级标题？所以就需要有人统一一下标准，使用的就是一个固定的网址http://www.w3.org/1999/xhtml

xml:lang="en" 表示所有的标签的语言都是英语，language

这里都是固定写法，没有别的值。

3.字符集

简体中文可以使用的字符集就两个，分别叫做GBK、UTF-8。

GBK是国标的一个意思，也称为“gb2312”，中国人制定的。

UTF-8是国际的一个字符集标准。

字符集

我们做了一个实验，都是同一个汉字，但是：

GBK 每一个汉字2字节
UTF-8 每一个汉字3字节

字符集

字符集就相当于活字印刷术里面的字的模型。

老王家的字多，所以描述“哈”字，可能是“第3个柜子里面第2层第4行第8列”

老李家的字少，所以描述“哈”字，可能是“第9层第3行第1列”

GBK中只有汉字简体（不包括少数民族文字）、绝大部分繁体字、少量片甲名、少量符号

UTF-8中有世界上所有国家中的所有文字和符号。

我们在HTML网页中，用meta来设置字符集，meta是“元”、“初始”的意思，表示元设置、初始设置。

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

这个meta是一个单标签，没有成对儿。一会儿在img标签中，我们细讲这事儿。

Sublime将默认保存utf-8字符集。

所以，HTML页面中，有两种字符集设置：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

和

<meta http-equiv="Content-Type" content="text/html;charset=gb2312">

工作的时候用哪种？

如果公司的网页中，没有出现怪异符号、没有出现其他国家文字（除了英语），那么要使用gb2312。因为文件尺寸小，每一个字就少1个字节。1000字就是1kb，5000字就是5kb。
如果公司的网页中，有少数民族文字、韩语、阿拉伯语，那么要使用UTF-8。因为文字全。

4.关键字和页面描述

浏览器抓取我们的页面，会在旁边显示一小段页面描述。

 <meta name="description" content="保持饥饿 保持愚蠢">

抽象出来语法：

<meta name=”description” content=”页面描述” >

description 描述的意思， content内容。

这个东西显著提升SEO， SEO就是Search Engine Optimization，搜索引擎优化。就是少花钱，让搜索引擎能带来更多的流量，让更多人点击。

可以设置页面关键字，搜索引擎会抓取这些关键字：

<meta name="keywords" content="手机,电脑,冰箱,彩电">

搜索引擎就知道我们的网站是干什么的了，就能相应的排名提升。

5.title

<title>页面描述和关键词</title>

title

HTML页面的特点

1.HTML对换行、TAB缩进、空格不敏感

<body>
<h1>我是一个主标题</h1>
<p>我是一个段落</p>
</body>

等价于：

<body>
    <h1>我是一个主标题</h1>
    <p>我是一个段落</p>
</body>

等价于：

<body><h1>我是一个主标题</h1><p>我是一个段落</p></body>

也就是说，HTML现在你就感觉到了，不仅仅负责描述语义，还描述了页面的层次。

层次是什么，就是看标签谁包裹谁，和缩不缩进无关！

“如何提升页面加载速度？” “压缩代码，将HTML压缩为1行”。

2.空白折腾现象

HTML中的文字，不管有多少个空格，多少个换行，多少个缩进，都会被压缩为一个空格。

文字，现在有很多的换行、空格、缩进：

我是一个段落

h和p

1.h系列标签

h表示header，标题的意思。一共有六个，有不同的语义。

h1 1级标题

h2 2级标题

h3 3级标题

h4 4级标题

h5 5级标题

h6 6级标题

标题

一般来说，页面上只能有一个h1标签，其他标签个数不定。实际上这个不是W3C的规则，而是搜索引擎的规则。

h1标签中的内容，权重非常高，搜索引擎会特别注意抓取里面的文字。搜索引擎如果看见页面有多个h1，视为作弊，降低你的权重。

h标签是个文本级标签。

2.p标签

p表示paragraph，段落。

<p>文字</p>
这个就是一个段落。

p标签你一定要注意一件事儿，p里面只能放文字、图片、表单元素。不能放其他东西。p是一个文本级标签。

这里实际上揭示了一个事情，就是标签的级别。我们HTML将所有的标签都进行了分类，只有两类：

容器级标签：里面谁都可以装，甚至可以包裹和自己一样的标签。
文本级标签：里面只能放文字、图片、表单元素，和其他的文本级标签。