【浏览器介绍】

admin管理员组

文章数量:1580441

浏览器介绍

• 1.网页的介绍
• • 1.1 网页是什么?
  • 1.2 通过什么阅读网页?
• 2.浏览器介绍
• • 2.1 主流网页浏览器有哪些?
  • 2.2 主流浏览器的市场份额是多少?
  • 2.3 浏览器内核(重点)
• 3. Web 标准 (重点)
• • 3.1 为什么制定 web 标准?
  • 3.2 什么是 Web 标准?
  • 3.3 代码标准有哪些?
  • 3.4 如何测试是否符合标准

1.网页的介绍

1.1 网页是什么?

• 本质是 纯文本 文件: 网页是一个包含 HTML 标签的 纯文本文件
  • 文件扩展名: 为.html或.htm）。
  • 为什么在源文件看不到任何图片？
    • 网页文件 中存放的只是 图片的链接位置，图片文件与网页文件是 互相独立存放的两个文件，也可以不在同一台计算机上。
• 网页存放在哪里?
  • 存放在某一台计算机中，是万维网中的一“页”

1.2 通过什么阅读网页?

• 网页要通过 网页浏览器 来阅读。
  • 浏览器则对 html标签 进行 解释并生成 页面,浏览器相当于一个"翻译官"的角色
  • 一般称之为 浏览器渲染
    • 纯文本文件(网页)—>浏览器渲染—>用户看见的网页
      • 不通过浏览器,就看不到那么美观的网页

2.浏览器介绍

2.1 主流网页浏览器有哪些?

