HTML 博客实验 · 01

构建一个博客页面使用 HTML。

HTML 为每个想法提供一个家。今天，我们将把一个博客想法变成一个清晰、亲切的页面 —— 每次添加一个有意义的元素。

✦

每个人都可以参与：草绘、讨论、输入、指点、提问或结对。

01规划首先选择读者需要的内容。

02构建使用标签来构建页面。

03关怀让更多的人能够使用。

HTML
+
IDEAS

页面是与读者的一次对话。

步骤 1 · 结构

从...开始骨架。

HTML 标签描述了每个部分的功能。语义化的骨架能帮助浏览器、屏幕阅读器和同学理解你的页面。

尝试这样操作指向每个标签并说明它负责的内容。

blog.htmlHTML

<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>实地笔记</h1>
      <nav>关于 · 存档</nav>
    </header>
    <main>
      <article>
        <h2>什么才是一个优秀的页面？</h2>
      </article>
    </main>
  </body>
</html>

有意义的标签让页面更易于导航。

步骤 2 · 内容

给页面赋予一个语气。

标签承载内容，但人们带来观点。添加一个标题、一个有用的链接，以及一张能讲述故事的配图。

✓一个能设定预期的标题

✓一个包含单一清晰观点的段落

✓一个能明确告知去向的链接

配对提示大声朗读你的标题。它能吸引人们进来吗？

our-blog.local / journal•••

共享日志

一个优秀的
网页感觉如何？

一系列微小的观察，从我们的工作室发送到你的手中。

阅读条目↗

步骤 3 · 关怀与访问

为每个人。

优秀的 HTML 不仅仅是为了外观正确。它让更多的人有公平的机会去阅读、理解并参与对话。

Aa标题创建一条清晰的路径。

↗链接描述目的地。

▧图片添加有用的替代文本。

轮到你了勾勒一个博客板块，然后选择一个能为其提供承载的 HTML 标签。

我注意到…

我想知道…

我可以尝试…

构建一个博客页面 使用 HTML。

从...开始 骨架。

给页面赋予一个 语气。

一个优秀的网页感觉如何？

为 每个人。

构建一个博客页面使用 HTML。

从...开始骨架。

给页面赋予一个语气。

一个优秀的
网页感觉如何？

为每个人。