zoukankan      html  css  js  c++  java
  • HTML5 语义元素

    返回目录 http://hovertree.com/h/bjaf/html5zixueji.htm

    一个语义元素能够清楚的描述其意义给浏览器和开发者。
    无语义 元素实例: <div> 和 <span> - 无需考虑内容.
    语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

    <title>是一个典型的语义化标签,定义文档的标题.
    效果图:

    HTML5中新的语义元素
    许多现有网站都包含以下HTML代码: <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部.

    HTML5提供了新的语义元素来明确一个Web页面的不同部分:
    <header>
    <nav>
    <section>
    <article>
    <aside>
    <figcaption>
    <figure>
    <footer>

    这里需要注意<header>与<head>是不同的。


    一般用法与排版:

    <section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。根据HTML5文档: section 包含了一组内容及其标题。

    例子:
    <section>
    <h1>何问起论自学能力</h1>
    <p>自学能力是很重要的,尤其是搞计算机设计开发工作的,自学能力是攻城狮们提升开发能力的阶梯。 by 何问起</p>
    </section>

    <article> 标签定义独立的内容。

    <nav> 标签定义导航链接的部分。
    <nav> 元素用于定义页面的导航链接部分区域,但是,不是所有的链接都需要包含在 <nav> 元素中!

    例子:
    <nav>
    <a href="http://hovertree.com/menu/html5/">HTML5</a> |
    <a href="http://hovertree.com/menu/css/">CSS</a> |
    <a href="http://hovertree.com/menu/javascript/">JavaScript</a> |
    <a href="http://hovertree.com/menu/jquery/">jQuery</a>
    </nav>

    效果如下:HTML5 | CSS | JavaScript | jQuery

    <aside> 标签定义页面主区域内容之外的内容(比如侧边栏)。
    aside 标签的内容应与主区域的内容相关.

    <header>元素描述了文档的头部区域
    <header>元素注意用于定义内容的介绍展示区域.
    在页面中你可以使用多个<header> 元素.

    例子:

    <article>
    <header>
    <h1>HTML5为什么火</h1>
    <p><time pubdate datetime="2016-05-03"></time></p>
    </header>
    <p>以往,我们在Web上还只是上网看一些基础文档,但现在,Web是一个内涵非常丰富的平台。和以前版本不同的是,HTML5并非仅仅用来表示Web内容,在这个平台上还能非常方便的加入视频、音频、图象、动画,以及同电脑的交互。<br /><br />
    HTML5的意义在于它带来了一个无缝的网络,无论是PC、平板电脑,还是智能手机都能很方便的浏览基于HTML5的各类网站。
    <br /><br />
    对用户来说好处在于,我们手机上的App也会越来越少,用H5实现的游戏,不需要下载后安装,就能立即在手机界面中生成一个APP图标,使用手机中的浏览器来运行,新增的导航标签也能更好的帮助小屏幕设备和视力障人士的使用。H5拥有服务器推送技术,能让用户拥有更好的网页上的实时聊天,更快的网游体验。 by 何问起 hovertree.com
    </p>
    </article>

    效果请看:http://hovertree.com/h/bjaf/yuyihua.htm

    <footer> 元素描述了文档的底部区域.
    <footer> 元素应该包含它的包含元素
    一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等
    文档中你可以使用多个 <footer>元素.

    例子:
    <footer>
    <p>Posted by: 何问起</p>
    <p><time pubdate datetime="2016-05-03"></time></p>
    </footer>

    <figure>标签规定独立的流内容(图像、图表、照片、代码等等)。
    <figure> 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
    <figcaption> 标签定义 <figure> 元素的标题.
    <figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

    推荐:http://hovertree.com/h/bjaf/ufssanbr.htm

    网页特效:http://www.cnblogs.com/roucheng/p/texiao.html

  • 相关阅读:
    flume sink两种类型 file_rool 自定义sing com.mycomm.MySink even if there is only one event, the event has to be sent in an array
    为什么引入进程20年后,又引入线程?
    As of Flume 1.4.0, Avro is the default RPC protocol.
    Google Protocol Buffer 的使用和原理
    Log4j 2
    统一日志 统一订单
    网站行为跟踪 Website Activity Tracking Log Aggregation 日志聚合 In comparison to log-centric systems like Scribe or Flume
    Percolator
    友盟吴磊:移动大数据平台的架构、实践与数据增值
    Twitter的RPC框架Finagle简介
  • 原文地址:https://www.cnblogs.com/roucheng/p/yuyiyuansu.html
Copyright © 2011-2022 走看看