)
• 初识语义化标签(
)
剧情:灰域中的第一道门
2147 年,人类世界的数据文明高度发达,所有实体城市都有一个虚拟“镜像城”——统称为 Origin。
林昊,生于现实最底层的“灰域”,从小听父亲说过一句话:“世界不是由砖头建成的,而是由标签编织出来的。”
某天,一串乱码神秘上传入他的神经芯片。在他脑中,一道声音响起:
「你是被选中的造梦师学徒。来吧,HTML之门已开启。」
教学场景加载:原始代码之域
林昊站在一片空白的数据平原上,只有一块泛光的黑色地板和虚拟键盘。
此时,一位身披银袍的虚拟人影出现,自称「零号导师」。
“HTML 是你构造世界的第一把钥匙。世界的每一栋建筑、每一个按钮,都是从这里开始的。”
他在空气中敲出第一段代码:
DOCTYPE html>
<html>
<head>
<title>林昊的第一个世界title>
head>
<body>
<h1>你好,前端世界!h1>
<p>这是我创造的第一个段落。p>
body>
html>
林昊惊讶地看到——地面浮现出一个光幕,自动加载出虚拟建筑的雏形,一行文字在空中显示。
教学详解
零号导师指着屏幕上的代码:
“这是HTML5的启动信号,它告诉系统:我要建造一个现代网页。”
…
“这是世界的根容器,所有内容必须包裹在它里面。”
…
“这是你网页的大脑,用于定义网页信息、编码格式、标题、外部资源等。”
示例子标签包括:
:浏览器标签页显示的文字
:定义编码,支持中文字符等
…
“这是身体,是用户真正能看到的部分。你所创造的一切——标题、图片、按钮——都写在这里。”
更多标签的魔法
导师弹指之间,更多代码浮现,并实时变为世界构件:
-
标题(从
到
)
<h1>主标题h1>
<h2>副标题h2>
“等级越小,权重越大,别滥用 h1,一个页面通常只该有一个。”
-
段落
<p>这是一个自然段。p>
“讲述文字的容器。”
-
超链接
<a href="https://origin.net">进入主城a>
“点击它,可以穿梭到另一个虚拟页面或区域。”
-
图像![]()
<img src="avatar.png" alt="林昊头像" />
“图像也是构件,但别忘了 alt,即使图像加载失败也能识别其内容。”
-
列表
<ul>
<li>剑li>
<li>盾li>
<li>治疗药水li>
ul>
“用于组织物品、任务列表、导航菜单等。”
-
容器标签 &
<div>这是一个块级容器div>
<span>这是一个行内容器span>
“div用于结构划分,span用于小范围包裹文字。虽然它们没有语义,但搭配 CSS,它们是布局的基础。”
语义化初探
导师一挥手,代码升级:
<header>
<h1>林昊的主页h1>
header>
<main>
<section>
<h2>我的故事h2>
<p>我出生于灰域,但我想成为造梦师。p>
section>
main>
<footer>
<p>联系我:linhao@origin.netp>
footer>
“header、main、section、footer 是 HTML5 的语义标签,它们更清晰地表述结构,利于 SEO、无障碍阅读、团队协作。”
练习任务
创建一个属于你自己的虚拟页面,必须包含:
- 页面标题(
)
- 一个主标题(
)
- 至少两段文字(
)
- 一个链接(
)
- 一个图片(
![]()
)
- 一个列表(
或
)
(你可以用 Notepad 或 VS Code 编写,并在浏览器中打开它!)
预告:第二章《CSS秘典:色彩与布局的力量》
林昊将面对「默认样式怪」的混乱攻击,学习如何用 CSS 控制样式、美化页面与定位元素——他的代码世界,将第一次染上色彩!