语义化页面按内容”是什么”来选标签：标题用标题标签，段落用段落标签，列表用列表标签。当试题要求你根据提供的文字制作或编辑网页时，就会用到这项技能，它也是网页制作中其他所有技能的基础。
正确的页面骨架是什么样子？
每个页面的外层形状都一样。head 存放关于页面的信息，body 存放读者看到的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo Photo Club</title>
</head>
<body>
<h1>Demo Photo Club</h1>
<p>We meet every Thursday after school.</p>
</body>
</html>大多数标签成对出现：开始标签如 <p>，结束标签如 </p>。少数标签如 <meta> 单独存在。
怎样一步步搭建页面？
- 写出骨架：doctype、
html、head和body。 - 在
head里加 title，再加字符集那一行。 - 在
body里加一个h1作主标题。 - 把文字分成几个部分，每部分有一个
h2和它的段落。 - 把一组项目改成
ul（圆点）或ol（编号步骤）。 - 关好每个标签并缩进子元素，这样漏掉的结束标签一眼就能看出来。
例题
一道虚构的试题为 Demo Photo Club 提供了这些文字：社团名称，一句关于聚会时间的话，以及三项活动：人像、风景和编辑。
第 1 步，骨架和 title： 如上面的代码块。
第 2 步，主标题： <h1>Demo Photo Club</h1>。
第 3 步，第一部分： <h2>When we meet</h2>，后面接 <p>Thursday, 3:30 pm in Room 4.</p>。
第 4 步，第二部分： <h2>What we do</h2>，然后把三项活动写成列表：
<ul>
<li>Portraits</li>
<li>Landscapes</li>
<li>Editing</li>
</ul>这些活动没有先后顺序，所以用 ul。如果是编号步骤，ol 会更合适。
要留意的错误
常见的失误是按大小来选标题级别。
<h1>Demo Photo Club</h1>
<h4>When we meet</h4>
<p>Thursday, 3:30 pm in Room 4.</p>学生想要小一点的标题，就用了 h4。但这一部分直接位于主标题之下，应该是 h2，现在的结构跳过了级别。改正为 <h2>When we meet</h2>。如果大小不合适，之后用样式表规则调整，而不是改标签。
自我检测
1. 哪个元素存放浏览器标签页上显示的文字？它放在哪里？
显示答案
title 元素，放在 head 里面。
2. 一个页面有”Open the file, edit the text, save it”这几个必须按顺序阅读的步骤。哪种列表标签合适？
显示答案
ol，因为顺序很重要。每个步骤放在各自的 li 里。
3. 找出错误：<p>Meet at the hall. 后面紧接着 <p>Bring a camera.</p>
显示答案
第一个段落没有结束标签 </p>。在 “hall.” 后面补上。
接下来学什么？
结构稳固之后，学习如何让外观保持一致：用样式表保持外观一致。回到单元指南查看完整路线，并用实操任务与证据检查器确认每项要求都已满足。
学生常常能跟上这里的每一步，却在较长的试题把同一个失误藏进几个页面时丢分。我们的老师会留意这种模式，见一对一 ICT 线上补习。