[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]

HTML5新增属性的更多相关文章

  1. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  2. HTML5 学习笔记（二）——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  3. HTML5学习总结——HTML5新增属性与表单元素

    一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...

  4. HTML5新增属性data-*和js/jquery之间的交互

    HTML5新增属性data- data-自定义属性,这种方式的自定义属性解决属性混乱无状态管理的现状 书写实例 <div data-role="page" data-last ...

  5. HTML5新增属性学习笔记

    1.form属性 表单内的从属元素,可以写在表单外部.可以通过指定元素的form属性来声明元素所属表单.form的属性值为表单的id. <form id="testForm" ...

  6. HTML5 新增属性和废除属性

    删除的属性大多都是可以用CSS替代的一些样式属性 设置网页标题前面的小图标的大小:size <link rel="icon" href="demo_icon.gif ...

  7. HTML5新增标签与属性

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  8. HTML5新增表单验证

    HTML5新增属性: 属性 描述 placeholder 提供一种提示,输入域为空时显示,获得焦点输入内容后消失 required 规定输入域不能为空 pattern 规定验证input域的模式(正则 ...

  9. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

随机推荐

  1. js学习之道：表单验证公共js

    /** 文件名称:CommonUtil.js 作者  : Yuce 编制时间: 2010-03-24 文件内容:一些常用的js公用类.工具类 包括方法: g_FormFieldIsNull    判断 ...

  2. Linux中__init、__devinit等内核优化宏【转】

    转自:http://blog.csdn.net/joker0910/article/details/7171626 内核使用了大量不同的宏来标记具有不同作用的函数和数据结构.如宏__init .__d ...

  3. 我的ipad应用备份

    听歌: 网易云音乐,QQ音乐 摄影: CameraConnect,Replay,PhotoBooth,PhotoCollage,画中画相机,Creative Shape, 简拼,玩图,PicsArt, ...

  4. cocos2dx 坐标系 -转

    (原文出处找不到了) 无论是搞2d还是3d开发,最需要搞清楚的就是坐标系,这部分混乱的话就没啥奔头了.所以玩cocos2d,一上来就先把各种与坐标有关的东西搞清楚. 基本的两个坐标系:屏幕坐标系和GL ...

  5. UVa 674 Coin Change【记忆化搜索】

    题意:给出1,5,10,25,50五种硬币,再给出n,问有多少种不同的方案能够凑齐n 自己写的时候写出来方案数老是更少(用的一维的) 后来搜题解发现,要用二维的来写 http://blog.csdn. ...

  6. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  7. swift2.0 Cannot assign a value of type '[CFString]' to a value of type '[String]'

    Cannot assign a value of type '[CFString]' to a value of type '[String]' 代码示例如下: picker.mediaTypes = ...

  8. factory工厂模式

    工厂方法模式 工厂方法模式概述    工厂方法模式中抽象工厂类负责定义创建对象的接口,具体对象的创建工作由继承抽象工厂的具体类实现 简单理解: 与简单工厂模式类似,简单工厂模式是一个工厂,用户将条件为 ...

  9. WWDC 2015 - 概记

    WWDC 2015已经过去快一个月了,今年似乎没有像去年那样变化巨大,一切都在慢慢演进,iOS.Mac OS.watchOS都变得越来越好. 新的三大平台的发布,iOS 9/Mac OS EL Cap ...

  10. 08day1

    高中运动会 最大公约数 [问题描述] 梦幻城市每年为全市高中生兴办一次运动会.为促使各校同学之间的交流,采用特别的分队方式:每一个学校的同学,必须被均匀分散到各队,使得每一队中该校的人数皆相同.为增加 ...