缘起
html(HyperText Markup Language 超文本标记语言)是用于构建 web 页面的标记语言和通用标准. 它并不是一项新的发明, 因为超文本 (具有超链接的文本) 和标记语言 (用于电子文档的定义和描述) 在 HTML 问世以前都早已存在多年. 作为一项划时代的创造, 它再次印证了乔布斯的名言: 创新即整合(Creativity is just connecting things).
HTML 的创造者, 被后人称为互联网之父的 Tim Berners-Lee 曾经是 CERN(欧洲核子研究组织)的一位科学家. 1990 年, 他受命开发一套软件系统用于组织内部成员分享和查阅研究报告, 于是他把超文本和标记语言合成了 HTML, 然后写了一个浏览器和一个服务器, 这就是万维网 (World Wide Web) 的起源. 是的, 一群科学家, 只是为了方便看报告, 结果顺手搞出了互联网.
Tim Berners-Lee 并不是一个广为人知的名字, 原因是他完全放弃了万维网所能带给他的数不胜数的财富, 和他类似的人还有很多, 比如 Linux 的创始人 Linus. 正是这些具备非凡理念的人物奠定了互联网的精神基调: 平等, 共享, 开源和创造.
1994 年 Tim 创建了 W3C, 这是一个非盈利性的国际化组织, 致力于维护和制定 Web 相关的标准.
Tim Berners-Lee
语义(semantic)
语义化标记, 是指每种标记表示一种特定的内容形态, 例如标题, 列表, 表格等. 与之对应的概念, 是样式标记(presentational markup).Tim 最初设想 HTML 应该是一种纯语义化的标记语言, 然而在混沌无序的初始阶段, 各家浏览器厂商多少受到另一种通行多年的标记语言 SGML 的影响, 由于该语言同时存在语义化标记和样式标记, 于是早期的 HTML 也被设计成了两类标记的杂合体. 不过随着 90 年代末 CSS 的逐步应用以及随之而起的 "内容与表现分离" 理念, 样式标记在新的 HTML 版本中被逐渐废除, 但出于向后兼容的考虑, 仍然有部分样式标记被保留, 例如: i(样式)/ em(语义);b(样式)/ strong(语义).
为什么需要使用语义化标记?
1,HTML 本身就是语义化标记语言, 使用符合语义的标记, 才谈得上正确使用 HTML
2, 使用合适的标记, 可以合理应用浏览器默认样式
3, 有利于 SEO
4, 使用合适的标记是确保可访问性的一个前提
5, 更好的可维护性
版本与规格
HTML 历经多个版本迭代, 早期版本由浏览器厂商主导, 直到 1999 年 W3C 发布第四代标准.
第四代标准分化为两类, 一类是 SGML-based HTML, 即 HTML4.01, 另一类是 xml-based HTML, 即 XHTML1.0. 其中每一类下又分为三种规格: Strict,Transitional 和 Frameset.
XHTMl 是 W3C 为了规束 HTML 所做的一厢情愿的徒劳, 它试图以严格的语法和极低的容错率来矫正早期 HTML 市场上业已存在的种种不规范行为. 然而互联网世界没有谁可以成为上令下行的权威, 并且标准必然是滞后于现实的, 因此 W3C 后来放弃了 XHTML2.0, 转而投入向后兼容的 HTML5.
2014 年第五代标准 HTML5 发布 (Recommendation). 它最早是由一个由浏览器厂商代表组成的叫 WHATWG 的组织提出的, 后来学院派的 W3C 在放弃 XHTML 的制定后, 与实务派的 WHATWG 联合, 共同制定了 H5 标准. 历经十五年的换代升级, HTML5 新增了大量的内容, 包括新的标记(新的语义标签, 多媒体支持, 新的属性) 和新的 API(canvas,svg,webstorage,websocket......), 其中许多内容模块至今仍在完善中.
HTML 使用<!DOCTYPE > 来声明其版本及规格.
DTD 是通用标记语言 SGML 用于定义文档遵循何种标准的一套语法规则, HTML4.01 基于 SGML, 因此 HTML4.01 也引入了 DTD 的声明方式, 一共有三种模式:
Strict: 严格模式, 不允许样式标记和框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional: 松散 (混合, 过渡) 模式, 允许样式标记, 不允许框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset: 框架集模式, 允许样式标记和框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML5 不基于 SGML, 因此没有引入 DTD, 也只有一种声明:
<!DOCTYPE HTML>
标签(tags)
图例: H5 元素; 替换元素 *; 行内元素
注: 仅包含所有 H5 支持的标签.
全局标准属性
class,id,title,lang,style,tabindex
dir: 设置内容的文本方向
accesskey: 设置激活元素的快捷键
/* H5 新增 */
contenteditable: 规定内容是否可编辑, 值为布尔值
contextmenu: 与 menu 标签配合使用, 用于自定义右键菜单, 目前仅火狐实现
data-*: 用于嵌入自定义数据
draggable: 用于规定元素是否可拖动, 值为布尔值
dropzone: 目前不支持. copy | move | link
hidden: 没有值, 单独使用. IE 不支持
spellcheck: 规定是否对元素内容进行拼写检查, 值为布尔值
translate: 规定是否翻译元素内容. 支持较差. yes | no
ARIA Role Attributes
Accessible Rich Internet Applications (ARIA), 是一个补充性的标准, 用于进一步提高 HTML 的语义, 以便于辅助性设备的识别.
例如:
<div role="slider" aria-labelledby="volume-label" aria-valuemin="1" aria-valuemax="100" aria-valuenow="67"></div>
替换元素(replaced element)
从 CSS 的角度看, 替换元素是一种内容样式在 CSS 控制范围之外的元素, 它的内容是一个独立的外部对象. 典型的替换元素有 < img>, <object>, <video>, 以及某些表单元素如 < textarea > 和 < input>. 有的元素如 < audio > 和 < canvas > 仅在某些情况下是替换元素. 使用伪元素 content 属性插入的对象属于匿名替换元素.
- In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are a type of external object whose representation is independent of the CSS. Typical replaced elements are <img>, <object>, <video> or form elements like <textarea> and <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases. Objects inserted using the CSS content properties are anonymous replaced elements.
- --from MDN
可见大部分替换元素都是单标签, 但也有少部分是标签对, 如 textarea 和 canvas.
行内元素 (inline) 与块级元素(block-level)
区别:
1, 在正常流中是否另起一行
2, 盒模型规则不同
meta
meta 标签有四种属性:
name 用于指定文档的元数据信息, 例如 application-name | description | keywords | author | viewport ......
http-equiv 指定预编译指令(pragma directive), 用于设置响应头, 但仅当服务器未设置相应响应头时才起作用.
content 用于描述前两者的内容.
charset 用于指定字符集, 可单独使用.
兼容性(compatibility)
H5 新标签的兼容性问题主要存在于 IE9 以下的浏览器.
方法一: 在 head 中引入处理兼容性问题的 JS
- <! - - [ if lt IE9 ]>
- <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
- <! [ endif ] - ->
然后需显示的将 H5 标签设置为 block
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
方法二: document.createElement()
可用性(usability), 可访问性(accessibility)
可访问性主要是指 Web 内容对于残障用户的可阅读和可理解性.
广义的可访问性 / 可用性包含四个方面:
可感知 perceivable, 可操作 operable, 可理解 understandable, 健壮性 robust
具体参见: https://www.w3.org/TR/WCAG20/
可维护性(maintainability)
可维护性的首要前提是可读性. 可读性越强, 维护成本越低.
确保 HTML 可维护性的基本方法:
1, 使用正确的标签;
2, 详细的注释;
3, 合理的缩进与换行;
4, 结构与样式分离 / 解耦
渐进增强 (progressive enhancement) 与优雅降级(graceful degradation)
渐进增强和优雅降级是两种相对的开发模式, 目的是实现应用的兼容性, 健壮性. 它们的区别仅在于方向不同: 渐进增强首先照顾老版本浏览器, 然后在最低可用版本基础上增加新特性; 优雅降级则率先针对最新的浏览器, 使用最新的技术, 实现最好的效果, 然后再向下兼容低端浏览器.
来源: http://www.jianshu.com/p/595e4996c413