文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

HTML 结构化标签完全指南：＜html＞、＜head＞、＜body＞ 和布局标签 ＜div＞、＜span＞ 的功能及其在网页中的应用

在 HTML 文档中，使用特定的结构标签可以有效地组织和管理网页内容。这些标签不仅有助于浏览器正确解析和渲染页面，还能提高网页的可访问性和搜索引擎优化（SEO）。...在之前的文章中，我们有提到过 html> 标签 以及 标签、 标签，他们是 HTML 的基本结构元素，同时也属于文档结构标签。...在本文中除了这几个标签之外，还主要讲了两个重要的标签： div> 和 ，这些标签共同构成了一个完整的 HTML 文档的框架，确保网页的正确渲染和结构化。 1....html> 标签 html> 标签是整个 HTML 文档的根元素。它标识着文档的开始和结束，所有其他 HTML 标签都放置在 html> 标签内。...小结 div> 和 标签在 HTML 文档中扮演着重要角色。div> 用于分隔和组织块级内容，适合将相关内容分组，而 则用于包裹小范围的文本，方便局部处理。

86310
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    行内元素空白“消消乐”

    ~欢迎点击上方蓝字「歪码行空」快速关注~ ---- 前言 相信大家应该都遇到过下面这个问题：“HTML 源码中行内元素之间的空白显示在了屏幕上”。可能大家都有自己的小技巧来消除这些意料之外的空白。...废话不多说，接下来我给大家总结一下消除行内元素 HTML 源码空白的小技巧。 下文中以一个div中的两个span标签为例。...我们将两个div内的两个span设为display:inline-block;width:50%;，会发现两个span元素并没有在同一行，这就是源码中的空白导致的。 示例图与代码如下： ?...那么既然空格和字体大小font-size相关。那么也可以通过字体大小来消除这个空隙。 在父级元素上设置font-size: 0;，然后再在内部的span设置需要的字体大小即可。...css 样式之外，我们可以使用 html 注释来抵消空格，这种情况下不用额外进行 css 处理。

    1.5K10

    NEC html规范

    保持良好的简洁的树形结构 每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾的空格。 使用4个空格代替1个Tab（大多数编辑器中可设置）。...对于内容较为简单的表格，建议将tr写成单行。 你也可以在大的模块之间用空行隔开，使模块更清晰。 div>div>div>div>那么就不要写成div>div>div>div> 如果结构已经可以满足视觉和语义的要求，那么就不要有额外的冗余的结构。...文本删除 div>div> 块级容器 定义列表 只能嵌套dt和dd 定义列表中的定义术语 只能以dl为父容器，对应多个dd ...解：所以我们要将盒模型拆分开来写，比如我们将原本要定义在某个div上的height和padding分别写到这个div和他的父元素或子元素上。

    1.6K50

    Pug学习

    标签：HTML 代码的树状结构 2. 属性：紧跟着标签写在括号里，用,隔开(不加逗号也是允许的)，class和id可以直接写在元素后面，例如#pug.pug表示的就是一个div标签 3....直接在标签后面加文本，注意文本和标签之间要有空格     b. 在标签的下一行，对每一行内容前面加管道符号（|）    c. 大的纯文本块只需要在标签后面紧接一个点 . （在标签和点之间不要有空格）。...Pug 保留符合以下条件的元素内的空格： 一行文本之中所有中间的空格； 在块的缩进后的开头的空格； 一行末尾的空格； 纯文本块、或者连续的管道文本行之间的换行。 4....，可以引入.pug和原生的.html文件(记得带上后缀)。...继承与扩展 解决的是子文件和父文件之间的代码复用问题，子文件的代码可以覆盖和扩展父文件的代码 //父文件.pug block test    代码块1 //子文件.pug extends 父文件.pug

    1.3K10

    CSS3

    *+{CSS} 效果·： 进阶 后代选择器：选择父元素 后代中 满足条件的元素(空格隔开) 选择器1 选择器2+{} 儿子选择器：选择父元素 子代中 满足条件的元素 选择器1 > 选择器2+{}...但是若不换行，全部标签放一行，大大降低了代码的可读性和难度。所以就引入了浮动。 ---- 结构伪类选择器 根据元素在HTML中的结构关系查找元素,查找某父级选择器中的子元素.... html> 效果： 现在运用到前端中，就需要让两个div一个在左端，一个在右端 特点：类似于图层的概念，脱离了标准流，像两张卡片，叠放在一起，不会影响原标签，一行可以有多个，可以设置宽高...解决 给父元素设置高度（脱裤子放屁，来回麻烦） (额外标签法)：在父元素最后加个块级元素，给块级元素设置clear:both==>缺点：麻烦 (单伪元素清除法)：在2的基础上，用伪元素替代额外标签，...—>子绝父相)： 1.若父级(/爷级…..)有定位属性，根据父级为参照进行定位 2.若父级无定位属性，根据浏览器窗口进行定位 且具备了行内块特点，可设置宽高。 在页面中不占位置—>已经脱标。

    1.1K90

    每天10个前端小知识 【Day 15】

    ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。 :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。...由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。...清除浮动的方式： 父级div定义height 最后一个浮动元素后加空div标签 并添加样式clear:both。 包含浮动元素的父标签添加样式overflow为hidden或auto。...父级div定义zoom 7.CSS3新增伪类有那些？...因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有对浏览器的CSS初始化，会造成相同页面在不同浏览器的显示存在差异。 9.页面导入样式时，使用link和@import有什么区别？

    29510

    CSS3入门

    "> 内嵌式 将CSS代码内嵌在HTML文档的 style标签 中 格式：选择器{属性:值;属性:值;...}...伪类样式 选择器权重 块元素和行内元素 HTML标签主要分为块标签和行内标签两种类型，也称为块元素和行内元素 块元素 快元素会独占一行，例如：、、div> 等。...visibility: hidden; 的区别 visibility 方式隐藏的元素在页面中仍然占据空间 overflow 溢出 设置父盒子宽高的情况： 父盒子只有宽没有高，且内部都是另一个浮动的盒子...如果都没有则会以浏览器为准定位 { position:absolute; } 子绝父相 ==子绝父相（口诀)∶子元素使用绝对定位，父元素使用相对定位== 父元素使用相对定位不脱标，更加方便页面布局...子元素使用绝对定位退表，可以在父元素中随意定位。

    1.8K10

    剖析一些经典的CSS布局问题，为前端开发+面试保驾护航

    flex中，这种方法适合纯文字类 通过设置父容器 相对定位，子级设置 绝对定位，标签通过margin实现自适应居中 弹性布局 flex:父级设置display: flex; 子级设置margin为auto...设置为hidden div class="f">div>div> 建立伪类选择器清除浮动（推荐） //在css中添加:after伪元素.parent:after{ /* 设置添加子元素的内容是空...产生空白的原因 元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来 HTML代码中的回车换行被转成一个空白符...，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。...父元素中设置font-size: 0，在子元素上重置正确的font-size .container{ width:800px; height:200px; font-size: 0;} 3.

    1.3K20

    【CSS】CSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )

    选择出的 元素组 的 直接子元素 ( 亲儿子元素 ) 中 使用基础选择器 选择 元素 ; 子元素选择器语法 : 父选择器 写在前面 , 子选择器 写在后面 , 两个选择器之间使用 > 大于号隔开 ; 父选择器...父选择器 选择出的元素的 亲儿子 元素 中选择 , 孙子元素 和 重孙子元素 选择不到 ; CSS 基础选择器 : 标签选择器 类选择器 ID 选择器 通配符选择器 2、代码分析 在下面的代码中 ,...div > label { color: blue; } 父选择器是 div , 这是标签选择器 , 选择出了 div 标签 , 在 div 标签的字标签中 , 选择 label 标签 , 下面的标签中...下面的标签中 , div 标签 的 字标签 是 p 标签 , 没有 label 标签 , 因此 没有可选择的元素 , 孙子标签不在子元素选择器范围之内 ; div> div...---- 1、语法说明 交集选择器 由 两个 基础选择器 组成 , 目的是 选择出 同时满足 两个 基础选择器 要求的标签 ; 交集选择器语法 : 两个基础选择器之间没有空格 ; 基础选择器1基础选择器

    5.7K10

    布局

    ，不够灵活2.给父级设置overflow:hidden 但不设置高度，这样可以使父级随子级最大的高度变化而变化，自适应无法解决的问题1.元素平分父级元素 需要计算，而且不一定能均分2.元素之间的间距如果想要均匀分布的话...而且对宽高支持存在问题：浏览器会把元素之间的换行，空格都当作空格处理，使用display:inline-block之后，元素之间产生空隙，对整体布局产生影响*{ padding: 0; margin...，按照2：1：3的比例分给子元素flex-shrink:压缩因子 把比父级元素多200px的空间，按照2：1：3的比例进行对应压缩*{ padding: 0; margin: 0;}.top...flex-end 元素在排列方向上的结束位置分布（右/下）center元素在排列方向的中间位置分布space-between代表空白元素分布在元素与元素之间space-around 代表空白元素分布在各个元素两边...align-content 设置弹性盒子内，多行分布方式flex-start 所有行都靠近顶部或左端flex-end 所有行都靠近底端或右端center所有行居中显示space-between空白元素放在行和行之间

    22621

    前端面试题2（CSS）

    transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留 div hidden="hidden"> HTML5属性,效果和display:none...0，从而使这个元素“消失”在页面中 rgba() 和 opacity 的透明效果有什么不同？...添加额外标签，例如 div style="clear:both">div> 使用 br 标签和其自身的 clear 属性，例如 父元素设置 overflow...在 CSS 中伪类一直用 : 表示，如 :hover, :active 等 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after 后来在CSS3中修订，伪元素用 ::...是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法 如何修改Chrome记住密码后自动填充表单的黄色背景？

    3.3K11

    小结CSS的float属性

    3.浮动引发的问题 3.1破坏性 这个在我的上一篇文章小结BFC的基本知识与应用中也提过：如果父元素的子元素都是浮动元素，那么父元素的高度会发生高度塌陷。...导致这一现象的原因在于： 应用了float的元素会脱离文档流，即子元素都脱离了文档流，而父元素还处在正常的文档流中。自然，父元素不能被浮动子元素撑开，导致父元素的高度塌陷为零。...，空格、换行这些都和该元素没关系了。...例如下面三个是正常的三个img图片，可以看到每个图片之间是有空格的： 有空格.png 而如果给img图片设置了float属性，就会看到图片直接没有空格了： 清空格.png 3.4 老IE中的问题 IE6...(4)IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉。快速修正：用父元素的底内补白(padding)代替。

    5.3K1403

    前端课程——CSS选择器

    浏览器在解析 HTML 页面时，会根据 CSS 规则中的选择器定位 HTML 页面的元素，并为对应的元素设定样式。...组合选择器：具有交集和并集两种用法，是将之前基本选择器和层级选择器进行组合。 伪类选择器：允许未包含在 HTML 页面中的状态信息选定位 HTML 元素。...父级与子级元素： 如果 `` 元素是父级元素的话，那 ancestor1 元素和 ancestor2 元素就是子级元素。...如果 ancestor1 元素是父级元素的话，那 parent1 元素和 parent2 元素就是子级元素。...这个选择器只会应用在一个元素上，你无法用它排除所有父元素。 伪元素选择器 CSS 中伪元素选择器的用法与伪类选择器的用法类似，都是在指定 CSS 选择器增加关键字。

    58520

    寒假提升 ｜ Day10 CSS 第八部分

    总结绝对定位的相对元素以及常见的解决方案 子绝父相 子元素绝对定位、 父元素相对定位 子绝父绝 子元素绝对定位 父元素绝对定位 子绝父固 子元素绝对定位 父元素固定定位 三....清除浮动的方法 事实上我们有很多方法可以清除浮动 方法一: 给父元素设置固定高度 扩展性不好(不推荐) 方法二: 在父元素最后增加一个空的块级子元素，并且让它设置clear: both 会增加很多无意义的空标签...长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。...但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举; 原先的布局存在的痛点 原来的布局存在哪些痛点呢? 举例说明: 比如在父内容里面垂直居中一个块内容。...align-items 决定了 flex items 在 cross axis 上的对齐方式 normal:在弹性布局中，效果和stretch一样 stretch:当 flex items 在 cross

    1.5K20

    【前端】HTML+CSS 编程规范指南

    在本文中，我们将深入探讨 HTML5 和 CSS3 编程的各项规范，包括命名、布局、嵌套规则、注释、空格等内容，帮助开发者写出更加优雅和高效的代码。...HTML 中的注释以 形式存在，通常用于解释复杂的部分或标注重要的分区。 模块注释：用于标识页面的主要模块，使团队成员能够快速找到需要调整的部分。...子级缩进：子级标签应相对父级标签进行一次 TAB 缩进，一个 TAB 等于 2 个空格。 属性值必须带引号：无论是单引号还是双引号，都需保持一致，建议统一使用双引号。...精简代码：在 HTML5 中可以省略 script、style 等标签的 type 属性，以减少代码冗余。...小结 本文为大家介绍了 HTML5 和 CSS3 编程中的重要规范，遵循这些规范能够有效地提升代码的可读性和维护性。特别是在多人协作的项目中，代码规范可以降低沟通成本，减少 BUG 的发生。

    24810

    【CSS】CSS 复合选择器 ① ( 基础选择器与复合选择器 | 后代选择器 )

    文章目录 一、基础选择器与复合选择器 二、后代选择器 1、语法说明 2、示例分析 3、完整代码示例 一、基础选择器与复合选择器 ---- CSS 基础选择器 : 在之前的博客中 , 介绍了 CSS...的基础选择器 ; 标签选择器 类选择器 ID 选择器 通配符选择器 在实际开发中 , 基础选择器 不能满足 快速选择标签的需求 ; 复合选择器 是 由 两个以上 的 基础选择器 通过 各种方式 组合 而成的...; 后代选择器 语法 : 父选择器 和 子选择器 都是 CSS 基础选择器 , 父选择器 和 子选择器 之间 使用空格分开 ; 父选择器 子选择器 { 属性名称1:属性值1; 属性名称2:属性值2...; 属性名称3:属性值3; } 2、示例分析 下面的代码中 , 选择 div 下的 label 标签 , 就可以使用后代选择器 ; div class="father"> 内部文本... 内部文本 内部文本 div> 父选择器 设置为 类选择器 .father , 子选择器 设置为 标签选择器

    2.2K10

    小结CSS的float属性

    3.浮动引发的问题 3.1破坏性 这个在我的一篇文章小结BFC的基本知识与应用中也提过：如果父元素的子元素都是浮动元素，那么父元素的高度会发生高度塌陷。...导致这一现象的原因在于： 应用了float的元素会脱离文档流，即子元素都脱离了文档流，而父元素还处在正常的文档流中。自然，父元素不能被浮动子元素撑开，导致父元素的高度塌陷为零。...3.3 其他问题 被设置了float的元素会脱离文档流，效果是布局时看起来是会尽量往一边靠拢，空格、换行这些都和该元素没关系了。...例如下面三个是正常的三个img图片，可以看到每个图片之间是有空格的： ? 而如果给img图片设置了float属性，就会看到图片直接没有空格了： ?...(4)IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉。快速修正：用父元素的底内补白(padding)代替。

    1.4K50
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券