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. H5常用代码：适配方案4

    前面有分享了4种适配方案,但始终是通过手动缩放或者视口缩放来实现,用来做一些专题页,或者功能相对简单的项目来说也是完全能应付的,但整体来说感觉还是一种缩放,说不上是真正的适配,言外之意就是即将分享真正 ...

  2. Atitit.数据库存储引擎的原理与attilax 总结

    Atitit.数据库存储引擎的原理与attilax 总结 1. 存储引擎是什么1 2. 其它数据库系统(包括大多数商业选择)仅支持一种类型的数据存储2 3. 表的存储有三个文件:结构+数据+索引2 4 ...

  3. Atitit 图像处理 常用8大滤镜效果 Jhlabs 图像处理类库 java常用图像处理类库

    Atitit 图像处理 常用8大滤镜效果 Jhlabs 图像处理类库 java常用图像处理类库1.1. 5种常用的Photoshop滤镜,分别针对照片的曝光.风格色调.黑白照片处理.锐利度.降噪这五大 ...

  4. salesforce 零基础学习（二十七）VF页面等待（loading）效果制作

    进行查询的情况下,显示友好的等待效果可以让用户更好的了解目前的状态以及减少用户消极的等待,例如下图所示. VF提供了<apex:actionStatus>标签,,此标签用于显示一个AJAX ...

  5. iOS-应用上架

    其实挺讨厌苹果这一套上架机制,审核周期长,而且网速又慢,但又没办法,只能上架到AppStore,无奈. 上架前需要确保应用图标齐全,并在Info.plist中的Icon files添加了png图片,不 ...

  6. leancloud 用户登录（调用API） 教程

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; ...

  7. 那些年我们一起过的JS闭包，作用域，this，让我们一起划上完美的句号。

    之前有写过闭包,作用域,this方面的文章,但现在想想当时写的真是废话太多了,以至于绕来绕去的,让新手反而更难理解了,所以就有了此篇文章,也好和闭包,作用域,this告一段落. 第一个问题:什么是闭包 ...

  8. javase基础复习攻略《二》

    今天就开始的真正走进JAVASE的世界,本篇介绍的是:JAVASE基础语法,大家如果有C语言的基础,对于本节内容一定感觉非常轻松,编程语言之间的都是相通的,只不过C语言属于面向过程编程,而JAVA语言 ...

  9. 15个前卫的 HTML5 & CSS3 网页设计作品

    今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...

  10. BrowserSync - 浏览器同步测试工具

    背景: 之前在学gulp的时候,使用gulp-livereload来实时自动刷新页面省时开发,但一直比较难用,现在找到新的替代神器. 安装:   // 使用淘宝镜像会快些 npm install -g ...