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]

  • 相关阅读:
    Linux下新建服务
    查看MYSQL日志(包含最近锁表日志)
    Linux后台运行进程
    MYSQL分析慢查询
    Linux下打开超大文件方法
    通过文件列表打包文件
    linux学习笔记<基本知识普及>
    虚拟机的安装
    Android NDK编程,引入第三方.so库
    linux下软件安装与卸载
  • 原文地址:https://www.cnblogs.com/double405/p/5121922.html
Copyright © 2011-2022 走看看