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) ...
随机推荐
- SQL Server查询所有的表名、字段名、注释
SELECT 表名 then d.name else '' end, 表说明 then isnull(f.value,'') else '' end, 字段序号=a.colorder, 字段名=a.n ...
- 我是这样理解HTTP和HTTPS区别的
为何要用https? http协议的缺点 通信使用明文,内容可能被窃听(重要密码泄露) 不验证通信方身份,有可能遭遇伪装(跨站点请求伪造) 无法证明报文的完整性,有可能已遭篡改(运营商劫持) 用htt ...
- nginx错误界面优化和日志管理
nginx错误界面优化 在进行web访问的时候,经常会遇到网站打不开报错的情况,nginx默认的界面并不美观,我们可以通过重定向到自定义的错误页面,提升用户体验,比如淘宝的错误页面还有商品信息和广告. ...
- MySql如何查询JSON字段值的指定key的数据
实例:SELECT param->'$.pay' as pay_type FROM game.roominfo; 其中:param是roominfo表的一个字段,当中存的是JSON字符串,pay ...
- 解决ASP.NET MVC 接受Request Payload参数问题
今天与跟前端小伙伴对接口,发现微信小程序的POST带参数传值HttpContent.Request[]接收不到参数. 拿小程序官网文档举例 wx.request({ url: 'Text/Text', ...
- 【Nginx】使用nginx反向代理IIS实现80端口的解放
下载版本: 官网地址:http://nginx.org/en/download.html 我使用了稳定版本. 下载完成之后进行目录解压,解压之后大概就是这个样子: 网上很多人写这些了想了解概念的百度一 ...
- sprinbcloud学习之-Failed to bind properties under 'logging.level' to java.util.Map<java.lang.String>
日志报错,提示Failed to bind properties under 'logging.level' to java.util.Map<java.lang.String>, 原因为 ...
- 一文看懂HTTPS的核心知识
1.HTTPS历史 由于HTTP的消息传输的安全隐患,于是网景公司在1994年设计了SSL(Secure Sockets Layer,安全套接字层)协议,目的是保障网上交易安全,从而就诞生了HTTPS ...
- Hacking Box Droopy: v0.2
概述: 目标:get flag 下载链接: https://www.vulnhub.com/entry/droopy-v02,143/ 工具: kail linux 开工 1)扫描开道: # netd ...
- Numpy常用概念-对象的副本和视图、向量化、广播机制
一.引言 在我们操作数组的时候,返回的是新数组还是原数组的链接,我们就需要了解对象副本和视图的区别. 向量化和广播是numpy内部实现的基础. 二.对象副本和视图 我们应该注意到,在操作数组的时候返回 ...