前端入门学习笔记（八）HTML5入门（二）网页的基础标签

最新推荐文章于 2024-12-06 20:10:58 发布

原创最新推荐文章于 2024-12-06 20:10:58 发布 · 314 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5入门 #HTML5基础 #HTML5 #前端

HTML 同时被 2 个专栏收录

11 篇文章

订阅专栏

HTML5

6 篇文章

订阅专栏

本文介绍了HTML5中常用的结构标签，包括页眉(header)、页脚(footer)、导航(nav)、文章(article)、部分(section)及侧边栏(aside)，并详细说明了这些标签的应用场景和使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面结构

开头我我们先复习一下，通用的HTML5页面结构：
图片来与w3c
接下来我们将会较为分别介绍每个标签。

网页基础标签

1.<header>页眉

<header>标签定义了文档的头部区域（可以理解为页眉）。该元素适合在<body>标签内部使用。

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <header>
        <h1>页眉</h1>
      </header>
   </body>
</html>

页眉

需要注意的是，<head>与<header>看起来相似但是完全不同，要将两者区分清除。

head作为整个html页面的头部
header作为文档的头部区域使用

2.<footer>页脚

与<header>相对应，<footer>用于定义文档的页脚

<footer>
  <p>Posted by: Xiao Lu</p>
</footer>

Posted by: TUTsmile

当然直接写这一串代码，无法实现页脚固定在页面的下方这样的功能，需要结合CSS才能够实现。你若心急的话，可以先参考这篇文章来实现该功能。
footer至于底部的四种方法，不过这篇文章发布于2012年并没有用到最新的标准，但是作为HTML与CSS基础学习还是可行的（HTML现在最新标准为HTML5，CSS已经发展到CSS3）

3.<nav>导航链接部分

<nav>是作为作为标注一个导航链接的区域的标签

<nav>
    <p>前端入门学习笔记</p>
    <a href="https://blog.youkuaiyun.com/TUTsmile/article/details/81455784">环境配置</a>
    <a href="https://blog.youkuaiyun.com/TUTsmile/article/details/81457269">HTML基础（一）</a>
    <a href="https://blog.youkuaiyun.com/TUTsmile/article/details/81478253" tpye="_blank">HTML基础（二）</a>
</nav>

在优快云的MarkDown中的表现如下：

前端入门学习笔记

<a href="https://blog.youkuaiyun.com/TUTsmile/article/details/81455784">环境配置</a>
<a href="https://blog.youkuaiyun.com/TUTsmile/article/details/81457269">HTML基础（一）</a>
<a href="https://blog.youkuaiyun.com/TUTsmile/article/details/81478253" tpye="_blank">HTML基础（二）</a>

在浏览器中代码效果如下

一般而言参考浏览器中的代码效果即可，此处列出两种不一样的效果，是想要提醒一下大家，在不同的环境中，实现效果可能略有些不同，需要多做测试。

<nav>标签内部使用链接标签<a>，使用规则并无任何变化，只需要加上tpye="_blank"，即可在新标签中打开链接。

4.<article>文章

W3C的定义为：<article>定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
来源：

论坛帖子
博客文章
新闻故事
评论

按照我个人的看法，至需要理解article的英文意思即可在合适的环境下使用article标签。
在牛津词典中，article的解释为：（报刊上的）文章，论文，报道，（协议、契约的）条款，项，
抽象之后，可知道它们的共同点是都有多段文字，按照我的看法，只要出现多段文字，都可用article。

<article> 
   <h1>文章标题</h1> 
   <p>文章元素的内容</p>
</article>

文章标题

文章元素的内容

5.<section>部分

<section>定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

<section>
  <h1>Section</h1>
  <p>words</p>
</section>

Section

words

6.<aside>侧边栏

<aside>在W3C的定义为：定义<article>标签外的内容。
大部分时候，都是作为侧边栏进行使用，所以我直接将其理解为侧边栏。

<aside>
  <p>aside</p>
</aside>

aside

如同footer一样，需要实现侧边栏功能的话，需要与CSS配合。