【重构前端常识体系之HTML】2022，你还会来看HTML吗？带你重温亦或走进！

引言

写些篇文章的时候，本人思考了几个问题。但最终还是下定决心写，写文是为技术，技术传递的过程却不止呼技术。

考虑的问题

  • HTML的文章太多了，为什么还要写？
  • HTML的入门谁不会？还要学？
  • HTML的文章根本都是水文，谁会看？

本人的答复

一个知识点的诞生，如果造成了规范的话，那么核心就确定了。再多的文章，其表白的含意是统一的，万变不离其宗！

文章书写的目标不就是为了使其读者可能读懂文章并有所得吗？因而我还是要写，但表白得让你们喜爱（继续谋求）！

我置信大多数来看此文章的都晓得HTML，或者说都据说过HTML。

但其实总有一些人不明确，总有一些人认为明确（我本人！），因而我将视角转向了你们！我的xdm（1.写代码 2.兄弟们 3.想得美 4.斜对面 5.兄弟萌 ），不要误会，兄弟萌（男女都兄弟哈）！真正以读者的角度来写文章！

文章水不水，其实不是因为同类的文章多了，而是因为同类的文章太像了，审美疲劳了，没有新意了。

那么，来！拿出我的新意，为你而写！

同样的，掏出你的金手指，为我而赞！（出自鬼刀——捡起你的头颅，为我而战！）

什么是HTML

总是逃不开这个话题。道歉，我再来为你们述说一次！

HTML的英文全称是 Hyper Text Marked Language（超文本标记语言），它于1990年由Web的发明者的Tim Berners-Lee创造。

先说点听不懂的（或者一次听不懂的）

  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 应用标记标签来形容网页
  • HTML 文档蕴含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

老手来看（文言）

HTML的页面被称为文档，那么这些文档我想让它长得和我一样帅，然而腿要比我短！

这可怎么办？把它的腿打个标记：不能比我长！是不是就行了！

说到这个标记，HTML笑了笑：不就是我的菜上了吗！

HTML通过标记式的指令，将影像、声音、图片、文字动画、影视等内容显示进去。

如果你刚理解HTML，就记住它是润饰文档的标记。

平凡的作者

HTML的作者是蒂姆·伯纳斯·李。

他创造了世界上第一个浏览器。

第一个服务器。

创造了www(万维网)。

同时创造了HTML、HTTP和URL。

以上给我一个，就烫手，不对，就烫死了！

如若不信，可百度百科一下。

是否之前从未想过HTML的作者是谁？这是我回过头来总结的时候，须要特地提出的，在学习HTML的时候，该当还有其作者的名字，这里提出来，是为感激和致敬！

HTML的演变史

看了作者，那岂能不理解HTML趋于完满的倒退历史！

  • HTML 1.0 （HTML/HTML+）超文本标记语言(第一版) ——在1993年6月发为互联网工程工作小组(IETF)工作草案公布(并非规范)。
  • HTML 2.0 ——1995年11月作为RFC 1866公布，在RFC 2854于2000年6月公布之后被发表曾经过期。
  • HTML 3.2 ——1996年1月14日，W3C举荐规范。
  • HTML 4.0 ——1997年12月18日，W3C举荐规范。
  • HTML 4.01(渺小改良) ——1999年12月24日，W3C举荐规范，编码更加标准。
  • XHTML 1.0 —— 公布于2000年1月26日，是W3C举荐规范，起初通过订正于2002年8月1日从新公布。
  • XHTML 1.1 —— 于2001年5月31日公布，W3C举荐规范。
  • XHTML 2.0 —— 于2002年8月5日公布，W3C草案。
  • HTML5.0 —— 2012年12月17日，万维网联盟发表，通过靠近8年的艰辛致力，该标准规范终于制订实现。
  • HTML5.1 —— 2013年5月6日，草案颁布。

HTML的版本

看了这么多，眼尖的xdm应该发现了，XHTML。这个是什么？讲到这里，就把XML拉过来一起来个桃园三结义！

HTML、XML、XHTML 的区别

  • HTML：超文本标记语言，是语法较为涣散的、不严格的Web语言；
  • XML：可扩大的标记语言，次要用于存储数据和构造，可扩大；
  • XHTML：可扩大的超文本标记语言，基于XML，作用与HTML相似，但语法更严格。

得出XHTML是语法严格的HTML。

一个HTML长什么样

讲了这么多，就是没讲HTML！进入正题！

HTML的案例

首先来看看一幅图

这就是一个HTML文档的内容，用代码来翻译

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>我是一个题目</title></head><body>    <h1>我是一个页面内容的题目</h1>    <div>我是一个美男子，你信吗？</div></body></html>

看了图片，看了代码，不看看体现？

看了之后是不是发现HTML一套一套的，很合乎强迫症患者！那么首先从第一行开始！

<!DOCTYPE> 申明

所有 HTML 文档必须以 <!DOCTYPE> 申明结尾。同时是不辨别大小写。

来看看一些罕用的HTML版本的通用申明。

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果有人杠，凭什么下面就是罕用的HTML版本啊！那好你中计了！

罕用HTML版本，一个宝藏网站！地址

可见HTML5的倒退还是相当不错的！

因而当初咱们的文档申明个别是应用HTML5的<!DOCTYPE html>。

HTML标签

在下面的代码案例中呈现了很多标签，也就是标记。如html、meta、head、title、body、h1、div等等一些的标签！

老手发言：我记不住啊！

我也记不住！写多了，手记住了！所以不要放心，这里不开展讲HTML标签了。

当初它们的标记作用你应该了解了，吧？

HTML字符集

看到了有一个charset="UTF-8"的代码，是啥意思呢？它是通知浏览器应该用什么编码去解析你的HTML。

目前在大部分浏览器中，间接输入中文会呈现中文乱码的状况，这时候咱们就须要在头部将字符申明为 UTF-8 或 GBK。

具体为什么是这两种，还是下回肯定！

当然，现在的版本用的大部分是HTML5，而HTML5 中的默认字符集为 UTF-8。是不是又少了一个担心？

总结

本文是第一篇，也是把本人之前的HTML笔记颠覆重来的一次文章革新。本人写这篇博客，看了三十几篇博客，感觉这一篇够劲！

重构前端常识体系，你要一起吗？

博客阐明与致谢

文章所波及的局部材料来自互联网整顿，其中蕴含本人集体的总结和认识，分享的目标在于共建社区和坚固本人。

援用的材料如有侵权，请分割自己删除！

感激万能的网络，W3C，菜鸟教程等！

感激勤奋的本人，集体博客，GitHub学习，GitHub

公众号【归子莫】，小程序【子莫说】

如果你感觉对你有帮忙的话，无妨给我点赞激励一下，好文记得珍藏哟！关注我一起成长！

所属专栏：重构前端常识体系（HTML）

幸好我在，感激你来！