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. 12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面

    上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...

  2. 可拖动的DIV续

    之前写过一篇可拖动的DIV讲如何实现可拖动的元素,最后提出了几点不足,这篇文章主要就是回答着三个问题 1. 浏览器兼容性 2. 边界检查 3. 拖动卡顿.失灵 先附上上次代码 <!DOCTYPE ...

  3. Qt5.3编译错误——call of overloaded ‘max(int int)’is ambiguous

    错误描述: 今天在使用Qt写一个C++函数模板的测试程序的时候,编译的时候,编译的时候出现如下错误: 错误描述为:在main函数中,进行函数max()重载时,出现(ambiguous)含糊的,不明确的 ...

  4. 一道js面试题看变量的作用域

    [问题]分别求下面程序的输出结果: 1. <script type="text/javascript"> var a = 10; sayHi(); function s ...

  5. Redis批量删除KEY的方法

    Redis 中有删除单个 Key 的指令 DEL,但好像没有批量删除 Key 的指令,不过我们可以借助 Linux 的 xargs 指令来完成这个动作. 代码如下: redis-cli keys “* ...

  6. Thrift架构~windows下安装和Hello World及编码引起的错误

    最近开始正式接触Thrift架构,很牛B的技术,它被apache收纳了,属于开源中的一员,呵呵. 概念: Thrift源于大名鼎鼎的facebook之手,在2007年facebook提交Apache基 ...

  7. Js~动态判断PC和手机浏览器

    这个只是一个小知识,也是在网上找的,挺好用! 动态判断浏览器是PC还是移动端! <script> var browser={ versions:function(){ var u = na ...

  8. MySQL(五) MySQL中的索引详讲

    序言 之前写到MySQL对表的增删改查(查询最为重要)后,就感觉MySQL就差不多学完了,没有想继续学下去的心态了,原因可能是由于别人的影响,觉得对于MySQL来说,知道了一些复杂的查询,就够了,但是 ...

  9. OpenCASCADE Application Framework Data Framework Services

    OpenCASCADE Application Framework Data Framework Services eryar@163.com 一.概述Overview OpenCASCADE的数据框 ...

  10. initial、inherit、unset、revert和all

    前面的话 在CSS中,有4个关键字理论上可以应用于任何的CSS属性,它们是initial(初始).inherit(继承).unset(未设置).revert(还原).而all的取值只能是以上这4个关键 ...