| title |
|---|
HTML5 入手第一天 |
上手 H5 ，直接就平铺式的学习各个接口，肯定会劳而无功。这里 Peter 以一个动手干活的人的角度，推荐一个务实的学习思路。
HTML5 其实就是一堆比较新的浏览器接口规范的总结。到底是哪些接口？ MDN 的这篇文章中有详细归类。其实，成熟的开发者是不会每天跟人家说“我用 H5 ”的。因为到了今天，这都2015年底了，其他的 HTML 版本（ HTML4 或者是 XHTMl ）都已经彻底被主流业界淘汰了。H5 就是 HTML ，HTML 就是 H5 ，因为没有其他选择。
前几天我录了一个视频叫做 解释 HTML5 给程序员听 里面有更为详尽的内容。
其实编程领域的概念有一个特点，就是学是学不会的，都是用会的。加上 H5 的各个接口之间其实也没用多大关联，没啥理论体系。所以就把分得那几大类稍微了解一下，然后代码写到哪里就学到哪里。 Peter 反对无病呻吟的概念学习，认为任何时候我们需要学新东西那就是因为实际开发中遇到了实际的坎，迈不过去了，这时候才有必要捡起概念来研究一下。
那此时此刻，我们要迈出哪一步呢？作为初学者，第一步就是要有能力辨识一个 H5 页面和 H4/XHTML 页面的区别，同时自己写的页面要符合 H5 的基本规范，不要闹笑话。
如何让自己的页面，一看就是 H5 页面呢？其实秘诀就是把一个 H5 页面必用的标签用上，然后不必用的选几个最实用的也用上，这样就搞定了。相比较老版本 HTML 中的标签，H5 新标签的特点就是，更简单，语义更清晰，也就是 H5 代码的“语义化”更好。语义化，其实说白了就是一看标签名，就明白它发挥的作用。
先来说一个也是唯一一个必须要用上的标签。
指的是每个 html 文件的第一行，也就是”文件类型声明“，严格来说算不上一个标签。
已经死掉的 XHTML1.0 的页面的第一行是这个鬼样子的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
同样已经死掉的 HTML4 的第一行是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
上面两个有个共同点，就是鬼才看得明白。但是当代 HTML 中，也就是 H5 规范下的文件类型声明却是这样的：
<!DOCTYPE html>
是不是一眼就能看明白呢。今时今日如果我们打开任何一个还算靠谱的网站，那么第一行都是长成这样的（大小写不区分）。这就表示当下所有的主流网站已经都是 H5 规范的了。
老标准中这样写
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
H5 中却是这样的简单：
<meta charset="UTF-8">
当然，即使在 H5 的页面中，charset 用老写法也是允许的（只是会让人略感代码脏兮兮）。所以，真正有严格要求的地方其实就是 DOCTYPE 那一行。其他标签都是可选的。
语义化标签基本上是替代页面中的一些 div 的。比如，传统上我们写
<div class="header" ></div>
上面这句语义明确的，但是不是通过标签（ div 本身是无语义的），而是通过 class 名。有了语义化标签，再来写的时候就会更简单明了一些：
<header></header>
其他的语义化标签也都是这个作用。
尽管语义化标签除了表意明确，还有其他一些好处（参考这里），同时浏览器支持也足够好了（ IE9+ 都是没问题的，除了 <main> ，这个连 IE11 都不支持，所以这个就不要用了）。但是，不排除即使是 H5 顶尖高手，也可以不用语义化标签（可以看一下 http://github.com 等一些一流网站的页面源码）。所以语义化标签，不用并不是错，但是 Peter 还是推荐把最常用的几个用上，会显得帅一些。
最终，只要用上下面几个标签，Peter 就认为你的 H5 第一课完美过关了：
第一个，doctype 声明：
<!DOCTYPE html>
这一行必须用。
第二个，charset 设置：
<meta charset="UTF-8">
也要用，虽然用老写法也不报错。
第三个，文件最顶部
<header></header>
强力推荐，Peter 自己每天在用，做页头很方便。
第四个，文件最底部
<footer></footer>
跟 header 一样，每天都在用，做页脚很方便。
第五个，导航栏
<nav></nav>
用来和 header 配合制作导航栏。我自己用得不多。
第六个，页面局部
<section></section>
我用得不多。用来把页面分成几个平行的部分。
其他的标签还有 <aside> ，<article> 等等就都不推荐了，毕竟每个人的脑容量都有些，想这些细节多了，用在创作上的就少了，顺其自然就好。多读优秀网站的源码，高手怎么用，咱们就跟风怎么用就行，没有必要花时间研究。
最终，页面写成下面这样，就很有 H5 风范了：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<header>
<nav></nav>
</header>
<section></section>
<section></section>
<footer></footer>
</body>
</html>
其他的所有那些接口，例如视频，音频，SVG ，地理位置等等，都是网站具体业务类型决定的，不是每个网站都用。