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. webservice5

    如何访问webservice . 三种方式我知道, 但是, 方式1 只说明了如何访问wsdl, 不知道如何调用,现在就是需要知道如何像下面url描述一样 , http get .post 方式调用ws ...

  2. Java连接Oracle数据库开发银行管理系统【二、设计篇】

    一.总体分析     此系统的实现并不难,但是如何更好的设计出实现方式还是需要更深入的分析,例如:如果再增加其他功能,是不是需要变动的 代码很少,只是直接再增加一点功能就可以了呢?如果使用的不是Ora ...

  3. Atitit 数据库事务实现原理

    Atitit 数据库事务实现原理   1.1. 自己在程序中实现事务操作. 如果只是需要事务的话,你自己给mongo操作加上事务功能就可以啦..数据库事务只不过是他自己实现了而已..如果数据库不支持事 ...

  4. flow.ci + Github + Slack 一步步搭建 Python 自动化持续集成

    理想的程序员必须懒惰,永远追随自动化法则.Automating shapes smarter future. 在一个 Python 项目的开发过程中可能会做的事情:编译.手动或自动化测试.部署环境配置 ...

  5. iOS开发——网络使用技术OC篇&网络爬虫－使用正则表达式抓取网络数据

    网络爬虫-使用正则表达式抓取网络数据 关于网络数据抓取不仅仅在iOS开发中有,其他开发中也有,也叫网络爬虫,大致分为两种方式实现 1:正则表达 2:利用其他语言的工具包:java/Python 先来看 ...

  6. vuejs - the component is a fragment instance

    vuejs - the component is a fragment instance http://vuejs.org/guide/components.html#Fragment-Instanc ...

  7. CSS垂直三列居中，中间自适应

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

  8. 简单使用AutoMapper实现DTO转换

    DTO(Data Transfer Object)数据传输对象,只是传输数据,完成与领域对象之间的转换,并不包含领域业务处理. 当领域模型设计人员只关注核心业务,满足于领域模型的精巧,而不关心具体实现 ...

  9. poj 1724ROADS（bfs和dfs做法）

    /* dfs比较好想,就是测试数据的问题,导致在遍历边的时候要倒着遍历才过! */ #include<iostream> #include<cstdio> #include&l ...

  10. 你用过这种奇葩的C#注释吗？如何看待

    本人虽然不是专业开发人员,也非专业出身,但一直使用C#堆码,解决自己日常的小问题.包括自己的研究,也是用C#来实现和测试.对C#是情有独钟.虽然C#的很多高级技术不会用,也不太懂,但总归是知道,耳闻目 ...