HTML5的文档结构

  HTML5简化了许多,它的设计遵循了3个原则:1.兼容性、2.实用性、3.通用访问性
    1. header 元素
    <header> 标签定义文档或者文档的一部分区域的页眉,又可用于设置文章标题。
    <header> 元素应该作为介绍内容或者导航链接栏的容器。
    在一个文档中,您可以定义多个 <header> 元素。
    注释:<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
    语法说明:<header></header>标记对之间可以包含 h1~h6 六个标题元素,以及p、span等元素。
    hgroup 元素
    <hgroup> 标签定义文档的主标题及副标题,标记对之间通常只使用 h1~h6 六个标题元素。
    2. footer 元素
    footer 元素主要用于为页面或某篇文章定义脚注内容,包括文章的版权信息、作者联系方式等内容,一个页面可以包含多个 footer 元素。
    举例:
<footer>
<ul>
<li>Copyright © 2000-2013 华软 All Rights Reserved</li>
<li>学院地址:广州.从化.广从大道13号 电话:020-87818918</li>
</ul>
</footer> 
    3. article 元素
    <article> 标签定义独立的内容,页面中一块与上下文不相关的独立内容。比如一个帖子、一篇博客文章等。
    <article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
    <article> 的潜在来源:论坛帖子、博客文章、新闻故事、评论等。
    语法说明:<article></article>标记对之间可以包含header、footer、section以及嵌套的article等元素。
    举例:
<article>
  <header>
    <h2>写给IT职场新人的六个“关于”</h2>
  </header>
  <p>
    <b>关于工作地点</b> ...
  </p>
  ...
</article>
    4. section 元素
    section 元素用于对页面的某块内容进行分块,如将该块内容进一步分成章节的标题、内容和页脚等几部分。
    语法说明:<section></section> 标记对之间可以包含 h1~h6 六个标题元素、p元素以及多个article元
               素以表示该"分块"内部又包含多篇文章。此外,还可以嵌套section元素。
    举例:
<article>
  <header>
    <h2>写给IT职场新人的六个“关于”</h2>
  </header>
  <section>
    <h3>关于工作地点</h3>
    <p>...</p>
  </section>
  <section> <h3>关于企业</h3> <p>...</p> </section>
  ...
</article>
    5. nav 元素
    nav 元素用于定义页面上的各种导航条,一个页面中可以拥有多个 nav 元素,作为整个页面或不同部分内容的导航。
    nav 唯一不可能出现的位置是 address 元素内
    基本语法:

<nav><a href="">#</a><a href="">#</a><a href="">#</a></nav>
    6. aside 元素
    aside 元素表示article元素的内容之外的、与article元素的内容相关的辅助信息,
    它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。
    7. audio 音频标签
    audio 标签定义声音,比如音乐或其他音频流。
    目前,audio 元素支持的3种文件格式:MP3、Wav、Ogg。
<audio src="薛之谦 - 认真的雪.mp3" controls="controls"></audio>
    属性        说明
    src        要播放的音频的URL
    autoplay   音频在就绪后马上播放
    controls   向用户显示音频控件,比如播放/暂停按钮
    loop       每当音频结束时重新开始播放
    preload    音频在页面加载时进行加载,并预备播放
    8. video 视频标签
    video 标签定义视频,比如电影片段或其他视频流。
    目前,video 元素支持三种视频格式:MP4、WebM、Ogg。
<video src="火星情报局.mp4" width="320" controls muted poster="images/logo.png" preload></video>
    属性         说明
    src        要播放的视频的URL
    width      设置视频播放器的宽度
    height     设置视频播放器的高度
    autoplay   视频在就绪后马上播放
    controls   向用户显示视频控件,比如播放/暂停按钮
    loop       当媒介文件完成播放后再次开始播放
    muted      规定视频的音频输出应该被静音
    poster     规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像
    preload    视频在页面加载时进行加载并预备播放,属性值(none:只有单击了Play按钮才加载视频;metadata:仅加载元数据,例如视频长度、作者、版权)
    9. 图形中的 figure 及 figcaption
    元素figure及figcaption实际上不能算作结构性元素,但在组织独立图片、图像、图表及编码列表时仍然很受欢迎。
    每一个figure元素中只能包括一个figcaption元素。图片排列一起可用。百度文库里有篇“绚丽的HTML5 Figure图片字幕标题特效”
    常常用到一种图片列表,图片+标题或者图片+标题+简单描述。
    实例代码:
    <figure> <p>黄浦江上的的卢浦大桥</p> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>
    figure用来代替原来li标签,P标签谁来取代呢?答案就是:figcaption
    w3c赋予的定义:figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
    那么上面的代码就变成了:
    <figure>
