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

对着背影说爱祢 提交于 2019-11-27 15:58:53

从“上网”说开去

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中的文字,不管有多少个空格,多少个换行,多少个缩进,都会被压缩为一个空格。

文字,现在有很多的换行、空格、缩进:

   <p>
       我是一个段落


                                                        
    </p>

我是一个段落

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将所有的标签都进行了分类,只有两类:

  • 容器级标签 : 里面谁都可以装,甚至可以包裹和自己一样的标签。
  • 文本级标签 : 里面只能放文字、图片、表单元素,和其他的文本级标签。
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!