标签的语法结构#

1
<h1>HTML入门程序</h1>
2
<img src="img/1.png">

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

1. HTML 全称 HyperText Markup Language，即超文本标记语言；“超文本”指超越文本的限制，除了文字还能定义图片、音频、视频；“标记语言”指由标签 <标签名> 构成的语言
2. HTML 标签都是预定义的：<h1> 展示标题、<img> 展示图片、<video> 展示视频；HTML 代码直接在浏览器中运行，标签由浏览器解析
3. 一个标签由开始标签（<h1>）、内容（HTML入门程序）、结束标签（</h1>）组成，属性写在开始标签内部（如 src="img/1.png"）
4. HTML 基本骨架：<html> 里包含 <head> 和 <body>；head＝网页头部，放给浏览器看的信息（如 CSS 样式、<title>）；body＝网页主体，放给用户看的信息（文字、图片、视频）
5. 建文件的方法：新建文本文件，把后缀名改成 .html；然后按”骨架 → 定义标题 → 在 body 里填内容”三步写
6. 完整骨架上的三行附加信息：<!DOCTYPE html> 说明文档类型为 HTML；<meta charset="UTF-8"> 指定字符集；<meta name="viewport" content="width=device-width, initial-scale=1.0"> 指定不同设备屏幕宽度的适配方式；<html lang="en"> 说明文档语言（中文页面写 zh-CN 更规范）
7. HTML 注释写法是 <!-- 注释内容 -->，浏览器不会显示；常用来标注代码用途或临时屏蔽代码
8. HTML 标签的三个特点：不区分大小写（<H1> 等于 <h1>，建议小写）、属性值单引号双引号都可以（建议双引号）、语法结构松散（但建议规范书写，浏览器不会报错）
9. 浏览器渲染页面的顺序是从上往下逐行解析，所以编写页面时按页面布局从上往下写
10. CSS 全称 Cascading Style Sheet（层叠样式表），负责控制页面的样式（表现）；同一段内容加上 style="color:red;" 就从黑色变红色——HTML 管有什么，CSS 管长什么样

二、裸写题#

• 2-1 手写一个 HTML 骨架 从零建一个 HTML 文件，要求：浏览器标签页上显示”我的第一个页面”，页面正文里显示一行大标题”Hello HTML”。骨架里的四个方面（html、head、title、body）一个都不能少。 （练习文件 test_03_HTML骨架.html 里只有一个写作区，整个页面的代码都要自己写。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：先把”骨架”的四对标签写出来，再往 head 和 body 里分别填东西 二级 · 方法：定义标题用 <title>，一级标题用 <h1> 三级 · 骨架：<____><____><title>____</title></____><____><h1>____</h1></____></____>

  参考答案（做完再点开）

  1
  <html>
  2
    <head>
  3
      <title>我的第一个页面</title>
  4
    </head>
  5
    <body>
  6
      <h1>Hello HTML</h1>
  7
    </body>
  8
  </html>

  也可以带上完整骨架的 <!DOCTYPE html>、<meta charset="UTF-8">（更规范）。对照课程 01. HTML快速入门.html 检查：head 里只放给浏览器看的 title，正文内容都在 body 里。

• 2-2 给页面加一张图片和一句注释 在页面的一行大标题下面再加一张图片：图片放在与 HTML 文件同级的 img 目录下、文件名叫 1.png；同时用注释标出”这里是标题”和”这里是图片”两处。 （练习文件 test_03_图片与注释.html 里已经给出骨架，在写作区里补内容即可。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：图片用哪个标签？图片的地址写在标签的哪个位置？ 二级 · 方法：<img src="...">，地址写在 src 属性里；注释是 <!-- 注释内容 --> 三级 · 骨架：<!-- 这里是标题 --> / <h1>…</h1> / <!-- 这里是图片 --> / <img src="____/____.png">

  参考答案（做完再点开）

  1
  <html>
  2
    <head>
  3
      <title>我的第一个页面</title>
  4
    </head>
  5
    <body>
  6
      <!-- 这里是标题 -->
  7
      <h1>Hello HTML</h1>
  8
      <!-- 这里是图片 -->
  9
      <img src="img/1.png">
  10
    </body>
  11
  </html>

  注意：img 是相对路径写法（同级目录下的 img 文件夹），图片必须真的放在那个位置才显示得出来。

