一、HTML的加载顺序

  1. 浏览器边下载HTML，边解析HTML代码，二者是从上往下同步进行的
  2. 先解析<head>中的代码，在<head>中遇到了<script>标签，暂停解析，网页渲染的控制权转交给JavaScript引擎，如果< script >标签引用了外部脚本，就下载该脚本，否则就直接执行，并会阻塞后续的资源下载与执行，因为js有可能修改dom，如果不阻塞后续的资源下载，dom的操作顺序不可控。
  3. 当head中代码解析完毕，会开始解析body中的代码，如果此时head中引用的外部文件没有下载完，将会继续下载，此时浏览器继续解析body代码中的元素，会按照head中声明一部分样式去解析，如果此时遇到body标签中的<script>，同样会将控制权交给JavaScript引擎来解析JavaScript，执行完毕，控制权交还渲染引擎，恢复往下解析HTML网页

总结：如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“阻塞效应”。html需要等head中所有的js和css加载完成后才会开始绘制，但是html不需要等待放在body最后的js下载执行就会开始绘制，因此将js放在body的靠后的位置，可以避免资源阻塞，同时使静态的html页面迅速显示。将脚本文件都放在网页尾部加载，还有一个好处,在DOM结构生成之前就调用DOM，JavaScript会报错，如果脚本都在网页尾部加载，就不存在这个问题，因为这时DOM肯定已经生成了，所以js一般都放到body元素的最后。

二、标准盒子模型和IE盒子模型

标准盒子模型就是W3C盒子模型，IE盒子模型(IE5.5之前使用)又叫做怪异盒子模型，二者的区别在于width和height的不同。

从图中可以看出标准盒子模型的宽和高都是指content(内容)的宽和高，而IE盒子模型的宽和高要包括panding和border。

在HTML文件中使用<!DOCTYPE html>来让浏览器用标准盒子模型来解析

三、常用标签知识点

1. 块级标签、行级标签及行内块标签

行及标签

特点：在一行内显示（在一行中可以并列多个行级标签），对宽高属性值不生效，完全靠内容撑开宽高

　　常见行级标签：span、a、em、font

块级标签

特点：独占一行，能设置width，height属性，如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；

　　常见块级标签：div、p、ul、li、h1~h6

行内块标签

特点：结合的行内和块级的特点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；

　　常见行内块标签：img、input、textarea

通过display属性来对标签显示模式的相互转换

1、块级标签转换为行内标签：display:inline;

2、行内标签转换为块级标签：display:block;

3、转换为行内块标签：display：inline-block;

Web前端知识点记录的更多相关文章

  1. web前端知识点

    一.CSS问题 1.flex布局 display:flex; 在父元素设置,子元素受弹性盒影响,默认排成一行,如果超出一行,按比例压缩 flex:1; 子元素设置,设置子元素如何分配父元素的空间,fl ...

  2. web前端知识点（JavaScript篇）

    call,apply,bind call,apply,bind这三者的区别,及内部实现原理,点这里 promise promise函数的内部实现原理,点这里 闭包 闭包就是能够读取其他函数内部变量的函 ...

  3. web前端知识点1

    1. input属于窗体元素,层级显示比flash.其它元素都高.请判断这句话的正确与否. 错误 层级显示优先级: frameset > 表单元素 > 非表单元素 在html中,帧元素(f ...

  4. web前端知识点反思总结

    当别人问你之前的知识,我们便会勾起之前的回忆,然后进行一番痛苦的挣扎后,发现我依然记得你 什么是 DTD ? 文档类型定义 (DTD) 可定义合法的 xml 文档的构建模块 ,他是使用一系列合法的元素 ...

  5. Web 前端知识点

  6. WEB前端开发记录PS常见操作

    1.相邻2个层合并的快捷键方法:先选择上面的一个层,再按ctrl+e. 2.合并一个组内的多个层或组:在该组单击右键,选择“转换为智能对象”,然后可对其进行其它操作,比如:截取该组的为一张图片:ctr ...

  7. web前端知识点（webpack篇）

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency gr ...

  8. web前端技术合集

    视频课程包含: 微服务精品课程包含:Ajax和Jquery基础入门视频.ajax教程.css视频教程.JQuery视频教程.MUI快速混合APP开发-视频.vuejs教程.极客学院HTML5全套教程. ...

  9. Web前端理论知识记录

      Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...

随机推荐

  1. ES6躬行记（13）——类型化数组

    类型化数组(Typed Array)是一种处理二进制数据的特殊数组,它可像C语言那样直接操纵字节,不过得先用ArrayBuffer对象创建数组缓冲区(Array Buffer),再映射到指定格式的视图 ...

  2. ubuntu 15.10 设置静态ip 分配固定ip 设置dns 设置网关 命令行配置ip 固定ip不生效怎么办

    要用到的文件: 配置接口信息 /etc/network/interfaces 配置内容: auto eth0 iface eth0 inet static address 192.168.216.18 ...

  3. .NET Core[MVC] 利用特性捕捉异常

    声明:本方式适用于MVC.本代码只适用于.NET Core MVC. 先创建一个类继承ExceptionFilterAttribute这个抽象类,并override它的方法OnException. 代 ...

  4. IT公司PM沟通那儿些事(一)

    本质:传递信息 沟通是不同的行为主体,通过各种载体实现信息的双向流动,形成行为主体的感知,以达到特定目标的行为过程. 信息的准确性弥足珍贵,在工作中,沟通传递的是应该是信息本身,而非情绪. 目标:解决 ...

  5. 【微服务No.2】polly微服务故障处理库

    熔断.降级: 熔断:熔断就是我们常说的“保险丝”,意为当服务出现某些状况时,切断服务,从而防止应用程序不断地常识执行可能会失败的操作造成系统的“雪崩”,或者大量的超时等待导致系统卡死等情况,很多地方也 ...

  6. MySQL优化特定类型的查询

    优化关联查询 如果想要优化使用关联的查询,我们需要特别留意以下几点: 确保ON或者USING子句中的列上有索引.在创建索引的时候需要考虑到关联的顺序.当表A和表B用列c关联的时候,如果优化器的关联顺序 ...

  7. append和appendTo的区别！

    今天在写dome的时候,碰到了一小点问题,就是我们想把一个小效果用jquery的办法添加到HTML页面中.我用的办法就是先在HTML中把代码写完,js和css同样写好并调试完成后.然后只保存外面最大的 ...

  8. TypeScript，初次见面，请多指教 ?

    为什么用 TS ? 说实话,最开始并没有想把 TS 用到实际项目中来,一来是感觉"类型"会限制 JS 的优势(好吧,就是浪写浪惯了):二来听闻 TS + Redux 的酸爽滋味,有 ...

  9. 解决注册并发问题并提高QPS

    前言:前面在本地的windows通过apache的ab工具测试了600并发下“查询指定手机是否存在再提交数据”的注册功能会出现重复提交的情况,并且在注册完成时还需要对邀请人进行奖励,记录邀请记录,对该 ...

  10. SpringBoot 配置定时任务

    SpringBoot启用定时任务,其内部集成了成熟的框架,因此我们可以很简单的使用它. 开启定时任务 @SpringBootApplication //设置扫描的组件的包 @ComponentScan ...