一、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. Apache coredump 问题发现与解决记录

    目录 Apache coredump 问题发现与解决记录 背景 发现问题 解决问题 方法 1 方法 2 总结 Linux 程序编译链接动态库版本问题 ldd 命令 动态库的编译和 soname 线上 ...

  2. BEAMER中 Package Listings Warning: Text dropped after begin of listing on input line xx

    Latex Beamer 模板 frame 中使用 listings package时总出现标题所示错误,无法前进.解决方法是在\begin{frame}后加上一个选项,即:\begin{frame} ...

  3. Python面向对象：杂七杂八的知识点

    为什么有这篇"杂项"文章 实在是因为python中对象方面的内容太多.太乱.太杂,在写相关文章时比我所学过的几种语言都更让人"糟心",很多内容似独立内容.又似相 ...

  4. 如何正确使用Java序列化？

    前言 什么是序列化:将对象编码成一个字节流,这样一来就可以在通信中传递对象了.比如在一台虚拟机中被传递到另一台虚拟机中,或者字节流存储到磁盘上. “关于Java的序列化,无非就是简单的实现Serial ...

  5. DSAPI多功能组件编程应用-网络相关(中)

    [DSAPI.DLL下载地址] 在中篇,我将演示比上篇稍微复杂点的功能.如HTTP监听和局域网广播. 有时,我们会有这样的需求:用户通过浏览器来访问获取数据,我们的程序需要监听指定端口,根据不同的请求 ...

  6. vb.net連接SQL数据库

    '導入命名空間Imports System.Data.SqlClient '定義變量 Dim Sql As String 'SQL字串 Dim Sqlado As SqlConnection '连接数 ...

  7. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  8. MySQL如何修改密码

    以下几种方法可供选择 第一种方式: 最简单的方法就是借助第三方工具Navicat for MySQL来修改,方法如下: 1.登录mysql到指定库,如:登录到test库. 2.然后点击上方“用户”按钮 ...

  9. Building QGIS from source - step by step（随笔2）

    QT安装 在Windows上安装QGIS,首先需要安装VS,VS的版本根据需要的版本下载,注意QGIS版本与VS版本对应.另外QT下载安装也需要与VS版本的安装对应.本机系统装的VS10,对应QT版本 ...

  10. Android程序员的Flutter学习笔记

    作为忠实与较资深的Android汪, 最近抽出了一些时间研究了一下Google的亲儿子Flutter, 尚属皮毛, 只能算是个简单的记录吧. Google自2017年第一次提出Flutter, 到20 ...