web前端-HTML知识体系（初学者）

1、web语义化和SEO

web语义化是根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码，同时让浏览器的爬虫和机器更好地解析代码。

SEO是指在了解搜索引擎自然排名的机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎关键字中的排名，获得等多的展现量，吸引更多目标客户点击访问网站，从而达到网络营销及品牌建设的目标。

搜索引擎通过爬虫技术获取的页面就是由一堆HTML标签组成的代码，人可以通过可视化的方式来判断页面上哪些内容是重点，而机器做不到。但搜索引擎会根据标签的含义来判断内容的权重，因而在合适的位置使用合适的标签，使整个页面的语义明确，结构清晰，搜索引擎才能正确视频页面中的重要内容，并予以较高的权重。

2、页面渲染机制

页面渲染就是浏览器的渲染引擎将HTML代码根据css定义的规则显示在浏览器窗口的过程。大致工作原理如下：

a.用户输入网址，浏览器享服务器请求，服务器返回HTML文件；

b.渲染引擎开始载入HTML代码，并将HTML中的标签转化为DOM节点，生成DOM数；

c.如果引用了外部css文件，则发出css文件请求，服务器返回该文件；

d.如果引用了外部js文件，则发出js文件请求，服务器返回该文件后开始运行；

e.渲染引擎继续载入HTML中的部分代码，并开始解析前面返回的css文件，然后根据css选择器计算出节点的样式，创建渲染树；

f.从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该出现在屏幕上的精确坐标；

g.如果body中引用了图片资源，则立即向服务器发送请求，此时，渲染引擎不会等待图片下载完毕，而是继续渲染后面的代码；

h.服务器返回图片，由于图片占用了一定面积，影响了后面段落的排版，因而搜索引擎需要回过头来重新渲染这部分代码；

i.如果此时js脚本中运行了style.display="none"，布局被改变，引擎也需要重新渲染这部分代码。

3、重绘和回流

渲染树中过的一部分或全部因元素的规模尺寸、布局、隐藏等改变而需要重新构建，就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。

渲染树中的一些元素需要更新属性，但这些属性只是影响元素的外观、风格，而不会影响的布局的，就称为重绘。

4、本地存储

本地存储原始的方式就是cookie，cookie是存放在本地的一段文本，数据以键值对的形式保存，可以设置过期时间。但是cookie不适合存大量数据，cookie的大小被限制在4k左右。因为每次请求页面，cookie都会发送给服务器，这使得cookie速度很慢而且效率也不高。

HTML5还提供了两种在客户端存储数据的方法：永久存储localStorage和临时存储sessionStorage，它们都是以key：value对的形式来存储数据。

此外HTML5还提供了逆天的websql和indexedDB，允许前端以关系型数据库的方式来存储本地数据。

5、浏览器缓存机制

浏览器缓存机制是通过HTTP协议中的Cache-Control和Last-Modified等字段来控制文件缓存的机制。

Cache-Control用于控制文件在本地缓存的有效时长，Cache-Control标识文件在服务器上的最新更新时间。二者通常一起使用，一个用于控制缓存有效时间，一个在缓存失效后，向服务器查询是否有更新。

注意两种特殊情况：

a.手动刷新（F5），浏览器会直接任务缓存已过期，在请求中加上字段Cache-Control: max-age=0，发包向服务器查询时候有文件更新；

b.强制刷新页面（CTRL+F5），浏览器会直接忽略本地的缓存，在请求中加上字段Cache-Control: no-cache或Pragma: no-cache，发包向服务器重新拉取文件。

6、History

用户访问页面的历史纪录，通常会被保存在一个类似栈对象的history对象中，点击返回就出栈，下一页就进栈。

window.history.back()返回上一个页面

window.history.forward()跳到下一个页面

window.history.go([detal])跳转到指定页面

HTML5为history新增了两个api和一个事件：

pushState：压栈，往history对象里添加一个新的历史记录；

replaceState：替换history对象中的当前历史记录；

onhashchanage：点击浏览器后退按钮或js调用history.back都会出发这个事件。

7、HTML5离线缓存

即application cache，是从浏览器的缓存中分出来的一块缓存区，如果要在这个缓存中保存数据，可以使用一个描述文件manifest file，列出要下载和缓存的资源。

描述文件是简单的文本文件，它告知浏览器要缓存的内容。

离线缓存具有以下优势：

流线浏览：用户可以在离线时使用它们；

速度：已缓存的资源加载地更快；

减少浏览器负载：浏览器将只从服务器下载更新过或更改过地资源。

8、canvas和SVG

canvas通过JavaScript来绘制2D图形，是逐像素进行渲染的。在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注，如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或已经被图形覆盖的对象。

SVG是基于XML的一种使用XML描述2D图形的语言，SVG DOM中的每个元素都是可用的，可以为某个元素添加JavaScript事件处理器。在SVG中，每个被绘制的图形均被视为对象，如果SVG对象属性发生变化，浏览器就会自动重现图形。

canvas与SVG相比，canvas更以来分辨率，不支持事件处理器，文本渲染能力弱，比较适合密集型游戏，其中许多对象会被频繁绘制，而SVG则比较适合类似谷歌地图带有大型渲染区域的应用游戏。

 

 

ps：HTML5特性

1、语义特性：对网页定义了更好的语义和结构，丰富的标签对网页的显示有更细致的可控性。

2、本机存储特性：基于HTML5开发的网页同通过HTML5 APP Cache，以及本机的存储功能， 拥有更短的启动时间，更快的浏览速度。

3、设备兼容特性：提供了API接口，可以使外部应用直接与浏览器内部数据相连。

4、连接特性基于：具有更高效的连接方式，带来更快速的网页游戏体验。

6、网页多媒体特性：支持在网页上直接执行Audio、Video等多媒体功能，不需要再安装额外的插件。

7、三维立体、图形和特效：基于SVG、Canvas、WebGL以及CSS的3D功能，可以显示出各种令人惊叹的图案动画。

8、性能与集成特性：通过XMLHttpRequest2等技术，帮助应用程序和网站能够在多种环境下快速执行。

9、CSS3特性：在不牺牲性能和语义结构的前提下，CSS3提供更多的风格和更强的效果，在Web的开放字体格式也提供了更高的灵活性和控制性。