大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。 HTML 文档由相互嵌套的 HTML 元素构成。 ---- HTML 文档实例 这个 元素定义了 HTML 文档中的一个段落。 这个元素拥有一个开始标签 以及一个结束标签 . 元素内容是: 这是第一个段落。... 元素: 这是第一个段落。 元素定义了 HTML 文档的主体。...这个元素拥有一个开始标签 以及一个结束标签 。 元素内容是另一个 HTML 元素(p 元素)。 元素: 这是第一个段落。...元素内容是另一个 HTML 元素(body 元素)。
一、HTML 标签包括 块级元素(block)、内嵌元素(inline) 1、块级元素 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签: address、blockquote、center...、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var 二、HTML 标签的嵌套规则...块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素: —— 对 ...,但是网上许多人对此有些疑惑,就在这里略加说明: li 和 div 标 签都是装载内容的容器,地位平等,没有级别之分(例如:h1、h2 这样森严的等级制度^_^),要知道,li 标签连它的父级 ul...块级元素与块级元素并列、内嵌元素与内嵌元素并列: —— 对 </div
标签的类型 块元素(block) 块元素特征 默认独占一行 没有给宽度的时候,宽度是auto,撑满一行(宽度就是父级的宽度) 支持所有的css命令 属于块元素标签的有 div,h1-h6,p,ul...,li,ol,dl,dt,dd,header,nav,footer,section,article,aside 行内元素(inline) 行内元素的特征 内容撑开宽高,宽高的值都是auto,只不过显示出来的宽高是由内容撑开的...不支持设置宽高 不支持上下的margin和上下padding(左右支持),上下的padding使用问题的,虽然把背影撑出来了,这只是表面现象,它不会对其它的元素有影响 所有的行内元素都会在一行显示(一行可以放得下的前提下...) 代码换行会被解析成一个空格 属于行内元素标签的有 a,span,strong,em,mark,img,time
事件冒泡是指在嵌套的 HTML 元素中,一个事件从最具体的元素开始,然后向上传播到更高层级的父元素。...例如,如果用户点击一个嵌套的按钮,事件首先会被按钮捕获,然后会冒泡到按钮的父元素,接着是父元素的父元素,直到到达 元素或文档的根元素。..."); }); 有一个包含按钮的 div 元素,为父元素(div)和子元素(按钮)设置点击事件监听器。...因为这里的事件监听器是以捕获模式添加的,父元素的监听器在子元素之前被触发。 事件捕获和冒泡的总结 事件冒泡从具体元素到父元素。 事件捕获从父元素到具体元素。 默认情况下,事件是以冒泡的方式处理的。...事件冒泡和捕获是浏览器处理事件的重要机制。实际开发中: 事件冒泡可以让我们轻松处理嵌套元素的事件。 通过调用 stopPropagation() 你可以精确地控制事件流。
行内元素和块级元素 HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种,在使用过程中可以通过CSS的display属性相互转换。...行内元素 行内元素对应的CSS样式设置为display: inline;。...-- 排列在一行 --> 行内元素2 行内元素3 <!...特点 独占一行 封闭后自动换行 默认宽度为100% 可以指定宽度和高度 内外边距对于四个方向有效 示例 块级元素1 <!...特点 可以指定宽度和高度 内外边距对于四个方向有效 元素排在一行,但是会有空白缝隙 示例 <!
替换元素和非替换元素 2.1 替换元素 替换元素是指,浏览器会根据元素的标签和属性,来决定元素的具体显示内容。...这些元素往往没有实际的内容,即是一个空元素,浏览器会根据元素的标签类型和属性来显示这些元素。audio和canvas在某些特定情形下为替换元素。...块级元素和行内元素 3.1 块级元素 普通流中,块元素独占一行。例如:div,p,h1等。 3.2 行内元素 普通流中,行内元素左右可以有其他行内元素。 4....width height margin padding 特性 替换元素和非替换元素 html元素两种分类。...替换元素和不可替换元素;块级元素和行内元素 置换元素(替换元素)和非置换元素(不可替换元素) 行内元素与块级元素的总结 置换和非置换元素
可替换元素和非替换元素 可替换元素replaced element也称作可置换元素,其展现效果不是由CSS来控制的,这些元素是一种外部对象,它们外观的渲染,是独立于CSS的。...对于可替换元素,浏览器会根据元素的标签和属性,来决定元素的具体显示内容。 可替换元素的内容不受当前文档的样式的影响,CSS可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。...CSS在某些情况下会对可替换元素做一些特殊处理,比如计算外边距margin和一些auto的具体值。...一部分可替换元素,其本身具有的尺寸和基线baseline会被一些CSS属性用到,加入计算之中,例如vertical-align,只有可替换元素才能具有这种自带值。...非替换元素 非替换元素是其内容包含在文档中的元素,其内容可以受CSS渲染控制。 非替换元素的内容不会超出CSS的模型范围,CSS在渲染时会考虑非替换元素的内容。
此时运行结果 可以看到子元素并没有离父元素上边距...10px而是使整个父盒子塌陷了10px 这里的解决办法有 给父元素设置border-top 给父元素定义内边距 父元素加overflow:hidden 需要注意的是浮动的盒子不会存在外边距合并塌陷的问题
行元素:整行排列,不能改变大小(宽度和高度),宽度默认文字宽度,当行元素排列过多时( 超过浏览器的宽度时自动强制换行 )。 块元素:一个块元素独占一行,宽度默认浏览器的宽度,可以改变宽度和高度。...行内块元素:属于行元素,但又有块元素的属性,横行排列但又可以设置宽度和高度。...比如 行内元素列表: 标签可定义锚 表示一个缩写形式 定义只取首字母缩写 字体加粗 可覆盖默认的文本方向 大号字体加粗 ...元素定义标题 标签定义列表项目 为那些不支持框架的浏览器显示文本,于 frameset 元素内部 定义在脚本未被执行时的替代内容...原文地址《HTML的行元素和块元素》
块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。...块级元素的特点: (1)总是从新行开始 (2)高度,行高、外边距以及内边距都可以控制。 (3)宽度默认是容器的100% (4)可以容纳内联元素和其他块元素。...行内元素的特点: (1)和相邻行内元素在一行上。 (2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。 (3)默认宽度就是它本身内容的宽度。...a里面可以放块级元素 块级元素和行内元素区别 块级元素的特点: (1)总是从新行开始 (2)高度,行高、外边距以及内边距都可以控制。...(3)宽度默认是容器的100% (4)可以容纳内联元素和其他块元素。 行内元素的特点: (1)和相邻行内元素在一行上。
HTML,也叫“超文本标记语言”,其元素无非就是行内元素、块级元素和行内块级元素。...行内元素最常用的就是 span , br 和 a ,之前 b , i 和 small 标签也比较常见,分别用来设置加粗,斜体和缩小字体。但这种特殊的样式,最好还是用 CSS 来实现。...块级元素的 padding 和 margin 内外边距都可以起作用,但是不管宽度设定为多少,都会占据一整行的空间。...常见的行内块级元素有 img , button , input , select , textarea 。 当然,可以使用 CSS 的 display 属性给元素设置行内、块和行内块。...、块级元素和行内块级元素的区别和联系
文章目录 一、集合中有集合元素时调用 flatten 函数拉平集合元素 二、完整代码示例 一、集合中有集合元素时调用 flatten 函数拉平集合元素 ---- 在上一篇博客 【Groovy】集合遍历...( 操作符重载 | 集合中的 “ << “ 操作符重载 | 使用集合中的 “ << “ 操作符添加一个元素 | 使用集合中的 “ << “ 操作符添加一个集合 ) 中 , 使用集合中的 “ << “ 操作符添加一个集合...[“5”, “6”]] ; 如果想要得到 [“1”, “2”, “3”, “4”, “5”, “6”] 结果 , 可以调用 集合的 flatten 方法 , 拉平该集合 , 就会自动将 集合中的 集合元素...拆分成单个元素 , 最终可以得到一个全部都是 String 对象的集合 ; 拉平集合 时 , 如果集合中存在 数组 或 集合 , 会创建一个新集合 , 将 集合中的 数组 或 集合元素 , 添加到新集合中...此集合和任何嵌套数组或集合的内容(递归地)添加到新集合中。
关于js的数组去重和获取重复元素,在项目开发中经常会遇到,这里提供个实现思路以供参考。数组主要分为:普通数组和对象数组(嵌套对象数组)两类。...,以及获取重复元素。...对象数组去重分为两类:根据某一属性去重,和去重完全相同对象(属性属性值都相同)一、数组嵌套对象,根据对象某一属性去重let arr = [{id:1, name:'test', status:'success...arr){if(arr1.indexOf(arr[i].id) == -1){arr1.push(arr[i].id);newArr.push(arr[i]);}}return newArr;}二、数组嵌套对象...,获取重复元素和唯一元素及坐标//数据const List=[ { name:'大学女友', age:20, type:'正宫' }, {
1 HTML常见元素和理解(1) HTML 常见元素 viewport 标签适配移动端 HTML 重要属性 2 HTML常见元素和理解(2) ...就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。 for 属性应当与相关元素的 id 属性相同。"for" 属性可把 label 绑定到另外一个元素。...这是该元素与使用 元素创建的按钮之间的不同之处。 请始终为 元素规定 type 属性。不同的浏览器对 元素的 type 属性使用不同的默认值。...3 HTML常见元素和理解(3) 如何理解 HTML 提取出来就是标题 4 HTML版本 5 元素分类 块-内联 HTML5中的分法 6...嵌套关系
a, bdo, br, img, map, object, q, script, span, sub, sup button, input, label, select, textarea # 特点 和其他元素在一行...高、行高及外边距和内边距部分可变 宽度只与内容有关(靠内容撑开) 只能容纳文本或其他行内元素 # CSS 居中 水平居中 垂直居中 水平垂直居中 、 # 特点 总是在新的一行开始,占据一整行 高度、行高及外边距和内边距都可以控制...宽度默认与浏览器宽度一样 可以容纳行内元素和其他块级元素 # CSS 居中 水平居中 水平垂直居中 <div...# 内容 一般情况下,行内元素只能包含数据和其他行内元素 块级元素可以包含行内元素和其他块级元素 # 格式 默认情况下,行内元素不会以新行开始,而块级元素会新起一行
一、section元素 section元素定义文档或应用程序的一个区域,如章节、页眉、页脚或文档中的其他部分,它可以与h1、h2、h3、h4、h5、h6等元素配合使用,标示文档结构。...html5中代码示例: html4中代码示例: 二、article元素 article元素表示文档中的一块独立的内容,如博客或报纸中的一篇文章...html5中代码示例: html4中代码示例: 三、header元素 header元素表示页面中的一个内容区块或整个网页的标题...html5中代码示例: html4中代码示例: 四、nav元素 nav元素表示导航链接的部分 html5中代码示例: html4中代码示例: 五、footer元素 footer元素表示整个页面中一个内容区块的脚注。
检查必需的元素和属性默认情况下,next()方法不检查是否存在与标记为必需的属性相对应的元素和属性。...要使读取器检查此类元素和属性是否存在,请在调用Next()之前将读取器的CheckRequired属性设置为1。出于兼容性原因,此属性的默认值为0。...XML文档可能包含意外的元素和属性,因此%XML.Adaptor提供参数来指定导入此类文档时的反应方式。...控制如何导入空元素和属性为对象启用XML时,需要指定将空值和空字符串投影到XML的方式其中一个选项是在支持XML的类中将XMLIGNORENULL设置为等于“Runtime”(不区分大小写)。...}}此方法假定有特定的输入文件、类名和元素名。默认情况下,此方法从文件开头开始。
ul和li元素 一、基本语法介绍 ul:无序列表 ol:有序列表 li:列表中项目,经常配合 ul 或 ol 一起使用 ul和li
行内元素 行内元素:span,strong,em,br,img,input,label,select,textarea,cite 块级元素 块级元素:div,p,from,ul,li,ol,dl,address...,fieldset,hr,menu,table 空(void)元素 void元素是指标签没有内容的元素 area, base, br, col, embed, hr, img, input, keygen..., link, meta, param, source, track, wbr 行内元素与块级元素的区别 1.从显示效果看块级元素会独占一行,其宽度自动填满其父元素宽度,行内元素不会独占一行,相邻的行内元素会排列在一行...2)块级元素可以设置width,height属性,行内元素设置无效,块级元素设置了宽度、仍然是独占一行。...3)块级元素可以设置margin 和 padding,行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的
五、行内元素的特点 5.1 和其他元素都在同一行上 5.2 高,行高及外边距和内边距不可改变 5.3 宽度就是它的文字或图片的宽度,不可改变 5.4 行内元素只能容纳文本或者其他行内元素 5.5 设置行内元素...六、块级元素的特点 6.1 总是在新一行开始 6.2 高度,行高以及外边距和内边距都可改变 6.3 若宽度没有设置,则默认宽度为容器的100%,除非设定一个宽度 6.4 块级元素可以容纳行内元素和其他块级元素...七、行内元素和块级元素对比 7.1 内容 (1)一般情况下,行内元素只能包含数据和其他行内元素。...(2)而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。 7.2 格式 默认情况下,行内元素不会以新行开始,而块级元素会新起一行。...7.3 宽高 (1)行内元素不可以设置宽高 (2)块级元素可以设置宽高 7.4 内边距和外边距 (1)行内元素水平方向的 margin 和 padding 可以生效。
领取专属 10元无门槛券
手把手带您无忧上云