发布日期: 2020-07-09

HTML 基础知识总结

在搭建Hexo个人博客过程中，尤其是自定义Hexo主题时，不可避免的会接触到Html语法。对于修改Hexo主题来说，所需要的Html其实不需要很多。因为绝大多数都是写好了的，只需要我们看懂，然后依葫芦画瓢，好好修改一下就好了。所以只需要有个基础知识，认识一些常用标签，稍微入个门就足够我们使用了。

一、HTML 的简述

HTML, 超文本标记语言，英文全称是Hyper Text Markup Language，由 Tim Berners-Lee 在 1982 年提出，它是互联网上应用最广泛的标记语言。

1. HTML4.01 和 XHTML

XHTML的全称是 (eXtensible Hyper Text Markup Language，扩展的超文本标记语言)，XHTML和HTML4.01（先前的HTML）具有很好的兼容性，而且XHTML是更严格、更纯净的HTML代码。W3C组织制定XHTML，目标是逐步取代原有的HTML。简单地说，XHTML就是最新版本的HTML规范。

XHTML要求HTML文档首先必须是一份XML文档。XML文档是一种结构化文档，它有如下4条基本规则：

整个文档有且有一个根元素。
每个元素都由开始标签和结束标签组成，例如<a></a>，就是一对标签。除非使用空元素语法，例如 <br/> 就是空元素语法。
元素与元素之间应该合理嵌套。例如<div><span>内容</span></div>，这可以明确的看出</span>元素是</div>的子元素，这就是合理嵌套。但<div><span>内容</div></span>这种写法就比较混乱，也就是所谓的不合理嵌套。
元素的属性必须有属性值，而且属性值应该用引号（单引号和双引号都可以）引起来。

2. HTML5 的诞生

HTML5 是指万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次重大修改。HTML5 的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas标记。还引进了新的功能，可以真正改变用户与文档的交互方式。

HTML5 的第一份正式草案已于 2008 年 1 月 22 日公布。HTML5 仍处于完善之中。2013 年 5 月 6 日，HTML5.1 正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言。在这个版本中，新功能不断推出，以帮助 Web 应用程序的作者，努力提高新元素互操作性。直到 2014 年 10 月 29 日，经过几乎 8 年的艰辛努力，HTML5 标准规范终于制定完成了，并已公开发布。HTML5 还在继续修改完善，增加新的功能。

二、常用的标签

1. 基本标签

一个网页的大致构成是：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"><!--编码格式-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 优先使用最新的ie版本 -->
  <title>文档标题</title>
  <link rel="stylesheet" href="资源所在路径" type="规定被链接文档的MIME类型" media="" target="" charset="定义编码方式">
</head>
<body>
  <!--主体内容 显示在网页上的，由许多的标签组成-->
  <p></p>
  <h1></h1>
     ...
   <script src="引用文件地址"></script>
    <script type="text/javascript">
        <!--自己写的JavaScript代码，可在当前页面写，也可以另外写一个js文件，然后在引入 -->
    </script>
</body>
</html>

<!DOCTYPE HTML>定义文档类型为HTML，自从HTML5问世之后，就开始使用。这个在编写代码时必须要写上，这个是用来声明文档类型的，文档类型类似于连接，规定了HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西
<head></head>定义文档的一些相关信息
<title></title>定义文档的标题
<meta>定义关于HTML文档的元信息，关键词，作者等。不会显示在网页上。它的属性有charset，name，http-equiv，content属性等，后期再对这个标签进行详细的解释。
<link>用于链接样式表。关于什么是MIME类型，可以参考MIME类型参考手册，有具体的讲解。
定义注释，便于开发者阅读浏览。
<h1>~<h6>定义标题，字体的大小<h1>最大，<h6>最小。
<p></p>段落标签，是一个块级标签。
<span></span>和<div></div>定义文档的节。
<iframe></iframe>定义文档的内联框架。