HTML布局与结构

下雨的清晨

于 2024-08-16 13:20:56 发布

阅读量606

点赞数 3

分类专栏： # HTML学习文章标签： html 前端

本文链接：https://blog.csdn.net/2301_79155654/article/details/141257222

版权

HTML学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML语义化标签

探索HTML5中的语义化标签

在现代网页开发中，HTML5引入了一系列语义化标签，它们不仅使网页结构更加清晰，还提高了网页的可访问性和搜索引擎优化（SEO）效果。

常用语义化标签

1. `<header>` 标签

作用：<header> 标签用于定义网页或页面某个部分的头部内容。头部通常包含导航条、页面标题、Logo等重要的引导性信息。

使用示例：

<header>
    <h1>我的博客</h1>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
</header>

2. `<nav>` 标签

作用：<nav> 标签用于定义页面中的导航区域，通常包含页面内或网站内的链接集合，例如主导航菜单、侧边栏导航等。

使用示例：

<nav>
    <ul>
        <li><a href="#section1">章节1</a></li>
        <li><a href="#section2">章节2</a></li>
        <li><a href="#section3">章节3</a></li>
    </ul>
</nav>

3. `<main>` 标签

作用：<main> 标签用于定义文档的主体内容，表示页面中最重要的部分。通常，一个页面只应有一个<main>标签。

使用示例：

<main>
    <article>
        <h2>文章标题</h2>
        <p>这里是文章的主要内容。</p>
    </article>
</main>

4. `<section>` 标签

作用：<section> 标签用于定义文档中的章节或部分。<section>标签通常用于分组内容，并包含一个标题（<h1>到<h6>）。

使用示例：

<section>
    <h2>关于我们</h2>
    <p>我们是一家专注于Web开发的公司。</p>
</section>

5. `<article>` 标签

作用：<article> 标签用于定义一个独立的内容块，适用于博客文章、新闻报道、评论等自包含的内容。每个<article>标签可以独立存在，通常可以被独立分发或引用。

使用示例：

<article>
    <h2>如何使用HTML5构建网页</h2>
    <p>HTML5引入了许多新的元素和API，帮助开发者构建更现代化的网页。</p>
</article>

6. `<aside>` 标签

作用：<aside> 标签用于定义页面中的附加内容或侧边栏内容。

比如侧边栏、广告、引用的作者信息等。

使用示例：

<aside>
    <h3>相关文章</h3>
    <ul>
        <li><a href="#article1">HTML基础</a></li>
        <li><a href="#article2">CSS布局</a></li>
    </ul>
</aside>

7. `<footer>` 标签

作用：<footer> 标签用于定义页面或页面某部分的底部内容，通常包含版权声明、联系信息、网站地图、相关链接等。

使用示例：

<footer>
    <p>&copy; 2024 我的博客. 保留所有权利。</p>
    <nav>
        <ul>
            <li><a href="#privacy">隐私政策</a></li>
            <li><a href="#terms">使用条款</a></li>
        </ul>
    </nav>
</footer>