leiyanting

导航

 
###语义化标签
    在HTML 5出来之前,我们用div来表示页面头部,章节,页脚等。但是这些div都没有实际意义。
    各大浏览器厂商分析了上百万的页面,从中发现了DIV名称的通用id名称大量重复。例如,很多开发人员喜欢使用
    div id="footer"来标记页脚内容,所以Html5元素引入了语义化标签(一组新的片段类元素)
    
    https://dev.opera.com/blog/presentation-html5-and-accessibility-sitting-in-a-tree-4/idlist-url.htm
    https://dev.opera.com/blog/presentation-html5-and-accessibility-sitting-in-a-tree-4/classlist-url.htm
    
    <hgroup></hgroup>
    <header></header>
    <nav></nav>
    <section></section>
    <footer></footer>
    <article></article>
    <aside></aside>
    
    
    语义化的好处
        HTML5可以让很多更语义化结构化的代码标签代替大量的无意义的div标签
        这种语义化的特性提升了网页的质量和语义
        对搜索引擎更加的友好
    他们这些标签功能就是代替<div>功能中的一部分,他们没有任何的默认样式,除了会让文本另起一行外;
    https://gsnedders.html5.org/outliner/
    
    
    hgroup元素代表 网页 或 section 的标题,当元素有多个层级时,该元素可以将h1到h6元素放在其内,譬如文章的主标题和副标题的组合
    
        <hgroup>
            <h1>HTML 5</h1>
            <h2>这是一篇介绍HTML 5语义化标签和更简洁的结构</h2>
        </hgroup>
    
        hgroup使用注意:
            如果只需要一个h1-h6标签就不用hgroup
            如果有连续多个h1-h6标签就用hgroup
            如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签
            
    
    header 元素代表 网页 或 section 的页眉。
        通常包含h1-h6元素或hgroup
    
        <header>
            <hgroup>
                <h1>网站标题</h1>
                <h2>网站副标题</h2>
            </hgroup>
        </header>
        
        header使用注意:
            可以是“网页”或任意“section”的头部部分
            没有个数限制。
            如果hgroup或h1-h6自己就能工作的很好,那就不要用header。



    nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
    
        <nav>
            <ul>
                <li>HTML 5</li>
                <li>CSS3</li>
                <li>JavaScript</li>
            </ul>
        </nav>
        
        nav使用注意:
            用在整个页面主要导航部分上,不合适就不要用nav元素;
    
    
    
    section元素代表文档中的 节 或 段,段可以是指一篇文章里按照主题的分段;节可以是指一个页面里的分组。
    
        <section>
            <h1>section是啥?</h1>
            <article>
                <h2>关于section</h1>
                <p>section的介绍</p>
                <section>
                    <h3>关于其他</h3>
                    <p>关于其他section的介绍</p>
                </section>
            </article>
        </section>
        
        section使用注意:
            section不是一般意义上的容器元素,如果想作为样式展示和脚本的便利,可以用div。
            article、nav、aside可以理解为特殊的section,
            所以如果可以用article、nav、aside就不要用section,没实际意义的就用div     
        
        
        
    article元素最容易跟section和div容易混淆,其实article代表一个在文档,页面或者网站中自成一体的内容
    
        <article>
            <h1>一篇文章</h1>
            <p>文章内容..</p>
            <footer>
                <p><small>版权:html5jscss网所属,作者:damu</small></p>
            </footer>
        </article>
        
        article使用注意:
            独立文章:用article
            单独的模块:用section
            没有语义的:用div
        
        
        
    aside元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等
        
        在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以是日志串连,其他组的导航,甚至广告,这些内容相关的页面。
        
        <article>
            <p>内容</p>
            <aside>
                <h1>作者简介</h1>
                <p>小北,前端一枚</p>
            </aside>
        </article>
        
        aside使用总结:
            aside在article内表示主要内容的附属信息,
            在article之外则可做侧边栏
            如果是广告,其他日志链接或者其他分类导航也可以用

    
    
    
    footer元素代表 网页 或 section 的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。
    
        <footer>
            COPYRIGHT@damu
        </footer>
        
        footer使用注意:
            可以是 网页 或任意 section 的底部部分;
            没有个数限制,除了包裹的内容不一样,其他跟header类似。
posted on 2021-09-27 14:42  leiyanting  阅读(90)  评论(0编辑  收藏  举报