HTML5--常见的新属性（后）

上一篇文章：HTML5–常见的新属性（中）

---

iframe标签

frame 元素会创建包含另外一个文档的内联框架（即行内框架）。

sandbox属性

该属性会对iframe框架中的内容启用一些额外的限制条件。

值 描述 “” 启用所有限制条件 allow-same-origin 允许 iframe 内容被视为与包含文档有相同的来源。如果未使用该关键字，这个操作将不可用。 allow-top-navigation 允许 iframe 内容可以导航（加载）内容到顶级的浏览上下文环境（browsing context）。如果未使用该关键字，这个操作将不可用。 allow-forms 允许表单提交。 allow-scripts 允许脚本执行

sandbox属性可以防止不信任的Web页面执行某些操作，例如：
①禁止访问父页面的DOM
②阻止脚本执行
③禁止通过脚本嵌入自己的表单或操纵表单
④禁止对cookie、本地存储货本地SQL数据库的读写

用法

sandbox 属性的值为空字符串时，将应用所有的限制；
sandbox 属性的值为以空格分隔的预定义值列表，将移除特定的限制。

全部禁用：

<iframe src="xxx.html" sandbox=""></iframe> 

全部启用：

<iframe src="xxx.html" sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts "></iframe> 

浏览器支持情况

IE Firefox Chrome Safari Opera 10 YES YES YES 15

---

seamless属性

该属性是一个布尔属性。当设置该属性后，它规定了 <iframe> 看上去像是包含文档的一部分（无边框或滚动条）。

用法：

<iframe src="xxx.html" seamless></iframe>

浏览器支持情况

IE Firefox Chrome Safari Opera NO NO YES 6 15

注意：在 XHTML 中，禁止属性简写，seamless 属性必须定义为 <iframe seamless="seamless">。

---

srcdoc属性

srcdoc 属性规定要显示在内联框架中的页面的 HTML 内容。

用法：

提示：该属性应该与 sandbox 和 seamless 属性一起使用。

<iframe srcdoc="<p>Hello world!</p>" src="xxx.html"></iframe>

浏览器支持情况

IE Firefox Chrome Safari Opera NO 25 20 6 15

注意：
如果浏览器支持 srcdoc 属性，且指定了 srcdoc 属性，它将覆盖在 src 属性中规定的内容。
如果浏览器不支持 srcdoc 属性，且指定了 srcdoc 属性，它将显示在 src 属性中规定的文件。

---

a标签

download属性

download 属性定义了下载链接的地址。

用法：

<a href="https://www.baidu.com/img/bd_logo1.png" download="baidulogo">点击下载</a>

浏览器支持情况

IE Firefox Chrome Safari Opera 13 20 14 NO 15

注意：
①href 属性必须在 <a> 标签中指定。
②download属性可以指定下载文件的名称。文件名称没有限定值，浏览器会自动在文件名称末尾添加该下载文件的后缀 (.img, .pdf, .txt, .html, 等)。

---

media属性

media 属性规定目标 URL 是为什么类型的媒介/设备进行优化的。
该属性用于规定目标 URL 是为特殊设备（比如 iPhone）、语音或打印媒介设计的。
该属性可接受多个值。
只能在 href 属性存在时使用。

可能的元素符

值 描述 and 规定 AND 运算符。 not 规定 NOT 运算符。 , 规定 OR 运算符。

值

值 描述 width/height 规定目标显示区域的宽/高度。
可使用 “min-” 和 “max-” 前缀。
例子：
media="screen and (min-width:500px)"
media="screen and (max-height:700px)" device-width/device-height 规定目标显示器或纸张的宽/高度。
可使用 “min-” 和 “max-” 前缀。
例子：
media="screen and (device-width:500px)"
media="screen and (device-height:500px)" orientation 规定目标显示器或纸张的取向。
可能的值：”portrait（竖屏）” 或 “landscape（横屏）”
例子：
media="all and (orientation: landscape)" aspect-ratio 规定目标显示区域的宽度/高度比。
可使用 “min-” 和 “max-” 前缀。
例子：
media="screen and (aspect-ratio:16/9)” device-aspect-ratio 规定目标显示器或纸张的 device-width/device-height 比率。
可使用 “min-” 和 “max-” 前缀。
例子：
media="screen and (aspect-ratio:16/9)" color 规定目标显示器的 bits per color(每个像素的颜色数)。
可使用 “min-” 和 “max-” 前缀。
例子：
media="screen and (color:3)" color-index 规定目标显示器能够处理的颜色数。
可使用 “min-” 和 “max-” 前缀。
例子：media="screen and (min-color-index:256)" monochrome 规定在单色帧缓冲中的每像素比特。
可使用 “min-” 和 “max-” 前缀。
例子：
media="screen and (monochrome:2)" resolution 规定目标显示器或纸张的像素密度 (dpi or dpcm)。
可使用 “min-” 和 “max-” 前缀。
例子：
media="print and (resolution:300dpi)" scan 规定 tv 显示器的扫描方法。
可能的值是：”progressive（逐行扫描）” 和 “interlace（隔行扫描）“。
例子：
media="tv and (scan:interlace)" grid 规定输出设备是网格还是位图。
可能的值：”1” 代表网格，”0” 是其他。
例子：
media="handheld and (grid:1)"

