初识前端之Html（一）

Html（HyperText Markup Language）超文本标记语言，用于在网页创建和其它可在网页浏览器中看到的信息，在万维网（Web）上作为输出页面，页面上可包含文本、图片、多媒体播放器、超连接等。

Html的发展历史：

超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
HTML 5——2014年10月28日，W3C推荐标准

在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求：

文本标记语言源程序的文件扩展名默认使用htm（磁盘操作系统DOS限制的外语缩写为扩展名）或html（外语缩写为扩展名），以便于操作系统或程序辨认，除自定义的汉字扩展名。在使用文本编辑器时，注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。
超文本标记语言源程序为文本文件，其列宽可不受限制，即多个标记可写成一行，甚至整个文件可写成一行；若写成多行，浏览器一般忽略文件中的回车符（标记指定除外）；对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号（实体符）“&nbsp（注意此字母必须小写，方可空格）”表示非换行空格；表示文件路径时使用符号“/”分隔，文件名及路径描述可用双引号也可不用引号括起。
标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同，但完整的空格可使用特殊符号“&nbsp（注意此字母必须小写，方可空格）”；许多标记元素具有属性说明，可用参数对元素作进一步的限定，多个参数或属性项说明次序不限，其间用空格分隔即可；一个标记元素的内容可以写成多行。
标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。
HTML注释由"“结束结束，例如。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号，即被标识为注释，不予显示。

HTML的编写：

它其实是文本，它需要浏览器的解释，它的编辑器基本分为三种。

第一种是基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。

第二种是半所见即所得软件，如FCK-Editer、E-webediter、Sublime Text等代码编辑器。

第三种是所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如AMAYA、FRONTPAGE、Dreamweaver。

所见即所得软件与半所见即所得的软件相比，开发速度更快，效率更高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。

2. 标记符,如<html>说明该文件是用超文本标记语言（本标签的中文全称）来描述的,HTML代码它是文件的开头;而</html>,则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。

超文本标记语言标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。

代码示列：

<!DOCTYPE html>
 <html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>我是文档的标题也是这个网页的名字</title>
</head>
<body>
 <h1>我是标题</h1>
 <p>我是段落</p>
 <br/> <!-- br是换行符定义新的一行，没有开始所以直接用<br/>表示，而 破折号!-- --破折号 是注释在这个标记内的内容不会呈现在渲染器或者网络浏览器之上 -->
</body>
</html>

3. 关于扩展域名，如index.html、index.htm和index.shtml 。首先htm、html、shtml都是静态网页的后缀，三者也可以说都是只是扩展名不同，其他一样，都是静态的网页。

Htm和html是完全静态的网页不通过服务器编译解释直接送出给浏览器读取的静态网页，以Htm和html伪静态Request除外。

html、htm、shtml、shtm均是静态html网页。都是网页文件后缀名不同的html网页扩展名。

知识扩展：

一、Html与htm

.html与.htm均是静态网页后缀名，网页文件没有区别与区分，html与htm后缀网页后缀可以互换，对网页完全没有影响同时也没有区别。可以认为html与htm没有本质区别，唯一区别即多与少一个“L”。

二、Shtml与shtm

shtml命名的网页文件里，使用了ssi的一些指令，就像asp中的指令，你可以在SHTML文件中写入SSI指令，当客户端访问这些shtml文件时，服务器端会把这些SHTML文件进行读取和解释，把SHTML文件中包含的SSI指令解释出来。

而shtml与shtm后缀的网页文件没有区别，后缀名可以互换，区别在于和html与htm一样多与少“L”。

三、Html与shtml区别

本质上都属于静态网页一种，html属于纯静态，客户端浏览器读取html文件是什么就呈现给浏览者什么内容。而shtml则可以使用SSI。

四、shtml的SSI功能

SSI是为WEB服务器提供的一套命令，这些命令只要直接嵌入到HTML文档的注释内容之中即可。如：

就是一条SSI指令，其作用是将"info.htm"的内容拷贝到当前的页面中，当访问者来浏览时，会看到其它 HTML文档一样显示info.htm其中的内容。

假如我们A页面是shtml的静态网页，而A页面里我们使用了include包含嵌入B静态html页面，如果你的服务器空间支持Shtml SSI这个时候我们，浏览器打开A页面时候，就会在A页面显示A原本内容以及B页面内容，我们查看网页源代码，不会发现B页面引入痕迹，而是看到B页面内容完全在A页面里。

假如：
1）、A shtml页面里内容是：
我包含页面B：

2）、B html网页内容：
我是B页面内容

3）、这个时候浏览器查看A页面HTML源代码：
A shtml页面里内容是：我是B页面内容

这个就是shtml ssi 包含include魅力之处。

其它的SSI指令使用形式基本同刚才的举例差不多，可见SSI使用只是插入一点代码而已，使用形式非常简单。

当然，如果WEB服务器不支持SSI，它就会只不过将它当作注释信息，直接跳过其中的内容；浏览器也会忽略被包含信息，我们可以查看源代码看到include引入注解信息。

4.关于!DOCTYPE，!DOCTYPE一个文档类型标记是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

定义和用法

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

HTML 4.01 与 HTML5 之间的差异

在 HTML 4.01 中有三种 <!DOCTYPE> 声明类型：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）：

HTML Strict DTD

如果你需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：

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

HTML Transitional DTD

一种要求严格的DTD，不允许使用任何表现层的标识和属性。严格的DTD的写法如下：

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

Frameset DTD

Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">

在 HTML5 中只有一种：

<!DOCTYCPE html>