HTML入门·一

HTML是现在世界通用的超文本标记语言，通过它，可以实现图片、链接、音乐以及程序等等多种元素。

什么是HTML

近10年来网络的发展速度大家都有目共睹，现代人的生活已经离不开这个叫“互联网”的东西了，很多人都知道HTML是网页的格式，但是在平常浏览各种网页时，你有没有想过，HTML究竟是什么东西？它是以何方式运作？又是如何制作出来的？
百度百科上有这样一部分解释：

万维网（world wide web）上的一个超媒体文档称之为一个页面（page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

维基百科上是这样介绍的：

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。

看到这里对HTML没有了解的朋友会觉得，啊牙白！满篇的专业名词，又臭又长，看不懂啊。其实HTML没有什么高深莫测的，说白了，HTML就是服务器发给浏览器的一段文字，只不过要说这段文本和你平常看的小说、上课用的课本上的文字有什么不一样，无非就是这段文字都是一些被称为标签的字段以一定格式构成的，在人眼里就是一些字符而已；不过不要小看这些这些特殊的格式，它包含了网页制作者要告诉浏览器把文字、图片、视频放在哪、页面布局、交互情况等的信息。浏览器接收到HTML后，会按顺序读取这些文本，它能够读懂这些特殊格式的字符，随后浏览器把这段文字按照网页开发者的意图把界面(包含文字、视频、图片、音频、图形交互控件等)渲染出应有的效果，然后把结果显示给用户看，用户就看到了实际网页的效果。这就是HTML的工作原理。
所以说，HTML实质就是一个文本文档，只不过扩展名是.html或.htm

HTML发展史

HTML没有1.0，因为关于它的初版存在争议，1995年HTML 2.0面世，1997年由国际官方组织W3C推出了HTML 3.2以及HTML 4.0标准，后面W3C(万维网联盟)也渐渐变成Web技术领域的权威，经过漫长的演变，2014年，HTML 5标准最终面世。

HTML年表

HTML 2.0——1995年11月，RFC 1866发布

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发布推荐标准

为什么HTML会普及?这就要归功于互联网的高速发展，对于编程语言的需求直线上升。而HTML5具有超集方式的简易性、运用广泛的可拓展性、灵活应变的平台适应性以及简单的通用性。凭借着这些特性，HTML越来越受到人们的喜爱。

以上文本来自W3CSchool上的介绍，下面话不多说，直接开始入门。

结构

HTML标记语言结构主要由一系列标签构成，比如 <html> <head> <body> <script> <style> <meta> ...
HTML的结构一般包括<head>标签和<body>标签，<head>和<body>这2个标记符分别表示网页的头部和正文。头部中可包含页面的标题、关键词、描述说明等内容，它本身不作为内容来显示，但影响网页显示的效果。<body></body>当中是网页实际显示的内容，正文标记符又被称为实体标记。页面当中通常包含有很多指向其他相关页面或其他节点的链接，通过点击，可以很方便地获取新的网页，这是HTML获得广泛推广运用最重要的原因之一，而由这些相互之间存在关联的页面组成的有机集合便是网站。

标签有以下特点

由尖括号包围的关键词，比如 <html>

通常是成对出现的，比如 <div> 和 </div>

标签对中的第一个标签是开始标签，第二个标签是结束标签；

开始和结束标签也被称为开放标签和闭合标签。

也有单独呈现的标签，如：<img src="百度百科.jpg" />等。

一般成对出现的标签，其内容在两个标签中间，如<h1>标题</h1>。单独呈现的标签，则在标签属性中赋值，如 <input type="text" value="按钮" />。

网页的内容需在<html>标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中，而网页需展示的内容需嵌套在<body>标签中。某些时候不按标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯。

一个示例

下面给出最简单的一个网页，可以从这个最简单的了解HTML的语法

<!DOCTYPE html>
<html>

<head>
    <title>页面</title>
