Front

重新学习HTML5的HTML

经过媒体的渲染,目前大众认为的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显示错误。常见的写法是:

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

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

html

除了doctypes,其他所有元素都在的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,一个在手机屏幕上自适应且不能缩放的网页常见的写法是:

其中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设置可以参考官方的说明

metaname属性以前主要是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。

viewportcontent用逗号分割(见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,所以通常会这样写:

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

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

Text

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

hàn かん 한자(漢字)

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

Form

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

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

手机:

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


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

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

Afterword

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *