为什么按”从上往下”写#

课程在动手前先给了一条原则：

也就是说：页面长什么样，代码就照着那个顺序写。标题在最上面就先写标题，视频在标题下面紧接着写视频——我们的六步顺序就是这么来的。

六步总览#

六步速查表#

容易踩的坑#

• 样式和结构分开做：先排版（有什么）、再样式（好不好看）。一步到位容易两头乱。
• <span> 不换行、<div> 换行：给一小段文字上样式用 <span>；要”一整块”或”换行”用 <div>。
• 改样式前先想”要选中谁”：元素选择器一网打尽、类和 id 精确点名，冲突时 id > 类 > 元素。
• 百分比是相对父元素：容器变窄后，子元素的百分比要重新想一遍（80% → 100%）。
• width/height 只写一个，另一个等比缩放，不然会变形。
• 居中口诀：定宽度（width）+ 左右 auto（margin: 0 auto）。

一、知识回顾（读完直接做下面的实践题）#

1. 页面从上往下写：html 页面在渲染展示时从上往下逐行解析，所以编写页面要根据页面布局从上往下编写
2. 标题用 <h1>~<h6>（一到六级标题，浏览器默认加粗、字号大、独占一行）；超链接用 <a href="url" target="">，href 指定访问的 url，target 取值 _self（默认，当前页面打开）/ _blank（空白页面打开）
3. 要给”一小段文字”单独上样式，先用 <span> 把它包起来——span 一行可以显示多个（不像 div 独占一行），宽度高度由内容撑开
4. CSS 三种引入方式：行内样式（写在标签的 style 属性里，配合 JavaScript 使用）、内部样式（写在 <style> 标签里，通常放 head）、外部样式（单独的 .css 文件，用 <link rel="stylesheet" href="..."> 引入）
5. 颜色四种表示法：关键字（red、gray）、rgb(r,g,b)（0-255）、rgba(r,g,b,a)（a 是透明度 0-1）、十六进制 #rrggbb（可简写 #f00）
6. 最常用的三类选择器：元素选择器 h1 {...}、类选择器 .cls {...}、id 选择器 #time {...}；优先级 id > 类 > 元素
7. 视频/图片标签：<video src controls width>（controls 显示播放控件）、<img src width>；宽度和高度只设置一个，另一个会等比例缩放；width 写百分比时是相对于父元素的百分比
8. 资源路径：绝对磁盘路径（D:/xxx.jpg，不推荐）、绝对网络路径（https://xxx.jpg）、相对路径（./ 当前目录可省略、../ 上一级目录）——案例用的是相对路径 img/1.gif、video/news.mp4
9. 文本样式三件套：line-height 设置行高（2 = 2 倍）、text-indent 设置首行缩进（2em = 缩进 2 个字符）、text-decoration: none 去掉超链接的下划线；color 设置文字颜色
10. 整体居中的两步：先用 <div> 把整块内容包起来，再给容器 width: 70% + margin: 0 auto（auto = 左右自动均分剩余空间）；容器变窄后里面的视频/图片宽度要从 80% 改成 100%（占满容器）；加粗用带强调语义的 <strong>，别用   凑缩进

二、裸写题#

• 2-1 央视新闻的标题区排版 做一个新闻详情页的标题区，从上到下依次是：

  1. 一个大标题（内容自拟，比如”推进长江十年禁渔 谱写长江大保护新篇章”）
  2. 一行”来源 + 时间”：来源是能点击跳转到 https://www.cctv.com 的文字”央视网”（在新标签页打开），后面跟着”2024年05月15日 20:07”
  3. 先只管结构，颜色和样式下一题再改 （练习文件 test_11_标题区排版.html 里有写作区，样式区已备好。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：三个元素——“最大的标题”用一种有级别的标题标签、“能点的来源”用链接标签（还要指定打开方式）、时间先用普通文字写着 二级 · 方法：<h1>；<a href="https://www.cctv.com" target="_blank">央视网</a>；时间直接写成文本 三级 · 骨架：<h1>____</h1> / <a href="____" target="____">央视网</a> 2024年05月15日 20:07

  参考答案（做完再点开）

  1
  <body>
  2
    <!-- 定义一个标题, 标题内容: 推进长江十年禁渔 谱写长江大保护新篇章 -->
  3
    <h1>推进长江十年禁渔 谱写长江大保护新篇章</h1>
  4
  
  5
    <!-- 定义一个超链接, 里面展示 央视网 -->
  6
    <a href="https://www.cctv.com" target="_blank">央视网</a>
  7
    2024年05月15日 20:07
  8
  </body>

  对照课程 03. 央视新闻-标题-排版.html。检查点：target="_blank" 是”新标签页打开”（不写就是默认的 _self）；时间没有被包在任何标签里，它是普通文本，下一步才需要单独选中它。

