01-浏览器原理与网页基本结构

偷偷摸摸
342 阅读4分钟

浏览器都有哪些？

国内浏览器
  1. 360浏览器：Chrome内核和IE内核。
  2. 百度浏览器：IE和Webkit双内核。
  3. QQ浏览器：Chromium内核+IE双内核。
  4. 猎豹浏览器：Trident和WebKit。
  5. 搜狗浏览器：chromium内核。
  6. 2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；
国外浏览器
  1. IE浏览器内核：Trident内核，也是俗称的IE内核；
  2. Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
  3. Firefox浏览器内核：Gecko内核，俗称Firefox内核；
  4. Safari浏览器内核：Webkit内核；
  5. Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

网页的基本组成（人的基本组成）

普通人看到的

image.png

医生看到的

image.png

普通用户看到的

image.png

程序员看到的

image.png

网页的基本结构
<!DOCTYPE html> // DTD文档声明格式
/*
DTD文档声明的作用是告诉浏览器我们的网页是用哪一个版本的规范编写的，
以便于方便浏览器解析和渲染，但是浏览器并不会完全依赖这个DTD文档声明，
浏览器有一套属于自己的机制。也就是说，DTD文档声明不写网页也能正常运行，
但是由于W3C规定第一行必须写DTD文档声明，
为了遵守规定，无论怎样，都得在第一行写上DTD文档声明。
*/
<html> // 用于告诉浏览器这是一个网页，也就是说告诉浏览器我是一个HTML文档。
	<head> // 用于给网站添加一些配置信息
        
        // utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
        <meta charset="utf-8"> // 指定当前网页的字符集
        
        <title></title> // 专门用于指定网站的标题
	</head>
	<body> // 专门用于定义HTML文档中需要给用户查看的内容
	</body>
</html>

浏览器处理步骤

C:\Windows\System32\drivers\etc\hosts

提问：你输入的 www.baidu.com 看到的是百度吗？你看到的一定是百度的网站吗？

打开浏览器 -> 输入网址（路由器IP地址）->回车-> DNS（“域名系统”的英文缩写）解析 -> 请求报文 -> 服务器 -> 响应报文 ->浏览器解析返回的内容展示界面

提问：你输入的 www.baidu.com 你看到的一定是百度的网站吗？

别做违法的事，就刑。

W3C：负责web方面标准的制定

HTTP协议（超文本传输协议） 规范浏览器与服务器之间是怎么沟通的协议。

浏览器兼容性问题（学霸学渣）

引擎不同 （ui渲染引擎，js引擎）

URL

URL（统一资源定位符）：网址就是URL www.jianshu.com/writer#/not…

URL格式：http://127.0.0.1/index.html 完整格式：http://127.0.0.1:80/index.html

URL拆分：

http:// URL的协议类型 127.0.0.1 | www.jianshu.com 服务器IP地址或域名 ：80 服务器的端口号 index.html 需要访问的资源名称

URL拆分后每个部分的作用：  IP地址和端口号：

IP地址相当于现实生活中的地址  例：XX省XX市XX区XX小区 端口号相当于现实生活中的门牌号  例：X号楼XXX室

我们发现将地址与门牌号结合在一起就会得到一个详细的地址，于是只要得到详细地址，就能找到对应位置。所以服务器IP地址和端口号的作用就是告诉浏览器我们需要访问的那台服务器的详细地址是什么。

 index.html 作用：

当我们通过IP地址和端口号找到对应的服务器之后，需要通过资源名称，告诉浏览器我们需要获取服务器上的哪个内容（告诉浏览器需要获取服务器的具体资源） 。

例：图片资源：ossweb-img.qq.com/upload/adw/…

HTTP协议(超文本传输协议)

规范浏览器与服务器之间沟通的协议

网页的构成

很多的标签 文本 图片 音频 视频…… div p span input form img audio video section header footer...

HTML标签分类

单标签（只有开始标签，没有结束标签）
例：

<标签名 />
<meta charset="GBK" />

双标签（既有开始标签，又有结束标签）
例：

<标签名></标签名>
<html> </html>

标签的关系

嵌套关系

<head>
    <title> </title>
</head>

并列关系

<head></head>
<body></body>

标签的分类

看代码实操

标签的意义

1）方便代码的阅读和维护
2）使用语义化标签会具有更好地搜索引擎优化
3）浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容

特殊符号

image.png

注释

 <!-- 注释语句 -->
avatar
文章
阅读
粉丝