<!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. OpenGL官方教程——着色器语言概述

    OpenGL官方教程——着色器语言概述 OpenGL官方教程——着色器语言概述 可编程图形硬件管线(流水线) 可编程顶点处理器 可编程几何处理器 可编程片元处理器 语言 可编程图形硬件管线(流水线) ...

  2. sublime-text3配置编译php

    在sublime-text中配置php的编译环境非常简单,只需要新建一个build system就可以了 步骤: 1. 工具->编译系统->新编译系统,将默认的内容替换为如下代码:蓝字部分 ...

  3. 转：JQuery实现下拉框的数据加载和联动

    <script type="text/javascript"> $(document).ready(function() { GetByJquery(); $(&quo ...

  4. 三大UML建模工具Visio、Rational Rose、PowerDesign的区别

    本文源自http://developer.51cto.com/art/201006/207993.htm UML建模工具Visio .Rational Rose.PowerDesign的比较   RO ...

  5. VRRP虚拟路由器冗余协议

    VRRP(VirtualRouterRedundancyProtocol,虚拟路由冗余协议)是一种容错协议.通常,一个网络内的所有主机都设置一条缺省路由,这样,主机发出的目的地址不在本网段的报文将被通 ...

  6. js弹出提示信息，然后跳转到另一页面

    <script language="javascript">  alert("您的用户名与密码已成功修改!");  document.locatio ...

  7. cas 单点登录出现org.jasig.cas.client.util.CommonUtils.getResponseFromServer - 拒绝连接 Connection refused

    cas 单点登录出现org.jasig.cas.client.util.CommonUtils.getResponseFromServer - 拒绝连接 Connection refused 环境: ...

  8. Tesseract-OCR text2image.exe [ x86 支持 XP ]

    Tesseract-OCR 工具中的 text2image.exe ,下载其他人编译的在 win 系统都无法正常运行. 折腾了好久终于编译出能正常运行的. --font="font name ...

  9. hdu 1014.Uniform Generator 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1014 题目意思:给出 STEP 和 MOD,然后根据这个公式:seed(x+1) = [seed(x) ...

  10. LINUX查看系统日志

    cat tail -f 日 志 文 件 说    明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure 与安 ...