乐趣区

关于前端:重构前端知识体系之HTML2022你还会来看HTML吗带你重温亦或走进

jiezi

【重构前端常识体系之 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）

幸好我在，感激你来！

退出移动版