HTML 新手入门教程

第一部分：HTML 是什么？

想象一下,你要盖一座房子，HTML（HyperText Markup Language，超文本标记语言）就是这座房子的钢筋骨架和砖块，它定义了网页的结构和内容，比如哪里是标题，哪里是段落，哪里是图片。

html 新手教程
（图片来源网络，侵删）
  • HyperText：超文本，意味着它不仅仅是纯文本，还可以包含链接，可以跳转到其他页面。
  • Markup Language：标记语言，它使用各种“标签”（Tags）来“标记”内容的含义。

重要提示： HTML 不是一种编程语言，因为它没有逻辑、没有变量、不能做计算，它只是一个用来描述网页结构的标记语言。

第二部分：你的第一个 HTML 文件

准备工作

你只需要两样东西：

  • 一个文本编辑器：Windows 系统自带的 记事本 就可以，但更推荐使用功能更强大的免费编辑器，如：
    • Visual Studio Code (VS Code)：强烈推荐！免费、强大、有代码提示功能。
    • Sublime Text
    • Notepad++
  • 一个浏览器：Chrome, Firefox, Edge, Safari 等。

创建基本结构

打开你的文本编辑器,输入以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的世界！</h1>
    <p>这是一个段落，这是我的第一个 HTML 页面。</p>
</body>
</html>

保存文件

  • 点击“文件” -> “另存为”。
  • 在“保存类型”中，选择“所有文件(*.*)”。
  • 将文件命名为 index.html。（.html 后缀非常重要！）
  • 将文件保存在一个你容易找到的文件夹里（比如桌面）。

在浏览器中查看

找到你刚刚保存的 index.html 文件，双击它，它应该会在你的默认浏览器中打开，显示如下内容：

html 新手教程
（图片来源网络，侵删）

恭喜！你已经成功创建了你的第一个网页！

第三部分：HTML 标签详解

现在我们来分解一下刚才的代码,理解每个部分的作用。

基本骨架

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    ...
</head>
<body>
    ...
</body>
</html>
  • <!DOCTYPE html>：文档类型声明，它告诉浏览器，这个文件是一个 HTML5 文件，必须放在文件的最开头。
  • <html>：根元素，所有其他 HTML 元素都包含在它里面。lang="zh-CN" 属性表示网页的语言是中文（中国）。
  • <head>：头部，它包含了不直接显示在页面内容中的元信息，比如网页标题、字符编码、引入的 CSS 文件等，它是“幕后英雄”。
  • <body>：主体，所有在浏览器中可见的内容，比如标题、段落、图片、链接等，都放在 <body> 标签里。

标签

我们在 <body> 中用到了两个标签，我们来看看更多常用的。

标题标签

HTML 提供了 6 个级别的标题，从 <h1> 到 <h6>，<h1> 是最重要的标题。

html 新手教程
（图片来源网络，侵删）
<h1>一级标题 (最重要)</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题 (最不重要)</h6>

段落标签

<p> 用于定义一个段落，浏览器会自动在段落前后添加一些空白。

<p>这是第一个段落，浏览器会自动处理段落之间的间距。</p>
<p>这是第二个段落，看，它们之间有空行。</p>

链接标签

<a> 标签用于创建一个超链接。

  • href 属性：指定链接的目标地址。
  • target="_blank"：让链接在新标签页中打开。
<a href="https://www.google.com">点击这里访问 Google</a>
<br>
<a href="https://www.bing.com" target="_blank">点击这里访问 Bing (新标签页)</a>

<br> 标签是一个换行标签，它没有闭合标签，作用就是换行。

图片标签

<img> 标签用于在网页中显示图片，它也是一个自闭合标签。

  • src 属性：图片的源路径（文件地址或网络地址）。
  • alt 属性：当图片无法显示时，会显示这段替代文本，这对于屏幕阅读器（为视障人士服务）和 SEO（搜索引擎优化）非常重要。
<!-- 本地图片 -->
<img src="my-cat.jpg" alt="我可爱的猫咪">
<!-- 网络图片 -->
<img src="https://www.w3schools.com/html/pic_mountain.jpg" alt="一座美丽的山">

注意：使用本地图片时，确保图片文件和你的 HTML 文件在同一个文件夹里。

列表标签

HTML 有两种主要的列表：无序列表和有序列表。

  • 无序列表：使用 <ul> 标签，列表项是项目符号。
  • 有序列表：使用 <ol> 标签，列表项是数字或字母。
  • 列表项：使用 <li> 
<!-- 无序列表 -->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>
<!-- 有序列表 -->
<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

容器标签

<div> 和 <span> 是非常重要的容器，它们本身没有特殊含义，但常用来组合其他元素，以便后续用 CSS 进行样式设计。

  • <div>：块级容器，通常用来布局一个大的区域，会独占一行。
  • <span>：器，用来包裹一行内的部分文本，不会独占一行。
<div style="border: 1px solid black; padding: 10px;">
    <h2>这是一个 div 区域</h2>
    <p>里面可以放很多内容。</p>
</div>
<p>这是一段文本，<span style="color: red;">这部分文字是红色的</span>。</p>

提示：上面代码中的 style="..." 是内联样式，只是为了演示，在真实项目中，我们更推荐使用外部 CSS 文件来控制样式。

第四部分：HTML 属性

属性为 HTML 元素提供了额外的信息，它们总是在开始标签中，并且以 名称="值" 的形式出现。

我们已经见过一些属性了：

  • lang="zh-CN" (在 <html> 标签中)
  • charset="UTF-8" (在 <meta> 标签中)
  • href="..." (在 <a> 标签中)
  • src="..." (在 <img> 标签中)
  • alt="..." (在 <img> 标签中)

第五部分：HTML 注释

在 HTML 中，你可以使用注释来添加说明，这些注释不会在浏览器中显示。

注释的格式是：<!-- 这是注释内容 -->

<!-- 这是一个注释，解释下面这个标题很重要 -->
<h1>这是一个重要的标题</h1>

写代码时养成写注释的好习惯,能帮你和他人更好地理解代码。

第六部分：下一步去哪里？

恭喜你！你已经掌握了 HTML 的基础知识，现在你知道了如何构建一个网页的骨架。

下一步,你应该学习 CSS (Cascading Style Sheets，层叠样式表)。

  • HTML 负责结构：“这是什么？”（这是一个标题，这是一段话）
  • CSS 负责样式：“它应该长什么样？”（这个标题是蓝色的，这段文字居中，背景是浅灰色）

有了 HTML 和 CSS，你就可以开始创建美观的网页了！

推荐学习资源：

  1. MDN Web Docs (Mozilla Developer Network)：最权威、最全面的 Web 技术文档。
  2. W3Schools：一个非常友好的在线教程和参考网站。
  3. freeCodeCamp：提供免费、互动的编程课程。

动手实践是最好的老师！ 现在就打开你的编辑器，尝试创建一个包含标题、段落、列表和图片的网页吧！