<figcaption style="color: red">黄浦江上的的卢浦大桥</figcaption>
<img src="data:images/黄浦江上的的卢浦大桥.jpg" width="350" height="234" />
</figure>
    效果图如下:

黄浦江上的的卢浦大桥

HTML5的文档结构的更多相关文章

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

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

  2. HTML5网页文档结构

    2.1     Web标准 Web标准,使得Web开发更加容易.Web标准由万维网联盟(W3C)制定. 2.1.1          Web标准概述 Web标准的最终目的就是保证每个人都有权力访问相同 ...

  3. html5 标准文档结构

    <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset=" ...

  4. 小强的HTML5移动开发之路(42)——HTML4与HTML5文档结构比较

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

  5. html 初识 文档结构 常用标签

    HTML初识 △HTML: 超文本标记语言,是一种用于创建网页的标记语言,不是编程语言,没有逻辑 本质上是浏览器可识别的规则 我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不同的浏览器,对同一 ...

  6. Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构

    分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...

  7. Mongodb:修改文档结构后出现错误:Element '***' does not match any field or property of class ***.

    Mongodb:修改文档结构后出现错误:Element '***' does not match any field or property of class ***. Mongodb是一种面向文档的 ...

  8. 读取XML文档结构并写入内容

    1.在项目中新建XML文档结构.xsd文件,在其中添加相应的节点. 2.读取文档结构并写入内容 string initFileName = @"D:\Config.xml"; Da ...

  9. MFC开发上位机到底用Dialog结构还是文档结构?

    最近要跟着导师一起开发一款大型上位机.MFC新人在考虑用对话框结构还是文档结构. 虽然说书上说大型结构的软件都需要文档结构,但是目前来看,对话框可以实现功能,并且对话框的程序更小一些,节省资源加载速度 ...

随机推荐

  1. 水晶报表在vs2010 WPF环境下的尝试

    原文:水晶报表在vs2010 WPF环境下的尝试 由于VS2010没有集成水晶报表组件,尝试前必须先安装 水晶报表 for VS2010,若机器未安装的可点击这里>>>下载安装 新建 ...

  2. 非接触式电子音乐控制器CHIMAERA

    本篇文章,我将介绍个有意思的设备. 她就是Chimaera,一个基于电磁场效应的非接触式电子音乐控制器. <弹奏Chimaera的声音> 霍尔效应传感器阵列及其周围部件组成了一个连续的2D ...

  3. leetcode[96] Binary Tree Inorder Traversal

    给定树根root.实现中序遍历,也就是左根右. 用递归的话,很简单,左边的返回值加上root的再加上右边的就行. 我自己写的有点挫: /** * Definition for binary tree ...

  4. EF分页问题探讨之 OrderBy

    EntityFramework 应用场景 最近被应用程序中页面加载慢的问题所折磨,看似容易的问题,其实并不容易(已经持续两天时间了),经过“侦查”,发现了两个“嫌疑犯”: EntityFramewor ...

  5. Delphi的注册表操作

    转帖:Delphi的注册表操作 2009-12-21 11:12:52 分类: Delphi的注册表操作 32位Delphi程序中可利用TRegistry对象来存取注册表文件中的信息.     一.创 ...

  6. .NET : 使用代码性能分析工具

    NET : CLR Profiler的使用 经常讲课的时候会提到值类型和引用类型,也会提到如何查看它们的大小.多次被朋友问到,如何真的想要知道到底每个方法分配了多少内存之类的问题,其实这可以通过CLR ...

  7. Angularjs学习---ubuntu12.04中karma安装配置

    Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结   karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然 ...

  8. 最小的MVC工程

    asp.net mvc笔记一,最小的MVC工程   Asp.net MVC项目默认会引用很多第三方插件,特别是现在的5.0,默认示例项目就几十M,搞得都不知道那些才是MVC必须的,是重点,那些是可有可 ...

  9. ASP.NET中页面传值

    一.目前在ASP.NET中页面传值共有这么几种方式: 1.表单提交,    <form action= "target.aspx" method = "post&q ...

  10. Tomcat7 Cluster 集群

    Tomcat7 自带的集群功能是通过session复制完成的,现有两个复制方式: DeltaManager: 将session复制到所有tomcat节点中,不管是否有相应的应用(it will rep ...