• 主流网页浏览器有
  • Mozilla Firefox (火狐) [faifɔ:ks]
  • Internet Explorer(IE 微软因特网浏览器)
  • Microsoft Edge(微软边缘) ['maikrəusɔft] [ɛdʒ]
  • Google Chrome (谷歌) [gu:gl] [krom]
  • Opera ['ɑprə]
  • Safari [sə’fɑri] ( 苹果电脑自带的浏览器 )
  • 注意:IE 和 edge是一家,都是微软出品,现在用 edge 的多
    

2.2 主流浏览器的市场份额是多少?

• 点击查看 浏览器市场份额 - 百度统计流量研究院
  
• 占据市场份额最大的是什么浏览器 ?
  • 谷歌浏览器,所以 谷歌浏览器 是最重要的,其次是 IE9 IE11 IE8 QQ 搜狗 火狐

2.3 浏览器内核(重点)

• 浏览器最重要的部分是什么?

  • 是“Rendering Engine”，即 “渲染引擎” = 即“浏览器内核”。

• 渲染引擎 (浏览器内核) 的作用是什么?

  • 负责 ¹ 对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并² 渲染（显示）网页.
    • 决定了浏览器 如何显示网页的内容以及 页面的格式信息

• 不同的浏览器内核 有什么区别?

  • 不同的渲染引擎 (浏览器内核) 对网页编写语法的解释不同
    • 导致, 同一网页 在不同的内核的浏览器里的渲染（显示）效果也可能不同

• 为什么 开发网页 需要在不同内核的浏览器中 测试网页显示效果?

  • 同一网页—> 不同内核 —> 不同的解释 —> 不同的显示效果
    

• 主打的浏览器内核有哪些?

• (1) Trident ( IE 内核)

  • ['traɪdnt]
  • Trident 内核的常见浏览器有哪些?：
    • IE
      • IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；
    • 360
      • 360 安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）
      • 360 极速浏览器（7.5之前为Trident+Webkit，7.5为Trident+Blink）
    • 猎豹
      • 猎豹极轻浏览器
      • 猎豹安全浏览器（1.0-4.2版本为Trident+Webkit，4.3及以后版本为Trident+Blink）
    • 傲游 浏览器（傲游1.x、2.x为IE内核，3.x为IE与Webkit双核）
    • 百度 浏览器（早期版本）
    • 世界之窗 浏览器
    • （最初为IE内核，2013年采用Chrome+IE内核）
    • 2345 浏览器
    • 腾讯TT
    • 淘宝 浏览器
    • 搜狗 高速浏览器（1.x为Trident，2.0及以后版本为Trident+Webkit）
  • ☀ 浏览器的 “双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。
    • 国内的厂商一般把 其他内核 叫做“高速浏览模式”，而 Trident 则是“兼容浏览模式”，用户可以来回切换。

• (2) Gecko (Firefox内核 )

  • ['gɛko]
  • Gecko 内核的常见浏览器有哪些?
    • Mozilla Firefox、Mozilla SeaMonkey
    • waterfox（Firefox的64位开源版）
    • Iceweasel
  • Gecko 是一个跨平台内核，可以在Windows、 BSD、Linux和Mac OS X中使用。

• (3) Presto (Opera前内核) (已废弃)

  • ['prɛsto]
  • Opera12.17及更早版本曾经采用的内核，现已停止开发并废弃
    • Opera 现已改用Google Chrome的 Blink内核

• (4) Webkit (Safari内核,Chrome内核原型,开源)

  • 苹果公司研发的
  • WebKit内核常见的浏览器有哪些?
    • 傲游浏览器3、
    • Apple Safari (Win/Mac/iPhone/iPad)
    • Symbian手机浏览器
    • Android 默认浏览器
    • Google Chrome、360极速 浏览器以及搜狗 高速浏览器 高速模式也使用Webkit作为内核
    • WebKit 内核在手机上的应用 也很多
      • Google 的手机 Gphone、 Apple 的 iPhone， Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。

• (5) Blink (谷歌 和 Opera 内核)

  • 这一渲染引擎是开源引擎 WebKit 中WebCore组件的一个分支
  • 并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用
  • 谷歌内核: webkit—> blink
  • Opera 内核: Presto—>blink

• 总结: 5个内核,废弃了一个,手机上常用的浏览器,使用的内核,也是这几个

  • IE 内核 :Trident
  • Firefox内核 : Gecko
  • Safari内核,Chrome内核原型 : Webkit
  • 谷歌 和 Opera 内核 : Blink
  • Opera前内核 (已废弃) : Presto
    

3. Web 标准 (重点)

3.1 为什么制定 web 标准?

• 因为用户使用不同的浏览器来上网,同一个网页,在 不同的浏览器不同的 渲染引擎(浏览器核心)下, 会导致显示的效果不同,有了 web 标准 , 不同的浏览器 ,渲染后,会展示统一的相同效果
• 1.浏览器兼容: 不同浏览器内核—> 不同效果 —> web 标准 —> 相同效果
  • 浏览器开发商 和开发网站的人员 共同遵守标准,这样不同浏览器的,兼容性更好.
• 2.团队协作: 网站的开发人员 遵守了 web 标准，开发人员之间 更容易地理解彼此的编码，web 开发的团队协作将得到简化.
• 3. 被访问: 标准的 web 文档更易被搜索引擎访问，也更易被准确地索引.
• 4.更方便易用:
  • 盲人可使用计算机为他们 读出网页。
  • 而弱视的人士可重新排列并放大网页。
  • 比如 HTML 和 CSS，将使您的网页更容易被语音阅读器和其他不常见的输出设备 理解。
  • 点击了解更多详情

3.2 什么是 Web 标准?

• WEB 标准是什么?
  • 不是某一个标准，而是 一系列 标准的集合。
• 网页主要由哪三部分组成?
  • 结构（Structure）、表现（Presentation）和 行为（Behavior）
• web 标准分为 哪三方面?
  • 结构化 标准语言 : 主要包括 XHTML和XML
    • 作用:内容清晰,更有逻辑性
    • XML:可扩展标记语言
    • XHTML: 可扩展超文本标识语言
      • The Extensible HyperText Markup Language
        • 在 HTML4.0 + XML的规则 = XHTML。
          • 建立XHTML的目的就是实现 HTML向XML 的过渡。
  • 表现 标准语言 : 主要包括 CSS
    • 层叠样式表
    • 修饰内容的样式
      • CSS 取代 HTML 表格式布局、帧和其他表现的语言。
      • 纯 CSS 布局与结构式 XHTML 相结合的作用是什么?
        • 能帮助设计师分离 外观与结构，使站点的 访问及维护 更加容易。
  • 行为 标准 : 主要包括对象模型 W3C DOM）、ECMAScript
    • 内容的交互以及操作效果
    • DOM
      • Document Object Model
      • 文档对象模型
    • ECMAScript
      • ECMA(European Computer Manufacturers Association) 制定的 标准脚本语言（JavaScript）。
        • 目前推荐遵循的是ECMAScript 262
          

3.3 代码标准有哪些?

• (1) 必须 结束标记
  • XHTML要求有 严谨的结构，所有标签 必须关闭。
  • 如果是 单独不成对的标签，在标签最后加
    一个"/"来关闭它。<br />
• (2) 小写元素
  • XHTML对大小写是敏感的，
  • XHTML要求 所有的 标签和属性的名字 都必须使用 小写。
    <BODY>必须写成< body>。
  • 不能 大小写夹杂
    • dreamweaver
      自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。
• (3) 合理嵌套
  • 同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以
    前我们这样写的代码：<p><b></p>/b> 必须修改为：<p><b></b></p>
  • 就是说，一层一层的嵌套必须是严格对称。
• (4) 属性括起来
  • 在HTML中，你可以 不需要给属性值加引号
  • 在XHTML中，它们必须被 加
    引号。<height=80>
    必须修改为：
    <height="80">
  • 需要在 属性值里 使用双引号，你可以用" ，单引号可以使用
    '，例如：
    <alt="say&apos;hello&apos;">
• (5) 特殊符号 写成转义字符
  • 任何 小于号（<），不是标签的一部分，都必须被编码为&lt ;
  • 任何 大于号（>），不是标签的一部分，都必须被编码为&gt ;
  • 任何 与号（&），不是 实体的一部分的，都必须被编码为&
• (6) 所有属性赋值
  • XHTML 规定所有属性都 必须有一个值，没有值的就重复本身
    <td nowrap> <input type="checkbox" name="shirt" value="medium" checked>
    必须修改为：
    <td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
• (7) - 连字符不能在注释中
  • “- -” 只能发生在XHTML 注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的:
    <!--这里是注释-----------这里是注释-->
    

3.4 如何测试是否符合标准

• 点击进行 页面 校验
• 点击进行 CSS 文档 校验
• 点击进行 W3C标准测试

---

• 捐助: 喜欢这篇文章吗? 捐助此文,向团团 表示鼓励和支持吧~❤
  
• 捐助二维码:
  

---

• 感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 O(∩_∩)O哈哈~

• 转载 请注明出处 ,Thanks♪(･ω･)ﾉ

  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn/VickyTsai/article/details/88361729
  • 版权声明：本文为博主原创文章，转载请附上博文链接！

本文标签： 浏览器