超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

HTML文档的后缀名

• .html
• .htm

以上两种后缀名没有区别，都可以使用。

• 声明为 HTML5 文档
• 元素是 HTML 页面的根元素
• 元素包含了文档的元（meta）数据，如定义网页编码格式为utf-8。

• 我的第一个标题

  我的第一个段落。

  HTML编辑器

  ---

  HTML 编辑器推荐

  可以使用专业的 HTML 编辑器来编辑 HTML，教程为大家推荐几款常用的编辑器：

  • VS Code：Visual Studio Code – Code Editing. Redefined
  • Sublime Text：Sublime Text – Text Editing, Done Right
  • 在线编辑器：HTML/CSS/JS 在线工具 | 工具

  你可以从以上软件的官网中下载对应的软件，按步骤安装即可。

  接下来我们将为大家演示如何使用 VS Code 工具来创建 HTML 文件。

  ---

  VS Code

  Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。

  VS Code 安装教程参考：VScode 教程 | 教程

  步骤 1: 新建 HTML 文件

  在 VS Code 安装完成后，选择” 文件(F)->新建文件(N) “，在新建的文件中输入以下代码：

   
  我的第一个标题
   
  我的第一个段落。
   

  

  步骤 2: 另存为 HTML 文件

  然后选择” 文件(F)->另存为(A) “，文件名为baidu.html:

  

  当您保存 HTML 文件时，既可以使用.htm也可以使用.html扩展名。两者没有区别，完全根据您的喜好，我建议统一用.html。

  在一个容易记忆的文件夹中保存这个文件，比如baidu

  步骤 3: 在浏览器中运行这个 HTML 文件

  然后鼠标右击编辑器上的文件名，选择在默认浏览器打开（也可以其他的浏览器）:

  

  注：vscode 中使用浏览器打开 html 文件需要 安装“open in browser”扩展。

  

  HTML 基础-4个实例

  HTML 标题

  HTML 标题（Heading）是通过

  –

  标签来定义的。

  这是一个标题
  这是一个标题
  这是一个标题

  HTML 段落

  HTML 段落是通过标签

  来定义的。

  这是一个段落。

  这是另外一个段落。

  HTML 链接

  HTML 链接是通过标签来定义的。

  这是一个链接

  提示:在 href 属性中指定链接的地址。

  (您将在本教程稍后的章节中学习更多有关属性的知识)。

  HTML 图像

  HTML 图像是通过标签

  注意：图像的名称和尺寸是以属性的形式提供的。

  HTML元素

  ---

  HTML 文档由 HTML 元素定义。

  ---

  HTML 元素

  开始标签 *	元素内容	结束标签 *
  	这是一个段落
  	这是一个链接
  	换行

  *开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

  HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

  注释:您将在本教程的下一章中学习更多有关属性的内容。

  ---

  嵌套的 HTML 元素

  大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。

  HTML 文档由相互嵌套的 HTML 元素构成。

  ---

  HTML 文档实例

  这是第一个段落。

  以上实例包含了三个 HTML 元素。

  ---

  HTML 实例解析

  元素:

  这是第一个段落。

  这个

  元素定义了 HTML 文档中的一个段落。
  这个元素拥有一个开始标签

  以及一个结束标签

  .
  元素内容是: 这是第一个段落。

  元素:

  这是第一个段落。

  元素定义了 HTML 文档的主体。
  这个元素拥有一个开始标签 以及一个结束标签 。
  元素内容是另一个 HTML 元素（p 元素）。

  元素：

  这是第一个段落。

  元素定义了整个 HTML 文档。
  这个元素拥有一个开始标签 ，以及一个结束标签 .
  元素内容是另一个 HTML 元素（body 元素）。

  ---

  不要忘记结束标签

  即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

  这是一个段落

  这是一个段落

  以上实例在浏览器中也能正常显示，因为关闭标签是可选的。

  但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

  ---

  HTML 空元素

  没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

  就是没有关闭标签的空元素（
  标签定义换行）。

  在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

  在开始标签中添加斜杠，比如
  ，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

  即使
  在所有浏览器中都是有效的，但使用
  其实是更长远的保障。

  ---

  HTML 提示：使用小写标签

  HTML 标签对大小写不敏感：

  等同于

  。许多网站都使用大写的 HTML 标签。

  此处使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

  HTML标题

  ---

  在 HTML 文档中，标题很重要。

  ---

  HTML 标题

  标题（Heading）是通过

  –

  标签进行定义的。

  定义最大的标题。

  定义最小的标题。

  实例

  这是一个标题。

  这是一个标题。

  这是一个标题。

  尝试一下 »

  注释:浏览器会自动地在标题的前后添加空行。

  ---

  标题很重要

  请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

  搜索引擎使用标题为您的网页的结构和内容编制索引。

  因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

  应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

  ---

  HTML 水平线

  ---

  标签在 HTML 页面中创建水平线。

  hr 元素可用于分隔内容。

  实例

  这是一个段落。

  ---

  这是一个段落。

  ---

  这是一个段落。

  ---

  HTML 注释

  可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

  注释写法如下:

  实例

  注释:开始括号之后（左边的括号）需要紧跟一个叹号!(英文标点符号)，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。

  ---

  HTML 提示 – 如何查看源代码

  你是否看过一些网页然后惊叹它是如何实现的。

  如果您想找到其中的奥秘，只需要单击右键，然后选择”查看源文件”（IE）或”查看页面源代码”（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

  HTML段落

  ---

  HTML 可以将文档分割为若干段落。

  ---

  HTML 段落

  段落是通过

  标签定义的。

  实例

  这是一个段落

  这是另一个段落

  注意：浏览器会自动地在段落的前后添加空行。（

  是块级元素）

  ---

  不要忘记结束标签

  即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：

  实例

  这是一个段落

  这是另一个段落

  上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

  注释:在未来的 HTML 版本中，不允许省略结束标签。

  ---

  HTML 折行

  如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
  标签：

  实例

  这个
  段落
  演示了分行的效果

  元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

  ---

  HTML 输出- 使用提醒

  我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

  对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

  当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

  HTML文本格式化

  HTML 文本格式化

  加粗文本

  斜体文本

  电脑自动输出

  这是下标和上标

  HTML 格式化标签

  HTML 使用标签 (“bold”) 与 (“italic”) 对输出的文本进行格式, 如：粗体or斜体

  这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。

  	通常标签 替换加粗标签 来使用, 替换 标签使用。 然而，这些标签的含义是不同的： 与 定义粗体或斜体文本。 或者 意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

  ---

  ---

  HTML 文本格式化标签

  标签	描述
  “>	定义粗体文本
  “>	定义着重文字
  “>	定义斜体字
  “>	定义小号字
  “>	定义加重语气
  “>	定义下标字
  “>	定义上标字
  “>	定义插入字
  “>	定义删除字

  HTML “计算机输出” 标签

  标签	描述
  “>	定义计算机代码
  ">	定义键盘码
  ">	定义计算机代码样本
  ">	定义变量
  ">	定义预格式文本

  HTML 引文, 引用, 及标签定义

  标签	描述
  ">	定义缩写
  ">	定义地址
  ">	定义文字方向
  ">	定义长的引用
  ">	定义短的引用语
  ">	定义引用、引证
  ">	定义一个定义项目。

  HTML链接

  ---

  HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

  ---

  HTML 超链接（链接）

  HTML使用标签 来设置超文本链接。

  超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

  当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

  在标签 中使用了href属性来描述链接的地址。

  默认情况下，链接将以以下形式出现在浏览器中：

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时，链接显示为红色并带有下划线。

  注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

  ---

  HTML 链接语法

  链接的 HTML 代码很简单。它类似这样：

  url">链接文本

  href 属性描述了链接的目标。.

  实例

  访问百度

  点击这个超链接会把用户带到百度的首页。

  提示:"链接文本"不必一定是文本。图片或其他 HTML 元素都可以成为链接。

  ---

  HTML 链接 - target 属性

  使用 target 属性，你可以定义被链接的文档在何处显示。

  下面的这行会在新窗口打开文档：

  实例

  访问百度!

  ---

  HTML 链接- id 属性

  id 属性可用于创建一个 HTML 文档书签。

  提示:书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

  实例

  在HTML文档中插入ID:

  有用的提示部分

  在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

  访问有用的提示部分

  或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

  
  访问有用的提示部分

  ---

  基本的注意事项 - 有用的提示

  注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.baidu.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.baidu.com/html/"。

  HTML 链接标签

  标签	描述
  ">	定义一个超级链接

  HTML

  HTML 元素

  元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

  可以添加在头部区域的元素标签为:

  文档内容......

  ---

  HTML 元素

  标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

  实例

  ---

  HTML 元素

  标签定义了文档与外部资源之间的关系。

  标签通常用于链接到样式表:

  实例

  ---

  HTML 元素

  标签定义了HTML文档的样式文件引用地址.

  在 元素中你也可以直接添加样式来渲染 HTML 文档:

  实例

  body {

  background-color:yellow;

  }

  p {

  color:blue

  }

  ---

  HTML 元素

  meta标签描述了一些基本的元数据。

  标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

  META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

  元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

  一般放置于 区域

  标签- 使用实例

  为搜索引擎定义关键词:

  为网页定义描述内容:

  定义网页作者:

  每30秒钟刷新当前页面:

  ---

  HTML 元素

  标签用于加载脚本文件，如： JavaScript。

  元素在以后的章节中会详细描述。

  ---

  HTML head 元素

  标签	描述
  ">	定义了文档的信息
  ">