HTML 决定了网页"有什么内容"。这一关把最常用的标签一次学齐,学完你就能独立写出一整页——有标题、正文、图片、链接和表格。
2.1 一个完整页面的"骨架"
每个 HTML 文件都有同样的固定结构,像填空一样套用即可。把它存成 index.html:
<!DOCTYPE html> <!-- 声明:这是 HTML5 文档,放第一行 -->
<html lang="zh-CN"> <!-- 整页的根 -->
<head> <!-- 给浏览器/搜索引擎看的信息 -->
<meta charset="UTF-8"> <!-- 不写它中文会乱码! -->
<title>页面标题</title> <!-- 浏览器标签页上显示的字 -->
</head>
<body> <!-- 你在页面上看到的一切都写这里 -->
<h1>你好</h1>
</body>
</html>三样东西几乎每次都要写:<!DOCTYPE html>、<meta charset="UTF-8">(防乱码)、<title>。下面的在线练习已经帮你备好了骨架,你只需在 <body> 里写内容。
2.2 文字标签:标题、段落、强调、换行
| 标签 | 作用 | 记忆点 |
|---|---|---|
h1 ~ h6 | 标题,数字越小越大 | 一页通常只用一个 h1 |
p | 段落 | 一段文字就用它 |
strong | 加粗强调 | 重要内容 |
em | 斜体强调 | 语气强调 |
br | 换行 | 单独一个,不用闭合对 |
hr | 水平分割线 | 分隔内容 |
br hr img 这类叫"空标签",它们不包内容,所以没有结束标签。
2.3 列表:把东西一条条列出来
两种列表最常用——无序(圆点)用 ul,有序(数字)用 ol,里面每一项都是 li:
<ul>
<li>打篮球</li>
<li>听音乐</li>
</ul>
<ol>
<li>起床</li>
<li>刷牙</li>
</ol>2.4 图片:img 的三个关键属性
<img src="images/photo.jpg" alt="我的照片" width="200">src:图片地址(用相对路径,如images/photo.jpg)。alt:图片加载失败时显示的文字,对无障碍和搜索很重要,养成必写的习惯。width:宽度(像素数字)。
2.5 超链接:把页面连起来
链接是网站的灵魂,靠 a 标签 + href 实现四种跳转:
<a href="about.html">跳到站内其他页</a> <!-- 内部链接 -->
<a href="https://www.bilibili.com">去外部网站</a> <!-- 外部链接 -->
<a href="#bottom">跳到本页某处</a> <!-- 锚点:指向 id="bottom" -->
<a href="mailto:hi@qq.com">给我发邮件</a> <!-- 邮箱 -->加 target="_blank" 可以让外链在新标签页打开。本站导航"跳到某页的 id"用的就是锚点链接。
2.6 表格:排数据
展示成行成列的数据用表格:tr 是行,td 是格,表头用 th:
<table border="1">
<tr><th>姓名</th><th>专业</th></tr>
<tr><td>张三</td><td>电子商务</td></tr>
</table>2.7 容器与语义标签
div 是"万能盒子",用来把一组内容圈在一起,下一步 CSS 排版全靠它。span 是"行内小盒子"。语义标签则让结构更清晰:
通用盒子
<div> 大块容器(占满一行);<span> 行内容器(包住几个字)。
语义标签(了解)
header 头部、nav 导航、main 主内容、section 分区、footer 页脚——本质还是盒子,但名字更有意义。
✏️ 动手练一练
下面编辑器里已经备好了文档骨架,你只管在 <body> 内容区写标签,右边实时看效果。
- 用一个
<h1>写上你的专业名称。 - 用
<p>写一两句话介绍这个专业。 - 用
<ul>列出 3 门你喜欢的课程。 - 加一个
<a>链接到一个你常去的网站。
<body> 里的内容,文档骨架已经帮你写好了。试着在上面 <h1> 下面加一个 <h2>。📝 随堂小测
Q1 防止网页中文乱码,应该写下面哪一行?
<meta charset="UTF-8"> 告诉浏览器用 UTF-8 编码,中文才不会乱码。
Q2 想做"有圆点的列表",外层应该用哪个标签?
ul 无序列表(圆点),ol 有序列表(数字),每一项是 li。
Q3 图片标签里,哪个属性用来写"图片打不开时显示的说明文字"?
alt 是替代文字,利于无障碍与搜索;每个 img 都建议写。
Q4 要让链接在新标签页打开,应给 <a> 加什么?
target="_blank" 在新标签页打开链接。