HTML 结构标签

本文最后更新于:2024年3月18日 凌晨

HTML 结构标签

<div>

标签定义及使用说明

  • <div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
  • 提示:<div> 元素经常与 CSS 一起使用,用来布局网页。
  • 注释:默认情况下,浏览器通常会在 <div> 元素前后放置一个换行符,然而,您可以通过使用 CSS 改变这种情况。

<span>

标签定义及使用说明

  • <span> 用于对文档中的行内元素进行组合。
  • <span> 标签没有固定的格式表现,当对它应用样式时,它才会产生视觉上的变化,如果不对 <span> 应用样式,那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
  • <span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

标签定义及使用说明

  • <header> 标签定义文档或者文档的一部分区域的页眉。
  • <header> 元素应该作为介绍内容或者导航链接栏的容器。
  • 在一个文档中,您可以定义多个 <header> 元素。
  • 注释:<header> 标签不能被放在 <footer>,<address> 或者另一个 <header> 元素内部。

标签定义及使用说明

  • <nav> 标签定义导航链接的部分。
  • 并不是所有的 HTML 文档都要使用到 <nav> 元素,<nav> 元素只是作为标注一个导航链接的区域。
  • 在不同设备上(手机或者PC)可以制定导航链接是否显示,以适应不同屏幕的需求。

<main>

定义和用法

  • <main> 标签用于指定文档的主体内容。
  • <main> 标签中的内容在文档中是唯一的,它不应包含在文档中重复出现的内容,比如侧栏,导航栏,版权信息,站点标志或搜索表单。
  • 注意在一个文档中,<main> 元素是唯一的,所以不能出现一个以上的 <main> 元素,<main> 元素不能是以下元素的后代:<article>,<aside>,<footer>,<header><nav>

<section>

标签定义及使用说明

标签定义了文档的某个区域,比如章节,头部,底部或者文档的其他区域。

<article>

标签定义及使用说明

  • <article> 标签定义独立的内容。
  • <article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
  • <article> 的潜在来源:
    • 论坛帖子。
    • 博客文章。
    • 新闻故事。
    • 评论。

<aside>

标签定义及使用说明

  • <aside> 标签定义 <article> 标签外的内容。
  • aside 的内容应该与附近的内容相关。

<details>

标签定义及使用说明

  • <details> 标签规定了用户可见的或者隐藏的需求的补充细节。
  • <details> 标签用来供用户开启关闭的交互式控件,任何形式的内容都能被放在 <details> 标签里边。
  • <details> 元素的内容对用户是不可见的,除非设置了 open 属性。

<summary>

标签定义及使用说明

  • <summary> 标签为<datails> 元素定义一个可见的标题,当用户点击标题时会显示出详细信息。
  • 注释:<summary> 元素应该是 <details> 元素的第一个子元素。

实例

使用 <summary> 元素:

1
2
3
4
5
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<dialog>

标签定义及使用说明

<dialog> 标签定义一个对话框,确认框或窗口。

属性

属性 描述
open open 规定 dialog 元素是有效的,用户可以与它进行交互,

标签定义及使用说明

  • <footer> 标签定义文档或者文档的一部分区域的页脚。
  • 在典型情况下,该元素会包含文档创作者的姓名,文档的版权信息,使用条款的链接,联系信息等等。
  • 在一个文档中,您可以定义多个 <footer> 元素。

提示和注释

提示:假如您使用 <footer> 元素来插入联系信息,应该在 <footer> 元素内使用<address> 标签。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!