HTML简介

前言

在开始学习之前，你不需要预先具有任何HTML的知识，但是你需要至少熟悉一些使用电脑的基础，会被动地使用网络（也就是仅需要看着它，浏览内容）。

开始学习html之前，我们需要哪些工具呢？

• 浏览器（browser），它是用于浏览网站的程序

• 编译器，就是将“一种语言（通常为高级语言）”翻译为“另一种语言（通常为低级语言）”的程序。一个现代编译器的主要工作流程：源代码(source code) → 预处理器(preprocessor) → 编译器(compiler) → 目标代码(object code) → 链接器(Linker) → 可执行程序(executables)。编译器是一个指令，要与编辑器的概念区别开来。

• 编辑器，一个好的编辑器可以节省开发时间，提高工作效率，它们都是非常方便易用的环境，你可以用它们来编写代码，查看源文件和文档等，简化你的工作。

  • Notepad++编辑器

  • EditPuls编辑器

  • VIM编辑器

  • GNU Emacs编辑器

  • ATOM编辑器

  • Windows记事本

  • Visual Studio Code

  编译器与编辑器的区别：简单说编辑器是用来写代码的，而编译器是对现场高级语言代码翻译成相对低级语言的一段小程序/指令。

• 集成开发环境（IDE，Integrated Development Environment））是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。

  简单说，就是集成了编辑器、编译器以及链接器等众多功能的一个集成开发环境。

  • Microsoft Visual Studio

  • Eclipse

HTML介绍

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

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

我们将从HTML最基础的部分讲起，对元素（Element）、属性（Attribute）以及可能涉及的一些重要术语进行介绍，并明确它们在语言中所处的位置。还会讲解HTML元素和页面的组织方式，以及其他一些重要的基本语言特性。

学习目标

熟悉HTML语言的基础知识，掌握几个HTML元素的基本用法。

HTML是什么

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

但它不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML可复杂、可简单，一切取决于开发者。它是由一系列元素组成，这些元素可以用来包围不同部分的内容，它可以应用于文本片段，使文本在文档中具有不同的含义（它是一个段落吗？它是一个项目列表吗？它是一个表格吗？），将文档结构化为逻辑块（文档是否有头部？有三列内容？有一个导航菜单？），并且可以将图片，影像等内容嵌入到页面中。

例如：下面一行内容

<p>我真的是一个学霸！</p>

这里将这行文字封装成一个段落（Paragraph）<p>元素来使其在单独一行呈现。

注：HTML标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。例如，标签<title>写作<TITLE>、<Title>、<title>、<TiTlE>等等都可以正常工作。不过，从一致性、可读性等方面来说，最好仅使用小写字母

我们来认真的剖析一个HTML元素

HTML元素剖析.png

这个元素的主要部分有：

• 开始标签（Opening tag）：包含元素的名称（上面例子里面是p），被左、右角括号包围。表示元素从这里开始或者开始起作用——本例中即段落由此开始。
• 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾——本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
• 内容（Content）：元素的内容——本例中就是所输入的文本本身。
• 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

试一试

自己创建一个元素，使用标签<em>、</em>将开始标签与结束标签里面的内容变为斜体。

嵌套元素

你也可以把元素放到其他元素中——这就被称为嵌套。如果我们想要强调我是一个“学霸”，可以将“学霸”嵌套在<strong>中，这意味着这个单词被着重强调：

<p>我真的是一个<strong>学霸</strong>！</p>

你需要确保元素被正确地嵌套，在上面的例子中，我们先打开<p>元素，然后才打开<strong>元素，因此必须先将<strong>元素关闭，然后再去关闭<p>元素。

比如，下面的例子就是错误的嵌套

<p>我真的是一个<strong>学霸！</p></strong>

所有的元素都需要被正确地打开和关闭，这样才能按你所想的方式展现。如果像上述例子一样进行了错误的嵌套，那么浏览器就会去猜想你想表达的意思，但很有可能会得到错误的结果。所以不要这么做。

块级元素和内联元素

在HTML中，有两种你需要知道的重要元素类别，块级元素和内联元素。

• 块级元素，在页面中以块的形式展现——相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。

  • 块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等。
  • 一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。

• 内联元素（行内元素），通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。

  • 内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和<strong>。

看一个例子:

<em>第一</em><em>第二</em><em>第三</em>

<p>第四</p><p>第五</p><p>第六</p>

<em>是一个内联元素，所以就像你看到的，第一行代码中的三个元素都没有问题地展示在了同一行。而<p>是一个块级元素，所以第二行代码中的每个元素分别都另起了一行展现，并且每个段落间都有一些间隔（这是因为默认的浏览器有着默认的展示<p>元素的样式）

块级元素与内联元素.png

空元素

不是所有的标签都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。空元素（Empty elements） 有时也被叫作 void elements。例如：元素<img>是用来在元素<img>所在位置插入一张指定的图片。例如：

<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3754439667,699970096&fm=26&gp=0.jpg">

img标签.png

属性

元素还可以拥有属性，如下：

属性png

属性包含元素的额外信息，这些信息不会出现在实际的内容中。

在上述例子中，这个class属性给元素赋了一个用于识别的名字，这个名字此后可以用来识别此元素的样式信息和其他信息。

一个属性必须包含如下内容：

• 一个空格，在属性和元素名称之间。（如果已经有一个或多个属性，就与前一个属性之间有一个空格。）
• 属性名称，后面跟着一个等于号。
• 一个属性值，由一对引号引起来。

试一试

