HTML（HyperText Markup Language，超文本标记语言） 是用来定义网页结构的一种描述语言。
——维基百科
HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。
首先，说明一下，搭建一个网站的过程中，要用到 HTML、CSS、Javascript 这三大块技术。HTML是构建网站当中缺一不可的一块。
所以，很重要，HTML到底该怎么理解呢？
举个例子，如果把搭建一个网站比喻成一个人。
HTML 是结构 —— 构成一个人的骨架、血管、筋脉、肌肉等等。
CSS 是外表 —— 构成一个人的皮肤、毛发、衣服等。
Javsscript 是思维 —— 构成一个人的大脑、行动、思考等等。
CSS与Javascrtpt这里不深入讲解，这里先只介绍HTML是什么。
设想一下，一个人如果只有基本的身体结构。没有毛发、衣服装饰等（类比CSS），没有大脑、思维（类比Javascript），只是一个光秃秃的又呆又笨还不会动的人，虽然很无趣，但是已经基本构成一个人的基本结构了。
回头过来说。构建一个网站，单单一个HTML,其实基本就可以构成了。只是这个网站，没有图片、没有视频、没有特效，只有单纯的文字介绍、生硬的排版。
世界上第一个网页：http://info.cern.ch/ 就长这样。
世界上第一个网页
学习HTML
既然知道了HTML大概是个什么东西了。那么我们大概来学习一下HTML。
HTML是一门标记语言（也称标签）。怎么理解这个标记语言呢？看一下面几行代码内容。
...
<body>
<h1>我是标题的文字</h1>
<p>我是段落的文字</p>
<a>我是链接的文字</a>
<img src="img.png" alt="img">
</body>
...
上面每一行的内容，都用一个带有< >的标签包括在里面。一个起始标签，一个结尾标签（结尾标签开头多一个 /），这就是标签语言的基本语法。
咦？不对呀，这个<img>怎么不按套路来呀，语法都不对呀~
因为，<img>是空标签。空标签又是什么呢？
有一些元素并不包含内容，它们被称为空元素。就理解为，不按照语法来，偷工减料，没有闭合标签的标签。
常用几个空标签：
<img>
<hr>
<input>
<link>
<meta>
常用的标签：
| 标签 | 效果 | 标签 | 效果 |
|---|---|---|---|
| html | HTML文档的根 | h1~h6 | 标题标签 |
| body | HTML 文档的内容 | img | 图片标签 |
| title | 定义文档的标题 | nav | 只包含导航链接的章节 |
| header | 页面或章节的头部 | ol | 有序列表（数字排序） |
| div | 一个通用的容器 | ul | 无序列表（小圆点） |
| span | 没有特殊含义的文本 | li | 列表中的一个列表项 |
| a | 链接到其他资源的超链接 | dl | 定义一个定义列表 |
| p | 定义一个段落 | dt | 由下一个 <dd> 定义的术语 |
| footer | 页面或章节的尾部 | dd | 代表出现在它之前术语的定义 |
当然，如果想了解更多的标签，请查看 HTML5标签列表
可替换标签：
CSS 里，可替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有 <img>、 <object>、 <video> 和 表单元素，如<textarea>、 <input> 。 某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和 <canvas> 。 通过 CSS content 属性来插入的对象 被称作 匿名可替换元素（anonymous replaced elements）。
大概了解了HTML的语法，很简单，只要记住主要的单词，懂得HTML的语法，就可以写出基本的网页界面。
但是，如果我不按语法来写呢。为什么结束标签要有一个/呢？为什么空元素就可以这样呢？为什么要用<h1>这个表达大标题呢？为什么用<a>可以产生链接呢？...
这就要介绍我们的 万维网联盟（World Wide Web Consortium，W3C）了，看一下维基百科怎么说的。
为解决网络应用中不同平台、技术和开发者带来的不兼容问题，保障网络信息的顺利和完整流通，万维网联盟制定了一系列标准并督促网络应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范，开发中使用的导则和解释引擎的行为等等。W3C也制定了包括XML和CSS等的众多影响深远的标准规范。
——维基百科
大概解释是说，HTML标准，是我们W3C来制定，你们不要瞎写了，大家按标准来写，代码更规范。
最后，安利一个学习HTML的最好的指南~
你能看到的HTML语法，这里都有，你没有看到的，这里也有~
网友评论