</head>
<!--这是注释-->
<body>
    <p>这是第一个页面</p>
</body>

</html>

HTML文件一般扩展名是html或htm，请打开文本编辑器复制粘贴上述代码，保存成HTML文件， HTML文件扩展名一般是html或htm，然后使用浏览器打开查看效果。

详细解释

<!DOCTYPE> 声明标签

<!DOCTYPE>声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<!DOCTYPE html>指使用了HTML5。
注意! <!DOCTYPE> 声明没有结束标签，且对大小写不敏感。

<html> 标签

此标签可告知浏览器其自身是一个 HTML 文档。
<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部(head)和主体(body)。

<head> 标签

用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
其中 <title> 定义文档的标题，它是 head 部分中唯一必需的元素。

<!--> 注释标签

注释标签用于在HTML源代码中插入注释。注释不会显示在浏览器中。

<!--注释格式-->
<!--
<p>这是注释中的语句</p>
-->
<p>这是注释外的语句</p>

以上代码在浏览器中显示：

可使用注释对您的代码进行解释，这样做有助于在以后的时间对代码的编辑。当编写了大量代码时尤其有用。
使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本）

<body> 标签

body 元素定义HTML文档的主体。
body 元素包含HTML文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

<p> 标签

该标签告诉浏览器在 <p> 和 </p> 之间的内容是一个段落。

<p> 标签会自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式表中规定。

格式

注意浏览器默认忽视回车符，不过为了方便阅览，人们还是会习惯地在写完一段代码后进行回车

<!DOCTYPE html><html><head><title>页面</title></head><body><p>这是第一个页面</p></body></html>

显然是下面的看起来舒服，不是吗？

<!DOCTYPE html>
<html>

<head>
    <title>页面</title>
</head>

<body>
    <p>这是第一个页面</p>
</body>

</html>

好的规范能提供出好的阅览和修改环境， 规范是作用于开发者的。
另外就是HTML的标签一般是要缩进的，缩进可以使用Tab，当然也可以使用空格，很多人使用4空格缩进(一个Tab4个空格，四个空格缩进就是指一个Tab，不过也有人把一个Tab设置成2个空格，然后使用2空格缩进)
4空格(一个Tab)缩进示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!--以下代码告诉IE浏览器，IE8/9以及以后的版本都会以最高版本IE来渲染界面-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>页面示例</title>
    <!--自适应宽度-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入外部css文件-->
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    <!--引入外部js文件-->
    <script src="js/app.js"></script>
    <script>
        //Javascript 代码
        function hello() {
            console.log("Hello,world!");
            var lab = document.getElementById("label-p");
            lab.innerHTML = "你好";
            alert("Hello!");
        }
    </script>
</head>
<body>
    <!--div块级容器-->
    <div class="test">
        <!--按钮-->
        <button onclick="hello()">Hello,World!</button>
        <p id="label-p">p标签</p>
        <!--链接-->
        <a href="http://www.google.cn">google.cn</a>
    </div>
</body>
</html>

下面是2空格缩进的样式:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <!--以下代码告诉IE浏览器，IE8/9以及以后的版本都会以最高版本IE来渲染界面-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>页面示例</title>
  <!--自适应宽度-->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--引入外部css文件-->
  <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
  <!--引入外部js文件-->
  <script src="js/app.js"></script>
  <script>
    //Javascript 代码
    function hello() {
      console.log("Hello,world!");
      var lab = document.getElementById("label-p");
      lab.innerHTML = "你好";
      alert("Hello!");
    }
  </script>
</head>

<body>
  <!--div块级容器-->
  <div class="test">
    <!--按钮-->
    <button onclick="hello()">Hello,World!</button>
    <p id="label-p">p标签</p>
    <!--链接-->
    <a href="http://www.google.cn">google.cn</a>
  </div>
</body>

</html>

注意一般<html>、<head>、<body>不需要缩进，其他标签按照嵌套关系缩进。

总结

超文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。