• 2-2 把标题区的”来源和时间”收拾干净 在上一题的基础上改样式：

  1. 时间文字改成浅灰色（#b2b2b2），并且以后即使页面上有别的 <span> 也不要被牵连——用只选它一个的选择器
  2. “央视网”这条链接去掉下划线
  3. 样式统一写在本文件 head 的 <style> 里 （练习文件 test_11_标题区样式.html 里有写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：要让一小段文字能被单独选中，得先在标签上给它起个”唯一编号”；“只选它一个”对应三类选择器里最具体的那一类 二级 · 方法：给时间套 <span id="time">；CSS 写 #time { color: #b2b2b2; }；链接去下划线用 a { text-decoration: none; } 三级 · 骨架：<span ____="time">2024年05月15日 20:07</span> / #time { ____: #b2b2b2; } / a { text-decoration: ____; }

  参考答案（做完再点开）

  1
  <head>
  2
    <style>
  3
      /* id选择器：只选中 id 为 time 的那个元素 */
  4
      #time {
  5
        color: #b2b2b2;
  6
      }
  7
  
  8
      a {
  9
        /* 去除超链接下方的下划线 */
  10
        text-decoration: none;
  11
      }
  12
    </style>
  13
  </head>
  14
  <body>
  15
    <h1>推进长江十年禁渔 谱写长江大保护新篇章</h1>
  16
    <a href="https://www.cctv.com" target="_blank">央视网</a>
  17
    <span id="time">2024年05月15日 20:07</span>
  18
  </body>

  显示更多显示更少

  对照课程 05. 央视新闻-标题-样式(选择器).html。检查点：用 span { color: … }（元素选择器）也能把这行变灰，但它会选中页面上所有 span——题目要的是”只选它一个”，所以用 #time。课程文件里同一个 span 上还挂了 class="cls"，就是给你对比类选择器 .cls 用的。

• 2-3 让正文段落”能读” 页面里已经有三段正文文字（各自一个 <p>）。要求：

  1. 行高改成 2 倍
  2. 每段首行缩进两个字符
  3. 第一段开头的”央视网消息”四个字加粗，并且要带强调语义
  4. 样式写在 head 的 <style> 里，不许用敲空格的方式缩进 （练习文件 test_11_正文样式.html 里有写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：两件事分两侧做——“行与行、段与段的间距和缩进”是段落自己的样式（CSS），“加粗”是给那几个字套一个标签（HTML） 二级 · 方法：p { line-height: 2; text-indent: 2em; }；加粗用带强调语义的 <strong> 三级 · 骨架：p { line-height: ____; text-indent: ____em; } / <____>央视网消息</____>

  参考答案（做完再点开）

  1
  <style>
  2
    p {
  3
      /* 设置行高 */
  4
      line-height: 2;    /* 2 倍行高 */
  5
  
  6
      /* 设置首行缩进 */
  7
      text-indent: 2em;  /* 首行缩进 2 个字符 */
  8
    }
  9
  </style>
  10
  <body>
  11
    <p>
  12
      <strong>央视网消息</strong>（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。
  13
    </p>
  14
    <p>行走在长江沿线，科研人员发现很多可喜现象。</p>
  15
    <p>在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾。</p>
  16
  </body>

  显示更多显示更少

  对照课程 07. 央视新闻-正文-样式.html。检查点：2em 的 em 是相对字号单位（字号变、缩进跟着变）；加粗用 <strong> 而不是 <b>；缩进是样式，所以用 CSS，不用   去凑。

