HTML5中常用的布局语义标签

news/2025/10/19 15:57:03/文章来源:https://www.cnblogs.com/Clefairy/p/19150943

块元素(block element)

  • 在页面中,块元素独占一行;
  • 在网页中一般通过块元素来对页面进行布局。
  • 块元素中可以放块元素和行内元素。
  • 行内元素(inline element)

在页面中,行内元素不能独占一行;

  • 行内元素主要用来包裹文字;

  • 行内元素不要放置块元素。

  • 在开发中,我们会使用块元素进行页面的布局,使用行内元素包裹文字。(这里需要注意,现在不需要关心标签显示的位置,那是 CSS 负责的)

  • 块元素中基本上什么都能放,但

    标签比较特别,虽然

    标签是块元素,但是

    标签中不能放任何的块元素。

HTML5 中常用的布局语义标签,主要有 :

<header>、<nav>、<article>、<aside>、<section>、<main>、<footer>,和最常用的标签 <div>。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/940392.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jupyter直接转pdf

需要安装Jupyter nbconvert 中文 PDF 模板(github地址 https://github.com/AllanChain/nb-tmpl-ctex,点个免费的星星吧) Chinese LaTeX/PDF template for Jupyter notebook nbconvert using CTeX. 安装 pip install…

DP优化:四边形不等式、决策单调性与凸性

考虑 \(a\leq b\leq c\leq d\) 最小化问题中,四边形不等式为 \(w(a,c)+w(b,d)\leq w(a,d)+w(b,c)\)。 最大化问题中,四边形不等式为 \(w(a,c)+w(b,d)\geq w(a,d)+w(b,c)\)。 交叉优于包含。 文中默认讨论最小化问题。…

智慧交通项目:Python+PySide6 车辆检测框架 YOLOv8+OpenCV 自定义视频 自定义检测区域 (源码+文档)✅

智慧交通项目:Python+PySide6 车辆检测框架 YOLOv8+OpenCV 自定义视频 自定义检测区域 (源码+文档)✅pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: b…

WPS中Mathtype插件消失不见解决方法

本文解决WPS顶栏Mathtype插件使用一段时间后会消失不见的问题。 方案一:按照上述操作,出现如下方框点击模板,会出现Mathtype相关插件,按照下图示操作最后,重新启动WPS,即可看到顶栏会出现Mathtype选项。 方案二:…

list 实现链表封装节点的底层逻辑:如何克服不连续无法正常访问挑战 - 详解

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

2025气泡膜机优质厂家推荐:瑞康机械,高效生产与定制服务兼备!

2025气泡膜机优质厂家推荐:瑞康机械,高效生产与定制服务兼备!随着电子商务和物流行业的迅猛发展,包装材料的需求量也在不断增加。气泡膜作为一种重要的缓冲包装材料,其生产设备——气泡膜机/气泡膜制袋机/高速气泡…

音视频编解码全流程之用Extractor后Decodec - 实践

音视频编解码全流程之用Extractor后Decodec - 实践pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas"…

P8817 [CSP-S 2022] 假期计划 解题笔记

给一个不用dp的做法 solution 考虑朴素做法。 预处理出 \(f(x)\),表示距离 \(x\) 不超过 \(k\) 的点。 枚举每个景点 \(a\), \(b\), \(c\), \(d\),通过预处理出的 \(f(x)\) 计算是否合法,更新答案。 这样时间复杂度…

2025年塑料托盘厂家推荐排行榜,网格川字/九脚/田字/双面塑料托盘,平板/吹塑/注塑/焊接/印刷/组装款/高矮脚/反川字/立体库托盘公司精选!

2025年塑料托盘厂家推荐排行榜:网格川字/九脚/田字/双面塑料托盘,平板/吹塑/注塑/焊接/印刷/组装款/高矮脚/反川字/立体库托盘公司精选!随着物流和仓储行业的快速发展,塑料托盘作为重要的物流工具,其需求量逐年增…

20243866牛蕴韬类和对象作业

https://files.cnblogs.com/files/blogs/847621/20243866牛蕴韬类和对象作业.zip?t=1760859411&download=true

【动手学深度学习PyTorch】softmax回归 - 实践

【动手学深度学习PyTorch】softmax回归 - 实践2025-10-19 15:38 tlnshuju 阅读(0) 评论(0) 收藏 举报pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: …

简单学习Typora

Markdown学习 标题: 二级标题 三级标题 字体 字体左右两边加两个星号xx就直接变为粗体 字体左右两边加一个星号xx就直接变为斜体 字体左右两边加三个星号xx就直接又斜体又加粗 hello 引用符号为引用分割线三根线或者是…

Gamma 函数

闲话(中文) 河溢危,禾已萎,鹤依偎。禾异味,鹤已畏,合一,谓何?"异味?"何矣,味何?以萎。何异胃颌已危,何医为?河易为河医。为何?医喂荷以维何一胃。何已维。"颌医未。"何矣,胃颌易维…

物理感知 RTL 合成

1、PAS:缩短设计闭环的先锋技术 物理感知合成(PAS)将物理设计信息(如布局、连线、拥塞、功耗)提前纳入 RTL 合成阶段,使合成结果与后端布局更一致,从而减少反复迭代,提升设计效率与 PPA(性能-功耗-面积)表现…

在线p图(PhotoShop网页版)加滤镜,3步搞定唯美照片

在当今生活中,分享精美照片已成为我们日常的一部分。无论是诱人的美食、精致的自拍,还是旅途中的风景,一张风格独特、色彩动人的照片总能迅速赢得朋友们的点赞。其实,想要修图加滤镜,不必再安装笨重的软件——只需…

24_envoy_配置静态资源路由

Envoy配置静态资源路由完全指南 总起:Envoy静态资源路由的重要性与挑战 在现代Web应用架构中,静态资源(如HTML、CSS、JavaScript、图片等)的高效分发是提升用户体验的关键因素。Envoy作为云原生时代的高性能代理,…

2025年冷却塔厂家推荐排行榜,闭式/方形/工业/全钢/凉水/圆形/玻璃钢/防腐冷却塔公司推荐!

2025年冷却塔厂家推荐排行榜,闭式/方形/工业/全钢/凉水/圆形/玻璃钢/防腐冷却塔公司推荐!随着工业和建筑行业的快速发展,冷却塔作为关键的热交换设备,在各个领域中发挥着重要作用。为了帮助筛选冷却塔、闭式冷却塔…

AT_toyota2023spring_final_g Git Gud

AT_toyota2023spring_final_g Git Gud (tsinsen Di6ns) 图论、树上问题、贪心、Ad-hoc定义:一个点度数 \(deg_u\) 为被合并次数;一个点集度数 \(deg_S\) 为点集内点与点集外点连边数(一条边即一次合并) 结论1:合并…

实用指南:85-dify案例分享-不用等 OpenAI 邀请,Dify+Sora2工作流实测:写实动漫视频随手做,插件+教程全送

实用指南:85-dify案例分享-不用等 OpenAI 邀请,Dify+Sora2工作流实测:写实动漫视频随手做,插件+教程全送pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; displa…

uml九大图 - 作业----

uml九大图统一建模语言(UML)九大图详解 统一建模语言(UML)是一种标准化的建模语言,广泛应用于软件工程领域,用于对软件密集型系统进行可视化、详述、构造和文档化。它如同建筑师的蓝图,为软件开发团队提供了一套…