• 2-3 找出下面这段代码里不规范的地方并改对

  1
  <HTML>
  2
  <head>
  3
    <TITLE>我的页面</TITLE>
  4
  <body>
  5
    <H1>Hello HTML</H1>
  6
    <img src=img/1.png>
  7
  </body>
  8
  </html>

  要求：至少找出 3 处问题，说明为什么，并写出改正后的完整代码。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：回想”标签的三个特点”那一页——大小写、引号、结构松散，各自推荐怎么写 二级 · 方法：标签建议小写；属性值建议用双引号；每个开始标签都要有对应的结束标签 三级 · 骨架：注意 <head> 与 <body> 之间少了一个符号为 / 的标签

  参考答案（做完再点开）

  2-3 三处问题： ① 标签名都写成了大写（<HTML>、<TITLE>、<H1>）——HTML 不区分大小写，但规范写法是小写，改成 <html>、<title>、<h1>； ② <head> 没有结束标签——head 少写了 </head>，导致 title 后面的结构套错； ③ <img src=img/1.png> 的属性值没加引号——要写成 src="img/1.png"（有些符号出现在地址里时，不加引号会直接解析失败）。

  改正后：

  1
  <!DOCTYPE html>
  2
  <html>
  3
    <head>
  4
      <title>我的页面</title>
  5
    </head>
  6
    <body>
  7
      <h1>Hello HTML</h1>
  8
      <img src="img/1.png">
  9
    </body>
  10
  </html>

  （<!DOCTYPE html> 属于加分项：补上它才是完整的 HTML5 骨架。）

三、综合题#

• 3-1 做一个”我的第一个页面” 按课程的三步流程，从零做出一个能在浏览器里正常显示的页面：

  1. 新建文本文件，把后缀名改成 .html（文件名用英文或数字，别带空格）
  2. 写出 HTML 基本骨架（<html>、<head>、<body> 一个都不能少；能补上 <!DOCTYPE html> 和 <meta charset="UTF-8"> 更好）
  3. 在 head 里定义标题：浏览器标签页显示”我的第一个页面”
  4. 在 body 里从上往下依次写：一行大标题（写你的名字）、一行说明文字（写一句话，比如”我正在学习 JavaWeb”）、一张图片（用 img/1.png）
  5. 每块内容前面加一句注释说明
  6. 保存后双击文件用浏览器打开，检查：标签页上的文字、页面上从上往下的顺序、图片有没有显示出来 （练习文件 test_03_综合_我的第一个页面.html 里已经给出骨架和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：先骨架、后内容；head 只放”给浏览器看”的，body 放”给用户看”的 二级 · 方法：<h1> 是一级标题；<img src="img/1.png"> 引入同级 img 目录下的图片；<!-- --> 写注释 三级 · 骨架：<html> → <head>（<meta charset> + <title>）→ <body>（注释 + <h1> + 文字 + <img>）

  参考答案（做完再点开）

  1
  <!-- 告诉浏览器当前文档类型为HTML -->
  2
  <!DOCTYPE html>
  3
  <html lang="zh-CN">
  4
    <head>
  5
      <!-- 字符集 -->
  6
      <meta charset="UTF-8">
  7
      <!-- 浏览器标签页上显示的标题 -->
  8
      <title>我的第一个页面</title>
  9
    </head>
  10
    <body>
  11
      <!-- 一级标题：名字 -->
  12
      <h1>团子的第一个页面</h1>
  13
      <!-- 一行说明文字 -->
  14
      我正在学习 JavaWeb，这是我自己写的第一个页面。
  15
      <!-- 图片：与当前 html 文件同级目录下的 img/1.png -->
  16
      <img src="img/1.png">
  17
    </body>
  18
  </html>

  显示更多显示更少

  检查顺序：代码里 h1 → 文字 → img 的先后，和浏览器里从上往下看到的顺序一致（浏览器从上往下逐行渲染）。如果图片没出来，先看 img 目录和图片文件名是不是大小写、路径都对得上。