30分钟，认识 html 本质

html 是什么？

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。

所谓标记语言就是使用各种标签，对文本内容修饰的语言。事实上，对于标签，我们应该是很熟悉的，在各种场景里都非常常见的。

比如，在超市里，熟食区，海鲜区，零食区，饮品区。

再比如，男的站左边，女的站右边。

这些，都是各种各样的标签，嗯，不过都是隐形的。

那么，对于 html 来说，也会有各种各样的标签，用来协助网页内的文本进行不同的排列布局。在 html 语言规范中，使用尖括号所包含的内容，且左尖括号后跟随英文开头的字符串，或斜杠/开头的字符串，就表示一个标准的 html 标签。比如 <b>粗体</b>，比如<i>斜体</i>，比如<u>下划线</u>。

CSDN 文盲老顾的博客，https://blog.csdn.net/superwfei

html 起源

html 出现的时间并不长，是在 http 协议产生后，才跟随产生的，为了支持在文本传输过程中，保持文本格式而产生的一个标签语言集，而 html 的前身，可以向前追溯到 IBM 在 60 年代便开始研究的 GML（Generalized Markup Language，通用标记语言） 标签集。

在 http 协议开始使用，嗯，有人就偷懒，从 GML 中做了个子集，用来保持文本格式，经典的标签，比如 A（链接）为什么会默认具有下划线，而不是其他表现方式。。。。嗯，因为这是 IBM 工程师们的失误。

GML
IBM在20世纪60年代，创建了GML（Generalized Markup Language，通用标记语言），以在其出版系统内部实现这一需求。IBM使用GML来用单一类型的源文件维护书籍、报表以及其他文件。
SGML
SGML（Standard Generalized Markup Language）源于标记的重点应该是文档结构的想法。SGML融合过gencode的思想。SGML从IBM的GML演化而来，是第一个标准化的信息结构化技术。SGML成为了IBM内部格式化和维护合法文件的手段。SGML后来被扩展和修改，作为一种全面的信息标准以适应工业范围的广泛应用。但直到1986年，SGML才成为了ISO标准。尽管SGML的功能非常强大，但是由于它非常复杂，需要一大堆昂贵的软件配合运行，因而在很长一段时间都没有被推广。
HTML
1989年，欧洲粒子物理实验室（CERT）的研究员 Tim Berners-Lee 和 Anders Berglund 两人创建了一种基于标记的语言HTML，为给Internet上共享的文章做标记。HTML可以看作是SGML的简化的应用。但是HTML标签逐渐庞大，并且失去严谨性。

html 发展

任何事物的发展，都离不开时代的特征。html 同样如此。

在最早的时候，Http 刚刚出现的时候，html 中，对于流媒体的信息支持的非常非常少，仅仅有一个 img 标签，用来显示一些图片。而更多的标签，则是为了排版做支持的。

在这个时候，使用的最多的应该就是 p 段落标签，h1 - h7 标题标签，以及 table 表格标签。当然，还有为了保持文本格式的 pre 标签，以及文字修饰标签 font。

随着网络速度的提升，以及计算机性能的提升，html 也在慢慢的追加一些内容，比如流行一时的 mdi 音频，wav 音频。

当老顾开始接触到 html 的时候，已经是在97年之后的事情了，混到一个电脑培训班里，给小伙伴们讲解一个叫做 front page 的工具，嗯，就是一个 web 可视化开发工具。这个时候已经发展到 html 4.0 了，功能就已经很完善了。

比如，曾经霸占了所有浏览器的 flash 内容所使用的 embed 标签。比如可以引用动态控件的 object 标签。比如可以播放视频的 video 标签等等。

以及，现在发展到了 html5 ，各种各样的新标签。

标签分类

在各种标签中，左前括号后边跟随的英文开头的内容，称之为标签名，也叫做页面元素。每个页面元素，都会占用一定的页面空间。

空间占用方式

按照占用空间的方式，分为行内元素（inline），以及块级元素（block），没错，就是现在 css 所描述的那些。

在古老的时代，网络速度很慢，所以很多内容是不使用 css 的，所以标签就显得相对重要了。除了 pre、table、p、div 是默认的块级标签之外，其他标签都是行内标签。

布局

在没有引入 css 之前，html 本身能够完成的布局只有居左，居中，居右，除了特有的 center 是居中标签外，其他的布局方式，都只能通过标签的属性来进行设置。

没错，标签是可以带属性的，布局通常是使用 center 标签居中，pre 标签保持空格，以及属性 align=“left/center/right” 来进行设置。

在 css 引入后，html4新增了一个坐标布局（相对坐标布局及绝对坐标布局），以及 css3 引入的更好用的弹性布局（flex布局）

文本修饰

在 css 流行开之前，文本修饰只有少少的几样，加粗斜体删除线下划线算是独立的标签，还有一个重要的标签 font ，现在已经算是弃用了的。我们都是通过 font 来设置字体、颜色、字号，而现在，我们更习惯用 span 加样式的方式来进行修饰了。

以上这些元素，在 css 引入后，其实大多数存在可替代的情况，除了少少的几个，比如 img 图片（流媒体标签）、a链接（跳转）、iframe/frameset 框架（嵌入框架/结构框架）。

为什么说是可替代，那是因为，我们可以通过样式，来修改、设置任意标签的默认渲染效果，达到原有 html 指定标签的效果，比如边距、字号、行高、布局方式、占用空间等等。

流媒体标签

在网络越来越快，以及压缩算法越来越成熟的今天，各种各样的流媒体也大量的呈现在了网页之中，这少不了流媒体相关标签的支持。这些标签的实现方式，是基于浏览器调用相关的协议、算法进行实现的。

流媒体标签的特殊之处在于，你必须使用相关标签，才能调用相关的协议、算法，这些标签是不可替代的。

