HTML 常用的块级元素和行内元素

1. 常用的块级元素

  • 块级元素具有如下特点:

    • 占据父容器的整行宽度。
    • 通常从新的一行开始。
    • 可以包含其他块级元素和行内元素。
  • 常用的块级元素:

    div:通用的容器,用于布局和分块内容。

    h1 到 h6:标题标签,定义从一级标题到六级标题。

    p:段落标签,用于定义文本段落。

    ul 和 ol:无序列表和有序列表,分别用于定义项目符号列表和编号列表。

    li:列表项,用于在列表(ul 或 ol)中定义项目。

    blockquote:块级引用,用于引用大段的文本。

    header:页面或部分内容的头部。

    footer:页面或部分内容的底部。

    section:用于页面中定义内容的一个区块。

    article:表示页面中的一篇文章或独立的内容块。

    nav:定义导航链接的容器。

    aside:表示与页面主要内容相关的侧边内容。

    form:用于创建表单。

    table:定义表格结构。

  • 其他常见的块级元素:

    hr:水平线,通常用于分割内容。

    figure:用于包含图像、图表或其他插图。

    figcaption:定义 figure 的标题或说明。

2. 常用的行内元素

  • 行内元素具有如下特点:

    • 只占据内容所需的宽度,不会从新的一行开始。
    • 不能包含块级元素,但可以包含其他行内元素或文本。
  • 常用的行内元素:

    span:通用的行内容器,通常用于局部样式化文本。

    a:链接标签,用于创建超链接。

    strong:用于表示重要的内容,通常显示为加粗文本。

    em:用于表示强调内容,通常显示为斜体文本。

    img:图像标签,用于嵌入图像。

    br:换行符,用于在文本中换行。

    i:斜体文本,通常用于表示不同语言或名词。

    b:加粗文本,用于强调部分内容。

    u:下划线文本。

    code:表示计算机代码,通常显示为等宽字体。

    small:用于显示小号文本。

    sub:下标文本。

    sup:上标文本。

    label:表单标签,用于描述表单控件。

  • 其他常见的行内元素:

    mark:用于高亮文本。

    time:表示时间或日期。

    abbr:表示缩写。

    cite:用于引用标题或作品名称,通常显示为斜体。

    q:短引用,表示短的行内引用文本。

3 总结:

块级元素 行内元素
div span
p a
h1-h6 strong
ul,ol li,em
table i,b,u
blockquote img
header,footer br
article,section code
nav label
aside mark,time,q
相关推荐
拆房老料2 小时前
ONLYOFFICE也能像Microsoft Word和WPS一样分别设置中西文字体
前端·html·word·开源软件·wps
Solis程序员2 小时前
Stripe 幂等表:把「不确定的重试」变成「查表返回」
前端·安全·bootstrap·php·agent
李纲明3 小时前
WordPress 站点变慢:按 TTFB → 缓存 → 查询 → 前端 分层排查(含配置注意)
前端·缓存·性能优化·wordpress·后端开发
程序人生8883 小时前
PDF 转 Word 版式错乱、表格丢失?DocConverter Web 格式互转引擎的保真实践
前端·人工智能·opencv·机器学习·pdf·word
粥里有勺糖4 小时前
安利一下最近用的桌面“Agent” | T3 Code
前端·github·ai编程
xy34534 小时前
Axure 9.0 动态面板基本操作
前端·ui·html·axure·原型·产品设计
不停喝水4 小时前
【前端转全栈java速通课】 项目实战④7-11节 操作数据库-登录-注册-修改密码-注销-mubatis-plus简化crud-
java·前端·数据库
一水鉴天5 小时前
统一对象拓扑(UOT)设计全链定稿:从三件事分离到三继承 之1 20261010(豆包“查看聊天内容”继续)
前端·css
栖凤5 小时前
Java 的 try-catch 在 Agent 里失效了,我用了 5 个模式才兜住
java·前端·python
粥里有勺糖5 小时前
视野修炼第136期 | 前端小恐龙"Deno"被收购
前端·github·ai编程