重新学习HTML5的HTML – Perchouli 的技术文章和其他文章Blog

经过媒体的渲染，目前大众认为的HTML5大致等于：酷炫的效果，复杂的技术，手机能正常浏览的网页。于是经常有人问我：某个功能，某个效果，HTML5能实现吗？这种表现层的问题，如果排除平台因素回答就是：以前实现不了的，HTML5还是实现不了；以前能实现的，HTML5通常能实现得更好。比如通知，以前用轮询，现在可以用websocket；比如想直接读取客户Windows目录下的文件（…），现在（正常情况下）还是实现不了…

广义的HTML5是一系列技术组合，希望能减少浏览器对插件(Flash/Silverlight/JAVA)的依赖。于是大家关注的重点主要是各种新增的API，HTML作为一种标记语法就没太重视。结果当我用canvas做好表格，用localStorage实现缓存，用video+websocket改进了视频播放后，回头来看我写的HTML代码其实还不够规范。

所以这篇文章是关于HTML的，内容顺序按照HTML的顺序：从doctype到metadata，然后是部分常见标签，总之都是非常浅显的内容。嵌入内容的标签(例如img/object/video)不在讨论的范围，跟CSS或JS关联太紧密的标签(例如各种事件绑定和output标签)也不会涉及。全文没有截图，很多HTML代码是直接写在页面上的，Firefox/Chrome测试正常，但我没办法控制您的浏览器以及爬虫，因此如果样式出现误差请更换浏览器或找找原文链接…

DOCTYPES

通常是在第一行，告诉浏览器基于哪种标准渲染。如果不加或格式错误，默认会采用怪异模式(quirks mode)，导致CSS显示错误。常见的写法是：


<!DOCTYPE html>
或
<!doctype html>

可以小写，但如果用在XML中必须大写，所以建议采用大写。

按照XHTML的写法，空元素(void element)的写法是结尾加/，HTML5不需要。所以br元素的写法是<br>而不是<br/>。

html

除了doctypes，其他所有元素都在的html元素中，简体中文网页常见的写法是：


<!DOCTYPE html>
<html>
或
<html lang="zh-Hans" dir="ltr">

</html>

lang指定当前文档使用的语言，dir指定文字顺序是从左到右(left to right, dir=”ltr”)还是从右到左(right to left, dir=”rtl”)。

lang属性的值遵守BCP 47，不区分大小写。某些网站用的是zh-CN，比如苹果中文，考虑到苹果最近乱七八糟的中文文案就不以他们为标准了…lang对于主流浏览器和常见网页来说，影响不大，相比charset导致的乱码，lang只是偶尔导致字体显示问题。部分搜索引擎、翻译工具和读屏软件会读取lang的值。

head

文档的metadata元素都在head元素中，metadata元素包括style, script, noscript, command, title, base, link, meta，一个在手机屏幕上自适应且不能缩放的网页常见的写法是：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta base="http://dmyz.org/">
  <title>动漫驿站</title>
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link rel="shortcut icon" href="favicon.ico">
</head>

其中style/script/noscript用来嵌入CSS/JS，command大多数浏览器都不支持，title是网页标题。

base用来处理URL，将相对路径转成绝对路径以及修改target。例如<img src=”1.jpg”>，会去请求 http://dmyz.org/1.jpg。设置http://dmyz.org/和http://dmyz.org效果相同。target的值是_blank, _self, _parent, _top，如果a标签也设置了target以a标签的为准。

link的用途很多，设置pingback，目录，archives等等，使用频率最高的是引入CSS文件和设置icon。关于iOS的icon设置可以参考官方的说明。

meta的name属性以前主要是SEO使用，例如keyword, description，但现在主流搜索引擎都不会取keywords了。charset是初学HTML和写爬虫时很容易遇到的坑，统一成utf-8可以避免大部分编码问题，最好是放在metadata的第一行。以前的charset（还有之前提到的lang）是由http-equiv指定的，现在简化了写法，http-equiv除了设置refresh和兼容老版本IE浏览器，其他情况已经不常使用了。

对于现在的多屏场景，最重要的是viewport（严格来说它属于CSS的内容），即视口。概念上分为初始视口(initial viewport)和实际视口(actual viewport)。初始视口是样式/设定生效前的大小，实际视口则是生效之后。例如iPhone的safari初始视口宽度是980px，SANSUMG的默认浏览器初始视口是1060px，设置width=”device-width”后实际视口宽度分别是320px和360px。