预定义符号 Symbols

html 除了有标签部分之外，还有一些预定义的符号，可以作为使用，比如尖括号就是一个很麻烦的东西，他是作为标签语法的一部分，如果想在页面显示尖括号怎么办？答案是通过预定义符号来描述，比如 < 就是左尖括号。

老顾在这里列一下老顾已知的各种符号。

    public enum HtmlSymbols
    {
        // 由于int为c#保留字，所以∫对应的枚举为INT，该特例需要在使用中处理
        Alpha = 'Α', Beta = 'Β', Gamma = 'Γ', Delta = 'Δ', Epsilon = 'Ε', Zeta = 'Ζ', Eta = 'Η', Theta = 'Θ',
        Iota = 'Ι', Kappa = 'Κ', Lambda = 'Λ', Mu = 'Μ', Nu = 'Ν', Xi = 'Ξ', Omicron = 'Ο', Pi = 'Π', Rho = 'Ρ',
        Sigma = 'Σ', Tau = 'Τ', Upsilon = 'Υ', Phi = 'Φ', Chi = 'Χ', Psi = 'Ψ', Omega = 'Ω',
        alpha = 'α', beta = 'β', gamma = 'γ', delta = 'δ', epsilon = 'ε', zeta = 'ζ', eta = 'η', theta = 'θ',
        iota = 'ι', kappa = 'κ', lambda = 'λ', mu = 'μ', nu = 'ν', xi = 'ξ', omicron = 'ο', pi = 'π', rho = 'ρ',
        sigmaf = 'ς', sigma = 'σ', tau = 'τ', upsilon = 'υ', phi = 'φ', chi = 'χ', psi = 'ψ', omega = 'ω',
        trade = '™', reg = '®', copy = '©', sect = '§', yen = '¥', pound = '£', euro = '€', spades = '♠', clubs = '♣', hearts = '♥', diams = '♦',
        nbsp = ' ', lt = '<', gt = '>', amp = '&', quot = '"', ldquo = '“', rdquo = '”', lsquo = '‘', rsquo = '’', hellip = '…', mdash = '—', middot = '·',
        ordf = 'ª', sup2 = '²', sup3 = '³', frac12 = '½', frac14 = '¼', frac34 = '¾', permil = '‰', bull = '•', prime = '′', Prime = '″', oline = '‾', frasl = '⁄',
        ordm = 'º', deg = '°', acute = '´', tilde = '˜', circ = 'ˆ', laquo = '«', raquo = '»', bdquo = '„', rsaquo = '›', lsaquo = '‹', sbquo = '‚', ndash = '–',
        ensp = ' ', emsp = ' ', thetasym = 'ϑ', upsih = 'ϒ', piv = 'ϖ', weierp = '℘', image = 'ℑ', real = 'ℜ', alefsym = 'ℵ', para = '¶',
        minus = '−', times = '×', divide = '÷', asymp = '≈', ne = '≠', equiv = '≡', le = '≤', ge = '≥', lowast = '∗', radic = '√', prod = '∏', sum = '∑',
        larr = '←', uarr = '↑', rarr = '→', darr = '↓', harr = '↔', crarr = '↵', lArr = '⇐', uArr = '⇑', rArr = '⇒', dArr = '⇓', hArr = '⇔', forall = '∀',
        part = '∂', exist = '∃', empty = '∅', nabla = '∇', isin = '∈', notin = '∉', ni = '∋', cedil = '¸',
        prop = '∝', infin = '∞', ang = '∠', and = '∧', or = '∨', cap = '∩', cup = '∪', INT = '∫', there4 = '∴', sim = '∼', cong = '≅',
        sub = '⊂', sup = '⊃', nsub = '⊄', sube = '⊆', supe = '⊇', oplus = '⊕', otimes = '⊗', perp = '⊥', sdot = '⋅',
        lceil = '⌈', rceil = '⌉', lfloor = '⌊', rfloor = '⌋', loz = '◊', iexcl = '¡', cent = '¢', curren = '¤', brvbar = '¦',
        uml = '¨', not = '¬', macr = '¯', plusmn = '±', micro = 'µ', iquest = '¿', dagger = '†', Dagger = '‡',
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

使用符号就是在字符名前边加个 &，后边加个;，比如∅ 就是 ∅了。

弃用的部分标签

现在由于 css 的大力发展，原来很多的标签已经没有了存在的必要了.。

比如 font 标签，现在已经见不到了。

比如 pre 布局，已经通过样式实现了。

比如下划线删除线，下标上标之类的，也都有自己的样式了，甚至给你搞出上划线来了。

学习 html

那么，该怎么学习 html 呢？相信看到前边这些内容，小伙伴应该有一定的领悟了。

按照老顾的说法，html 就是具有特定默认值，特定属性的一些元素修饰内容。而 html 文档呈现的内容，就是通过这些标签元素对文本修饰后，堆出来的文本堆罢了。

事实上，在理解了 html 的本质：文本修饰元素、引入流媒体、布局设置，这个内容之后，其实 html 大可不必专门去学。老顾之前说自己是在培训班学的 html ，通过 front page ，理解了他是标签修饰内容后，就再没专门看过 html 学习的内容，都是随随便便去 w3school 之类的网站上看看手册，找找有没有适用的标签就完事。写的多了，用的多了，自然标签名也就记住了。

嗯，古早时代，手册类书籍是比较常见的，不知道为什么现在的这类书籍越来越少了，都是各种花哨的什么入门到精通。。。。

有个手册，这种标签类语言，就可以轻松上手了啊，别花费太多时间去专门硬背这些，用多了，自然就熟练的记住了，如果碰到没见过的标签，则直接上手册里一查，就能理解的七七八八了。