第二部分
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元素防在其他元素内部,表明为父元素添加边栏
        -->

前端基础小标签3 H5新标签的更多相关文章

  1. H5新标签(适合新手入门)

    H5新标签 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTML5 sublime 输入 html:5 < ...

  2. H5新标签

    1. H5新标签 语义标签: <article>定义文章</article><aside>定义文章侧边栏</aside> <figure>定 ...

  3. 前端面试基础-html篇之H5新特性

    h5的新特性(目前个人所了解)如下 语义化标签 表单新特性 视频(video)和音频(audio) canvas画布 svg绘图 地理定位 为鼠标提供的拖放API webworker (重点)Stor ...

  4. 处理H5新标签方法

    语义化 HTML5中加入了更加具有语义化的标签,比如header,nav,footer等,可以为搜索引擎优化,让爬虫能更好地理解网页结构. 但是对于新标签的兼容性不是很好,IE9以下旧版本不支持新的语 ...

  5. h5新标签介绍

    html5新增了一些标签 这些标签都是语义标签,可以帮助我们更好的理解,代码中的意思:(都是双标签) 案例: 将语义标签翻译过来为 <div class="header"&g ...

  6. ie8以下不兼容h5新标签的解决方法

    HTML5新添了一些语义化标签,他们能让代码语义化更直观易懂,有利于SEO优化.但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理. 解决思路就是用js创建h ...

  7. 前端基础之CSS的引入+HTML标签选择器+CSS操作属性

    clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式:                   ...

  8. 前端基础小标签5 H5的一些新标签属性

    第二部分 部分图片和内容摘要于网络 二. formaction 属性规定当表单提交时处理输入控件的文件的 URL. formaction 属性覆盖 <form> 元素的 action 属性 ...

  9. H5 新标签用法及解释

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(p ...

随机推荐

  1. java virtual machine launcher Error：Could not create the Java Virtual Machine. Error:A Fatal exception has occurred,Program will exit.

    Error:Could not create the Java Virtual Machine. Error:A Fatal exception has occurred,Program will e ...

  2. jquer文字闪烁简单实现

    arguments.callee <script type="text/javascript"> (function () { $(".usesend&quo ...

  3. uva11990 动态逆序对

    这题说的是给了一个数组,按照他给的顺序依次删除数,在删除之前输出此时的逆序对个数 我们用Fenwick树 维护这整个数列, C[i]是一个 treap的头, 管理了在树状数组中 能影响他的点,然后我们 ...

  4. [C#]Socket通信BeginReceive异步接收数据何时回调Callback

    原文地址:http://www.cnblogs.com/wangtonghui/p/3277303.html 最近在做服务器压力测试程序. 接触了一段时间Socket异步通讯,发现自己对BeginRe ...

  5. Spark学习之路 （十五）SparkCore的源码解读（一）启动脚本

    一.启动脚本分析 独立部署模式下,主要由master和slaves组成,master可以利用zk实现高可用性,其driver,work,app等信息可以持久化到zk上:slaves由一台至多台主机构成 ...

  6. xlrd、xlwt

    一个公司内,销售或者人事都是使用excel来记录员工的信息,所以介绍可操作excel文件的xlrd.xlwt模块. 其中xlrd模块实现对excel文件内容读取,xlwt模块实现对excel文件的写入 ...

  7. 设计模式之Strategy（策略）（转）

    Strategy是属于设计模式中 对象行为型模式,主要是定义一系列的算法,把这些算法一个个封装成单独的类. Stratrgy应用比较广泛,比如, 公司经营业务变化图, 可能有两种实现方式,一个是线条曲 ...

  8. nextjs 服务端渲染请求参数

    Post.getInitialProps = async function (context) { const { id } = context.query const res = await fet ...

  9. [转载]基于 Token 的身份验证

    作者:王皓发布于:2015-08-07 22:06更新于:2015-08-07 22:07 最近了解下基于 Token 的身份验证,跟大伙分享下.很多大型网站也都在用,比如 Facebook,Twit ...

  10. .net core创建项目（指令方式）

    所谓的指令创建项目,就是不用再已安装的VS2015的环境下或者VS Core下创建,直接通过DOS指令创建也是OK的. 1.找到你所准备保存项目的项目文件夹(你也可以到某个目录用指令创建项目文件夹[  ...