02- HTML网页基础知识与浏览器介绍
1.认识网页
网页主要由文字,图像和超链接等元素构成。当然,除了这些元素,网页还可以包含音频,视频,以及flask等。
如图所示就是一个网页:
网页是如何形成的呢?
它是由前端人员写的代码,经过浏览器的渲染,得到你眼中看到的界面。
2.常见浏览器介绍
浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。
2.1浏览器市场份额
查看网站:http://tongji.baidu.com/data/browser
2.2 浏览器内核
浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。
JS 引擎 则是解析 Javascript 语言,执行 javascript语言来实现网页的动态效果。 最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多,如加上没什么人使用的非商业的免费内核,可能会有10多种,但是常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。
(1)Trident(IE内核)
国内很多的双核浏览器的其中一核便是 Trident,美其名曰 "兼容模式"。
代表: IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。
Window10 发布后,IE 将其内置浏览器命名为 Edge,Edge 最显著的特点就是新内核 EdgeHTML。
(2)Gecko(firefox)
Gecko(Firefox 内核): Mozilla FireFox(火狐浏览器) 采用该内核,Gecko 的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。 可惜这几年已经没落了, 比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
(3) webkit(Safari)
Safari 是苹果公司开发的浏览器,所用浏览器内核的名称是大名鼎鼎的 WebKit。
现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了),苹果感觉像被别人抢了媳妇,都哭晕再厕所里面了。
代表浏览器:傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器,
(4) Chromium/Bink(chrome)
在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。
大部分国产浏览器最新版都采用Blink内核。
(5) Presto(Opera)
Presto 是挪威产浏览器 opera 的 "前任" 内核,为何说是 "前任",因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。
了解一下:
移动端的浏览器内核主要说的是系统内置浏览器的内核。
目前移动设备浏览器上常用的内核有 Webkit,Blink,Trident,Gecko 等,其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit,Android 4.4 之前的 Android 系统浏览器内核是 WebKit,Android4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 Blink,Windows Phone 8 系统浏览器内核是 Trident。
3.web标准
通过以上浏览器的内核不同,我们知道他们工作原理、解析肯定不同,显示就会有差别。
由于浏览器种类繁多,多以各大浏览器共同制定了一个web标准
3.1 web标准的好处
1.让web的发展前景更广阔
2.内容能被更广泛的设备访问
3.更容易被搜索引擎搜索
4.降低网站流量使用
5.使网站易于维护
6.提高页面浏览速度
3.2 web标准构成
Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。
结构标准:结构用于对网页元素进行整理和分类,主要包括XML和XHTML两个部分。
样式标准:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS。
行为标准:行为是指网页模型的定义及交互的编写,主要包括DOM和ECMAScript两个部分
理想状态我们的源码:HTML CSS Javascript
总结web标准:
结构标准(HTML): 决定你是否有个好天然身体
样式标准(CSS):决定你是否打扮的美丽外观
行为标准(Javascript):决定你是否有吸引人的行为
02- HTML网页基础知识与浏览器介绍的更多相关文章
- 9月5日网页基础知识 通用标签、属性(body属性、路径、格式控制) 通用标签(有序列表、无序列表、常用标签)(补)
网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
- 第一天上午——HTML网页基础知识以及相关内容
今天上午学习了HTML基础知识以及相关内容,还有DW的基本使用方法. HTML(HyperText Markup Language):超文本标记语言,超文本:网页中除了包含文本文字之外,还包含了图片, ...
- python基础知识1---python相关介绍
阅读目录 一 编程与编程语言 二 编程语言分类 三 主流编程语言介绍 四 python介绍 五 安装python解释器 六 第一个python程序 七 变量 八 用户与程序交互 九 基本数据类型 十 ...
- HTML学习-1网页基础知识
HTML超文本标记语言:HyperText Markup Language. 由浏览器运行解析. 它包括了静态页面.html .htm.动态页面.php .aspx .jsp,从数据库提取. 今天 ...
- 基础知识:编程语言介绍、Python介绍、Python解释器安装、运行Python解释器的两种方式、变量、数据类型基本使用
2018年3月19日 今日学习内容: 1.编程语言的介绍 2.Python介绍 3.安装Python解释器(多版本共存) 4.运行Python解释器程序两种方式.(交互式与命令行式)(♥♥♥♥♥) 5 ...
- OpenStack基础知识-单元测试工具介绍
针对以前学的内容的一个简单整理 1.单元测试工具介绍 unittest: 是 Python 的标准库,提供了最基本的单元测试功能,包括 单元测试运行器(简称runner) 和 单元测试框架.项目的单元 ...
- ASP.NET简介及网页基础知识
ASP:Active Server Page. asp.net属于.NET Framework的一部分,命名空间是System.Web,主要用于网络程序的开发. .net版本演化(asp.net和.n ...
- 02)php基础知识
综述 学习网址 菜鸟教程-PHP 所有学习内容皆来自以上网站. 基础 语法 PHP 脚本以 结束; PHP 文件的默认文件扩展名是 ".php". <?php echo &q ...
- C#基础知识回顾--BackgroundWorker介绍
简介 BackgroundWorker是.net里用来执行多线程任务的控件,它允许编程者在一个单独的线程上执行一些操作.耗时的操作(如下载和数据库事务)在长时间运行时可能会导致用户界面 (UI) 始终 ...
随机推荐
- vue3中使用axios如何去请求数据
在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactiv ...
- C# 中 string.Empty、""、null的差别
一.string.Empty 和 "" 原文1 原文2 1. ...
- 怎样将大批量文件进行循环分组(reduce)?
背景 当有时候一个文件夹下有几万个几十万个文件时,我们的桌面终端打开这个文件夹可能会卡.或者将文件进行批量上传时,如果是在文件夹下全选,那么基本上浏览器就卡死了,当然也不能这样子操作滴~ 题主 ...
- 测试平台系列(4) 使用Flask蓝图(blueprint)
使用Flask蓝图(blueprint) 回顾 先来看一下上一篇的作业吧,使用「logbook」的时候,遇到了时区不对的情况.那么我们怎么去解决这个问题呢? 实际上logbook默认采用的是世界标准时 ...
- Idea 报错 xxxx too long
问题:写单元测试,debug时,报错如下图 解决方法1: 在项目/.idea/workspace.xml文件中添加一行代码如下 <component name="PropertiesC ...
- Python爬虫学习一------HTTP的基本原理
昨天刚买的崔大大的<Python3网络爬虫开发实战>,今天就到了,开心的读完了爬虫基础这一章,现记录下自己的浅薄理解,如有见解不到位之处,望指出. 1.HTTP的基本原理 ①我们经常会在浏 ...
- linux下redis安装运行教程——redis系列
天没降大任于我,照样苦我心智,劳我筋骨. 安装运行的过程 由于官网太慢,csdn里的资源又要钱,所以呢,只能使用我自己本地以前下载的陈年..哦不,3.xredis安装包 资源已经放到百度云,需要的可以 ...
- WPF 应用 - 拖拽窗体、控件
1. 拖拽窗体 使用 System.Windows.Window 自带的 DragMove() 方法即可识别窗体拖动. DragMove(); 2. 拖拽控件:复制.移动控件 <Grid> ...
- Docker 一图胜千言
Docker 一图胜千言 0 为什么 Docker 比虚拟机快? 注:少了一层抽象层( Hypervisor ) 1 Docker Logo 要素: 大海 宿主机 Host 鲸鱼 Docker 集装箱 ...
- java异常的 理解
1.体系结构 java.lang.Object |----java.lang.Throwable |-------java.lang.Error:错误,java程序对此无能为力,不显式的处理 |--- ...