一、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. Linux基础知识第六讲,远程管理ssh操作

    目录 Linux基础知识第六讲,远程管理ssh操作 一丶什么是SSH 1.什么是SSH 2.了解域名跟端口 二丶SSH命令以及远程连接linux进行维护 1.ssh命令格式 2.scp远程终端拷贝文件 ...

  2. pwnable.tw unexploitable 分析

    这题是和pwnable.kr差不多的一道题,主要区别在于没有给syscall.所以需要自己去找. 只有read和sleep两个函数. 思路一是首先劫持堆栈到bss段,然后调用read函数将sleep的 ...

  3. 滚动 docker 中的 nginx 日志

    Nginx 自己没有处理日志的滚动问题,它把这个球踢给了使用者.一般情况下,你可以使用 logrotate 工具来完成这个任务,或者如果你愿意,你可以写各式各样的脚本完成同样的任务.本文笔者介绍如何滚 ...

  4. 痞子衡嵌入式：ARM Cortex-M文件那些事（8）- 镜像文件(.bin/.hex/.s19)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式开发里的image文件(.bin, .hex, .s19). 今天这节课是痞子衡<ARM Cortex-M文件那些事>主 ...

  5. WPF 语言格式化文本控件

    前言 本章讲述正确添加语言资源的方式,以及一段语言资源的多种样式显示. 例如:“@Winter,你好!感谢已使用软件 800 天!” 在添加如上多语言资源项时,“XX,你好!感谢已使用软件 X 天!” ...

  6. Asp.Net Core中使用MongoDB的入门教程,控制台程序使用 MongoDB

    内容来源  https://blog.csdn.net/only_yu_yy/article/details/78882446 首先,创建一个.Net Core的控制台应用程序.然后使用NuGet导入 ...

  7. java Calendar的学习分享

    前言: 在我们的日常生活中,常常能看见时间.如:在我们的手机里,在一些网站上也能随处看到时间.那我们在项目的开发中,也常常涉及到时间的处理,对于我们经常会遇到和处理的问题.Java中专门为我们处理时间 ...

  8. zepto和jQuery on事件委托在苹果手机上的”坑“

    移动端用zepto做的页面,突然发现on绑定的click事件并没有触发,代码如下: <ul> <li class="a">1111111aaaaaaasss ...

  9. 从.Net到Java学习第六篇——SpringBoot+mongodb&Thymeleaf&模型验证

    SpringBoot系列目录 SpringBoot整合mongodb MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的.如果你没用过Mong ...

  10. arcgis for js学习之Graphic类

    arcgis for js学习之Graphic类 <title>Graphic类</title> <meta charset="utf-8" /> ...