HTML 替换型元素

替换型元素

• 替换型元素是引入一个外部资源来进入页面，替换掉自身的位置的一类标签。

script

• 为数不多的既可以作为替换型标签，又可以不作为替换型标签的元素
• 凡是替换型元素，都是使用 src 属性来引用文件的

// 替换型标签
<script type="text/javascript" src="my.js"></script>

// 不作为替换型标签
<script type="text/javascript">
    console.log("Hello world!");
</script>

img

• src 属性：如果不想要引入独立文件，可以使用 data url
• width 和 height 属性：从性能的角度考虑，建议同时给出图片的宽高，因为替换型元素加载完文件后，如果尺寸发生变换，会触发重排版
• alt 属性：给 img 加上 alt 属性，已经做完了可访问性的一半（对于视障用户非常重要）
• srcset 和 sizes 属性：在不同的屏幕大小和特性下，使用不同的图片源

// srcset 提供了根据屏幕条件选取图片的能力，但是其实更好的做法，是使用 picture 元素
<img srcset="elva-fairy-320w.jpg 320w, 
             elva-fairy-480w.jpg 480w, 
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px, 
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

picture

• picture 元素可以根据屏幕的条件为其中的 img 元素提供不同的源

<picture>
    <source srcset="image-wide1.png" media="(min-width: 600px)">
    <source srcset="image-wide2.png" media="(min-width: 900px)">
    <img src="image-narrow.png">
</picture>

video

• <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

• track 具有 kind 属性，共有五种。

  1. subtitles：字幕，不一定是翻译，也可能是补充性说明
  2. captions：报幕内容，可能包含演职员表等元信息，适合听障人士或者没有打开声音的人了解音频内容
  3. descriptions：视频描述信息，适合视障人士或者没有视频播放功能的终端打开视频时了解视频内容
  4. chapters：用于浏览器音视频内容。 
  5. metadata：给代码提供的元信息，对普通用户不可见。
  

• 一个完整的 video 标签可能会包含多种 track 和多个 source，这些共同构成了一个视频播放所需的全部信息。

<video controls="controls" src="movie.ogg"></video>

<video controls="controls" >
    <source src="movie.webm" type="video/webm" >
    <source src="movie.ogg" type="video/ogg" >
    <source src="movie.mp4" type="video/mp4">
    <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
    <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
    You browser does not support video.
</video>

audio

<audio controls>
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
    <p>You browser does not support audio.</p>
</audio>

iframe

• 能够嵌入一个完整的网页
• 在移动端，iframe 受到了相当多的限制，它无法指定大小，里面的内容会被完全平铺到父级页面上。
• 很多网页会通过 http 协议头禁止自己被放入 iframe 中。
• iframe 标签也是各种安全问题的重灾区。opener、window.name、甚至 css 的 opacity 都是黑客可以利用的漏洞。

<iframe src="http://time.geekbang.org"></iframe>

• HTML5 中的新属性：

属性	值	描述
align	left / right / top / middle / bottom	不赞成使用，请使用样式代替。规定如何根据周围的元素来对齐此框架
width / height	pixels / %	规定 iframe 的宽度 / 高度
frameborder	1/ 0	规定是否显示框架周围的边框
marginwidth / marginheight	pixels	定义 iframe 的四周的边距
scrolling	yes / no / auto	规定是否在 iframe 中显示滚动条
name	string	规定 iframe 的名称
src	string	规定在 iframe 中显示的文档的 URL
longdesc	string	规定一个页面，该页面包含了有关 iframe 的较长描述
sandbox	"" / allow-forms / allow-same-origin / allow-scripts / allow-top-navigation	启用一系列对 <iframe> 中内容的额外限制
srcdoc	HTML_code	规定在 <iframe> 中显示的页面的 HTML 内容

/* 
使用 srcdoc 属性创建了一个新的文档，嵌入在 iframe 中展示，
并且使用了 sandbox 来隔离，这样，这个 iframe 就不涉及任何跨域问题了
*/
<iframe sandbox srcdoc="<p>Hello world!</p>" src="demo-iframe_srcdoc.html">
    <p>您的浏览器不支持 iframe 标签。</p>
</iframe>

• 操作页面中 iframe 内的 dom 元素

// iframe1：页面中的iframe的ID；
// news_text：iframe内需要被操作的元素的ID；

$("#iframe1").contents().find("#news_text").html("");

document.getElementById('iframe1').contentWindow.document.getElementById('news_text').style.color='red'