Article元素

以下为对应代码:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

  <article>

      <header>

          <h1>极客学院</h1>

      </header>

      <article>

          <header>页面头部1</header>

          <p>评论</p>

          <footer>底部1</footer>

      </article>

      <footer><p>页面底部</p></footer>

  </article>

<article>

    <object>

        <embed src="test.html" width="600" height="700"></embed>

  </object>

  </article>

</body>

</html>

效果图:

总结：article可以做为引入外部页面的语义化元素.article可以使页面代码结构更清晰.

Section元素

以下为对应代码:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<section>

    <h1>test</h1>

    <p>这是水果</p>

</section>

<article>

    <h1>这是一个水果类</h1>

    <p>这是水果</p>

    <section>

        <h1>这是一个红富士</h1>

        <p>这是红富士</p>

    </section>

    <section>

        <h1>这是一个国光</h1>

        <p>这是国光</p>

    </section>

</article>

<section>

    <h1>玩具类</h1>

    <article>

        <h2>这是玩具1</h2>

        <p>玩具1</p>

    </article>

    <article>

        <h2>这是玩具2</h2>

        <p>玩具2</p>

    </article>

</section>

</body>

</html>

效果图:

总结：article嵌套section时字体大小发生了变化，但是section嵌套article字体却还是一样.

article通常做为一个页面的独立部分存在，而section强调对页面内容的划分.

NAV导航

以下为对应代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<nav>

    <ul>

        <li><a href="#">主页</a></li>

        <li><a href="#">开发文档</a></li>

    </ul>

    <article>

        <header>

            <h1>页面导航</h1>

            <nav>

            <ul>

                <li><a href="#1">html5</a></li>

                <li><a href="#">css3</a></li>

            </ul>

            </nav>

        </header>

        <section id="#1">

        <h1>html5</h1>

        <p>......</p>

        </section>

        <section>

            <h1>css3</h1>

            <p>......</p>

        </section>

        <footer>

       <a><p>版权</p></a>

        </footer>

    </article>

</nav>

</body>

</html>

效果图

总结：个人感觉该标签的文档语义大于功能语义

Aside元素

以下为对应代码:

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    </head>

    <title>

    </title>

    <body>

        <header>

            <h1>test</h1>

        </header>

        <article>

            <h1>语法</h1>

            <p>文章的正文</p>

            <aside>

                <h1>名词解释</h1>

                <p>语法：这是一个对语言来说很重要的内容体</p>

            </aside>

        </article>

        <aside>

            <nav>

                <h2>评论</h2>

                <ul>

                    <li><a href="#">2015-3-10</a></li>

                    <li><a href="#">元素1</a></li>

                </ul>

            </nav>

        </aside>

    </body>

</html>

效果图

结论：没看到什么效果，要跟具体的css样式合作使用吧，否则也只是个语义标签

html5学习笔记(3)--主题结构元素-1的更多相关文章

  1. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  2. [html5] 学习笔记-改良的input元素种类

    在html5中,大幅度增加与改良了input元素的种类,可以简单的使用这些元素来实现之前需要JS脚本来实现的功能. 1.url类型.email类型.date类型.time类型.datetime类型.d ...

  3. [html5] 学习笔记-表单新增元素与属性

    本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.for ...

  4. HTML5学习笔记三：aside元素，time元素与微格式

    一.aside元素 表示当前页面或文章的附属信息部分,相关的引用,侧边栏,广告等有别于主要内容的部分:主要有一下两种用法: 1. 被包含在article元素中作为主要内容的附属信息部分,可以是与当前文 ...

  5. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  7. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  8. amazeui学习笔记--css（HTML元素5）--表格Table

    amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名  <table class="am-table"& ...

  9. matlab学习笔记12_3串联结构体，按属性创建含有元胞数组的结构体,filenames,isfield,isstruct,orderfields

    一起来学matlab-matlab学习笔记12 12_3 结构体 串联结构体,按属性创建含有元胞数组的结构体,filenames,isfield,isstruct,orderfields 觉得有用的话 ...

随机推荐

  1. jsp中运用application实现共享留言板功能

    jsp中application的知识点总结: 1.一个Web应用程序启动后,将会自动创建一个application对象,在整个应用程序的运行过程中只有这一个application对象,即所有访问该网站 ...

  2. JS 脚本最后加载

    有些脚本执行,为了不影响页面其他脚本执行,需要放在最后 <script type="text/javascript"> function addLoadEvent(fu ...

  3. Java EE开发平台随手记6——Mybatis扩展4

    这篇博客中来说一下对Mybatis动态代理接口方式的扩展,对于Mybatis动态代理接口不熟悉的朋友,可以参考前一篇博客,或者研读Mybatis源码. 扩展11:动态代理接口扩展 我们知道,真正在My ...

  4. Netty学习一：基本知识

    1. Netty基础知识 1.1 Netty出现的原因 Java NIO 太难用,存在BUG(如Epoll-Bug) 基于第一点,大多数高性能服务器被C和C++盘踞 同样基于第一点,Java NIO编 ...

  5. 利用SSIS的ForcedExecutionResult 属性 和CheckPoint调试Package

    1,ForcedExecutionResult 强制一个package或task执行的结果,共有四种值 None,Success,Failure,Completion,默认值是None,表示不强制返回 ...

  6. 【WP8.1开发】认识后台任务

    在手机上,使用后台,不像电脑上那么随意,准确地讲嘛,在移动平台上,后台任务都有严格的限制.至于说为什么会有这么多限制,我估计初衷很明显——保证系统的性能不受某个或某几个应用的负面影响:另外就是出于安全 ...

  7. 各浏览器Iframe对contentWindow、contentDocument、document及frames属性测试

    Iframe易于嵌套及管理页面,但经常遇到跨域.父子页面访问问题,对于子页面访问父页面可以兼容性地通过window.Top或window.Parent或window.frameElement等操作,但 ...

  8. 可变参数宏__VA_ARGS__

    在 GNU C 中,宏可以接受可变数目的参数,就象函数一样,例如:#define pr_debug(fmt,arg...) \printk(KERN_DEBUG fmt,##arg) 用可变参数宏(v ...

  9. Sparse Filtering 学习笔记（二）好特征的刻画

      Sparse Filtering 是一个用于提取特征的无监督学习算法,与通常特征学习算法试图建模训练数据的分布的做法不同,Sparse Filtering 直接对训练数据的特征分布进行分析,在所谓 ...

  10. SpaceBase – 基于 Sass 的响应式 CSS 框架

    SpaceBase 是一个基于 Sass 的响应式 CSS 框架.SpaceBase 是可以在建立和定制您的需要的一个样板层,它结合最佳实践为今天的响应式网页与我们对每一个项目中使用的核心组件. 在线 ...