HTML 5 的创新之一：语义标签，元素标签的一部分

terry 2年前 (2023-09-27) 阅读数 67 #数据结构与算法

HTML 5 的创新之一：语义标签，元素标签的一部分。

在HTML 5出来之前，我们使用div来描述页码，但是这些div没有任何实际意义。（虽然我们使用CSS样式标签和类来描述这个内容的含义）。这些标签只是我们向浏览器提供的定义网页某些部分的指令。但现在那些原本没有“意义”的标签，由于html5的出现，已经消失了。这就是我们通常所说的“语义”。

看下图，布局中没有使用div标签html5布局

嗯，如上图所示，页面结构中没有div，大家都使用html5语义标签（使用哪些标签，关键取决于你的设计目标）。

但是不要因为新的HTML5标签出现就随意使用它。使用不当肯定会适得其反。这就是为什么 div 仍然在某些地方使用的原因，因为 div 没有有意义的元素。它们只是标签，仅用于构建外观和结构。因此，它是最适合容器的标签。

W3C 定义的这些语义标签并不能完全满足我们的设计目标。正如一部法律不能在一百年内不改变地通过，更何况它是在不久前颁布的。这些语义标签不可能是正确的。定制设计目标。它只是在一定程度上“常见”。我们的目标是让爬虫了解重要的事情。

结论：Div 不能仅仅因为 HTML 5 标签而被拒绝。一切都有其独特的作用。

节点元素标签用在不同的地方，所以我将它们划分为： 节元素标签、文本元素标签

<nav>
    <ul>
        <li>HTML 5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</nav>