设备

值 描述 all 默认。适合所有设备。 aural 语音合成器。 braille 盲文反馈装置。 handheld 手持设备（小屏幕、有限的带宽）。 projection 投影机。 print 打印预览模式/打印页面。 screen 计算机屏幕。 tty 电传打字机以及使用等宽字符网格的类似媒介。 tv 电视类型设备（低分辨率、有限的分页能力）。

---

type属性

type 属性规定链接中指向的文档的 mime 类型。
MIME类型：w3schcool-MIME 参考手册
type 属性规定目标文档的 MIME 类型。
只能在 href 属性存在时使用。

使用方法

<a href="http://www.baidu.com/" type="text/html">百度</a>

浏览器支持情况

所有主流浏览器均支持该属性。

---

其他属性

script标签的async属性

众所周知，页面在渲染的时候会因为遇到script节点而导致DOM树的构建被阻塞。为了防止阻塞页面解析，我们在上代HTML中会动态创建script标签，或者是采用defer属性。前者是利用innerHTML方法在页面加载结束之后添加script标签及地址，浏览器会立即执行创建的script标签的内容；后者是延迟加载技术，等待页面完成解析时执行。

HTML5中新增了一个async属性，用于异步地执行JavaScript。如果使用async属性：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）

使用方法

<script src="_async.js"  async></script>

浏览器支持情况

IE Firefox Chrome Safari Opera 10 YES YES YES YES

注意：
在 XHTML 中，禁止属性最小化，async 属性必须定义为 <script async="async">。

---

link标签的size属性

sizes 属性规定视觉媒体图标的尺寸。
只有当被链接资源是图标时 (rel="icon")，才能使用该属性。

使用方法：

<link rel="icon" href="icon.gif" type="image/gif" sizes="16x16" />

浏览器支持情况

暂时没有主流浏览器支持sizes属性。

---

ol标签的reversed属性

reversed属性可以让列表顺序进行降序，当使用该属性时，它规定列表属性为降序 (9, 8, 7…)，而不是升序 (1, 2, 3…)。

使用方法：

<ol reversed><li>Coffee</li><li>Tea</li><li>Milk</li></ol>

效果图：

浏览器支持情况

IE Firefox Chrome Safari Opera NO NO YES 6 NO

---

HTML5–常见的新属性系列到此结束。希望对大家有所帮助。

---

后记：
这几天投了几分简历，一份回应的都没有，让我很是落寞。所幸同学把我的简历推荐给了一家公司，让我有了面试的机会。虽然经历了笔试和四轮面试，但是最终还是没拿到offer。不过相对于前几个月来说，我起码能走得更远一些了，不再像以前那么懵懂无知，对于面试的问题多多少少都有了自己的一些见解，能够明显地感受到自己确实是进步了——写博客真是一个好的习惯。
对于未来，我仍然很迷茫，身边的同学一个个都找到了工作，回首望去，似乎只有我一个人在原地踏步。我仍不知道自己是否应该继续学习前端，是否应该放弃编程，是否应该像大多数同学那样去做一些管理类的工作。我不曾记得是谁说过了这么一句话：

当你不知道该怎么办的时候，你就应该继续做下去，等你什么时候想明白了，那么你就什么都有了。

活下去，不一定要活得明白。学习编程并非只为了找工作，更是为了一份兴趣。希望我在未来能够继续坚持下去，不断学习不断进步。也希望许许多多像我一样自学的朋友，能够真正的喜欢编程、爱好编程，不断地坚持、努力。

给自己坚持的动力，为奇迹的发生积蓄时间。