<!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. PictureCutting图片批量裁切(裁剪)工具

    PictureCutting图片批量裁切(裁剪)工具 写这个工具的原因是因为在获取一个软件的皮肤包中的图片的时候需要进行批量的裁切工作,而有没有找到在linux下简单好用的工具,干脆就用QT写了一个. ...

  2. good luck

    ACM大法好,明天求轻虐,水一波~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  3. Python自动化之socket初识

    1. os.popen() os.system(cmd)会直接输出命令的结果到屏幕上,返回一个状态码0或1. os.popen(cmd)会返回一个<open file 'dir', mode ' ...

  4. Resizing the disk space on Ubuntu Server VMs running on VMware ESXi 5

    from: http://www.joomlaworks.net/blog/item/168-resizing-the-disk-space-on-ubuntu-server-vms-running- ...

  5. git cherry-pick简介

    本文编辑整理自: http://sg552.iteye.com/blog/1300713 http://web.mit.edu/bitbucket/git-doc/git-cherry-pick.tx ...

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

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

  7. ACM/ICPC 之 最长公共子序列计数及其回溯算法(51Nod-1006(最长公共子序列))

    这道题被51Nod定为基础题(这要求有点高啊),我感觉应该可以算作一级或者二级题目,主要原因不是动态规划的状态转移方程的问题,而是需要理解最后的回溯算法. 题目大意:找到两个字符串中最长的子序列,子序 ...

  8. glib-2.49.4 static build step in windows XP

    export LIBFFI_CFLAGS=" -I/usr/local/lib/libffi-3.2.1/include " \ export LIBFFI_LIBS=" ...

  9. ajax与后台交互传输数据的工具类

    public class Result<T> implements Serializable { private static final long serialVersionUID = ...

  10. 【故障处理】mysql出现大量slave bin日志，将磁盘空间占满

    master服务器IO线程 NO  问题描述:造成大量slave bin 日志 大量占用磁盘 排查解决步骤: 1.检查是配置的问题还是mysql数据库本身的故障 2.将master的机器 mysql_ ...