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. JS判断鼠标移入元素的方向

    最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...

  2. Java-类和对象基础练习

    1．创建一个三角形类,成员变量三边,方法求周长,创建类主类A来测试它. package liu0919; public class Sanjiao { public double z(double a ...

  3. Redis学习笔记~关于空间换时间的查询案例

    回到目录 空间与时间 空间换时间是在数据库中经常出现的术语,简单说就是把查询需要的条件进行索引的存储,然后查询时为O(1)的时间复杂度来快速获取数据,从而达到了使用空间存储来换快速的时间响应!对于re ...

  4. [Java面试三]JavaWeb基础知识总结.

    1.web服务器与HTTP协议 Web服务器 l WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. l Internet上供外界访问的Web资源分为: • 静 ...

  5. salesforce 零基础学习（三十）工具篇：Debug Log小工具

    开发中查看log日志是必不可少的,salesforce自带的效果显示效果不佳,大概显示效果如下所示: chrome商城提供了apex debug log良好的插件,使debug log信息更好显示.假 ...

  6. iOS-数据持久化-第三方框架FMDB的使用

    FMDB简单介绍 一.简单说明 1.什么是FMDB FMDB是iOS平台的SQLite数据库框架 FMDB以OC的方式封装了SQLite的C语言API 2.FMDB的优点 使用起来更加面向对象,省去了 ...

  7. iOS----Asset Catalog的用法

    文/余书懿(简书作者)原文链接:http://www.jianshu.com/p/7aa06ce22a7b著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 引言 Asset Catalo ...

  8. 24．编写一个Car类，具有String类型的属性品牌，具有功能drive； 定义其子类Aodi和Benchi，具有属性：价格、型号；具有功能：变速； 定义主类E，在其main方法中分别创建Aodi和Benchi的对象并测试对象的特 性。

    package zhongqiuzuoye; public class Car { String brand; public void drive() {} } package zhongqiuzuo ...

  9. Mybatis中SqlMapper配置的扩展与应用(1)

    奋斗了好几个晚上调试程序,写了好几篇博客,终于建立起了Mybatis配置的扩展机制.虽然扩展机制是重要的,然而如果没有真正实用的扩展功能,那也至少是不那么鼓舞人心的,这篇博客就来举几个扩展的例子. 这 ...

  10. XML学习笔记4——XSD简单数据类型

    XSD提供了数据类型,并且支持自定义数据类型,但这一切都是建立在XSD内置数据类型和一套扩展内置数据类型的规则基础之上的,在这一篇笔记中,就来看看XSD中的数据类型. 1.XSD数据类型图 先看一下数 ...