第1章 HTML5概述

Question 1

1. 简述 HTML5 文档的基本结构及语法规范。

Answer

一、HTML5 文档的基本结构

可以把一个 HTML5 文档想象成一封信：信封（<html>）里装着信头（<head>）和信纸正文（<body>），信封外面还贴了一张邮票说明这是什么类型的信（<!DOCTYPE html>）。

具体来说，一个标准的 HTML5 文档包含以下部分：

<!DOCTYPE html>            <!-- 文档类型声明，告诉浏览器这是 HTML5 -->
<html lang="zh-CN">        <!-- 根标签，lang 属性指定语言 -->
    <head>                  <!-- 头部：放"幕后信息" -->
        <meta charset="UTF-8">   <!-- 字符编码 -->
        <title>页面标题</title>    <!-- 浏览器标签栏显示的标题 -->
    </head>
    <body>                  <!-- 主体：放用户看到的内容 -->
        正文内容
    </body>
</html>

<!DOCTYPE html>：必须放在第一行，声明文档类型为 HTML5。
<html>：根标签，所有内容都包含在其中，lang 属性设为 "zh-CN" 表示简体中文。
<head>：头部区域，定义标题、编码、关键字等"幕后"信息，不会直接显示在页面上。
<body>：主体区域，用户在浏览器中实际看到的文字、图片等所有内容都放在这里。

二、HTML5 的语法规范

文档第一行必须写 <!DOCTYPE html> 声明。
<html> 根标签要指定 lang 属性（如 lang="zh-CN"）。
编码统一使用 <meta charset="UTF-8">。
<title> 必须是 <head> 的直接子元素，并紧随 <meta charset> 之后。
除了 DOCTYPE、utf-8、zh-CN 等少数特殊情况外，所有标签名必须使用小写字母。
标签必须符合 HTML5 的闭合规定——双标签要关闭（<p>...</p>），空标签也要关闭（<br/>、<img/>）。
标签嵌套必须正确，不能交叉。例如 div 不能放在 p 里，tbody 必须在 table 里。
属性名使用小写字母，属性值必须用双引号包围。
建议使用 4 个空格作为缩进，保持代码层次清晰。

📖 参见 1.2.1 HTML5 文档的基本结构、1.2.2 HTML5 的基本语法、1.2.6 HTML5 开发人员编码规范

Question 2

2. 使用记事本创建一个 JD 网页脚的版权信息，如图 1-11 所示（可在 JD.COM 网站复制需要的文字）。

Answer

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JD版权信息</title>
</head>
<body>
    <!-- 第一行：网站导航链接，用竖线 | 分隔 -->
    <p style="font-size:12px;text-align:center">
        关于我们&nbsp;|&nbsp;联系我们&nbsp;|&nbsp;联系客服&nbsp;|&nbsp;
        合作招商&nbsp;|&nbsp;商家帮助&nbsp;|&nbsp;营销中心&nbsp;|&nbsp;
        手机京东&nbsp;|&nbsp;友情链接&nbsp;|&nbsp;销售联盟&nbsp;|&nbsp;
        京东社区&nbsp;|&nbsp;风险监测&nbsp;|&nbsp;隐私政策&nbsp;|&nbsp;
        京东公益&nbsp;|&nbsp;English Site|Media &amp; IR
    </p>

    <!-- 第二行：备案号和证件编号 -->
    <p style="font-size:12px;text-align:center">
        京公网安备 11000002000088号&nbsp;|&nbsp;
        京ICP证070359号&nbsp;|&nbsp;
        互联网药品信息服务资格证编号(京)-经营性-2014-0008&nbsp;|&nbsp;
        新出发京零 字第大120007号
    </p>

    <!-- 第三行：出版许可证等 -->
    <p style="font-size:12px;text-align:center">
        互联网出版许可证编号新出网证(京)字150号&nbsp;|&nbsp;
        出版物经营许可证&nbsp;|&nbsp;
        网络文化经营许可证京网文[2014]2148-348号&nbsp;|&nbsp;
        违法和不良信息举报电话：4006561155
    </p>

    <!-- 第四行：版权声明 -->
    <p style="font-size:12px;text-align:center">
        Copyright &copy; 2004 - 2020 京东JD.com 版权所有&nbsp;|&nbsp;
        消费者维权热线：4006067733经营证照&nbsp;|&nbsp;
        (京)网械平台备字(2018)第00003号&nbsp;|&nbsp;营业执照
    </p>
</body>
</html>

代码要点说明：

  在竖线两侧添加空格，因为 HTML 会把连续空格合并为一个。
style="font-size:12px;text-align:center" 是行内 CSS，设置小号字体并居中。
文字内容完全按照图 1-11 截图中的实际文字还原，包括4行信息的具体内容。

📖 参见 1.4 实训——制作社区网版权信息、1.2.5 HTML 的字符实体和颜色表示

第1章 HTML5概述

简答题

编程题