HTML 快速入门

约 1388 字大约 5 分钟

2025-06-26

HTML 是什么

HTML 和 Markdown 一样，是一个标记语言，全称 Hyper Text Markup Language 。

HTML 文档的后缀名是 .html，同样可以把文本文档的 .txt 直接修改后缀名为 .html。

HTML 标签对大小写不敏感，<P> 等于 <p>，HTML 和 html 也是一个意思。

HTML 标签

HTML 标签是由尖括号包围的关键词，比如 <html>，标签通常成对出现，比如 <p> </p>。

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

用什么写 HTML 文件

支持 HTML 的编辑器很多，这里我同样选择 vscode 。

HTML 快速入门

基础示例

示例

这是一个最基础的 HTML 文档

<html>
  <body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落</p>
  </body>
</html>

这就是一个最简单的 HTML 文档，在这个文档中：

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

提示

这里只介绍部分常用标签，更详细的标签查看：runoob-html 、w3school-html

HTML 实践

标题 `<h1> - <h6>`

标题

<h1> 定义最大的标题。<h6> 定义最小的标题

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

段落 `<p>`

段落

段落是通过 <p> 标签定义

<p>This is a paragraph</p>
<p>This is another paragraph</p>

列表 `<ul> <ol> <li>`

列表

无序列表 <ul> 有序列表 <ol>

<!-- 无序列表始于 `<ul>` 标签。每个列表项始于 `<li>` -->
<ul>
  <li>Coffee</li>
  <li>Milk</li>
</ul>

<!-- 有序列表始于 `<ol>` 标签。每个列表项始于 `<li>` 标签 -->
<ol>
  <li>Coffee</li>
  <li>Milk</li>
</ol>

水平线 `<hr />`

水平线

<hr />标签在 HTML 页面中创建水平线，可用于分隔内容

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

换行 `<br />`

换行

<br />用于把内容换到下一行

<p>This is<br />a para<br />graph with line breaks</p>

注释 ``

注释

注释只显示不渲染、不运行

<!-- This is a comment -->

图片 `<img>`

HTML 标签可以拥有属性，属性提供了有关 HTML 元素的更多的信息。

图片

src 指 source，源属性的值是图像的 URL 地址。

<img src="https://www.bilibili.com/favicon.ico" />

超链接 `<a>`

超链接

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

<a href="https://space.bilibili.com/121079198?spm_id_from=333.937.0.0"
  >访问 惊蛰与春分_ 的个人空间</a
>

块级元素 `<div>`

div

<div> 以后会用的很频繁！

<div>
  HTML div 元素是块级元素，它是可用于组合其他 HTML 元素的容器。</div>
</div>
<div>
  div 元素没有特定的含义。
</div>
<div>由于它属于块级元素，浏览器会在其前后显示折行。</div>

给标签添加样式

style 属性用于改变 HTML 元素的样式。

黑色文字

在这个例子中，文字黑色。

<html>
  <body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
  </body>
</html>

绿色文字

在这个例子中，文字黑色。

<h1 style="color:green;">这里会变成绿色</h1>

红色文字

在这个例子中，文字红色，大小 20px。

<p style="color:red;font-size:20px;">在这个例子中，文字会变成红色，大小20px</p>

类 `class`

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式，或者为不同的类设置不同的样式。

上一步我们设置文字红色的代码为：

<p style="color:red;font-size:20px;">这里会变成红色，大小20px</p>

有了 class 以后，我们可以把代码修改为：

<style>
  .my-class {
    color: red;
    font-size: 20px;
  }
</style>

<p class="my-class">这里会变成红色，大小20px</p>

修改后的 html 文件全部代码如下：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .my-class {
        color: red;
        font-size: 20px;
      }
    </style>
  </head>

  <body>
    <p class="my-class">这里会变成红色，大小20px</p>
  </body>
</html>

把这段代码复制到文本文档中，保存为 .txt 文件，然后修改后缀名为 .html，右键用浏览器打开，即可看到效果。

提示

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

HTML 本质上和 HTML5 是一样的的。HTML5 是 HTML 的升级版。HTML5 废弃了一些旧标签，提供了一些新标签。

<style> 元素要放在 <head> 里面。

<head> 元素要放在 <html> 里面。

视频教程

由于文字描述本身的限制，有些细节不能体现出来。

感兴趣的小伙伴可以观看视频：