HTML相关

1 语义化

header : 定义了文档的头部区域，在一个文档中可以定义多个<header>元素。它是块元素

nav ：导航

section ：1.定义文档中的节，和div类似。2.定义文章，这时一般带有标题

footer ：定义文档页脚，它不只是页面的最底部，在文档中也可以定义多个

article : 定义页面独立的内容区域，标签定义的内容本身必须是有意义且必须独立于文档的其他部分，可用在的地方：博客文章，新闻，评论等。

aside : 定义页面的侧边栏内容

progress ：显示数据的进度，属性value指定当前值，max最大值，最小值0不用设置

div ：无语义，理解为块

其他 video audio time ruby details等 

1.1 语义化好处：

    1、用正确的标签做正确的事情。

    2、html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；

    3、即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；

    4、搜索引擎的爬虫也依赖于HTML标记确定上下文和各个关键字的权重，利用SEO;

    5、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

2 http 加载过程

   a. 域名解析

    b. 发起TCP的3次握手

    c. 建立TCP连接后发起http请求

    d. 服务器端响应http请求，浏览器得到html代码

    e. 浏览器解析html代码，并请求html代码中的资源

    f. 浏览器对页面进行渲染呈现给用户

4  浏览器加载页面过程

浏览器接收到html代码，开始解析。

解析过程是先构建dom树，再根据dom树构建渲染树，渲染树根据渲染树就会绘制到浏览器上。

构建dom树的过程即根据html代码自上而下构建dom树，当遇到script文件加载／执行会阻塞后面dom树的构建（javascript可能会改变dom树），而遇到css文件则会阻塞渲染树的构建，即dom树依然继续构建（除非遇到script标签并且css文件依旧未加载完成），但不会渲染绘制到页面上。

浏览器渲染页过程描述

1、浏览器解析html源码，然后创建一个DOM树。

在DOM树中，每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。

DOM树的根节点就是documentElement，对应的是html标签。

2、浏览器解析CSS代码，计算出最终的样式数据。

对CSS代码中非法的语法它会直接忽略掉。

解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置，用户设置，外联样式，内联样式，html中的style(嵌在标签中的行间样式)。

3、创建完DOM树并得到最终的样式数据之后，构建一个渲染树。

渲染树和DOM树有点像，但是有区别。DOM树完全和html标签一一对应，而渲染树会忽略不需要渲染的元素(head、display:none的元素)。

渲染树中每一个节点都存储着对应的CSS属性。

4、当渲染树创建完成之后，浏览器就可以根据渲染树直接把页面绘制到屏幕上。