返回顶部

收藏

html5 + css3 + jQuery + 响应式布局设计

更多
<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>html5 - 新增属性与技术总结 - by sole</title>
<meta name="keywords" content="html5教程,html5研究,html5技术门户,html5权威指南,css3在线实列,html5与css3精髓,响应式布局设计" />
<meta name="description" content="html5新增技术使用与总结,采用最流行的响应时不觉设计,最全最精的html5知识,html5+css3+jQuery实列教程" />
<meta name="viewport" content="width=device-width" />
<meta name="copyright" content="imsole.net" />
<meta name="designer" content="sole" />
<meta name="publisher" content="imsole.net" />
<meta name="author" content="sole" />
<meta name="robots" content="all" />
<meta name="distribution" content="global" />
<link rel="stylesheet" href="i_ui.css" />
<!--[if lt IE 9]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->
</head>

<body>
<section class="main">
    <!-- 在线测试:http://mattkersley.com/responsive/ -->
    <!-- header -->
    <header>
        <h1>html5新增属性与技术总结</h1>
        <!-- nav -->
        <nav class="nav clear">
            <a href="index.html" class="now">首页</a>
            <a href="ele.html">语义化标记</a>
            <a href="form.html">表单增强功能</a>
            <a href="media.html">视频 / 音频</a>
            <a href="canvas.html">画布</a>
            <a href="contenteditable.html">可编辑内容</a>
            <a href="drag.html">拖放</a>
            <a href="localStorage.html">本地存储</a>
            <a href="other.html">Other</a>
        </nav>
    </header>

    <!-- section -->
    <section class="content clear">
        <aside class="right">
            <div class="sub_nav" id="sub_nav">
                <div class="tags">
                    <a href="#index0">html5特性</a>
                    <a href="#index1">检测浏览器支持</a>
                    <a href="#index2">html5 变更的标签</a>
                    <a href="#index3">简单代码示例:</a>
                </div>
                <div class="weibo">
                    <iframe src="http://follow.v.t.qq.com/index.php?c=follow&amp;a=quick&amp;name=websole&amp;style=4&amp;t=1357281747315&amp;f=1" marginwidth="0" marginheight="0" allowtransparency="true" frameborder="0" height="27" width="220" scrolling="auto"></iframe>
                </div>
            </div>
        </aside>
        <article class="left">
            <!-- 0 -->
            <p class="t" id="index0"><strong>html5特性</strong></p>
            <p><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">官方详细的文档</a>是寻找 HTML5 特性的最好地方,当然你还可以轻松通过 W3Schools 来学习<a href="http://www.w3schools.com/html5/html5_reference.asp">HTML5 标签</a>。我们将会在文章中涉及到以下的特性:</p>
            <ol>
                <li>语义化标记</li>
                <li>Form 表单增强功能</li>
                <li>视频 / 音频</li>
                <li>画布(Canvas)</li>
                <li>可编辑内容</li>
                <li>拖放</li>
                <li>稳健的数据存储</li>
            </ol>
            <!-- 1 -->
            <p class="t" id="index1"><strong>检测浏览器支持</strong></p>
            <p>在你开始尝试 HTML5之前,需要知道各主流浏览器的支持状况。这些有用的资源,将可以帮助你向着正轨走:</p>
            <ol>
                <li><a href="http://caniuse.com/">何时能用</a></li>
                <li><a href="http://www.findmebyip.com/litmus">网页设计师的浏览器支持列表</a></li>
                <li><a href="http://html5test.com/">HTML5 测试</a></li>
                <li><a href="http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)">布局引擎对比</a></li>
            </ol>
            <p>其他检测</p>
            <p>Javascript:<a href="http://diveintohtml5.org/everything.html">用Javascript 检测浏览器特性</a></p>
            <p>检测 HTML5/CSS3 本地支持的 Javascript 库<a target="_blank" href="http://www.modernizr.com/">Modernizr</a></p>
            <p>如果你选择用 Mootools可以使用<a target="_blank" href="http://www.aryweb.nl/projects/mooModernizr/">MooModernizr</a></p>
            <!-- 2 -->
            <p class="t" id="index2"><strong>html5 变更的标签</strong></p>
            <ol>
                <li><strong>简洁的 DOCTYPE</strong> HTML5 只需一个简洁的文档类型:&amp;lt;!DOCTYPE html&amp;gt;。它有意不使用版本,因此文档将会适用所有版本的HTML。</li>
                <li><strong>简单易记的语言标签</strong> 你并不需要在 &amp;lt;html&amp;gt; 中使用 xmlns 或 xml:lang 标记。 &amp;lt;html lang=”en”&amp;gt; 将对 HTML5 有效。</li>
                <li><strong>简单易记的编码类型</strong> 你现在可以在 meta 标签中使用 “charset”:&amp;lt;meta charset=”utf-8″ /&amp;gt;</li>
                <li><strong>不需要闭合标签</strong> 在 HTML5 中,空标签(如:br、img 和 input )并不需要闭合标签。</li>
                <li><strong>新增标签</strong> 新增的语义化标签 <br />
                    header, hgroup, nav, section, article, details, figure, figcaption, aside, time, mark, audio, video, source, track, bdi, canvas, command, datalist, summary, embed, keygen, meter, output, progress, rp, rt, ruby, 
                </li>
                <li><strong>废弃的标签</strong> 下面这些标签并不被 HTML5 支持: &amp;lt;acronym&amp;gt;、&amp;lt;applet&amp;gt;、&amp;lt;basefont&amp;gt;、&amp;lt;big&amp;gt;、&amp;lt;center&amp;gt;、&amp;lt;dir&amp;gt;、&amp;lt;font&amp;gt;、&amp;lt;frame&amp;gt;、&amp;lt;frameset&amp;gt;、&amp;lt;noframes&amp;gt;、&amp;lt;s&amp;gt;[删除线]、&amp;lt;strike&amp;gt;[删除线]、<mark title="tt标签与 code 和 kbd 标签一样,<tt> 标签和必需的 tt 结束标签告诉浏览器,要把其中包含的文本显示为等宽字体。对于那些已经使用了等宽字体的浏览器来说,这个标签在文本的显示上就没有什么特殊效果了。">&amp;lt;tt&amp;gt;[定义打字机文本]</mark>、&amp;lt;u&amp;gt[下划线文本]; 和 &amp;lt;xmp&amp;gt[和pre类似];</li>
                <li><strong>新增属性</strong> 在 HTML5 中,增加了很多form表单属性,当然还有其他属性。 <br />
                    required, <mark title="小偷属性">from</mark>, pattern, placeholder, email, range[min, max, step], url, date, time, datetime, datetime-local, month, week, tel, number, search, --, contentcontenteditableable, contextmenu, <mark title="自定义属性,html5规定自定义属性必须以 data- 开头">data-yourvalue</mark>, draggable, item, itemprop, spellcheck, subject
                </li>
            </ol>
            <!-- 3 -->
            <p class="t" id="index3"><strong>简单代码示例:</strong></p>
            <p>
                &amp;lt;!doctype html&amp;gt; <br />
                &amp;lt;html lang="en"&amp;gt;<br />
                &amp;lt;head&amp;gt;<br />
                    &amp;lt;meta charset="utf-8" /&amp;gt;<br />
                    &amp;lt;title&amp;gt;HTML5 Document&amp;lt;/title&amp;gt;<br />
                &amp;lt;/head&amp;gt;<br />
                &amp;lt;body&amp;gt;<br />
                    &amp;lt;header&amp;gt; &amp;lt;/header&amp;gt;<br />
                    &amp;lt;section&amp;gt; &amp;lt;/section&amp;gt;<br />
                    &amp;lt;footer&amp;gt; &amp;lt;/footer&amp;gt;<br />
                &amp;lt;/body&amp;gt;<br />
                &amp;lt;/html&amp;gt;<br />
            </p>
        </article>
    </section>
    <!-- footer -->
    <footer>
        &amp;copy; 2012 2012/11/12 by <a href="http://www.imsole.net/">sole</a>
        <script type="text/javascript" src="http://tajs.qq.com/stats?sId=20322657" charset="UTF-8"></script> 
        <script src="http://s96.cnzz.com/stat.php?id=4913803&amp;web_id=4913803" language="JavaScript"></script>
    </footer>
</section>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script src=custom.js></script>
</body>
</html>

标签:html

收藏

0人收藏

支持

0

反对

0

发表评论