zoukankan      html  css  js  c++  java
  • 前端基础小标签3 H5新标签

    第二部分
    H5的新标签
    一、
    <!-- mark标签
                 1.用于显示页面中需要重点关注的内容,就像看书需要用荧光笔划重点一样
                 2.浏览器通常会用黄色显示mark标注的内容

    二、        -->
    <article>
                <header>
                    <h2>我们需要好好学习<mark>HTML5</mark>相关课程</h2>
                </header>
                <p>
                    <mark>HTML 5</mark>是下一代的HTML规范<br />
                </p>
            </article>

    ****疑问:article和section以及nav的区别?
    <!--
                article:代表一篇独立的文档内容,可以是一片文章或者一篇短文,通常由标题和内容组成
                    可以使用header定义文档的标题
                    可以使用footer定义文档的脚注
                    可以使用子article划分文档的多个段落
                    可以使用section对文档进行分块
                section:对页面的内容进行分块,通常也可以由标题和内容组成
                
                二者的区别: article侧重于文档 section侧重于分块
            -->
    三、
    header标签与footer标签:
    <!-- header通常用于代表标题,但是和h1到h6不一样,h1-h6仅代表标题,
                而header代表头部分,header范围更广,header可以包含h1-h6,也可以包含p或者span或者nav等标签
                一般header所代表的的标题内容更加丰富
                 -->
                
                <!-- footer代表脚注部分,可以包含一些版权信息或者脚注部分,一般代表附加说明信息 -->

    实例:
    <body>
    <header>
                <img src="../img/logo.png" alt="尚学堂" />&nbsp;
                <a href="#">返回首页</a>
                <h1>浏览帖子内容</h1>
            </header>    
            
            <!-- 帖子内容 -->
            <article>
                <h2>学习Android,必须先学习Java吗?</h2>
                <p>Android上的应用程序只能用Java编写吗?可以用C++吗?</p>
                <!-- 回复部分 -->
                <section>
                    <h2>回复内容</h2>
                    <!-- 每个article代表一个回复 -->
                    <article>
                        <!-- 回复的标题 -->
                        <header>
                            <h3>还是得学习Java</h3>                    
                            <div>作者: xyr</div>
                        </header>
                        
                        <p>虽然Android不一定要使用Java开发,还可以选择JavaScript开发或者NDK开发,但是Java毕竟是Android开发的主流语言</p>
                        
                    </article>
                    <!-- 每个article代表一个回复 -->
                    <article>
                        <!-- 回复的标题 -->
                        <header>
                            <h3>Java是基础</h3>                    
                            <div>作者: xyr2</div>
                        </header>
                        <p>Java是基础,学好Java再去学习Android事半功倍</p>                
                        
                    </article>
                </section>
                <!-- 评价部分 -->
                <section>
                    <h2>评价内容</h2>
                    <!-- 每个article代表一个评价 -->
                    <article>
                        <!-- 评价的标题 -->
                        <h3>讨论很好</h3>
                        <p>大家讨论的很深入</p>
                        
                    </article>
                    <article>
                        <!-- 评价的标题 -->
                        <h3>赞</h3>    
                        <p>不错,赞</p>
                    </article>
                </section>
                
                <!-- 帖子的"脚注" -->
                <footer>
                    以上帖子和回复只代表个人观点,不代表尚学堂的观点和立场
                </footer>
            </article>
    </body>
    <!-- nav专门用于页面上的导航栏  如上方的主导航条,侧边导航栏,页面内部导航栏,页面底部导航栏
                 aside专门用于定义当前页面和当前文章的附属信息,通常推荐将aside元素渲染成侧边栏
                
                 将aside元素放在body的内部,表明为整个页面添加边栏
                 将aside元素防在其他元素内部,表明为父元素添加边栏
            -->

    作为新手小菜鸟的我,只想记录,便于温故知新,如有错误或疏忽,请留言,审查后改正,谢谢各位大佬
  • 相关阅读:
    Oracle GoldenGate部署系列
    SequoiaDB培训视频
    Macbook 修复Office Excel 异常问题
    linux vim 配置 go 开发环境
    hyperledger fabric 1.0.5 分布式部署 (九)
    IntelliJ IDEA 安装golang 插件
    hyperledger fabric 1.0.5 分布式部署 (八)
    docker 学习
    spring-boot 集成ehcache报错:org.springframework.expression.spel.SpelEvaluationException: EL1008E:
    CentOS7 Docker 安装
  • 原文地址:https://www.cnblogs.com/zhangsonglin/p/10435044.html
Copyright © 2011-2022 走看看