heiyeluren的blog(黑夜路人的开源世界)

关注LAMP,Web开发,OpenSource,系统架构

谢华亮ID:heiyeshuwu
852291次访问,排名40好友51人,关注者82
既然决定远行,便只顾风雨兼程。
heiyeshuwu的文章
原创 279 篇
翻译 3 篇
转载 202 篇
评论 523 篇
heiyeluren的公告

联系方式:


访问统计: free hit counter code
FeedSky订阅:
FeedSky订阅
最近评论
a:效率奇低无比,垃圾代码!
a:效率奇低无比,垃圾代码!
happyfish100:国人前不久推出的一款分布式文件系统FastDFS:http://code.google.com/p/fastdfs/
happyfish100:国人前不久推出的一款分布式文件系统FastDFS:http://code.google.com/p/fastdfs/
ff:dferer
文章分类
收藏
    相册
    技术图片
    搜索引擎
    ::eYou::
    kevin world
    lewis - 老吕
    qyb - BT的花
    Realzay的blog
    叶金荣
    天堂地狱鬼-dulao5's Blog
    沙漠之周
    狐狸糊涂
    老韩
    與子觀化
    ::Yahoo::
    glemir’s blog
    happy_fish - 分布式文件系统FastDFS
    Rainx
    stauren
    互联网,请记住我 - 162同学的技术博客
    小蚂蚁同学滴测试博客
    张彪同学
    随网之舞 - kaven的DHTML博客
    风雪之隅
    ::朋友::
    【推荐】中文分类网
    DDR的博客
    kevin world
    miky
    俺兄弟的blog
    冰河的技术博客:心随风动
    好旅网
    小少的技术博客
    无尘居
    晋陵路人的Blog
    李天华同学滴技术博客
    沙狐部落
    轻量级的editor
    ::网友::
    Code & Stock.
    LionD8的Blog
    Phzzy
    张贺同学的博客
    技术大牛老余的博客
    抚琴居
    程序人生
    邢红瑞的blog
    阿健的博客
    :PHP博客:
    .: Easy style :.
    [琴剑楼]
    CoolCode.cn
    Haohappy的Blog
    Hightman
    iwind的blog
    Javascript开发站
    JD Space
    Nio's Weblog
    Open Source PHP
    PHP面对对象
    SourceForge.net
    trip的专栏
    UGIA.cn
    windix's blog
    Windix's Weblog
    一个藏袍
    俊麟 Michael`s blog
    偶然的blog
    刘敏的blog
    大龄青年的Blog
    廖宇雷的blog
    懒猫开始新生活blog
    某人的栖息地
    王春生的博客
    神仙
    :牛人blog:
    DBA notes
    http://blog.csdn.net/tingya/
    侯捷网站
    孟岩
    搜索引擎研究
    方舟
    王咏刚的BLOG
    竹笋炒肉
    荣耀
    车东[Blog^2]
    透明思考
    陈硕的Blog
    DHTML
    DHTMLGoodies
    FCKEditor
    Google Code
    Google Web Toolkit
    HTML Goodies
    HTML.it
    HTMLAre
    HTMLdog
    JavaScript Kit
    jQuery
    KindEditor
    Prototype
    TinyMCE
    W3 Schools
    Yahoo JavaScript Developer Center
    Yahoo! Developer Network
    Yahoo! UI Library (YUI)
    网页设计师Web标准
    Java国内站
    ChinaJavaWorld.com技术论坛
    IBM developerWorks 中国: Java
    Java中文站
    Java开源大全
    Java爱好者
    JR - Java翻译站
    J道-JDON
    Matrix: 与Java共舞
    中国Java开发网
    中文java技术网
    PHP国内站点
    CSDN PHP论坛
    Discuz!
    FleaPHP
    Google--PHP用户组
    IBM DeveloperWorks
    JavsScript技术讨论
    Nirvana Studio
    OpenPHP.cn
    PHPChina
    TiM Club
    中文 PFC 1.0 手册--PHP5的开发包
    中文 PFC 1.0 手册--PHP5的开发包
    中文PHP网
    太平洋--PHP开发区
    爱MySQL
    超越PHP
    PHP国外站点
    ADOdb
    Agavi Framework
    Cake PHP
    MySQL Performance Blog
    MySQL Performance Blog
    Nonaweb
    PEAR
    PECL
    PECL Windows
    PHP Builder
    PHP Classes
    PHP Classes
    PHP New Download
    PHP Security Consortium
    php.MVC
    php.MVC
    PHPkitchen(OO & MVC)
    phpPatterns
    PHP国外图书下载
    smart template
    Smarty
    SourceForge.net
    Symfony Framework
    Zend
    Zend Framework
    Unix C/C++
    Free Gentux
    周立发的blog(Linux C)
    Unix/Linux
    BSD智库
    ChinaUnix
    FreeBSDChina
    FreeLAMP
    IBM开发者Linux专区
    Linux Byte
    LinuxKit
    LinuxTS
    Linux伊甸园
    Linux技术中坚站
    Linux非常空间
    Love Unix
    NetBSD&OpenBSD中文用户组
    NetBSD中国社区
    Oracle中国用户讨论组
    OurLinux
    Unix中文
    Unix中文
    Unix中文宝库
    中国Linux公社
    中国Unix用户技术论坛
    中文FreeBSD用户组
    永远的Unix
    炎黄角马
    程序设计
    CSDN
    IBM开发者中心
    Microsoft TechNet: 主页
    MSDN 中文网站
    PHP中文站
    Sun技术社区
    中国IT认证实验室--企业应用技术
    中国协议分析网
    喜悦国际村
    太平洋电脑网---开发特区
    实用网站
    veBook(国外大量免费图书下载网站)
    Whois.net
    中国Web信息博物馆
    中国互联网络信息中心whois查询
    服务器系统信息查看
    网络安全
    AnySide.com
    CGI Secutiry
    K-OTik Security Monitoring
    Linux Security
    Packet Storm Security
    PHP Secure
    RFC中文文档索引
    Safemode.org
    SecuriTeam.com
    Security Corporation
    SecurityFocus
    SecurityTracker
    Zone-h (区域黑客,每天公布各国被黑的网站)
    中华安全网
    中国信息安全组织
    国家计算机网络应急处理中心
    安全天使
    安全焦点
    幻影旅团
    绿盟科技
    网络安全评估中心(cnns )
    在线手册
    Apache2.0中文文档
    Beyond Linux From Scratch
    Debian参考手册
    FreeBSD Porter 手册
    FreeBSD使用手册
    Linux C函数中文参考手册
    MySQL 4.1.0 中文参考手册
    NetBSD在线手册
    OpenBSD在线FAQ
    PHP ADODB 1.99版手册中文翻译(Tripc)
    PHP中文手册(国内)
    PHP中文手册(国外)
    PostgreSQL中文文档
    Red Hat Linux 9入门指南
    Red Hat Linux 9安装指南
    Red Hat Linux 9定制手册
    中国OSS技术手册中心
    技术文档手册中心-ChinaUnix
    存档
    订阅我的博客
    XML聚合  FeedSky
    订阅到鲜果
    订阅到Google
    订阅到抓虾
    订阅到BlogLines
    订阅到Yahoo
    订阅到GouGou
    订阅到飞鸽
    订阅到Rojo
    订阅到newsgator
    订阅到netvibes

    转载 [转]HTML 5新增的元素收藏

    新一篇: [转]PHP程序开发范例宝典 -- 第9章 MySQL高级应用技术 | 旧一篇: [转]用 PHP 构建自定义搜索引擎


    HTML 5新增的元素


    作者:Realazy
    来源:http://realazy.org/blog/2007/08/10/new-elements-in-html-5/

    在本人看来,HTML 5是一个妥协方案,虽不激进,但更能推动技术的继续进步。没有命名空间,元素也不要求闭合(当然这并不是优点),浏览器也可以宽大处理一些错误。一切沿袭上个世纪HTML 4的做法。对于HTML的渲染,浏览器一直停留在1999年的水平。为此,HTML 5是一个实用主义方案,这样不仅可以继续处理这么多年来散落在世界各个角落的HTML,也可以让浏览器厂商更容易添加新特性。这就叫degrade gracefully(优雅降级)。让我们来看看HTML 5增加的一些新元素。

    结构元素

    这真是大快人心。目前,我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达头部,底部或者侧栏等。有了它们,代码编写者不再需要为id的命名费尽心思,对于手机、阅读器等设备更有语义的好处。HTML 5增加了新的结构元素来表达这些最常用的结构:

    • section: 这可以表达书本的一部分或一章,或者一章内的一节
    • header: 页面主体上的头部。并非head元素
    • footer: 页面的底部(页脚),可以是一封邮件签名的所在
    • nav: 到其他页面的链接集合
    • article: 诸如blog, 杂志,纲要等之中的一条独立记录。

    举个例子,一个blog的首页,用HTML 5写的话,可以是这样(有省略):

    <<!DOCTYPE HTML>
    <HTML>
      <head>
        <title>realazy</title>
      </head>
      <body>
        <header>
        <h1>Realazy</h1>
        </header>
        <section>
        <article>
        <h2><a href="http://realazy.org/blog">标题</a></h2>
        <p>内容在此...(省略n字)</p>
        </article>
        <article>
        <h2><a href="http://realazy.org/blog">标题2</a></h2>
        <p>内容2在此...(省略n字)</p>
        </article>
        ...
        </section>
        <footer>
        <nav>
        <ul>
          <li><a href="http://realazy/blog">导航1</a></li>
          <li><a href="http://realazy/blog">导航2</a></li>
          ...
        </ul>
        </nav>
        <p>© 2007 realazy</p>
        </footer>
      </body>
    </HTML>

    块级block的语义元素

    HTML还增加以下三个块级元素:

    • aside
    • figure/code>
    • dialog

    aside可以用以表达注记、贴士、侧栏、摘要、插入的引用等诸如作为补充主体的内容。比如这样表达blog的侧栏:

    <aside>
      <h3>最新文章</h3>
      <ul>
        <li><a href="http://realazy.org/blog/">文章标题</a></li>
        ...
      </ul>
    </aside>

    figure元素表示一个有说明的块级图片。比如:

    <figure>
      <legend>这是图片的说明</legend>
      <img alt="图片可替换文本" src="/path/to/img.png" />
    </figure>

    dialog元素用于表达人们之间的对话。在HTML 5中,dt用于表示说话者,而dd则用来表示说话者的内容。如:

    <dialog>
      <dt>佛</dt>
      <dd>色即是空</dd>
      <dt>悟空</dt>
      <dd>我现在需要点空……

    行内(inline)的语义元素

    m元素用来标记一些不是那么需要着重强调的文本。现在尚有争议,可能最终会改为mark.

    time元素如其名,用来表达时间。它需要一个datetime的特性来标明机器能够认识的时间,如:

    <time datetime="2008-08-08T20:08:08">2008年8月8日晚上8时8分8秒</tiem>

    meter元素表达特定范围内的数值。可用于薪水、百分比、分数等。比如:

    很遗憾地告诉你,我只有<meter>150cm</meter>

    它还有6个特性来表达各方面的含义,比如:

    <p>您的分数是:<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.</p>

    还有一个progress,也是义如其名,用以表达进度:

    目标完成度:<progress value="40" max="100">40%</progress>

    嵌入多媒体

    新增videoaudio元素。顾名思义,分别是用来插入视频和声音的。至于格式,交由浏览器实现,HTML再也不需要特别的代码去播放特定的格式。就像img一样,不管是png, jpg还是gif都可以显示。值得注意的是,它们可以包含内容。比如,可以把歌词放到某段歌曲中去:

    <audio src="谁人伴你睡.mp3">
      <p>泪枯干</p>
      <p>难忍怎么委屈自已</p>
      <p>曾经有一刻悲与喜</p>
      ...
    </audio>

    交互性

    HTML 5同时也叫Web Applications 1.0, 因此也进一步发展交互能力。这些标签就是为提高页面的交互体验而生:

    • details
    • datagrid
    • menu
    • command

    details用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如点击)与legend交互才显示出来。这跟现在各种通过JavaScript隐藏一段内容,在点击后才显示出来的做法有些类似。比如:

    一句话记录生活中的点点滴滴,
    <details>
      <legend>更多</legend>
      <p>交流与分享,拉近你和朋友,支持 MSN/GTalk/QQ、短信、手机 WAP</p>
    </details>

    它可以有一个open的特性,用来显示细节与否。

    datagrid用来控制数据,可以由用户或者脚本来更新。

    menuHTML 2就存在了,不过HTML 4把它废弃了。HTML 5废物利用,并在期内加上command元素。

    参考:New elements in HTML 5

     

    发表于 @ 2007年09月24日 18:50:00|评论(loading...)|收藏

    新一篇: [转]PHP程序开发范例宝典 -- 第9章 MySQL高级应用技术 | 旧一篇: [转]用 PHP 构建自定义搜索引擎

    评论

    #秦歌 发表于2007-09-29 20:41:45  IP: 202.165.107.*
    倒,转载了这个。
    发表评论  


    登录
    Csdn Blog version 3.1a
    Copyright © heiyeluren