Web前端知识点记录
一、HTML的加载顺序
- 浏览器边下载HTML，边解析HTML代码，二者是从上往下同步进行的
- 先解析<head>中的代码，在<head>中遇到了<script>标签，暂停解析，网页渲染的控制权转交给JavaScript引擎，如果< script >标签引用了外部脚本，就下载该脚本，否则就直接执行，并会阻塞后续的资源下载与执行，因为js有可能修改dom，如果不阻塞后续的资源下载，dom的操作顺序不可控。
- 当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前端知识点记录的更多相关文章
- web前端知识点
一.CSS问题 1.flex布局 display:flex; 在父元素设置,子元素受弹性盒影响,默认排成一行,如果超出一行,按比例压缩 flex:1; 子元素设置,设置子元素如何分配父元素的空间,fl ...
- web前端知识点（JavaScript篇）
call,apply,bind call,apply,bind这三者的区别,及内部实现原理,点这里 promise promise函数的内部实现原理,点这里 闭包 闭包就是能够读取其他函数内部变量的函 ...
- web前端知识点1
1. input属于窗体元素,层级显示比flash.其它元素都高.请判断这句话的正确与否. 错误 层级显示优先级: frameset > 表单元素 > 非表单元素 在html中,帧元素(f ...
- web前端知识点反思总结
当别人问你之前的知识,我们便会勾起之前的回忆,然后进行一番痛苦的挣扎后,发现我依然记得你 什么是 DTD ? 文档类型定义 (DTD) 可定义合法的 xml 文档的构建模块 ,他是使用一系列合法的元素 ...
- Web 前端知识点
- WEB前端开发记录PS常见操作
1.相邻2个层合并的快捷键方法:先选择上面的一个层,再按ctrl+e. 2.合并一个组内的多个层或组:在该组单击右键,选择“转换为智能对象”,然后可对其进行其它操作,比如:截取该组的为一张图片:ctr ...
- web前端知识点（webpack篇）
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency gr ...
- web前端技术合集
视频课程包含: 微服务精品课程包含:Ajax和Jquery基础入门视频.ajax教程.css视频教程.JQuery视频教程.MUI快速混合APP开发-视频.vuejs教程.极客学院HTML5全套教程. ...
- Web前端理论知识记录
Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...
随机推荐
- Session执行机制与原理
Session执行机制与原理 作者:Stanley 罗昊 [转载请注明出处和署名,谢谢!] 什么是Session 首先了解一下Session的中文意思:一次会话,什么是一次会话呢?我举个例子:就我们现 ...
- leetcode — reverse-linked-list-ii
/** * Source : https://oj.leetcode.com/problems/reverse-linked-list-ii/ * * * Reverse a linked list ...
- -1-1 java 基础语法 java关键字 java 注释 常量 语句 运算符 函数 数组定义
Java语言基础组成 关键字 标识符 注释 常量和变量 运算符 语句 函数 数组 关键字 定义:被Java语言赋予了特殊含义的单词 特点:关键字中所有字母都为小写 用于定义数据类型的关键字 class ...
- 基本 SQL 之数据库及表管理
上篇文章,我们基于『数据库』做了一个宏观上的介绍,你应当了解到数据库是在何种背景下,为了解决什么样的问题而诞生的,以及在具体实现下又可以划分哪些中类型. 非关系型数据库的种类很多,我们会在后续的篇章中 ...
- Python并发编程之学习异步IO框架：asyncio 中篇（十）
大家好,并发编程 进入第十章.好了,今天的内容其实还挺多的,我准备了三天,到今天才整理完毕.希望大家看完,有所收获的,能给小明一个赞.这就是对小明最大的鼓励了.为了更好地衔接这一节,我们先来回顾一下上 ...
- Sqlite操作帮助类
sqlite帮助类 using System; using System.Collections.Generic; using System.Linq; using System.Text; us ...
- Java开发笔记（三十八）利用正则表达式校验字符串
前面多次提到了正则串.正则表达式,那么正则表达式究竟是符合什么定义的字符串呢?正则表达式是编程语言处理字符串格式的一种逻辑式子,它利用若干保留字符定义了形形色色的匹配规则,从而通过一个式子来覆盖满足了 ...
- Java开发笔记（三十九）日期工具Date
Date是Java最早的日期工具,编程中经常通过它来获取系统的当前时间.当然使用Date也很简单,只要一个new关键字就能创建日期实例,就像以下代码示范的那样: // 创建一个新的日期实例,默认保存的 ...
- 【Linux】常用命令，持续更新
Linux 一.linux的组成 内核,shell,文件系统,应用程序 二.linux目录结构 bin,sbin,home,root,boot,dev,etc,lib, 三.文件目录操作 ls,cd, ...
- 【代码笔记】Web-CSS-CSS Padding（填充）
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...