web技术入门第三弹页面开发技术基础（一）

361 查看

页面的三类代码
我们用浏览器打开一个页面，然后就看到了精彩的内容。浏览器向服务器发起一个页面请求，服务器就按照业务逻辑调用数据，静态页面的文件数据发送给浏览器，浏览器打开的就是这么一个静态页面文件。那么，这个页面是怎么开发出来的呢？我们打个比方，把开发一个页面当成建一个房子的过程，
1、需要先确定房子的结构：有几层，有哪几个房间，先造一个毛坯房出来；
2、二、拿到了毛坯房，我们要进行装修，对结构做细节的改造，加上水电设施，装上地板、墙壁粉刷、布置家具等等美化的工作；
3、三、还有很多房屋设施的行为需要定义，比如按下墙上的按钮灯就亮了，打开水龙头水会出来等等更为复杂的细节。
这些都做完了，我们这个房子可以入住了，相当于这个页面的开发就完成了。上面说的三个方面，对应到页面的技术规范，分别是由HTML、CSS和JS来完成的。这个技术规范，就是页面开发的W3C标准。开发人员按照W3C标准所设计制造的页面，浏览器都需要能够正常的解析和显示。
一个浏览器显示的页面，通常涉及到三类代码。
一、以html或者htm结尾的是HTML结构代码，描述了页面的结构和元素；
二、以css结尾的是样式表代码，在HTML里面对样式表进行引用，从而对结构里的元素进行样式描述；
三、以js结尾的是java script JS代码，这些也是在HTML里面被引用，对页面以及页面元素的行为和动态效果做的编程。
对于比较小型的页面，我们甚至也可以把这三类代码混合着写在一个HTML文件里面。但这不是一个很好的方法；就像盖房子有很多的施工规范、方法一样，开发一个页面，也最好按照良好的思路，对语义进行优先，将样式和行为做分离来设计。

浏览器对页面的解析、加载和渲染
浏览器在和服务器通讯后，需要下载数据并且进行相应的加载、渲染和解析。
1、后端服务器生成网页数据，按照HTTP协议返回给浏览器。
2、浏览器开始解析HTML主文件，计算里面的元素并生成基本的结构
3、浏览器在HTML里遇到图片、音频文件这类的资源引用，下载并对应到结构里
4、浏览器在HTML里面遇到CSS 引用，下载CSS样式表，并加载和渲染到基本结构里
这里，下载和渲染是同步进行的，下载并不影响到下面的HTML解析。
5、浏览器遇到JS文件的引用，开始下载JS文件，这时候会暂停解析，直到JS文件下载完毕并执行完成。由于JS代码可以修改基本结构的元素以及CSS样式，如果有执行修改的，需要重新计算并生成结构和渲染。所以JS的引用是独占式的，这里是有可能阻塞一个页面完整显示完毕的地方
6、继续完成HTML文件的解析并结束。如果又遇到CSS文件，继续下载并从头开始重新渲染。
7、较新的浏览器和页面开发规范，可以开启一个预下载，即在下载主文件之前优先下载JS和CSS，以便更快的一次性加载主HTML文件。
这个过程里我们可以看到，不同的资源文件，放置在HTML的不同位置，对页面的显示完成是有影响的。一个设计良好的页面，会考虑到这个顺序并且让显示最优化。

浏览器的种类
前面提到过，不同的电脑操作系统，有着不同的浏览器软件，而且版本繁杂。但万变不离其宗，一个浏览器，基本的功能就是打开一个标准的页面，并且按照页面里面的编码把设计好的内容在浏览器里显示出来，并且提供给使用者进行操作。不同的浏览器就是一个壳，加上不同公司开发的内核引擎，这些引擎都需要支持基本的网页技术规范，但不同的内核对结构、样式和JS的部分细节各自解释不一，从而对同一个页面文件的显示效果和速度也会有不一致。浏览器的内核可以分为两部分，渲染引擎（页面结构显示内容功能）和JS引擎（解释js语言和运行的部分）。我们最常见的浏览器核心有以下几种：
Trident内核：微软IE系列浏览器的内核。由于长期的垄断地位，不思进取，且和W3C规范总是不同步，喜欢搞自己的一套规范，还有大量的错误没有被及时更新。随着其他核心的浏览器崛起，其市场份额大幅下降，从IE8开始才逐步改观，逐步开始全面支持新的网页技术规范。
Gecko内核：网景/火狐公司开发的开源内核，主要应用在火狐浏览器上，是W3C兼容性最好的浏览器引擎之一。
WebKit内核：苹果公司基于KHTML内核开发的，主要用在CHROME谷歌浏览器和苹果的safari浏览器上。尤其其中对于JS的解释引擎V8是目前速度最快、性能极佳的产品。相对来说，兼容性好，速度快。
Presto内核：Opera公司开发，主要应用于Opera浏览器。速度极快，但是牺牲了一部分兼容性。
目前市面上还有各种其他的浏览器，如360、QQ、百度、搜狗等，其本质都是外壳加一个或者多个上述的核心，来实现所谓的“极速模式”和“兼容模式”的切换。