<nav> <ul> <li>HTML 5</li> <li>CSS3</li> <li>JavaScript</li> </ul> </nav> 将单独说明新增语义汇总HTML5 中的标签和用法。 title 元素 title 元素表示“网页”或“部分”的标题。通常包含h1-h6元素或hgroup作为整个页面或内容块的标题。您还可以包装某个部分的目录部分、搜索字段、nav 或任何类似的徽标。整个页面的标题元素数量不限。您可以有多个标题元素。您可以为每个内容块添加标题元素 <header> <hgroup> <h1>网站标题</h1> <h1>网站副标题</h1> </hgroup> </header> 标题示例代码标题使用注意事项：可以是“网页”或任何“节”的标题部分；数量不限。如果 hgroup 或 h1-h6 本身工作正常，请勿使用标题。 footer 元素 footer 元素表示“网页”或“部分”的页脚，通常包含有关该部分的一些基本信息，例如作者、相关文档链接和版权信息。如果 footer 元素包含整个部分，则它们表示附录、索引、报价、许可证、标签、类别和其他此类信息。 <footer> COPYRIGHT@小北 </footer> footer footer 使用注意事项：可以是“网页”或任何“部分”的页脚；除包装内容外，的数量没有限制。与标题类似。 hgroup 元素 hgroup 元素表示“网页”或“部分”的标题。当一个元素有多个级别时，该元素可以将h1转换为h6元素放在其中，就像文章主标题和副标题h组的组合一样。示例代码 hgroup 使用注意事项：如果只需要一个 h1-h6 标签，请勿使用 hgroup 如果有多个连续的 h1-h6 标签，请使用 h1-h6 标签。有多个连续的标题和其他文章信息，用hgroup包裹h1-h6标签，并将标题标签 nav元素与其他文章元数据一起设置 nav元素代表页面的导航链接区域。用于定义页面的主导航部分。 <nav> <ul> <li>HTML 5</li> <li>CSS3</li> <li>JavaScript</li> </ul> </nav> nav示例但是有时候我忍不住要用它，比如：侧边栏的目录、导航路径、搜索样式或者下一篇上一篇文章，但实际上说nav只能用在页面的主要导航部分。尽管页脚区域的链接列表指向不同站点的不同区域，例如使用条款、版权页等，但这些页脚元素都可以使用。使用 nav 的注意事项：用于整个页面的主导航部分。如果不合适，就不要使用 nav 元素；页面元素在页面上，元素包含在文章元素中，作为辅助信息部分的主要内容，其内容可以是相关信息、标识符、放置说明等，与当前文章相关。（特殊部分）在文章元素外部使用，作为页面或站点的全局附加信息部分。最典型的是侧边栏，其中的内容可以是测验、导航到其他组甚至广告，这些内容相关的页面。 <article> <p>内容</p> <aside> <h1>作者简介</h1> <p>小北，前端一枚</p> </aside> </article> 旁白页面上的示例，用户摘要：页面上的代表文章主要内容的页面信息，文章外没有文章，文章内容不能用作相应的侧边栏。至此。不需要。如果是广告，其他日志链接或者其他类别导航也可以使用 section元素 section该元素代表文档的“章节”或“章节”和“章节” " 可以指一篇文章文章按主题分为多个部分；“部分”可以指页面上的分组。一个部分通常也有一个标题。虽然 HTML5 的部分会自动降低 h1-h6 标题，但它是最好手动更新，方法如下： <section> <h1>section是啥？</h1> <article> <h2>关于section</h1> <p>section的介绍</p> <section> <h3>关于其他</h3> <p>关于其他section的介绍</p> </section> </article> </section> 部分模板代码部分使用注意事项：一个页面可以通过部分分为简介、文章和联系信息。文章内的页面使用article。section不是一般意义上的容器元素。如果想方便样式显示和脚本，可以使用div。表示文档中的一个section或一段； article、navigation、page可以理解为特殊的section，所以如果能用article、navigation、page就不要用section，如果不实用就用div Article元素tArticle元素就是最容易与 Section 和 DIV 元素混合。集成内容的目的是让开发者能够独立开发或者复用。例如，论坛、博客中的文章、用户评论或交互式小部件。（专题）除了内容之外，文章还有一个标题（通常是在页眉）和页脚♽♽。我们将用几个例子来介绍文章，以便article、section、div <article> <h1>一篇文章</h1> <p>文章内容..</p> <footer> <p><small>版权：html5jscss网所属，作者：小北</small></p> </footer> </article> 简单的文章文章模板代码上面的例子是使用article标签的最好、最简单的方式。如果一篇文章嵌套在一篇文章中，这意味着嵌入的文章与其外部内容相关，例如博客文章下面的评论，如下： <article> <header> <h1>一篇文章</h1> <p><time pubdate datetime="2012-10-03">2012/10/03</time></p> </header> <p>文章内容..</p> <article> <h2>评论</h2> <article> <header> <h3>评论者: XXX</h3> <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p> </header> <p>哈哈哈</p> </article> <article> <header> <h3>评论者: XXX</h3> <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p> </header> <p>哈？哈？哈？</p> </article> </article> </article> 文章评论，文章嵌套在文章中的示例表示文章的嵌套文章，可以是评论或者与文章相关的其他内容。文章中嵌套部分的一般条件是什么？这样： <article> <h1>前端技术</h1> <p>前端技术有那些</p> <section> <h2>CSS</h2> <p>样式..</p> </section> <section> <h2>JS</h2> <p>脚本</p> </section> </article> 文章章节，文章章节实例因为文章的章节虽然也是独立的部分，但只能算是整体的部分，从属关系，文章是正文和部分是本正文部分的一部分。本网站上的所有文章都是部分中的嵌套文章，使浏览器更容易区分每个部分中的内容。文章嵌套在节内的情况有哪些？在下面的 <section> <h1>介绍: 网站制作成员配备</h1> <article> <h2>设计师</h2> <p>设计网页的...</p> </article> <article> <h2>程序员</h2> <p>后台写程序的..</p> </article> <article> <h2>前端工程师</h2> <p>给楼上两位打杂的..</p> </article> </section> 文章案例部分设计师、程序员和用户界面工程师都是一个独立的实体。它们构成了网站制作的基本硬件。，当然还有其他成员~~。设计师、程序员和UI工程师就像文章一样，是独立的实体，而section将这些独立的文章包装成组。文章、章节和示例就这么多。具体情况很难具体分析。我错过了divd。事实上，div仅在您想要组合元素或为其添加样式时使用。使用冠词的注意事项：当独立时：使用冠词相关内容：使用节如果没有语义：使用div 元素。 HTML5 部分元素标签包括文本文章导航页面部分页眉页脚 hgroup 和 h1-h6 地址。 address表示一个块容器，必须是联系人、邮政编码地址、电子邮件地址等，通常位于页脚中。 h1-h6由于hgroup、section、article的出现，h1-h6的定义也发生了变化，使得一页上可以出现多个h1。