元素<a>是锚，它使被标签包裹的内容成为一个超链接。此元素也可以添加大量的属性，比如：

• href：这个属性声明超链接的web地址，当这个链接被点击，浏览器会跳转至href声明的web地址。例如：href="https://www.huxiu.com/"
• title：标题title属性为超链接声明额外的信息，比如你将链接至的那个页面。例如：title="The huxiu homePage"。当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。
• target：目标target属性用于指定链接如何呈现出来。例如，target="_blank"将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性就可以了。

自己动手写一个元素内容，使之变成指向任一个你喜欢的web地址链接。

布尔属性

有时你也会看到没有值的属性，它是合法的。这些属性被称之为布尔属性，它们有跟它的属性名一样的属性值。例如disabled属性，它们可以标记表单输入使之变为不可用（变灰色），此时用户不能向它们输入任何数据。

<input type="text" disabled="disabled">

方便起见，我们完全可以将其写成以下形式（下一行代码是正常可以输入的输入框，用于对比）

<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled>

<!-- 这个输入框没有disabled属性，所以用户可以向其中输入 -->
<input type="text">

布尔属性.png

省略包围属性值的引号

当你浏览那些粗糙的web网站时，你会发现各种各样的标记风格，其中就有不给属性值添加引号。在这些情况下它时被允许的，但是其他情况下会破坏你的标记。例如，我们可以写一个只有一个href属性的链接，如下：

<a href=https://www.jianshu.com/>收藏</a>

然而，当我们再添加一个title属性时就会出错，如下：

<a href=https://www.jianshu.com/ title=The jianshu homePage>收藏</a>

这个时候浏览器就会误解你的标记，它会把title属性理解为三个属性——title的属性值为The，另外还有两个布尔属性jianshu和homePage。我们看一下鼠标移上去什么效果：

省略包围属性值的引号.png

所以，建议大家始终添加引号——这样可以避免很多问题，并且使得代码易读。

单引号或双引号？

这只是风格问题，你可以从中选择一个你喜欢的。

但是你应该注意单引号和双引号不能在一个属性值里面混用。比如像这样的写法就是错误的：

<a href="https://www.example.com/'>示例</a>

在一个HTML中已经使用一种引号，你可以在这个引号中嵌套另外一种引号：

<a href="https://www.example.com/" title="这个链接'有趣吗'？">示例</a>

如果你想要将引号当作文本显示在html中，你就必须使用实体引用。

实体引用：在HTML中，字符<,>,",'和&是特殊字符，它们是HTML语法自身的一部分，那么你如何将这些字符包含进你的文本中呢，比如说你真的想要在文本中使用符号&或者小于号，而不想让它们被浏览器视为代码并被解释？

我们这是必须使用字符引用——表示字符的特殊编码，它们可以在那些情况下使用，每个字符引用以符号&开始，以分号(;)结束。

原义字符	等价字符引用
<	&lt;
>	&gt;
"	&quot;
'	&apos;
&	&amp;

剖析HTML文档

学习了一些HTML元素的基础知识，这些单独一个是没有意义的。现在我们来学习这些特定元素是怎么结合起来，从而形成一个完整的HTML页面的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是这个页面的标题</title>
</head>
<body>
    <p>我是一个页面，供你剖析HTML文档</p>
</body>
</html>

分析：

• <!DOCTYPE html>：声明文档类型。很久以前，早期的HTML（大约在1991年2月），文档类型声明类似于链接，规定了HTML页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

然而这种写法已经过时了，这些内容已经成为历史。我们只需要知道<!DOCTYPE html>是最短有效的文档声明。

• <html></html>：<html>元素。这个元素包裹了整个完整的页面，是一个根元素。
• <head></head>：<head>元素。这个元素是一个容器，它包含了所有你想包含在HTML页面中但又不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。后面我们会学到更多的关于<head>元素的内容。
• <meta charset="UTF-8">：这个元素设置文档使用utf-8字符集，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有内容。毫无疑问要使用它，并且它能在以后避免很多问题。
• <title></title>：设置页面标题。出现在浏览器标签上，当你标记/收藏页面时它可以用来描述页面。
• <body></body>： <body>元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

试一试

• 复制上面的HTML页面例子
• 在编辑器上创建一个新的文件
• 粘贴代码到这个文件
• 保存为index.html

接着你可以尝试以下步骤

• 在<body>元素开始标签下方，为这个文档添加一个主标题。这个主标题应该被包含在<h1>开始标签和</h1>结束标签之间。
• 编辑这个段落以包含一些你感兴趣的文本。
• 把字词包含在开始标签<strong>和结束标签</strong>之间，可以使他们以粗体显示，从而突出任何你认为重要的字词。
• 在你的文档中添加一个超文本链接。
• 在你的段落下方，向你的文档添加一张图片，另外你也可以尝试对不同的图片添加链接。

HTML中的空白

无论你在HTML元素的内容中使用多少空格（包括空白字符，包括换行），当渲染这些代码时，HTML解释器会将连续出现的空白字符减少为一个单独的空格符。

HTML注释

和大部分的编程语言一样，在HTML中也有一种可用的机制来在代码中书写注释——注释是被浏览器忽略的，而且是对用户不可见的。它们的目的是，允许你描述你的代码时如何工作的和不同部分的代码做了什么等等。

为了将一段HTML中的内容置为注释，你需要将其用特殊的记号包括起来，比如：

<p>我在注释外</p>

<!-- <p>我在注释内</p> -->

小结

学习到这里，现在你应该可以理解HTML语言的全貌，以及它是如何工作，而且可以使用一些元素和属性。