HTML简介：结构和元素
HTML的全称是“超级链接标记语言”。用文本软件打开一个HTML文档，或者在页面上用点击右键选择“查看源代码”，就可以看到这个文件的内容了。这个语言的的基本特点，就是用” <标签名>内容</标签名> "来定义页面的元素，然后用很多组这样的元素相互嵌套，来描述页面的结构。
W3C对HTML部分的规范，目前常见的是HTML4.01的版本，正在向HTML5的版本进行过渡。目前新的浏览器版本，均已经可以支持HTML5版本规范。
一个HTML的基本结构如下：（HTML5）
<!DOCTYPE html> 这行是标明了HTML的版本
<html > 结构的开始部分
<head> 头信息部分
...... 具体的一些配置信息
</head>
<body> 结构的主体部分
...... 具体的页面元素
</body>
</html> 结构结束标记
HTML5相对4，做了一些结构定义的优化。另外，浏览器对HTML文件的解析是相当宽松的，大部分情况下，即使标签输入有错误或者不规范，浏览器也能自动加载并优化，很少会因为这个报错。即便如此，还是需要有良好的编程规范，例如：标签名统一用小写；标签需要完整闭合。
HTML是语义优先的原则，在里面最主要的是有明确含义的元素以及其嵌套结构，以及样式表、JS代码文件的引用。
头信息部分：里面规定了很多配置信息，例如
<title>页面标题</title> 页面标题的显示内容
<link rel="stylesheet" type="text/css" href="mystyle.css"> 外部css样式文件的应用
<meta http-equiv="refresh" content="30"> 元数据设定，每隔30秒自动刷新一次
页面的样式表和JS代码，也可以在这里被直接页内引用，尽管不推荐，但是可以如此使用：
<style> </style>里面可以定义页面的CSS元素样式；
<script></script>里面可以写JS代码。
主体部分里面，我们可以看到很多元素，在HTML规范里以标签名的形式做了定义。我们把这些元素的分为两大类：
第一类：页面具体功能元素：比如文本段落；图片、音频、视频元素；数据表格；可以接受用户进行输入的各类表单；供用户点击跳转的超级链接；各种带编号和无编号的列表（导航菜单的基本形式）等等，都举几个例子：
<img src="img1.jpg" alt="a img">
<h1> 一段文字的标题 </h1>
<ul>
<li> list1 </li>
<li> list2 </li>
</ul>
这段代码的语义，就是在页面上定义了一个图片，一个文档标题，还有一个无序的列表。HTML5相对HTML4，增加了更多的针对多媒体、绘图的新元素定义，更有助于页面的设计开发。
第二类：页面结构元素。在HTML4，基本上就是指<div> </div> 和 <span></span> 这两个元素，其作用就是在页面上定义一个区块，然后在这个区块里面来放置具体的功能元素，也就是起到“容器”的作用。对容器属性的设置，可以作用到容器内部的元素，这样就有助于页面的结构化。这里可以看出，区块元素本身是没有语义化的，需要用其他的属性值来表明它真正的用途所在。而在HTML5规范里面，为了进一步增加页面代码的语义化，根据区块的功能，增加了很多具有直接语义功能的结构元素，能够直观的从标签名称上就看出结构含义，比如：
<nav> </nav> 导航区块
<article> </article> 文章区块
<aside> </aside> 文章关联的侧边区块
<menu> </menu>菜单区块
<footer></footer>页脚区块

HTML简介：元素的属性
HTML的每个元素，都有属性的概念。属性就是对该元素进行各类性质的描述。我们把所有的属性分成几类：
一、标示类的属性：例如 id属性，用来唯一性标示一个元素的名字；class属性，用来标示元素分类等。该属性应该在HTML的元素标签里面直接进行定义。举例：
<p id="firstText" class="textContent">
...
</p>
这里给文本段落定义了标示属性，标示这段内容属于一个叫textContent的类，唯一名称是firstText。
二、表现类的属性：例如文本字段里字体大小属性，表格的边框是否显示，某个元素的显示位置等等。在一个良好的HTML文档里面，这类属性不应该在主文档里直接设置，按照结构、样式行为的原则，应该在样式表里面针对class和id进行元素的样式设置，在没有样式表的情况下，浏览器按照默认的样式予以渲染。在HTML5规范里面也已经将原有版本中此类属性予以废除。
三、特定元素属性：有些元素有很多特定属性，来决定其在页面里的功能。例如：
<a href="url">Link text</a> 这是一个页面上的超链接的元素，这里的href属性，就决定了点击链接后对应的链接地址；
<form>
name: <input type="text" name="firstname">
Password: <input type="password" name="pwd">
</form>
这是一个表单元素，type属性决定了输入框的形式，第一个type属性的text说明这是一个文本输入框，第二行的password则表明的这是一个密码输入框，输入的时候会显示成*****。
因此，设计和分析页面的基础是，掌握好HTML的各类元素，以及这些元素所拥有的各类属性。

这一弹都有哪些更深入的技术主题？
包括并不限定于：
浏览器发展简史，各类内核的优缺点
如何判断一个浏览器的内核
浏览器对网页解析、渲染的过程深入理解
HTML，HTML5的各类元素，通用属性和特定属性
HTML,HTML5头部信息设置
设计原则：语义优先，样式行为分离的思想和应用

web技术入门第三弹 页面开发技术基础（一）

web技术入门第三弹页面开发技术基础（一）