HTML
重要概念:
- 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
- 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素
<a>或者强调元素<em>和<strong>。
剖析：
<!DOCTYPE html>: 声明文档类型. 很久以前，早期的HTML(大约1991年2月)，文档类型声明类似于链接，规定了HTML页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
然而现在没有人再这样写，需要保证每一个东西都正常工作已成为历史。你只需要知道<!DOCTYPE html>是最短的有效的文档声明。
<html lang="en-US">- 许多
<meta>特性已经不再使用。 例如，keyword<meta>元素（<meta name="keywords" content="fill, in, your, keywords, here">）— 提供关键词给搜索引擎，根据不同的搜索词，查找到相关的网站 — 已经被搜索引擎忽略了， 因为作弊者填充了大量关键词到keyword， 错误地引导搜索结果。
- （开放内容协议），Open Graph 协议可以使任何网页在社交媒体上变成富媒体，举例来说，Facebook使用了这项协议才变得任何网页在Facebook上都能表现出相似的功能。目前只搞懂了是可以定义分享内容的功能(实测百度分享，唯有新浪微博支持og:image内容，其他一概不识别。)，Facebook可以做到更多交互和应用。
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
-
常用 Open Graph 属性：
- og:title 标题
- og:type 类型 常用值:article book movie
- og:image 略缩图地址
- og:url 页面地址
- og:description 页面的简单描述
- og:site_name 页面所在网站名
- og:videosrc 视频或者Flash地址
- og:audiosrc 音频地址
将其保存在与网站的索引页面相同的目录中，以.ico格式保存（大多数浏览器将支持更通用的格式，如.gif或.png，但使用ICO格式将确保它能在如Internet Explorer 6一样久远的浏览器显示）
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- third-generation iPad with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> <!-- iPhone with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> <!-- first- and second-generation iPad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> <!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> <!-- basic favicon --> <link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
常见实体引用：
| 原义字符 | 等价字符引用 |
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
标签
- 无序 Unordered, 有序 Ordered,
- 当您链接到要下载的资源而不是在浏览器中打开时，您可以使用 download 属性来提供一个默认的保存文件名。<a href="a.html" download="b.html">下载b.html</a>
-
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"> Send mail with cc, bcc, subject and body </a>
抄送(cc)、主题(subject)、抄送(cc)和主体(body)
<abbr>——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）。<p>我们使用 <abbr title="超文本标记语言（Hypertext Markup Language）">HTML</abbr> 来组织网页文档。</p>
我们使用 HTML 来组织网页文档。
- figure&figcaption --为图片提供一个语义容器，在标题和图片之间建立清晰的关联。
<figure> <img scr="../xx/xxx.jpg" alt="替代文本"> <figcaption>说明文字 title</figcaption> </figure>
多媒体
<video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p> </video>
常用容器格式为mp4(AAC 以及 MP3 音频和 H.264 视频),webm(Ogg Vorbis 音频和 VP8/VP9 视频),type 属性，这个属性是可选，建议添加，否则浏览器将逐个加载资源，直到找到一个能成功的格式。
audio同上，另外还有一个track标签。
<track kind="subtitles" src="subtitles_en.vtt" srclang="en">
可以点击track 来查看相关信息。
iframe
为了提高速度，在主内容完成加载后，使用JavaScript设置iframe的src属性是个好主意。这使您的页面可以更快地被使用，并减少您的官方页面加载时间（重要的SEO指标）。
同源，跨域等安全问题解决方法
X-Frame-Options是个已广泛支持的非官方标准