<!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. 剑指Offer 斐波那契数列

    题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项. n<=39 思路: 不考虑递归 用递推的思路 AC代码: class Solution { public ...

  2. linux kernel 平台总线实例分析

    linux 平台总线的实现有三大块  , platform bus , platform device , platform drvice 平台类型结构体: /** * struct bus_type ...

  3. youtube视频批量下载

    youtube 下载视频脚本: 得到下载列表:download_list var links = document.getElementsByTagName('a'); for(var i =0;i& ...

  4. iOS 深入理解UINavigationController 和 UIViewController 之间的关系

    创建三个类 BasicViewController : UIViewController SecondViewController : UIViewController ThirdViewContro ...

  5. 详解 Too many open files

    运行在Linux系统上的Java程序可能会出现"Too many open files"的异常情况,且常见于高并发访问文件系统,多线程网络连接等场景. 程序经常访问的文件.sock ...

  6. 使用keepalived及典型应用

    通常说的双机热备是指两台机器都在运行,但并不是两台机器都同时在提供服务. eg:当提供服务的一台出现故障的时候,另外一台会马上自动接管并且提供服务,而且切换的时间非常短.栗子:下面来以keepaliv ...

  7. 为MongoDB创建一个Windows服务

    一:选型,根据机器的操作系统类型来选择合适的版本,使用下面的命令行查询机器的操作系统版本 wmic os get osarchitecture 二:下载并安装 附上下载链接 点击安装包,我这里是把文件 ...

  8. Hexo

    Hexo Hexo is a fast, simple & powerful blog framework powered by Node.js.

  9. [转载]C++虚函数浅析

    原文:http://glgjing.github.io/blog/2015/01/03/c-plus-plus-xu-han-shu-qian-xi/ 感谢:单刀土豆 C++虚函数浅析 JAN 3RD ...

  10. ACM/ICPC 之 数据结构-邻接表+DP+队列+拓扑排序(TSH OJ-旅行商TSP)

    做这道题感觉异常激动,因为在下第一次接触拓扑排序啊= =,而且看了看解释,猛然发现此题可以用DP优化,然后一次A掉所有样例,整个人激动坏了,哇咔咔咔咔咔咔咔~ 咔咔~哎呀,笑岔了- -|| 旅行商(T ...