三、综合题#

• 3-1 照着课程案例从零做一遍”央视新闻页面” 按课程的六步顺序做（练习文件 test_11_综合_央视新闻页面.html 里有分步注释块，每一步的写作区都留好了），每一步做完都在浏览器里刷新看一眼，做不出来别急着往下走：

  1. 标题排版：写出大标题（<h1>）、来源链接”央视网”（新标签页打开）、发布时间；先不管颜色
  2. 标题样式：用 <span> 把时间圈出来，在 head 的 <style> 里给它浅灰色 #b2b2b2
  3. 选择器精修：把时间的选择器换成”只选它一个”的那种（给它一个 id）；再去掉链接的下划线
  4. 正文排版：标题下方加一个视频（video/news.mp4，带播放控件、宽度占 80%）、两段文字（各一个 <p>）和一张图片（img/1.gif，宽度占 80%）；标题区和正文区之间记得分隔开
  5. 正文样式：段落行高 2 倍、首行缩进 2 个字符；第一段开头的”央视网消息”加粗（用带强调语义的标签）
  6. 整体布局：把全部内容用一个 <div> 包起来，让整块占版面 70%、左右居中；同时把视频和图片的宽度改成 100%
  7. 自查：拉宽/缩小浏览器窗口，内容是否始终居中？视频和图片有没有变形？按 F12 看看容器宽度是不是窗口的 70%？
  提示（先自己想，实在想不出再点开）

  一级 · 思路：六步就是”先结构、再样式、再精修、再结构、再样式、最后整体”；每一步都在上一份文件上改，改坏了能退回上一步 二级 · 方法：<h1> / <a href target="_blank"> / <span id="time"> + #time{color:#b2b2b2} / a{text-decoration:none} / <video src controls width> + <p> + <img src width> / p{line-height:2; text-indent:2em} + <strong> / <div id="content-container"> + width:70%; margin:0 auto 三级 · 骨架：<div ____="content-container"> … </div> / #content-container { ____: 70%; margin: ____ auto; } / p { line-height: ____; text-indent: ____; }

  参考答案（做完再点开）

  1
  <!DOCTYPE html>
  2
  <html lang="zh-CN">
  3
  <head>
  4
    <meta charset="UTF-8">
  5
    <title>央视新闻</title>
  6
    <style>
  7
      /* ③ 精修：只选日期那一个 */
  8
      #time {
  9
        color: #b2b2b2;
  10
      }
  11
      a {
  12
        text-decoration: none;   /* 去掉链接下划线 */
  13
      }
  14
      /* ⑤ 正文样式 */
  15
      p {
  16
        line-height: 2;
  17
        text-indent: 2em;
  18
      }
  19
      /* ⑥ 整体布局：占版面 70% 并居中 */
  20
      #content-container {
  21
        width: 70%;
  22
        margin: 0 auto;
  23
      }
  24
    </style>
  25
  </head>
  26
  <body>
  27
    <div id="content-container">
  28
      <!-- ① 标题排版 -->
  29
      <h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
  30
      <a href="https://www.cctv.com" target="_blank">央视网</a>
  31
      <!-- ② 用 span 圈住日期，再上色 -->
  32
      <span id="time">2024年05月15日 20:07</span>
  33
      <br><br>
  34
  
  35
      <!-- ④ 正文排版：视频 → 文字 → 配图 -->
  36
      <video src="video/news.mp4" controls width="100%"></video>
  37
  
  38
      <p>
  39
        <strong>央视网消息</strong>（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。
  40
      </p>
  41
  
  42
      <img src="img/1.gif" width="100%">
  43
  
  44
      <p>
  45
        行走在长江沿线，科研人员发现很多可喜现象。
  46
      </p>
  47
    </div>
  48
  </body>
  49
  </html>

  显示更多显示更少

  这就是课程 08. 央视新闻-整体布局.html 的完整版（课程的正文段落和配图更多，结构一模一样）。第 7 步的答案：窗口拉宽时内容区始终是窗口的 70%、左右留白相等，说明 margin: 0 auto 生效；视频和图片用 width="100%" 跟着容器走，所以不会因为窗口变化而变形或溢出。