重新梳理HTML基础知识

缘起 

  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)

       渐进增强和优雅降级是两种相对的开发模式,目的是实现应用的兼容性、健壮性。它们的区别仅在于方向不同:渐进增强首先照顾老版本浏览器,然后在最低可用版本基础上增加新特性;优雅降级则率先针对最新的浏览器,使用最新的技术,实现最好的效果,然后再向下兼容低端浏览器。

 

常用转义字符

字符

十进制

转义字符

字符

十进制

转义字符

空格

&#160;

&nbsp;

&#162;

&cent;

&#60;

&lt;

&#163;

&pound;

&#62;

&gt;

÷

&#247;

&divide;

©

&#169;

&copy;

®

&#174;

&reg;

 

 

posted @ 2016-08-18 19:11  kidney  阅读(1891)  评论(0编辑  收藏  举报