• THML文档布局元素


     学习要点:

        1.文档元素总汇

        2.文档元素解析

    一.文档元素总汇

        文档元素基本没有什么实际作用效果,主要目的是在页面布局时区分各个主题和概念。

            元素名称                                 说明

             h1~h6             表示标题

             header            表示首部

             footer             表示尾部

               nav               表示有意集中在一起的导航元素

            section            表示重要概念或主题

            article             表示一段独立的内容

            address            表示文档或article的联系信息

             aside             表示与周边内容少有牵涉的内容

             hgroup           将一组标题组织在一起

            details             生成一个区域,用户将其展开可以获得更多细节

            summary          用在details元素中,表示该元素内容的标题或说明

    二.文档布局元素解析

    文档元素的大部分标签,是没有任何效果的,完全是为了配合语义使用,以强调它的结构性。只有在后面的章节学习CSS,配合使用才能起到布局和样式的效果。

    1.<header>表示首部

    <header>
        这里部分一般是页面头部,包括:LOGO、标题、导航等内容
    </header>

    解释:<header>元素主要设置页面的标头部分。

     

    2.<footer>表示尾部

    <footer>
        这里是页面的尾部,一般包括:版权声明、友情链接等内容
    </footer>

    解释:<footer>元素主要设置页面的尾部。

     

     3.<h1>~<h6>添加标题

    <header>
        <h1>标题部分</h1> 
        <h4>小标题部分</h4></header>

     解释:<h1>~<h6>实际作用就是加粗并改变字体大小。用于各种标题文档。

     

    4.<hgroup>组合标题

    复制代码
    <header>
        <hgroup>
            <h1>标题部分</h1>
            <h4>小标题部分</h4>
        </hgroup>
    </header>
    复制代码

    解释:<hgroup>元素的作用就是当多个标题出现,干扰到一对或多个本身需要整合的标题,这是使用此元素包含群组。

     

    5.<section>文档主题

    <section>
    这里一般是存放文档主题内容。
    </section>

     解释:<section>元素的作用是定义一个文档的主题内容。

     

    6.<nav>添加导航

    <header>
        <h1>标题部分</h1>
        <h4>小标题部分</h4>
        <nav>这里存放文档的导航</nav>
    </header>

     解释:<nav>元素给文档页面添加一个导航。

    7.<article>添加一个独立成篇的文档

    复制代码
    <article> <!--添加一个独立成篇的文档-->
        <header> <!--添加一个独立成篇的文档头部-->
            <nav></nav> <!--添加一个独立成篇的文档导航-->
        </header>
    <section>文档主题</section> <!--添加一个独立成篇的文档主题-->
    <footer>尾部</footer> <!--添加一个独立成篇的文档尾部-->
    </article>
    复制代码

    解释:<article>元素表示独立成篇的文档,里面可以包含头、尾、主题等一系列内容。在比较大的页面中会使用到,比如一片博文的列表,每篇博文,都有自己的头、尾、主题等内容。和此相似的还有论坛的帖子、用户的评论、新闻等。

     

    8.<aside>生成注释栏

    <aside>这是一个注释栏</aside>

    解释:<aside>元素专门为某一段内容进行注释使用。也就是侧栏

     

    9.<address>表示文档或article元素的联系信息。

     <address>联系信息</address>

     解释:如果是在<body>元素下时,表示整个文档的联系信息。如果是在<article>元素下时,表示其下的联系信息。

     

    10.<details>元素生成详情区域、<su ary>元素在其内部生成说明标签 解释:由于大多数主流浏览器尚未支持,暂略。

  • 相关阅读:
    PHP防止跨站表单提交与同站跨页伪造表单的攻击
    dz数据结构
    DiscuzX的目录权限设置1
    discuz 文档说明
    discuz x 系列目录结构说明
    验证码问题
    Discuz! X2验证码的产生及验证
    Discuz 升级X3问题汇总整理
    IIS7以上版本去掉伪静态去掉index.php方法
    Discuz 模板标签说明
  • 原文地址:https://www.cnblogs.com/zjltt/p/7199012.html
Copyright © 2020-2023  润新知