viewport的content用逗号分割（见Line7），包括：

width, min-width, max-width, initial-width: 设置网页宽度。设置width相当于同时设置min-width和max-width。通常设置width为设备宽度(width=”device-width”)来实现自适应。在JS中获取宽度(取screen.width或window.innerWidth)，如果是device-width则返回上文提到的320/360，如果设置成320px，返回值就都是320了。
user-scalable: 设置是否允许缩放，设置为0/fixed/no都是不允许用户放大/缩小。
init-scalable: 设置缩放级别。老版本的iOS浏览器设置initial-scale=1.0会导致bug，而且设置为其他数值多数手机浏览器也看不到效果，所以不推荐设置。

body, main, header/footer/nav/section/aside/address

head之后一般就是body，包含文档的主要元素。在body元素中，一般从上到下是header, main, footer，所以通常会这样写：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta base="http://dmyz.org/">
  <title>动漫驿站</title>
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link rel="shortcut icon" href="favicon.ico">
</head>
<body>
  <header><h1>Dmyz</h1></header>
  <main>
    <nav>导航菜单</nav>
    <section>
    </section>
    <section id="main">
    <article>
       <h1>正文标题</h1>
       <p>正文内容</p>
      </article>
      <aside>正文的其他说明</aside>
    </section>
    <aside></aside>
  </main>
  <footer><address><p>Shanghai</p></address></footer>
</body>
</html>

在一个网页中可以有多个header/footer，但只能有一个main。main元素定稿较晚，使用率不及header/footer。除了body和main，标题中列出的元素都被归为区段元素(Sections Element)。使用这些标签的优点是语义化，虽然没有太多红利(文字级别的语义化标签例如strong等是有样式的)，但可以适用一些高级特征且让源代码更容易看懂。

除了区段元素，还有一部分元素被归为群组元素(Grouping Content)，例如p/ul/li/pre/dd/dt，大多是之前的规范中就存在的元素，新增的figure/figcaption也没有太多新特性。

Text

HTML5中增加了很多文本相关的标签，例如strong和small，比之前的b标签更加语义化。这一类标签中，个人认为最有趣且最有用的是ruby，对于CJK文字来说，注音实在是一个很常见的需求。常见的写法如下：


<ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
<ruby>한자<rp>(</rp><rt>漢字</rt><rp>)</rp></ruby>

汉hàn字zì 漢かん字じ 한자(漢字)

其余的多数标签跟XHTML/HTML4用法相同。

Form

HTML5对表单(form)的改进应该是普及度最高的特性了，因为确实非常有用，各种类型的input简化了开发，优化了体验。input在手机上的表现mobileinputtypes.com有整理，但似乎已经被墙，在这里附上网页截图（截图链接），支持情况可以在html5test查到：http://quirksmode.org/html5/inputs/mobile.html

input元素的两个属性：autofocus和required，已经用得很频繁了。另一个使用频率较低的属性是pattern，以正则的方式指定接受的数据，例如一个接受11位手机号的input：


手机：<input pattern="[0-9]{11}" type="text">

手机：

还有用来实现自动补全的元素：datalist，在datalist中指定备选项，input就能自动补全：


<input list="languages" type="text">
<datalist id="languages">
  <option value="python">Python</option>
  <option value="javascript">Javascript</option>
  <option value="ruby">Ruby</option><option value="php">PHP</option>
</datalist>

这两个特性在手机端没有很好的被处理，不建议在手机端使用。

还有keygen元素，支持生成rsa/dsa/ec类型的公钥和私钥，提交表单时会将公钥提交，私钥存在本地。这个元素我还没在生产环境使用过，表单提交到后台要做CA的处理，还没有遇到过需要用它来实现的场景。


<form action="" method="post">
  加密级别:<input type="submit">
</form>

Afterword

离上一篇文章的日期居然已经快一年了。技术类文章都是一边查一边搜，如果搜到写得很不错的文章，自己没必要继续写就扔草稿箱了，结果草稿箱里累积了好几篇关于openvc, react, react-native, 微信开发的文章…当然另一方面也是因为忙于个人事务懈怠了。目前主要的技术方向仍然是Javascript和Python，工作继续Web开发，数据处理为主，业余爱好折腾树莓派openwrt等各种开发板，如果之后有值得分享的内容还是会继续写的。

本文主要参考W3C官方文档，中文翻译基本参考W3C词汇表： http://www.chinaw3c.org/glossary-sc.html