替换型元素与DTD
问题引入
- 为什么link一个CSS要用href，而引入js要用src呢？
- 凡是替换型元素，都是使用 src 属性来引用文件的，链接型元素是使用 href 标签的。
替换型元素
替换型元素是把文件的内容引入，替换掉自身位置的一类标签。常见有以下：
script
因为 script 标签是为数不多的既可以作为替换型标签，又可以不作为替换型标签的元素。所以既可以使用link引入，也可以用src引入
<script type="text/javascript">
console.log("Hello world!");
</script>
<script type="text/javascript" src="my.js"></script>
img
img 标签的作用是引入一张图片。这个标签是没有办法像 script 标签那样作为非替换型标签来使用的，它必须有 src 属性才有意义（不严谨，还有srcset 和 sizes属性，它们是 src 属性的升级版）。
相关属性
- width和hight
img 标签可以使用 width 和 height 指定宽度和高度。也可以只指定其中之一。当只指定了宽度或者搞得后，图片会被等比例缩放了。
如果从性能的角度考虑，建议你同时给出图片的宽高，因为替换型元素加载完文件后，如果尺寸发生变换，会触发重排版。
-
alt
alt 属性，这个属性很难被普通用户感知，对于视障用户非常重要，可以毫不夸张地讲，给 img 加上 alt 属性，已经做完了可访问性的一半。 -
srcset 和 sizes
它们是 src 属性的升级版，所以我们前面讲 img 标签必须有 src 属性，这是不严谨的说法，这两个属性的作用是在不同的屏幕大小和特性下，使用不同的图片源。 -
picture
picture元素可以根据屏幕的条件为其中的 img 元素提供不同的源。
<picture>
<source srcset="image-wide.png" media="(min-width: 600px)">
<img src="image-narrow.png">
</picture>
picture 元素的设计跟 audio 和 video 保持了一致，它跟 img 搭配 srcset 和 sizes 不同，它使用 source 元素来指定图片源，并且支持多个。
这里的 media 属性是 media query，跟 CSS 的 @media 规则一致。
video
video中src 来指定视频的源文件。但是因为一些历史原因，浏览器对视频的编码格式兼容问题分成了几个派系，这样，对于一些兼容性要求高的网站，我们使用单一的视频格式是不合适的。现在的 video 标签可以使用 source 标签来指定接入多个视频源。
<video controls="controls" >
<source src="movie.webm" type="video/webm" >
<source src="movie.ogg" type="video/ogg" >
<source src="movie.mp4" type="video/mp4">
You browser does not support video.
</video>
其他标签
track ：是一种播放时序相关的标签，它最常见的用途就是字幕。track 标签中，必须使用 srclang 来指定语言，此外，track 具有 kind 属性，共有五种。
subtitles：就是字幕了，不一定是翻译，也可能是补充性说明。
captions：报幕内容，可能包含演职员表等元信息，适合听障人士或者没有打开声音的人了解音频内容。
descriptions：视频描述信息，适合视障人士或者没有视频播放功能的终端打开视频时了解视频内容。
chapters：用于浏览器视频内容。metadata：给代码提供的元信息，对普通用户不可见。
audio
audio 也可以使用 source 元素来指定源文件，比起 video，audio 元素的历史问题并不严重，所以使用 src 也是没有问题的。
iframe
这个标签能够嵌入一个完整的网页。不过，在移动端，iframe 受到了相当多的限制，它无法指定大小，里面的内容会被完全平铺到父级页面上。同时很多网页也会通过 http 协议头禁止自己被放入 iframe 中。iframe 标签也是各种安全问题的重灾区。opener、window.name、甚至 css 的 opacity 都是黑客可以利用的漏洞。
DTD是什么
HTML 被称为“标记语言（mark up language）”，它是纯文本的一种升级，“标记”一词的概念来自：编辑审稿时使用不同颜色笔所做的“标记”。
DTD 的全称是 Document Type Definition，也就是文档类型定义。
DTD 在 HTML4.01 和之前都非常的复杂，到了 HTML5，抛弃了 SGML 兼容，变成简单的：
<!DOCTYPE html>
712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
