<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <title></title>

</head>

    <body>

        <!--header 和hgroup-->

        <!--header标签在语法规范中包含标题、标题介绍或标题导航。header不允许嵌套，也不允许出现在地址或者footer元素内-->

        <header>

            <img />

            <hgroup>

                <h1>

                </h1>

                <h2>

                </h2>

            </hgroup>

        </header>

        <!--article-->

        <!--article元素对应Web页面中的一个独立区域，该区域可包含新闻、博客文章之类的内容-->

        <div>

            <article>

                <img />

                <h2></h2>

                <address></address>

                <time>2014-8-4</time>

            </article>

        </div>

<!--        aside元素作用于页面上一些与主题联系不大而相对独立的区域。

        section元素作用于同一主题下不同的文档部分，例如论文各章节或是表单页面中的独立表格。-->

        <aside>

            <h2></h2>

            <section>

                <h3></h3>

                <p></p>

                <input />

            </section>

            <section>

                <h3></h3>

                <p></p>

                <input />

            </section>

            <nav>

                <h3></h3>

                <ul>

                    <li></li>

                </ul>

                <a></a>

            </nav>

        </aside>

        <!--一个figure中只能包含一个figcaption元素，实际上不能算作结构性元素，但在组织独立图片、图像、图标以及编码列表不错-->

        <figure>

            <img />

            <img />

            <img />

            <figcaption>

                图片说明

            </figcaption>

        </figure>

        <!--bei  jing

               北   京-->

        <ruby>

            北<rt>bei</rt>

            京<rt>jing</rt>

        </ruby>

        <!--mark 高亮标记一段文字-->

        <mark>高亮标记一段文字</mark>

        <!--wbr 破折号，没有结尾-->

        <wbr>用于让浏览器为长单词增加<wbr>可选择的破折号，以便自动折行

        www.simply<wbr>orange<wbr />juice.com

        <!--footer并非必须出现在页面底部，它也可以是article元素的一部分。footer不能嵌套，也不能在header或address里。-->

        <!--nav导航-->

        <footer>

            <p></p>

            <nav>

                <h3></h3>

                <div>

                    <a></a>

                </div>

            </nav>

        </footer>

    </body>

</html>

HTML5学习之文档结构和语义（一）的更多相关文章

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

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

  2. HTML5的文档结构和新增标签

    一．HTML5 文档结构1.第一步:打开 开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...

  3. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  4. HTML5的文档结构

    HTML5的文档结构 HTML5简化了许多,它的设计遵循了3个原则:1.兼容性.2.实用性.3.通用访问性     1. header 元素     <header> 标签定义文档或者文档 ...

  5. webservice学习01：wsdl文档结构

    webservice学习01:wsdl文档结构 wsdl文档结构 WSDL文档示例 <wsdl:definitions xmlns:xsd="http://www.w3.org/200 ...

  6. 10LaTeX学习系列之---Latex的文档结构

    目录 目录 前言 (一)对于Ctex宏包中的文档结构 1.说明 2.源代码 3.输出效果 4.技巧 (二)对于ctexart的文档结构 1.说明 2.源代码 3.输出效果 (三)对于ctexbook的 ...

  7. MongoDB学习笔记(四) 用MongoDB的文档结构描述数据关系

    MongoDB的集合(collection)可以看做关系型数据库的表,文档对象(document)可以看做关系型数据库的一条记录.但两者并不完全对等.表的结构是固定的,MongoDB集合并没有这个约束 ...

  8. 《Java开发学习大纲文档》V7.0

    <Java开发学习大纲文档>V7.0简介: 本文档是根据企业开发所需要掌握的知识点大纲进行总结汇编,是Java开发工程师必备知识体系,系统化学习针对性非常强,逻辑分析能力非常清晰;技术方面 ...

  9. Mongoose学习参考文档——基础篇

    Mongoose学习参考文档 前言:本学习参考文档仅供参考,如有问题,师请雅正 一.快速通道 1.1 名词解释 Schema : 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model ...

随机推荐

  1. canvas 中save和restore的用法

    在创建新的控件或修改现有的控件时,我们都会涉及到重写控件或View的onDraw方法. onDraw方法会传入一个Canvas对象,它是你用来绘制控件视觉界面的画布. 在onDraw方法里,我们经常会 ...

  2. Failed to resolve: junit:junit:4.12

    在Android Studio创建项目之后,提示一个junit错误. 解决方案: 第一步:找到build.gradle的file,如图:  第二步: 第三步:把中间行代码"testCompi ...

  3. 多版本python共存

    当不同版本python之间相互不能兼容时,可以使用virtualenv创建不同版本python的虚拟环境 当没有指定python解释器时(如下-p 即为指定的python版本),将使用默认的全局pyt ...

  4. vSphere、Hyper-V与XenServer 你选哪个？

    vSphere.Hyper-V与XenServer 你选哪个? 当在VMware vSphere.Microsoft Hyper-V与Citrix Systems XenServer之间做出选择时,v ...

  5. Python自动化之线程进阶篇

    拓展知识 什么是CPU-bound(计算密集型) 和I/O bound(I/O密集型) ? I/O bound 指的是系统的CPU效能相对硬盘/内存的效能要好很多,此时,系统运作,大部分的状况是 CP ...

  6. C#调用有有参有返的存储过程

    (1)在SQL Server中建立如下的存储过程: set ANSI_NULLS ONset QUOTED_IDENTIFIER ONGOCREATE PROCEDURE [dbo].[GetName ...

  7. iOS关于UILabel 基本属性 背景图片 背景色

    [代码] iOS关于UILabel 基本属性 背景图片 背景色 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  8. ubuntu14.04 163sources.list

    deb http://mirrors.163.com/ubuntu/ trusty main restricted universe multiverse deb http://mirrors.163 ...

  9. JavaScript——callback（回调函数

    1.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直 ...

  10. Oracle: SQL组合不同字段作为一个查询条件

    前端程序传过来的值是有三个字段组合之后的结果,后端程序处理,并且将查询的数据反馈给前端. PS:不能直接使用字段RPT_NO的,因为在这条记录中RPT_NO恰好等于其他三个字段的组合值. 正确的做法是 ...