<!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. Linux之Shell的算术运算

    在Bash的算术运算中有以下几种方法:名称                语法                    范例算术扩展            $((算术式))              r ...

  2. linux中comm命令用法

    linux系统中comm命令用法详解 linux系统下的comm命令是一个非常实用的文件对比命令. comm命令功能:   选择或拒绝两个已排序的文件的公共的行. comm命令语法:comm [-12 ...

  3. Opencv混合高斯模型前景分离

    #include "stdio.h" #include "string.h" #include "iostream" #include &q ...

  4. PingUtil in Android

    Ping a host in Android:“ping -c 1 127.0.0.1”-c 1: The ping times. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1 ...

  5. Python进程、线程

    Lock & RLock :用来确保多线程多共享资源的访问. Semaphore : 用来确保一定资源多线程访问时的上限,例如资源池. Event : 是最简单的线程间通信的方式,一个线程可以 ...

  6. backbone模型层浅析

    Model层有两个类: Model, Collection 1.Model 不翻文档,我们用代码说话. 首先分析下类. var myM = Backbone.Model.extend({})//构造一 ...

  7. php返回json数组

    1.后端 //处理json数组中文问题 function arrayRecursive(&$array, $function, $apply_to_keys_also = false) { s ...

  8. Verify Preorder/Inorder/Postorder Sequence in Binary Search Tree

    Verify Preorder Sequence in Binary Search Tree \Given an array of numbers, verify whether it is the ...

  9. （转）C++0x语言新特性一览

    转自:http://blog.csdn.net/zwvista/article/details/2429781 原文请见http://en.wikipedia.org/wiki/C%2B%2B0x. ...

  10. [Linux]非外网环境下配置lnmp心得

    1.安装gcc编译器 基本所有编译安装包都需要gcc编译器,而且编译安装gcc也需要一个编译器,这是一个悖论.所以,这里只能寻求rpm包安装.但是rpm包需要匹配特定的操作系统内核,所以没有一个通用的 ...