信息系统与社会

HTML

5分钟阅读

超文本标记语言 · HTML

📌 一句话理解

HTML就是“网页的骨架”：你在浏览器里看到的每一个网页，背后都是用HTML写成的代码。

📄 HTML是什么？

HTML（HyperText Markup Language，超文本标记语言） 是用来创建网页的标准语言。浏览器读取HTML代码，把它翻译成你看到的文字、图片、按钮等。

┌─────────────────────────────────────────────────────────────────┐
│                    HTML代码 → 网页                              │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│   HTML代码（你看不到的）          浏览器翻译后（你看到的）         │
│                                                                 │
│   ┌─────────────────────┐        ┌─────────────────────┐        │
│   │ <h1>我的网站</h1>   │   →    │    我的网站         │        │
│   │                     │        │    (大标题)          │        │
│   │ <p>欢迎光临</p>     │   →    │    欢迎光临          │        │
│   │                     │        │    (段落)            │        │
│   │ <button>点击</button>│  →    │    ┌─────┐           │        │
│   │                     │        │    │点击 │           │        │
│   │                     │        │    └─────┘           │        │
│   └─────────────────────┘        └─────────────────────┘        │
│                                                                 │
│   浏览器 = 翻译官，把HTML代码变成好看的网页                       │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

🏷️ 什么是“标记”？

标记就是用标签给文字“打标签”，告诉浏览器这段文字是什么。

标签作用效果
<h1>标题</h1>一级标题大号加粗文字
<p>段落</p>普通段落普通文字
<b>文字</b>加粗加粗文字
<a href="网址">链接</a>超链接点一下跳转
<img src="图片地址">图片显示图片
<!-- 这是一个最简单的网页代码 -->
<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一个网页。</p>
    <a href="https://www.baidu.com">点击去百度</a>
</body>
</html>

🔧 HTML的特点

特点说明
易学标签简单直观，容易上手
跨平台任何浏览器都能打开
可扩展可以和CSS、JavaScript配合
纯文本用记事本就能写

🖼️ HTML + CSS + JavaScript 的关系

┌─────────────────────────────────────────────────────────────────┐
│                    网页三剑客                                    │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│   ┌─────────────────────────────────────────────────────────┐   │
│   │                                                         │   │
│   │   ┌─────────┐                                          │   │
│   │   │  HTML   │  ← 骨架（结构）                           │   │
│   │   │  结构   │     标题、段落、图片在哪                    │   │
│   │   └────┬────┘                                          │   │
│   │        │                                               │   │
│   │   ┌────┴────┐                                          │   │
│   │   │  CSS   │  ← 衣服（样式）                            │   │
│   │   │  样式   │     颜色、大小、位置                       │   │
│   │   └────┬────┘                                          │   │
│   │        │                                               │   │
│   │   ┌────┴────┐                                          │   │
│   │   │JavaScript│ ← 动作（行为）                           │   │
│   │   │  行为   │     点击、滑动、动画                       │   │
│   │   └─────────┘                                          │   │
│   │                                                         │   │
│   └─────────────────────────────────────────────────────────┘   │
│                                                                 │
│   一个完整的网页 = HTML + CSS + JavaScript                       │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

🏠 生活中的例子

场景类比
HTML房子的骨架（梁、柱、墙）
CSS房子的装修（颜色、壁纸、地板）
JavaScript房子的电器（灯开关、门铃）

📖 小知识

知识点说明
发明者蒂姆·伯纳斯-李（也是万维网的发明者）
发明时间1989年
最新版本HTML5（支持视频、音频、动画）
谁在维护W3C（万维网联盟）

✅ 自测小问题

  1. HTML的全称是什么？中文是什么意思？
  2. HTML、CSS、JavaScript分别负责网页的什么？
  3. 下面这段代码会显示什么？<h1>Hello</h1>
点击查看答案
  1. HyperText Markup Language，超文本标记语言
  2. HTML负责结构（骨架），CSS负责样式（衣服），JavaScript负责行为（动作）
  3. 显示一个大号加粗的 Hello

📚 教材链接

  • 教材位置：第三章 3.1 信息系统与外部世界的连接方式

关系图谱