浏览器介绍
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)并² 渲染(显示)网页.
- 决定了浏览器 如何显示网页的内容以及 页面的格式信息
- 负责 ¹ 对网页语法的解释(如标准通用标记语言下的一个应用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)
- IE
- ☀ 浏览器的 “双核”甚至是“多核”,其中一个内核是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 的过渡。
- 在 HTML4.0 + XML的规则 = XHTML。
- The Extensible HyperText Markup Language
- 表现 标准语言 : 主要包括 CSS
- 层叠样式表
- 修饰内容的样式
- CSS 取代 HTML 表格式布局、帧和其他表现的语言。
- 纯 CSS 布局与结构式 XHTML 相结合的作用是什么?
- 能帮助设计师分离 外观与结构,使站点的 访问及维护 更加容易。
- 行为 标准 : 主要包括对象模型 W3C DOM)、ECMAScript
- 内容的交互以及操作效果
- DOM
- Document Object Model
- 文档对象模型
- ECMAScript
- ECMA(European Computer Manufacturers Association) 制定的 标准脚本语言(JavaScript)。
- 目前推荐遵循的是ECMAScript 262
- 目前推荐遵循的是ECMAScript 262
- ECMA(European Computer Manufacturers Association) 制定的 标准脚本语言(JavaScript)。
- 结构化 标准语言 : 主要包括 XHTML和XML
3.3 代码标准有哪些?
- (1) 必须 结束标记
- XHTML要求有 严谨的结构,所有标签 必须关闭。
- 如果是 单独不成对的标签,在标签最后加
一个"/"来关闭它。<br />
- (2) 小写元素
- XHTML对大小写是敏感的,
和<title>是不<br/> 同的标签。 - XHTML要求 所有的 标签和属性的名字 都必须使用 小写。
<BODY>
必须写成< body>
。 - 不能 大小写夹杂
- dreamweaver
自动生成的属性名字"onMouseOver"
也必须修改成"onmouseover"
。
- dreamweaver
- XHTML对大小写是敏感的,
- (3) 合理嵌套
- 同样因为XHTML要求有严谨的结构,因此所有的嵌套都必须按顺序,以
前我们这样写的代码:<p><b></p>/b>
必须修改为:<p><b></b></p>
- 就是说,一层一层的嵌套必须是严格对称。
- 同样因为XHTML要求有严谨的结构,因此所有的嵌套都必须按顺序,以
- (4) 属性括起来
- 在HTML中,你可以 不需要给属性值加引号
- 在XHTML中,它们必须被 加
引号。<height=80>
必须修改为:
<height="80">
- 需要在 属性值里 使用双引号,你可以用
"
,单引号可以使用
'
,例如:
<alt="say'hello'">
- (5) 特殊符号 写成转义字符
- 任何 小于号(<),不是标签的一部分,都必须被编码为
< ;
- 任何 大于号(>),不是标签的一部分,都必须被编码为
> ;
- 任何 与号(&),不是 实体的一部分的,都必须被编码为
&
- 任何 小于号(<),不是标签的一部分,都必须被编码为
- (6) 所有属性赋值
- XHTML 规定所有属性都 必须有一个值,没有值的就重复本身
<td nowrap> <input type="checkbox" name="shirt" value="medium" checked>
必须修改为:
<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
- XHTML 规定所有属性都 必须有一个值,没有值的就重复本身
- (7) - 连字符不能在注释中
- “- -” 只能发生在XHTML 注释的开头和结束,也就是说,在内容中它们不再有效。例如下面的代码是无效的:
<!--这里是注释-----------这里是注释-->
- “- -” 只能发生在XHTML 注释的开头和结束,也就是说,在内容中它们不再有效。例如下面的代码是无效的:
3.4 如何测试是否符合标准
- 捐助: 喜欢这篇文章吗? 捐助此文,向团团 表示鼓励和支持吧~❤
- 捐助二维码:
-
感谢:♥♥♥ 如果这篇文章对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 O(∩_∩)O哈哈~
-
转载 请注明出处 ,Thanks♪(・ω・)ノ
- 作者:Hey_Coder
- 来源:CSDN
- 原文:https://blog.csdn.net/VickyTsai/article/details/88361729
- 版权声明:本文为博主原创文章,转载请附上博文链接!