关于HTML5的主结构及简单项目实战

最新推荐文章于 2024-09-07 12:46:00 发布

孤心_AUTO

最新推荐文章于 2024-09-07 12:46:00 发布

阅读量667

点赞数 1

分类专栏： #web前端基础文章标签： html5 前端 html

本文链接：https://blog.csdn.net/m0_73058235/article/details/128692328

版权

#web前端基础专栏收录该内容

12 篇文章 3 订阅

订阅专栏

本文介绍了HTML5中的关键语义元素，包括<header>定义的页眉，用于导航的<nav>元素，主要内容区域<main>，独立内容块<article>，通用区块<section>，附属信息<aside>以及页脚<footer>。这些元素有助于提升网页的结构和可访问性。

摘要由CSDN通过智能技术生成

一.定义页眉<header>：

在HTML中，我们使用header表示页眉，用来标识标题栏，其功能在于引导和导航作用的结构元素，通常用来定义整个页面的标题栏，或者一个内容块的标题区域

   <header role="banner">
    <nav>
        <ul>
            <li><a href="#">公司新闻</a></li>
            <li><a href="#">公司业务</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </nav>
   </header>

一个页面可以设计多个header结构，header可以包含网站LOGO 主导航搜索框等，例如：

一组导航的链接通常放在nav元素中，role="banner"作为定义该页眉为页面级页眉，提高访问权重

在HTML5中，header内部可以包含h1~h6元素，也可以包含hgroup table form nav等元素，但不可内部嵌套footer或另外一个header，只要应该显示在头部区域的标签，都可以包含在header中

二.定义导航：

nav表示导航条，用来标识页面的导航的链接组。在一个页面中可以同时拥有多个nav，作为页面整体或不同部分的导航，分为如下四类：

1）主菜单导航

2）侧边栏导航

3）页内导航

4）翻页导航

在HTML5中只要是导航性质的链接，就可以很方便的将其放入nav元素中。该元素可以在文档中多次出现，作为页面或部分区域的导航，例如：

   <nav draggable="true">
         <a href="index.html">首页</a>
         <a herf="book.html">图书</a>
         <a herf="bbs.html">论坛</a>
    </nav>

上述代码段创建了一个可拖动导航区域，可用于全局导航，也可作为区域导航

在HTML5中，我们通常习惯使用ul ol 元素对链接进行结构化，然后在外围简单的包一个nav，同时，在HTML5中不允许nav嵌套在address中

三、定义主要区域：

main表示主要区域，用来标识网页中的主要内容；main内容对于文档相当唯一，不包含在网页中反复出现的内容

main不能放在article aside footer header或nav当中，例如：

  <header role="banner">
        <nav role="navigation">[包含多个链接的ul ]</nav>
    </header>
    <main role="main">
        <article>
            <h1 id="guadi">主要标题</h1>
            <p>[页面主要区域的其他内容]</p>
        </article>
    </main>
    <aside role="complementary">
         <h1>侧边标题</h1>
         <p>[附注栏其他内容]</p>
    </aside>
    <footer role="info">[版权]</footer>

main元素在一个页面仅使用一次。在main标签上加上role="main",这样可以帮助屏幕阅读页面主要区域

四、定义文章块：

article表示文章块，用来标识页面中一块完整的，独立的，可以被转发的内容，例如：

 <header role="banner">
        <nav role="navigation">[包含多个链接的ul]</nav>
    </header>
    <main role="main">
        <article>
            <h1 id="news">区域链“时代号”列车驶来</h1>
            <p>对于精英来说，这个春节有些特殊</p>
            <h2 id="sub1">1.三点无眠</h2>
            <p><img src="********">***************</p>
            <h2 id="sub2">2.早八犯困</h2>
            <p>****</p>
            ......
        </article>
     </main>

article中可以包含各种类型的内容，同时article可以内嵌article

五、定义区块：

section表示区块，用来标识文档中的节，多用于对内容进行分区，如章节，页眉，页脚等，例如：

    <h1>网页标题</h1>
    <section>
        <h2>区块标题1</h2>
        <ol>
            <li>列表项目1</li>
            <li>列表项目2</li>
            <li>列表项目3</li>
        </ol>
    </section>
    <section>
        <h2>区块标题2</h2>
        <ol>
            <li>列表项目4</li>
            <li>列表项目5</li>
            <li>列表项目6</li>
        </ol>
    </section>

注：section定义的是通用的区块，标记为页面中的特定区域，较为注重内容的独立性，而div不传达任何语义，由div所构建的区域则更关注其结构的独立性

六、定义附栏：

aside用来标识附栏，用来标识所处内容之外的内容，它可以包含与相关内容有关的引用，侧边广告，导航条等用法分别为如下两种：

1）作为主体内容的附属信息部分

2）作为页面或站点辅助功能的部分

    <aside>
        <nav>
            <h2>友情链接</h2>
        <ul>
            <li><a herf="#"></a>网站1</li>
            <li><a herf="*"></a>网站2</li>
            <li><a herf="$"></a>网站3</li>
        </ul>        
        </nav>
    </aside>

上述代码为使用aside元素为个人微博添加一个友情链接的辅助板块

七、定义页脚：

footer表示脚注，用来表示文章或节的页脚，可用在article aside blockquote body detail fieldset figure section或 td结构的页脚

当footer作为body的页脚时，一般位于页面的页脚

 <article>
        <h1>文章标题</h1>
        <p>文章内容</p>
        <footer>
            <p>注释信息</p>
            <address><a herf="#">W3C</a></address>
        </footer>
    </article>
    <footer role="contentinfo">版权信息</footer>

注：不能在footer中嵌套header或另一个footer，同时也不能将footer嵌套在header或address元素里