在上一篇中说到了作用域,简单介绍了一下块级作用域,在这里我们来详细介绍一下。 众所周知,在js中函数作用域是常见的单元作用域,也是现行的大多数js中最普遍的设计方案。...但其他类型的作用域单元也是存在的,并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀、简洁的代码。这就是我们现在要说的块级作用域。...那么都有什么可以形成块级作用域呢,下面我们来看一下 try/catch 这个东西相信很多人也都用过,但是我们大部分时间写代码都是在try块中写的,不要认为try中写的代码就是块级作用域,其实里面声明的变量也会被声明为全局变量...总结 块级作用域非常有用的一点和闭包及回收内存垃圾的回收机制相关。...提供了块级作用域,但是我们应该合理的在代码中使用,结合不同场景使用不同的作用域,创造可读、可维护的优良代码。
块级元素: 块级元素会占据其父元素(容器)一整行的空间,默认情况下块级元素会新起一行。...块级元素的 padding 和 margin 内外边距都可以起作用,但是不管宽度设定为多少,都会占据一整行的空间。...还有一些不常用但很有意思的块级元素: 不支持脚本或禁用脚本时显示的内容。 预格式化文本。 联系方式信息。 块引用。...行内块级元素: 行内块级元素也被称为可置换元素,它们既可以设置宽高又不会占据一整行的空间。 常见的行内块级元素有 img , button , input , select , textarea 。...» 行内元素、块级元素和行内块级元素的区别和联系
前言 HTML元素按布局属性可以分为三种类型:块级元素、行内元素、行内块元素 这篇文章梳理一下他们的区别与联系 一、区别 1.块级元素 属性 默认独占一行 如果不设置宽度,默认是父级的宽度。...即使设置的宽度,也会占用一行 可以设置全部属性 2.行内元素 属性 不会独占一行,可以与其他非块级元素同行 不是全部属性都生效。margin的上下,padding的上下,宽度,高度都不可以设置。...行内元素里面不可以嵌套块级元素 3.行内块元素 属性 不会独占一行,可以与其他非块级元素同行 可以设置全部属性 代码换行时,会出现间隔。...二、联系 可以通过css的display的属性来转换 block 块级元素 inline 行内元素 inline-block 行内块级元素 display: block; // 设置元素为块级元素...display: inline: // 设置元素为行内元素 display: inline-block; // 设置元素为行内块元素 三、常见标签 1.块级元素 div,p,ul,li(列表)
ES6 允许块级作用域的任意嵌套。...但是,浏览器没有遵守这个规定,为了兼容以前的旧代码,还是支持在块级作用域之中声明函数,因此上面两种情况实际都能运行,不会报错。 ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。...原来,如果改变了块级作用域内声明的函数的处理规则,显然会对老代码产生很大影响。...同时,函数声明还会提升到所在的块级作用域的头部。 注意,上面三条规则只对 ES6 的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当作let处理。...根据这三条规则,浏览器的 ES6 环境中,块级作用域内声明的函数,行为类似于var声明的变量。上面的例子实际运行的代码如下。
可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展。 1. 块作用域{ } JS中作用域有:全局作用域、函数作用域。...没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。 块作用域由 { } 包括,if语句和for语句里面的{ }也属于块作用域。...块作用域 的变量 // console.log(bb); // 报错 bb is not defined // console.log(cc); // 报错 cc...is not defined } 2. var、let、const三者的区别 var定义的变量,没有块的概念,可以跨块访问, 不能跨函数访问。...let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问。 const用来定义常量,使用时必须初始化(即必须赋值),只能在块作用域里访问,而且不能修改。
(newBox) } //调用方法: 测试按钮 测试内容 3. js 获取文档高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 4. js获取对象字符串,截取所需位数的内容 var data = $('a').text...动态插入js function loadScript(url, callback) { //创建script var script = document.createElement("script"..."); 11. js实现页面跳转的几种方式 a. window.kk="login.jsp?
p是个文本级标签,但是是个块级元素。 ... ... 链接 换行 ... 加粗 ...... 下拉列表 2.块级元素: 特点: 霸占一行,不能与其他任何元素并列。能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%。...块级元素:所有的容器级标签,都是块级元素,以及p标签。div , h系列 , li , dt ,dd。... 3.行内块元素 特点: 和相邻的行内元素(包含行内块)在一行上,它们直接会有空白缝隙; 一行可以显示多个; 默认宽度就是内容的宽度; 高度、宽度、内外边距都可以自定义; 注意了:...它的 display 属性的默认值是 inline,但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的,使得它就像 inline-block 一样。
变量声明不会提升 直接写出下边程序的输出结果 console.log(foo); var foo = "test" 答案: undefined 解析: 变量foo,相当于只有var foo;但是却没有赋值...,所以值是undefined,并且变量的声明并不会提升,只有函数声明会提升 词法作用域 写出下面一段代码输出结果 var temp = 123; function f() { console.log...它先会从函数内沿着作用域链逐级向外进行查找,若有则会返回,若无,则会返回undefined, 使用var声明的变量并不会有块级作用域,在if语句块声明赋值的变量,相当于是裸露的,因为在 f函数内,变量先使用...,但是未赋值,所以是undeifined 块级作用域 写出下面一段代码输出的结果 var temp = 123; function f() { console.log(temp); if(true...f(); 答案: 123,然后报错ReferenceError: Cannot access 'temp' before initialization,无法在初始化之前访问变量 解析: let声明的变量是有块级作用域的
块级作用域,let,const。(1.js) 1. let 1. let 声明的全局变量不是全局对象window的属性 2....同一作用域中用let定义变量不允许重复声明 3. let声明的变量不存在变量提升 4. let声明的变量具有暂时性死区 5. let 声明的变量拥有块级作用域 2. const...1. const定义的是常亮,不可修改。...2. const 实际上保证的并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。... 复制代码 小Tips: let和const声明的顶层变量并不会挂载在window上,而var会。
行内元素和块级元素 HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种,在使用过程中可以通过CSS的display属性相互转换。...块级元素对应的CSS样式设置为display: block;。...*/ margin: 10px 20px; /* margin的设置在四个方向都有效 */ } 常见块级元素 、、<article...行内块级元素对应的CSS样式设置为display: inline-block;。...*/ margin: 100px 20px; /* margin的设置在四个方向都有效 */ } 常见行内块级元素 、、<button
模仿块级作用域 var somefunction=function(){ ///这里是块级作用域 } somefunction(); 在这里定义了一个函数,然后立即调用。不会报错。...然而,下面的代码: function(){ //这里是块级作用域 }(); //出错 这段代码会导致语法错误,因为javascript将function关键字当做一个函数声明的开始,而函数声明后不能跟圆括号...然而函数表达式的后面可以跟圆括号。...将函数声明转为函数表达式,像下面给它加上一对圆括号就可以了: (function(){ //这里是块级作用域 })(); (function(){ var now = new Date(); if(now.getMonth...这种做法减少闭包占用内存的问题,因为没有指向匿名函数的引用。执行完毕,立即销毁作用域链。
文章目录 一、标签显示模式转换 1、行内元素转换为块级元素 2、块级元素转换为行内元素 3、块级元素、行内元素转换为行内块元素 一、标签显示模式转换 ---- 1、行内元素转换为块级元素 在 CSS...样式中设置属性值 display: block; , 可以将 行内元素 转换为 块级元素 ; span { /* 行内元素 转换为 块级元素 */ display:...: 设置 display: block; 样式的效果 : 2、块级元素转换为行内元素 在 CSS 样式中设置属性值 display: block; , 可以将 行内元素 转换为 块级元素 ; <...CSS 样式属性 : 3、块级元素、行内元素转换为行内块元素 在 CSS 样式中设置属性值 display: inline-block; , 可以将 块级元素 或 行内元素 转换为 行内块元素 ;...的 宽高 属性 , 其它 边距 对齐 等属性也可以设置 ;
块级元素 块级元素(block element)生成一个元素框,(默认地)它会填充其父级元素的内容,旁边不能有其他元素,它在元素框之前和之后生成了“分隔”符。...块级元素总是在新行上开始并占据一整行,宽度和高度以及外边距和内边距都可以控制,宽度始终与浏览器宽度一样,与内容无关。块级元素可以容纳内联元素和其他块元素。...内联元素与块级元素的转换 块元素(block element)和内联元素(inline element)都是html规范中的概念。在加入了CSS控制以后,可以改变块元素和内联元素之间的差异。...可变元素是基于以上两者随环境而变化的,它需要根据上下文关系确定该元素是块元素或者内联元素。可变元素隶属于上述两种元素,一旦根据上下文确定了它的类别,它就要遵循块元素或者内联元素的规则。 4....内联元素与块级元素列表 3.1 块级元素列表 TypeNoteaddress定义地址caption定义表格标题dd定义列表中定义条目div定义文档中的分区或节dl定义列表dt定义列表中的项目fieldset
一、aside元素 aside元素表示article元素的内容之外的与article元素的相关内容 HTML5中代码示例: HTML4中代码示例: 二...、figure元素 figure元素表示一段独立的流内容,一般表示文档主体流内容的一个独立单元。...中代码示例: 我是标题 我是内容 三、dialog元素 dialog标签定义对话,比如交谈,对话中的每一个句子都必须属于...标签定义的部分。
第2章 块级作用域 2.1 块级作用域 JS中作用域有:全局作用域、函数作用域。 ES6中新增了块级作用域。 块作用域由 { } 包括,if语句和for语句里面的{ }就属于块作用域。...(不包括函数) //注意 块级作用域中,使用var声明的变量是全局变量 { var a = 1; console.log(a);//1 } console.log(a);//1 if(true){...var b = 2; console.log(b);//2 } console.log(b);//2 2.2、let关键字声明块级变量 ES6中增加了let关键字声明变量,声明的变量只在当前代码块中生效...(块级作用域)。...= 2; console.log(a); } 2.3、let变量没有变量提升 { console.log(i);//报错 let i = 8; } 2.4、应用:let块级变量解决
简介:在JavaScript中没有块级作用域的概念。这意味这在块语句中定义的变量,实际上在包含函数中而非语句中创建的。...上面的函数中定义了一个for循环,在Java,C#,C++等语言中,变量i只会在for循环中有定义,循环一旦结束,变量i就会被销毁,可是在JavaScript中,变量是定义在outputNumbers的活动对象中的...,因此从他有定义开始,就可以在函数的内部访问到它,即使你重新申明变量,只要不给变量赋值,他只会对后面的申明视而不见,代码如下: function outputNumbers(count){ for...;i<count;i++){ break; } var i; alert(i); } outputNumbers(3); //输出:0 而JavaScript中的匿名函数可以用来模仿块级作用域并避免这个问题...用作块级作用域(通常成为私有作用域)的匿名函数语法如下所示: (function () { })()
块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。...常见的块元素有~、、、、、等, 其中标签是最典型的块元素。...块级元素的特点: (1)总是从新行开始 (2)高度,行高、外边距以及内边距都可以控制。 (3)宽度默认是容器的100% (4)可以容纳内联元素和其他块元素。...(a特殊 a里面可以放块级元素 ) 注意: 只有文字才能组成段落,因此p里面不能放块级元素,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。...a里面可以放块级元素 块级元素和行内元素区别 块级元素的特点: (1)总是从新行开始 (2)高度,行高、外边距以及内边距都可以控制。
块级标签的默认文档流是上下排列的,再配上横向排列的方法,请过适当的嵌套,可以应对几乎所有常见的布局需求,因此,我决定总结一下 div 横向排列的方法。...这也是我初学前端时最困扰的问题~ 以下面这组 div 为例,wrap 的高度由内容撑开 ? 平时是这样的,上下排列~ ? float 浮动 ? ?...inline-block 行块标签 ? ? 横排成功~但同样有些问题: inline-block 特点: 元素间会有空白。...但会导致子元素中继承的字体大小也为 0,解决方案: 1.可以明确子元素内字体大小的,为其单独设置文字大小。 2。可以使用 rem 作为字体大小单位来继承 HTML 根元素的字体大小属性。...在源代码里把前一个 div 的结束标签和后一个 div 的开始标签贴在一起。可读性极差,丑拒。 ? 不用 inline-block,嘿嘿~ 可以换行,如下图 ?
前言 话说ES6之前有局部变量,全局变量,唯独木有块级变量;也没有常量之说......块级变量let及常量const var ES5及之前是木有块级变量这个说法的,常规性是用闭包来防止变量泄露; 我来列出下ES5 var声明的一些特点 函数内的变量若是带var声明,则会覆盖外部的全局变量优先使用...;这货就是let了 我来说说这货的特点 let是块级变量,不存在于window下[非全局属性],window.变量名是找不到这货的,它的生活空间就那么一小块 let不允许重新声明同名变量,会抛出异常...,我们有必要引入显式块级作用域; 写法: {} — 对象!!!!..., 不,这货就是显式块级作用域 var idea = "playGame"; if(idea){ { let gameName = 'LOL'; //我就是显式块级作用域
h5d-sectioning-flowchart.jpg 图来自 html5doctor 拓展阅读 lets talk about semantics
领取专属 10元无门槛券
手把手带您无忧上云