概念
HTML：标记语言。
超文本：网站内或网站间网页彼此连接的链接。
字符引用：将特殊字符加入文本中，<,>,“”,‘’,&——<,>,",&apos,&。空格有　, 。（其实也可用转义字符解决）。
元数据标签
// 描述数据的数据
<meta charset="utf-8"> // 指定字符编码，utf-8：通用字符集，可以显示所有语言。
<meta name="author" content="xxx"> // 作者
<meta name="description" content="xxx."> // 网站内容描述（SEO优化，keyword已被忽略）
<meta name="viewport" content="width=device-width"> // 强制让手机浏览器采用它们真实视图的宽度来加载网页
网站图标
// 适配各种设备（高分屏）,格式长为.ico，移动端也可考虑png。
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="">
<!-- basic favicon -->
<link rel="shortcut icon" href="">超链接
<a href="mailto:link"></a> // 链接到邮件
<a href="" download=""></a> // 下载链接download属性提供默认保存的文件名冷门标签
// 很多语义化标签，还有些有利于计算机识别，便于抓取，爬虫之类的
<dl>
<dt>描述列表</dt>
<dd></dd>
</dl>
<blockquote cite="https://...">缩进并有间距<cite>斜体</cite></blockquote>
<q>引号文</q>
<abbr>缩略语</abbr>
<address>联系方式</address>
<sup>上标></sup>
<sub>下标</sub>
<pre><code>代码，字体略小</code><var>大斜体</var><kbd>代码</kbd><samp>代码</samp></pre>
<time datetime="2016-01-20">时间</time>
<header><nav><main><article><section><footer><aside> // 其实这些都不实用，一个是IE7-9不一定支持，另外现在基本都组件化了。
<figure><img><figcaption>图片标题，音视频说明等</figcaption></figure>
<video controls>
不同浏览器解码器不同，支持的视频格式也不同
<source src=".mp4" type="video/mp4">
<source src=".webm" type="video/webm">
<p>你的浏览器不支持H5，在这访问 <a href=".mp4">跳转</a></p>
<track kind="subtitles" src=".vtt" srclang="en"> // 添加副本字幕之类的，SEO
</video> // 为提高性能，可以在文档加载完后用js加载src
<fieldset>
<legeng>字段集标签</legend>
</fieldset>初识矢量图
svg：述矢量图的XML语言。
优点：
- 体积小：存的是图形路劲的算法，像素图（jpg,png…）逐个存每个像素的信息。
- 放大后不失真：只是调整了算法中的值，像素图是像素被放大已填充更多像素。
// canvas好像已经开始取代svg了，还不清楚原理方面的区别
// 也可用img src引入.svg的文件
// 内联svg
<svg>
<rect width="100%" height="100%" fill="black" /> // 画个矩形
<circle cx="150" cy="100" r="90" fill="blue" /> // 画个圆
</svg>自适应图片
// 浏览器根据自身识别选择显示的图片
<img src=".png" srcset=".svg">
<img srcset="a-320w.jpg 320w,
a-480w.jpg 480w,
a-800w.jpg 800w" // 备选图像 浏览器可选择的图像集和大小，320w像素的意思（真实大小）
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px" // 选择条件 媒体条件下图像容器宽（不就是标签的宽吗？）
src="a-800w.jpg" alt="">
<img srcset="b-320w.jpg,
b-480w.jpg 1.5x,
b-640w.jpg 2x" // 浏览器根据屏幕分辨率选择图片
src="b-640w.jpg" alt="">
<picture> // 类似video
<source media="(max-width: 799px)" srcset="c-480w.jpg">
<source media="(min-width: 800px)" srcset="c-800w.jpg">
<img src="c-800w.jpg" alt="">
</picture>表单
1、好用的属性：
size：控制输入框长度
maxlength：控制输入字符数
accept：约束file文件类型
2、不常用标签
// 自动补全标签
<input type="text" id="" name="" list="alist">
<datalist id="alist">
<option>1</option>
<option>2</option>
</datalist>
// 图像按钮，行为类似提交
<input type="image" alt="Click me!" src="" />
// 米尺，仪表尺。可以指示当前值的状态（绿，黄，红）
<meter min="0" max="100" value="75" low="33" high="66" optimum="10"></meter>3、表单数据的发送
// 使用<form>
<form method="post" enctype="multipart/form-data">enctype：指定Content-Type</from>
// 使用XHR
var XHR = new XMLHttpRequest();
var urlEncodedData = "";
var FD = new FormData(); // FD只写
for(name in data) {
FD.append(name, data[name]);
}
XHR.addEventListener('load', function(event) {
alert('监听请求成功');
});
XHR.addEventListener('error', function(event) {
alert('监听报错');
});
XHR.open('POST', 'https:');
XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 设置请求头
XHR.send(urlEncodedData);
XHR.send(FD);4、表单验证
伪类:valid，:invalid自定义验证通过样式
<form novalidate>关闭自带的验证</form>
// 自定义验证消息
email.setCustomValidity("");此外有许多用于验证的API，此处不做详细介绍。
5、请求
请求头：全局元数据集
GET：浏览器发送空的主体。
有许多伪类css用于定制表单样式，此处不做详细介绍。
杂项
- lang=”en-US”：该属性利于SEO优化。
- sandbox =”“：允许嵌入的iframe做一些操作。
<colgroup>
<col style="background-color: yellow" span="2"> // 表格第二列样式
</colgroup>