HTML基础知识总结

Yafine2019-11-012023-07-02

一、HTML的历史

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

1. HTML发展过程

HTML（第一版）：1993年6月由互联网工程工作小组IETF(Interenet Engineering Task Force)发布的HTML工作草案。
HTML2.0 ：1995年11月作为RFC 1886发布，在RFC 2854于2000年6月发布之后被宣布已经过时。
HTML3..2 ：1996年1月14日由W3C组织发布，是HTML文档第一个被广泛使用的标准。
HTML4.0 ： 1997年12月18日由W3C组织发布，也是W3C推荐标准。
HTML4.01（微小改进）：1997年12月24日由W3C组织发布，是HTML文档另一个重要的、广泛使用的标准。
XHTML1.0 ：发布于2000年1月26日，是W3C组织推荐标准，后来经过修订于2002年8月1日重新发布。

在HTML的发展历史中，最为广为人知的是HTML3.2和HTML4.01。

2. HTML4.01和XHTML

XHTML的全称是(eXtensible Hyper Text Markup Language，扩展的超文本标记语言)，XHTML和HTML4.01具有很好的兼容性，而且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>这种写法就比较混乱，也就是所谓的不合理嵌套。
元素的属性必须有属性值，而且属性值应该用引号（单引号和双引号都可以）引起来。

3. HTML5的诞生

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

HTML5草案的前身名为Web Application 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。

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

HTML5还在继续修改完善，增加新的功能，未来前景很广。

二、常用的标签

这里我主要列举的是HTML的常用标签，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>定义文档的内联框架

2. 表格标签

<table></table>定义表格
<th></th>定义表格的表头
<tr></tr>定义表格的行
<td></td>定义表格的单元
<caption></caption> 定义表格标题
<thead><thead>定义表格中的表头内容
<tbody></tbody> 定义表格中的主体内容
<tfoot></tfood> 定义表格中的表注内容（脚注）

3. 列表标签

<ul></ul>定义无序列表
<ol></ol>定义有序列表
<li></li>定义列表项
<dl></dl> 定义列表
<dt></dt> 自定义列表项目
<dd></dd> 定义自定义列表的描述

4. 表单标签

<form></form> 定义供用户输入的表单
<input> 定义输入控件，如密码框，输入框，按钮等
<textarea></textarea> 定义文本域（一个多行的输入控件）
<label></label> 定义了 <input> 元素的标签，一般为输入标题
<filedset></filedset> 定义了一组相关的表单元素，并使用外框包含起来
<legend></legend> 定义了 <fieldset> 元素的标题
<select></select> 定义了下拉选项列表
<optgroup></optgroup> 定义了下拉选项组
<option></option> 定义下拉列表中的选项
<button></button>定义一个点击按钮

5. 多媒体链接

<a></a>定义一个超链接
<img>定义图像
<embed></embed> 定义在页面中嵌入的内容，可插入音频视频等。

6. 格式标签

<b><b/>定义粗体文本
<del></del>定义被删除文本
<em></em>定义强调文本
<i></i>定义斜体文本
<sup></sup>定义上标文本
<sub></sub> 定义下标文本
<hr>定义水平线
<br>定义简单的换行

常用的标签基本上就是这些了，有些标签在现在的网页开发中很少用或者是被弃用淘汰了，在新的HTML5中新增了很多的标签和属性，后期我会专门写一篇文章，本篇就到这里吧，如果哪里写的不好或者有错的话，请指正，我会及时修改！:wave: