zoukankan      html  css  js  c++  java
  • HTML5新增属性

    [sourcecode language="plain"]

    <!DOCTYPE html>
    <html manifest="cache.manifest">
    <!--
    manifest属性定义离线应用文件,详见:http://www.haojianhua.com/2015/07/29/html-5-manifest/
    -->

    <head>
    <meta charset="UTF-8">
    <!--
    charset属性:规定页面字符集
    -->

    <meta http-equiv="pragma" content="no-cache">
    <!--
    http-equiv属性:不是html5新增属性,禁止浏览器缓存,详见:http://www.haojianhua.com/2015/07/30/http-equiv/
    -->

    <title>新增属性</title>

    <link rel="icon" type="text/css" href="test_icon.png" type="imgage/png" sizes="16*16">
    <!--
    sizes属性: 规定icon大小。
    -->

    <base href="http://test.com/i/" target="_blank">
    <!--
    base标签:标签为页面上的所有链接规定默认地址或默认目标。通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。<base> 标签必须位于 head 元素内部。
    如: img标签的src属性为“http://test.com/i/test.jpg”,
    base的href为:http://test.com/i/,
    img标签的src属性为: test.jpg.
    新增target属性:规定在何处打开页面上的所有链接。可以在每个链接中使用 target 属性来覆盖该属性。如果没有为 base 元素规定 href 属性,则 target 属性是必需的。
    -->

    <script defer type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js" onload="console.log('a');"></script>
    <script saync type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js" onload="console.log('b');"></script>
    <!--
    defer属性:规定当页面已完成加载后,才会执行脚本。仅适用于外部脚本(只有在使用 src 属性时)。
    async属性:异步执行,仅适用于外部脚本(只有在使用 src 属性时).
    如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
    如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
    如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
    先输入b,再输出a
    -->

    </head>
    <body>

    <a media="handheld" href="#">手持</a>
    <a media="tv" href="#">电视</a>
    <!--
    media属性: 规定目标 URL 是为什么类型的媒介/设备进行优化的。该属性可接受多个值。只能在 href 属性存在时使用。
    -->

    <a href="http://test.com" hreflang="zh" ref="external">测试</a>
    <!--
    hreflang属性: 在链接中规定文档的语言.仅在使用 href 属性时才可以指定 hreflang 属性。和 lang 属性类似,hreflang 属性的值也是 ISO 标准的双字符语言代码。和 lang 属性不同的是,hreflang 属性不会指定标签中的内容所使用的语言,而是指定被 href 属性调用的文档所使用的语言。
    ref属性:规定当前文档与被链接文档之间的关系。仅在 href 属性存在时使用。
    -->

    <ol start="50" reversed>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>
    <!--
    start属性: 规定有序列表中首个列表项起始值。
    reversed属性:它规定列表属性为降序 (9, 8, 7...),而不是升序 (1, 2, 3...)。目前只有 Chrome 和 Safari 6 支持 reversed 属性。
    -->

    <menu type="list" label="Menu">
    <li>
    <input type="checkbox" />Red
    </li>
    <li>
    <input type="checkbox" />Blue
    </li>
    </menu>
    <!--
    在HTML5中,重新定义了 menu 元素,且使用用于排列表单控件。
    -->

    <div>
    <style scoped>
    div{ border: 10px solid green; min-height: 50px; }
    </style>
    <div></div>
    <div style="border-color: pink;">
    <style scoped>
    div { border: 10px solid blue; }
    </style>
    <div></div>
    </div>
    </div>
    <!--
    scoped属性:具有scoped属性的样式只会应用到当前元素和其子元素。Inline样式仍然比scoped样式优先级高,所以,最好避免使用inline样式。
    老式的浏览器上不支持这个属性的,需要使用jQuery插件(https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin)来弥补这种问题。
    -->

    <iframe sandbox src="http://www.baidu.com"></iframe>
    <!--
    seamless属性:规定了 <iframe> 看上去像是包含文档的一部分(无边框或滚动条)。
    srcdoc属性:规定页面的 HTML 内容显示在行内框架中。该属性与 sandbox 和 seamless 属性一同使用。如果浏览器不支持 srcdoc 属性,则相应地会显示在 src 属性(若已设置)中规定的文件
    sandbox属性:如果被规定为空字符串(sandbox=""),sandbox 属性将会启用一系列对行内框架中内容的额外限制。
    值 描述
    "" 应用以下所有的限制。
    allow-same-origin 允许 iframe 内容被视为与包含文档有相同的来源。
    allow-top-navigation 允许 iframe 内容从包含文档导航(加载)内容。
    allow-forms 允许表单提交。
    allow-scripts 允许脚本执行。
    -->
    </body>
    </html>

    [/sourcecode]

  • 相关阅读:
    MVC3、如何应用EntityFramework 连接MySql 数据库 Kevin
    DEV EXPRESS Summary Footer 不显示 Kevin
    装饰模式 Kevin
    Dev 控件 GridControl 控件 二次绑定数据源的问题。 Kevin
    System.InvalidOperationException 异常 Kevin
    LINQ to XML Kevin
    代理模式——代码版“吊丝的故事” Kevin
    VS2012 中的设备 面板 Kevin
    maven 学习笔记(三)创建一个较复杂的 eclipse+android+maven 工程
    maven 学习笔记(一)eclipse+android+maven
  • 原文地址:https://www.cnblogs.com/double405/p/5121922.html
Copyright © 2011-2022 走看看