10 个标签跑通网页：HTML 入门速写板

10-30 227 0 0

会写网页 ≠ 背完所有标签。
先掌握 10 张“基础牌”，你就能搭出一份像模像样的静态页面。下面给你“结构＋常用＋实战”三合一，复制即可运行，边看边改印象最深刻。

1. 最简骨架

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>我的第一张网页</title>
</head>
<body>
  <!-- 这里写可见内容 -->
</body>
</html>

记住：<!doctype html> 告诉浏览器“别猜了，我是 HTML5”；lang="zh-CN" 让读屏软件说中文。

2. 10 张“必背牌”速查

标签	含义	示例
`<h1>`–`<h6>`	六级标题	`<h1>文章主标题</h1>`
`<p>`	段落	`<p>这是一段文字。</p>`
`<a href="">`	超链接	`<a href="https://example.com">去示例站</a>`
`<img src="" alt="">`	图片	`<img src="cat.jpg" alt="一只橘猫">`
`<ul>` + `<li>`	无序列表	见下实战
`<ol>` + `<li>`	有序列表	见下实战
`<em>` / `<strong>`	强调/重要	`<strong>注意：</strong>别点陌生链接`
`<table>`	表格	见下实战
`<div>`	通用块	布局容器，配合 CSS 使用
`<span>`	通用行内	局部样式钩子

3. 5 分钟实战：把标签串成一页

把下面代码存成 first.html，双击打开即可看到效果；边改边刷新，学得最快。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>个人名片页</title>
</head>
<body>
  <h1>张三的个人主页</h1>
  <p>欢迎来到我的<strong>第一张</strong>静态网页！</p>

  <h2>我的爱好</h2>
  <ul>
    <li>摄影</li>
    <li>写代码</li>
    <li>看科幻</li>
  </ul>

  <h2>今日待办</h2>
  <ol>
    <li>学 HTML</li>
    <li>搭 CSS 环境</li>
    <li>跑通 Live Server</li>
  </ol>

  <h2>相册</h2>
  <img src="https://picsum.photos/400/200" alt="随机占位图">

  <h2>联系我</h2>
  <p>邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>

  <h2>技能表</h2>
  <table border="1">
    <thead>
      <tr>
        <th>技能</th>
        <th>熟练度</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>HTML</td>
        <td><em>入门</em></td>
      </tr>
      <tr>
        <td>CSS</td>
        <td><em>学习中</em></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

4. 立刻能做的 3 件事

把 <title> 换成真名；
把 <ul> 里的爱好改成自己的；
把邮箱地址改成真实邮箱，点一下看是否跳出发件窗口。

5. 下一步提示

给页面“化妆”→ 学 CSS；
让页面“动起来”→ 学 JavaScript；
不想手写表格 → 学 Emmet 快捷键 table>thead>tr>th*2。

背标签不如用标签。
现在打开编辑器，把上面的代码删一半、改一半，再刷新——你的 HTML 旅程已经开始了。

快来点个赞吧

编程知识