第3章〓HTML5网页内容结构与文本 内容结构简称结构，是为网页内容建立一个框架，就像写文章要先写一个提纲一样。结构使页面内容看起来不会杂乱无章，每部分都紧密联系，形成一个整体。采用HTML5内容结构标签可以将页面划分成不同的区域或块，形成结构，然后在不同的区域或块中填充内容，就像报纸杂志版面设计一样。本章首先详细介绍结构标签和基础标签，然后重点介绍列表标签，接下来简单了解引用、术语和格式标签，介绍网页常见的内容结构以及如何调试HTML，最后详细讲解“叮叮书店”项目首页内容结构建立的过程，并添加文本内容。 本章要点 结构标签 基础标签 列表标签 引用和术语标签 格式标签 网页常见内容结构 3.1结构标签 HTML5结构标签用于搭建页面主体内容结构，形成不同的区块，完成整个页面的排版布局，内容结构化会使浏览者体验更轻松、更愉快。结构标签实质上是内容分区元素，可以将文档内容从逻辑上进行组织划分。表3.1列出了HTML5内容结构标签。 表3.1HTML5内容结构标签 标签描述标签描述 <article>定义文章<main>定义文档的主要内容 <aside>定义页面内容之外的内容<nav>定义导航链接 <details>定义元素的细节<section>定义section <footer>定义section或page的页脚<summary>为<details>标签元素定义可见的标题 <header>定义section或page的页眉 3.1.1<header>标签 <header>标签定义文档的页眉，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，如Logo图片、搜索表单等。 提示： 一个页面内并没有限制header的出现次数，也就是说，可以在同一页面内的不同的内容区块上分别加上一个header元素。 在HTML5中，一个header元素至少可以包含一个heading元素(h1~h6)。 3.1.2<main>标签 <main>标签定义文档的主要内容。<main>标签中的内容对于文档来说应当是唯一的，不包含在文档中重复出现的内容，如边栏、导航栏、版权信息、站点标志等。 提示： 在一个文档中，不能出现一个以上的<main>标签。<main>标签不能是<article>、<aside>、<footer>、<header>或<nav>标签的子元素。 3.1.3<nav>标签 <nav>标签定义导航链接的部分，主要用于构建导航菜单、侧边栏导航、内页导航和翻页操作等区域。 3.1.4<article>标签 <article>标签表示页面中一块与上下文不相关的独立内容，如一篇文章。这篇文章应有其自身的意义，应该有可能独立于站点的其他部分，如论坛帖子、报纸文章、博客条目和用户评论等。 3.1.5<section>标签 <section>标签定义文档中的节(区段)，如章节、页眉、页脚或文档中的其他部分。 3.1.6<aside>标签 <aside>标签定义其所处内容之外的内容，这个内容应该与附近的内容相关，如可用作文章的侧栏或边栏。 3.1.7<footer>标签 <footer>标签定义文档或节的页脚，元素应当含有其包含元素的信息。页脚通常包含文档的建立日期、作者、版权信息、使用条款链接和联系信息等。可以在一个文档中使用多个<footer>标签。 3.1.8<details>和<summary>标签 <details>标签用于描述文档或文档某个部分的细节。<details>标签元素实际上是一种用于标识该元素内部子元素可以被展开、收缩显示的元素。元素具有一个布尔类型值的open属性，当open属性值为true时，元素内部的子元素被展开显示； 当open属性值为false时，其内部的子元素被收缩起来不显示。open属性的默认值为false，当页面打开时其内部的子元素处于收缩状态。 <summary>标签可以为<details>标签元素定义标题，标题是可见的，用户单击标题时，会展开显示<details>标签元素内容，再次单击标题时，<details>标签元素会收缩起来不显示。<summary>标签元素从属于<details>标签元素。 扫一扫 视频讲解 【例3.1】details.html说明了<details>和<summary>标签的用法，页面显示如图3.1所示。源码如下。 <head> <title>details标签</title> </head> <body> <details open="true"> <summary>《HTML5权威指南》</summary> <p>作为下一代Web标准，HTML5致力于为互联网开发者搭建更加便捷、开放的沟通平台。</p> </details> </body> 图3.1details.html页面显示 如果<details>标签内没有定义<summary>标签，浏览器会提供默认的文字显示，如“详细信息”。 提示： IE不支持<details>标签。 3.2基础标签 基础标签主要用来标记文本，是HTML5使用最多的标签，如表3.2所示。 表3.2HTML5基础标签 标签描述标签描述 <h1>~<h6>标题1~标题6 <!>注释 <p>定义段落<pre>预格式文本 <br>换行<div>定义文档中的节 <wbr>定义在文本何处适合添加换行符<span>定义文档中的内联元素 <hr>水平线 3.2.1<h1>~<h6>标签 标题使用<h1>~<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题，HTML5会自动在标题前后添加一个额外的换行。以下代码使用了<h1>~<h6>标签，显示效果如图3.2所示。 图3.2标题示意图 <h1>这是一个标题</h1> <h2>这是一个标题</h2> <h3>这是一个标题</h3> <h4>这是一个标题</h4> <h5>这是一个标题</h5> <h6>这是一个标题</h6> 每个页面最好使用一次<h1>标签，因为它是顶级标题。每页的标题层次不要超过3个，除非有必要，因为较深的标题层次结构会变得难以操作和导航。 3.2.2<p>标签 正文段落使用<p>标签进行定义，如 <p>这是一个段落</p> <p>这是另一个段落</p> 3.2.3<br>标签 在一个段落内，如果当前行没结束，需换行显示，可以使用<br>标签,如 <p>这是<br>一个段落<br>被换行</p> <wbr>标签的作用是建议浏览器在这个标记处换行，只是建议，而不是必须在此处换行，还需要根据整行文字长度而定，也可以称为“软换行”。代码如下。 <p> To learn Asynchronous Javascript and XML, you must be familiar with the XM<wbr>LHttpRequest Object. </p> 在正常情况下，宽度过小，不足以在行末书写完一个完整单词时，会将行末整个单词放到下一行，实现换行，如果在单词中间位置加入<wbr>标签时，就会拆分一个单词换行。 提示： <wbr>对中文没有作用。 3.2.4<!…>标签 注释标签用于在HTML5源码中插入注释，注释会被浏览器忽略。 <!--这是一个注释--> 注意，左括号后需要写一个感叹号，右括号前就不需要了。 3.2.5<pre>标签 文本在页面显示时，无论使用了多少空白符，浏览器会将连续出现的空白字符减少为一个单独的空格符。 <pre>标签用来定义预格式文本，在<pre>标签内容中的文本通常会保留空格符和换行符，显示为等宽字体。 扫一扫 视频讲解 【例3.2】pre.html说明了HTML5文本的软换行和如何处理预格式文本，页面显示如图3.3所示。源码如下。 <head> <title>预格式文本</title> </head> <body> <p>To learn Asynchronous Javascript And XML, you must be familiar with the XM<wbr>LHttpRequest Object.</p> <pre> 预格式文本。 它保留了空格 和换行 </pre> <pre> for i = 1 to 10 print i next i </pre> </body> 图3.3pre.html页面显示 3.2.6<div>标签 在日常生活中都要依赖语义学，这样依靠以前的经验就知道日常事务都代表什么。HTML5几乎所有标签都是有具体语义的，如<title>标签定义文档的标题。但<div>和<span>这样的标签是没有语义的，不知道这个元素到底是什么，需要在实际使用中根据元素的内容确定。 <div>标签用来定义文档中的分区或节， 可以把文档分割为独立的、不同的部分，是一个容器标签，<div>标签的内容可以是任何HTML5元素。如果有多个<div>标签把文档分成多个部分，可以使用id或class属性区分不同的<div>。 <div>标签在页面显示时默认是一个块级元素，块级元素的宽度为100%，而且后面隐藏附带有换行符，相对于其前面的内容，它会在新的一行显示，其后的内容也会被挤到下一行，块级元素在页面显示时始终占据一行。代码如下。 图3.4<div>和<span>标签显示示意图 <div> <h3>这是一个标题</h3> <p>这是一个段落</p> </div> <span>一些文本</span> <span>一些其他文本</span> 显示效果如图3.4所示。由于<span>一些文本</span>标签在<div>后面，<div>是块级元素，所以显示在下一行。 提示： 应该在没有任何其他语义元素可用时才使用<div>标签。 3.2.7<span>标签 <span>标签用来定义文档中一行的一部分，显示时默认是一个内联(行内)元素，内联元素没有固定的宽度，根据元素的内容决定，内联元素不会导致文本换行。<span>标签的内容主要是文本。 图3.4所示的示例中，第2个<span>标签前面也是一个<span>标签，所以第2个<span>标签的内容紧接着前一个<span>标签内容显示。 3.3列表标签 表3.3列出了HTML5列表标签，支持有序、无序和定义列表。 表3.3HTML5列表标签 标签描述标签描述 <ol>有序列表<dl>定义列表 <ul>无序列表<dt>定义列表项目 <li>列表项 <dd>定义列表项目描述 3.3.1<ul>标签 无序列表是一个项目的列表，项目的顺序并不重要，每个项目默认使用粗体圆点进行标记。无序列表用<ul>标签定义，每个列表项用<li>标签定义，列表项内容可以使用段落、换行符、图片、超链接和其他列表等。 将一个列表嵌入另一个列表称为嵌套列表。 扫一扫 视频讲解 【例3.3】ul.html使用了无序列表，页面显示如图3.5所示。源码如下。 图3.5ul.html页面显示 <head> <title>无序列表</title> </head> <body> <ul> <li>茶 <ul> <li>红茶</li> <li>绿茶</li> </ul> </li> <li>牛奶</li> <li>咖啡</li> </ul> </body> 3.3.2<ol>标签 有序列表也是项目的列表，列表是根据项目的顺序列出来的，列表项目使用数字进行标记。有序列表用<ol>标签定义，每个列表项用<li>标签定义，列表项内容可以使用段落、换行符、图片、超链接和其他列表等。 有序列表<ol>标签常用有两个可选属性： start，规定起始的序号； reversed，规定列表顺序为降序，如表3.4所示。 表3.4有序列表可选属性 属性值描述 startnumber规定列表中的起始点 reversedreversed规定列表顺序为降序 【例3.4】ol.html使用了不同类型的有序列表，页面显示如图3.6所示。源码如下。 图3.6ol.html页面显示 <head> <title>有序列表</title> </head> <body> <ol> <li>茶</li> <li>牛奶</li> <li>咖啡</li> </ol> <ol start="5" reversed> <li>茶</li> <li>牛奶</li> <li>咖啡</li> </ol> </body> 3.3.3<dl>标签 定义列表是项目及其注释的组合，定义列表以<dl>标签开始，每个定义列表项以<dt>标签开始，每个定义列表项的描述以<dd>标签开始，定义列表的列表项内部可以使用段落、换行符、图片、超链接和其他列表等。 扫一扫 视频讲解 【例3.5】dl.html使用了定义列表，页面显示如图3.7所示。源码如下。 图3.7dl.html页面显示 <head> <title>定义列表</title> </head> <body> <dl> <dt>咖啡</dt> <dd>黑色的热饮料</dd> <dt>牛奶</dt> <dd>白色的冷饮料</dd> </dl> </body> 3.4引用和术语定义标签 表3.5列出了HTML5引用和术语定义标签。 表3.5引用和术语定义标签 标签描述标签描述 <abbr>缩写<cite>定义引用 <address>联系地址<blockquote>块引用 <bdo>文字方向<q>行内引用 <abbr>标签表示简称或缩写，如IP。通过对缩写进行标记，能够为浏览器、拼写检查和搜索引擎提供有用的信息。提供缩写的解释包含在title属性中，这样当鼠标指针移动到<abbr>标签上时会显示简称的完整信息。 <address>标签定义文档或文章作者的联系信息，是为了标记编写文档的人的联系方式，而不是任何其他的内容。一般情况下，如果<address>标签位于<body>标签内，表示文档所有者的联系信息； 如果<address>标签位于<article>标签内，表示作者文章的联系信息。<address>标签中的文本通常显示为斜体。 提示： <address>标签通常情况下在<footer>标签中使用。 <bdo>标签定义文字的输出方向，不是每种文字都是从左向右顺序的，如阿拉伯文是从右向左的。<bdo>标签必须和dir属性一起使用，不论是什么文字，都以单个字符为单位，颠倒顺序，从右向左显示，可以称为“反排效果”。 <blockquote>和<q>标签定义引用，如果一个块级内容(段落、列表等)被引用，使用<blockquote>标签，在浏览器显示时会在左、右两边进行缩进(增加外边距)。<q>标签的不同之处是用于简短的行内引用，在浏览器显示时会添加引号。这两个标签最好使用cite属性，cite属性规定引用的来源，属性值为URL。 cite属性内容不会被浏览器显示，如果想让引用的来源在页面上能够显示，可以使用<cite>标签。 扫一扫 视频讲解 【例3.6】address.html说明了HTML5引用和术语定义标签如何使用，页面显示如图3.8所示。源码如下。 <head> <title>引用和术语定义标签</title> </head> <body> <span>定义地址： </span> <address>清华大学学研大厦A座； 读者服务部： (010)62781733</address> <span>定义缩写： </span><abbr title="Internet Protocol">IP</abbr><br> <span>文字方向： </span> <bdo dir="rtl">浏览器</bdo><br> <span>定义引用： </span> <a href="http://baike.baidu.com/link?url=Klkjb3BWg5GnjHyOMD8xM39bFlgQbwiXwiCqIcsCtH98Hp9sd_oWNPs2w-9rCSo_OKZpP-8lz4LG91ZGjUH0HK"><cite>百度百科</cite></a><br> <span>块引用： </span> <blockquote cite="http://baike.baidu.com/link?url=Klkjb3BWg5GnjHyOMD8xM39bFlgQbwiXwiCqIcsCtH98Hp9sd_oWNPs2w-9rCSo_OKZpP-8lz4LG91ZGjUH0HK"> HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。</blockquote> <span>行内引用： </span> <q cite="https://www.baidu.com/">百度一下</q> </body> 图3.8address.html页面显示 3.5格式标签 HTML5格式标签是指对文本设置特定的样式，表3.6列出了HTML5常用格式标签。 表3.6HTML5常用格式标签 标签描述标签描述 <mark>定义有记号的文本 <meter>定义预定义范围内的度量 <progress>定义任何类型的任务的进度 <ruby>定义Ruby注释 <time>定义日期/时间 <rp>定义若浏览器不支持<ruby>标签显示的内容 <rt>定义Ruby注释的解释 <sub>上标文本 <sup>下标文本 1. <mark>标签 <mark>标签定义带有记号的文本，表示页面中需要突出显示或高亮显示，通常在引用原文时使用，引起注意。<mark>标签是对原文内容起补充作用的一个元素，一般用在把内容重点表示出来。<mark>标签最主要的目的是引起当前用户的注意，如在搜索引擎列出的搜索条目中高亮度显示条目中的关键字。 2. <meter>标签 <meter>标签表示规定范围内的数量值，称为gauge(尺度),如磁盘用量、查询结果的相关性等。 提示： <meter> 标签不应用于指示进度(在进度条中)。 <meter>标签有6个属性，如表3.7所示。 表3.7<meter>标签属性 属性值描述 valuenumber必需，规定度量的当前值。在元素中表示实际值，该属性值默认为0 minnumber规定范围的最小值。指定规定范围时允许使用的最小值，默认为0，值不能小于0 maxnumber规定范围的最大值。指定规定范围时允许使用的最大值，如果属性值小于min，那么把min属性值视为最大值。默认值为1 lownumber规定被视作低的值的范围。规定范围下限值，必须小于或等于high的值 highnumber规定被视作高的值的范围。规定范围上限值。如果属性值小于low，那么把low属性值视为high属性值； 同样，如果属性值大于max，那么把max属性值视为high值 optimumnumber规定范围最优值。值必须在min属性值与max属性值之间，可以大于high属性值 low和high属性可以视为在规定范围内(最小值和最大值之间)的理想值，超出这个范围显示时用特定样式区分。 3. <progress>标签 <progress>标签代表一个任务的完成进度，进度可以是不确定的，表示进度正在进行，但不清楚还有多少工作量没有完成； 也可以用0到某个最大数字之间的数字表示准确的进度情况。 <progress>标签有两个属性，如表3.8所示。 表3.8<progress>标签属性 属性值描述 valuenumber规定已经完成多少任务。value值必须大于0，且小于或等于max值 maxnumber规定任务一共需要多少工作。max值必须大于0 扫一扫 视频讲解 【例3.7】progress.html说明了如何使用<progress>、<meter>和<mark>标签，页面显示如图3.9所示。源码如下。 <head> <title>progress、meter和mark标签</title> </head> <body> <p>超文本标记语言(<mark>HTML</mark>)的第5次重大修改。</p> <p>硬盘存储占用<meter value="80" max="100" min="0"></meter>GB</p> <p>硬盘存储占用<meter value="80" max="100" min="0" low="20" high="70" optimum="60"></meter>GB</p> <p>当前任务完成进度： <progress max="100" value="50"></progress></p> </body> 图3.9progress.html页面显示 4. <ruby>标签 <ruby>标签定义Ruby注释(中文注音或字符)。在日本，将音标标记在文字上方的印刷方式叫作Ruby，<ruby>标签采用了日本印刷业的这个术语。 <ruby>标签由一个或多个字符(需要解释注音)和一个提供注音的<rt>标签组成，还包括可选的<rp>标签，定义当浏览器不支持<ruby>标签时显示的内容。 <ruby>内容是需要注释或注音标的文字。 <rt>内容是音标或注释，需要跟在注释的文本后边。 <rp>内容是浏览器不支持<ruby>标签时显示的，主要用来放置括号，<rp>标签默认是不可见的。 5. <time>标签 <time>标签表示公历的日期或时间，时间和时区偏移是可选的。该标签提供机器识别的日期和时间格式，这样搜索引擎能够根据<time>标签得到更精确的搜索结果。 <time>标签主要有一个属性，如表3.9所示。 表3.9<time>标签属性 属性值描述 datetimeYYYYMMDDThh:mm:ssTZ YYYY： 年，MM： 月(如01表示January)，DD： 日 T： 分隔符（若规定时间） hh： 时，mm： 分，ss： 秒 Z： 时区标识符，表示使用UTC标准时间规定日期时间。否则，由元素的内容给定 扫一扫 视频讲解 【例3.8】ruby.html说明了如何使用<ruby>和<time>标签，页面显示如图3.10所示。源码如下。 <head> <title>ruby标签</title> </head> <body> <p>清华<ruby>大<rp>(</rp> <rt>da</rt> <rp>)</rp>学<rp>(</rp> <rt>xue</rt> <rp>)</rp> </ruby></p> <article> <header> <h3>关于学院<time datetime="2021-04-06">4月13日</time>讲座的通知</h3> <p>发布日期:<time datetime="2021-04-04">2021年4月10日</time></p> </header> <p>大家好…</p> </article> </body> 图3.10ruby.html页面显示 6. <sup>和<sub>标签 当使用数学方程式或化学方程式时偶尔会使用上标和下标，<sup>和<sub>标签可以解决这样的问题，如以下源码在页面上会显示x2=9和H2O。 <p>x<sup>2</sup>=9，H<sub>2</sub>O</p> HTML5还定义了很多具有指定格式显示的标签，有确定的语义，通过呈现特殊的样式加以区分。 例如，<i>（显示斜体文本效果）和<b>（显示粗体文本效果）等标签均是指定字体样式，建议使用样式表设定取得更加丰富的效果。还有<em>（把文本定义为强调的内容）和<strong>（把文本定义为非常重要的内容）等标签，拥有确切的语义，如果只是为了达到某种视觉效果而使用，建议使用样式表。 3.6网页常见内容结构 制作一个网页时，首先要确定整个页面的内容结构，采用先整体后局部，自上而下的方法，将页面划分成不同的区域，然后确定每个区域的内容，最后完成一个页面文档内容的基本结构。一个网页常见内容结构的基本布局如图3.11所示。 图3.11网页常见内容结构的基本布局 主要组成部分如下。 （1） 页眉： 横跨于整个页面顶部，一般有一个标题或Logo，存在于网站所有网页。 （2） 导航栏： 指向网站各主要部分的超链接，类似于标题栏，导航栏通常应在所有网页之间保持一致。 图3.12常见的页面内容结构示意图 （3） 主内容： 网页中间的大部分区域显示的是当前网页的主要内容，如新闻、文章、视频等，这些内容是网站的一部分。 （4） 侧边栏： 一些外围信息、链接、引用和广告等，通常与主内容相关(如在新闻页面上，侧边栏可能包含作者信息或相关文章链接)，还可能有重复元素，如辅助导航。 （5） 页脚： 横跨页面底部的狭长区域，用来显示公共信息(如版权声明或联系方式)，这些信息通常为次要内容。 为了实现语义化标记，使用HTML5提供的结构标签构建内容基本结构，如图3.12所示。 <header>： 页眉。 <nav>： 导航栏。 <main>： 主内容。主内容中的内容可用<article>、<section>和<div>等标签表示。一般的用法是把<article>分成若干部分并分别置于不同的<section>中，也可以把一个<section>分成若干部分并分别置于不同的<article>中。<div>是无语义元素，只有在没有更好的语义方案时才选择使用，而且要尽可能少用，否则文档的升级和维护会变得困难。 <aside>： 侧边栏，经常嵌套在<main>中。 <footer>： 页脚。 常见的页面内容结构可用下面的HTML5结构标签表示。 <body> <!--页眉--> <header></header> <!--导航栏--> <nav></nav> <!--主内容--> <main> <!--内容--> <article></article> <!--侧边栏--> <aside></aside> </main> <!--页脚--> <footer></footer> </body> 扫一扫 视频讲解 3.7HTML5调试 通常情况下，编写程序代码产生的错误主要有两种： 一是语法错误，由于拼写错误导致程序无法运行，如果熟悉语法，知道错误信息后很容易改正; 二是逻辑错误,即没有语法错误，但代码就是无法按预期运行。大多数情况下，逻辑错误比语法错误更难改正。 HTML5一般不容易出现语法错误，这是因为浏览器是以宽松模式运行的，即使出现语法错误，也会通过内建规则解析错误，尝试修补错误(容错)，然后显示出来。 可以在标签代码中故意设置一些错误，看看HTML5语法的宽松性。 【例3.9】在debug.html中有一些错误代码。源码如下。 <!DOCTYPE html> <html lang="zh-CN"> <head> <title>HTML调试</title> </head> <body> <p>HTML如何出错？ <ul> <li>未闭合元素： 元素<strong>没有结束标签，会影响下边区域。 <li>错误嵌套： <strong>非常重要 <em>重点强调 </strong>这是什么？</em> <li>未闭合属性： 如<a href="https://www.tsinghua.edu.cn">清华大学</a> </ul> </body> </html> 在VS Code窗体编辑区内右击，在弹出的快捷菜单中选择Open with Live Server，用Chrome浏览器浏览页面，会显示错误，如图3.13所示。 图3.13debug.html页面显示 这段代码主要问题如下。 段落<p>和列表项<li>未闭合，但是由于元素的结束和另一个元素的开始很容易推断出来，因此可以容错，显示正常。 第1个<li>标签中的<strong>标签未闭合，由于元素结束的位置难以确定，不能容错，造成后面的文本都加粗显示。 第2个<li>标签中的标签错误嵌套，浏览器不能正确解释。 第3个<li>标签中的<a>标签href属性未闭合，导致整个链接完全没有显示。 在Chrome浏览器按F12键，打开Chrome开发者工具，在Elements面板中会发现浏览器已经尝试修补代码错误，代码变为 <body> <p>HTML如何出错？</p> <ul> <li>未闭合元素： 元素<strong>没有结束标签，会影响下边区域。</strong></li> <li><strong>错误嵌套： <strong>非常重要 <em>重点强调 </em></strong><em>这是什么？</em></strong></li> <li><strong>未闭合属性： 如</strong></li> </ul> </body> 调试查找错误最好的方法是让HTML5源码通过Markup Validation Service(https://validator.w3.org/)验证，这是由W3C创立并维护的验证服务，如图3.14所示。 图3.14Markup Validation Service 源码上传方式可以是网址、文件或直接输入。选择Validate by Direct Input标签页，把debug.html全部代码复制到文本框内，单击Check按钮。页面会返回一个错误报告。 无论HTML5对语法要求多么宽松，都要检验标记是否有效。 3.8“叮叮书店”项目首页内容结构和文本 一个网页是一个大的容器，“叮叮书店”项目首页的内容自上而下由顶部广告、页眉、导航菜单、内容、页脚和版权信息6部分组成。 页眉由网站Logo、站内搜索和购物车3部分组成，如图3.15所示。页眉上方是顶部广告，下方是导航菜单。 图3.15“叮叮书店”项目首页页眉结构 内容由内容头部和主要内容两部分组成。其中，内容头部由图书分类、横幅广告和用户新闻3部分组成，如图3.16所示。主要内容由左边内容和右边边栏两部分组成，其中左边内容又由本周推荐、最近新书和最近促销3部分组成； 右边边栏又由畅销图书、合作伙伴和关于书店3部分组成，如图3.17所示。 图3.16“叮叮书店”项目首页内容头部结构 图3.17“叮叮书店”项目首页主要内容结构 页脚由购物指南、配送方式、支付方式和售后服务4部分组成，如图3.18所示。页脚下方是版权信息。 图3.18“叮叮书店”项目首页页脚结构 3.8.1用结构标签建立内容结构 1. 顶层结构 首先建立文档内容顶层结构。启动Visual Studio Code，打开“叮叮书店”项目首页文件index.html(2.5节创建)，进入编辑区。操作步骤如下。 将光标定位到<body>后面，按Enter键，输入以下代码。 <!--顶部广告--> <!-- class="center"用于将元素居中 --> <div id="top-advert" class="center"></div> <!-- id="sticky"用于黏性定位固定页眉和导航菜单 --> <div id="sticky"> <!-- class="full-width"用于元素整个屏幕宽度加背景颜色 --> <div class="full-width" id="top"> <!--页眉--> <header id="page-top" class="center"></header> </div> <!--导航菜单--> <nav class="center"></nav> </div> <!--内容--> <main class="center"></main> <div class="full-width"> <!--页脚--> <footer class="center"></footer> </div> <!--版权信息--> <div id="copyright" class="center"></div> 提示： 元素id和class属性不仅仅是区分元素的标识，更重要的是为以后样式和脚本准备的。id表示唯一，体现个性； class是一类，体现共性。元素id和class属性值最好能见名知意。 2. 分层结构 然后，自上而下建立分层结构。操作步骤如下。 1) 页眉 将光标定位到<header id="pagetop" class="center">后面，按Enter键，输入以下代码。 <!--网站logo--> <div id="logo"></div> <!--站内搜索--> <div id="search"></div> <!--购物车--> <div id="cart"></div> 2) 内容 将光标定位到<main class="center">后面，按Enter键，输入以下代码。 <!--内容头部--> <header id="main-content-top"></header> <!--主要内容--> <div id="main-content"></div> 建立内容头部分层结构。将光标定位到<header id="maincontenttop">后面，按Enter键，输入以下代码。 <!--图书分类--> <section id="classify"></section> <!--横幅广告--> <div id="banner"></div> <!--用户新闻--> <div id="user-news"> <!--用户--> <section id="user"></section> <!--新闻--> <section id="news"></section> </div> 建立主要内容分层结构。将光标定位到<div id="maincontent">后面，按Enter键，输入以下代码。 <!-- 左边内容 --> <div id="main-content-left"> <!--本周推荐--> <section id="recommend-book"></section> <!--最近新书--> <section id="new-book"></section> <!--最近促销--> <section id="sales-book"></section> </div> <!-- 右边边栏 --> <aside> <!--畅销图书--> <section id="best-selling"></section> <!--合作伙伴--> <section id="partner"></section> <!--关于书店--> <section id="about"></section> </aside> 3) 页脚 将光标定位到<footer class="center">后面，按Enter键，输入以下代码。 <!-- 购物指南 --> <div class="col"></div> <!-- 配送方式 --> <div class="col"></div> <!-- 支付方式 --> <div class="col"></div> <!-- 售后服务 --> <div class="col"></div> 3.8.2在内容结构中添加文本 在页面内容结构中添加文本内容的过程中，还要根据实际情况建立更多层次的分层结构。 1. 页眉 添加购物车文本内容，将光标定位到<div id="cart">后面，按Enter键，输入以下代码。 <ul> <li id="cart-position"> <!--购物车图标--> <span class="icon-cart"></span><sup>2</sup> <!--购物车下拉列表，当指向购物车显示--> <ul id="dropdown-cart"> <li> <div class="cart-thumb"></div> <div class="cart-tittle">Spring Boot开发实战<br> <span>29.90 x 1</span> </div> </li> <li> <div class="cart-thumb"></div> <div class="cart-tittle">Kubernetes权威指南<br> <span>84.60 x 1</span> </div> </li> <li id="btn-cart">去购物车</li> </ul> </li> </ul> 2. 导航菜单 添加导航菜单文本内容，将光标定位到<nav class="center">后面，按Enter键，输入以下代码。 <ul> <li>首页</li> <li>图书分类 <ul> <li>编程语言</li> <li>大数据</li> <li>人工智能</li> <li>网页制作</li> <li>图形图像</li> </ul> </li> <li>电子书</li> <li>客户服务</li> <li>关于我们</li> </ul> 提示： 在组织菜单或链接等并列文本时，一般采用无序列表。 3. 内容头部 1) 图书分类 将光标定位到<section id="classify">后面，按Enter键，输入以下代码。 <h3> <!--图书分类图标--><span class="icon-classify"></span>图书分类</h3> <ul> <li>编程语言 <ul> <li>Python</li> <li>Java</li> <li>Android</li> <li>C语言</li> <li>C#</li> </ul> </li> <li>大数据 <ul> <li>数据挖掘</li> <li>SQL语言</li> <li>Mysql</li> <li>Oracle</li> </ul> </li> <li>人工智能 </li> <li>网页制作 <ul> <li>HTML5</li> <li>CSS3</li> <li>JavaScript</li> <li>网页设计</li> </ul> </li> <li>图形图像</li> </ul> 2) 用户 将光标定位到<section id="user">后面，按Enter键，输入以下代码。 <div id="date-time">2020年02月24日 星期一 15:20:20</div> <h3>Hi~欢迎逛叮叮!</h3> <div>登录 | 注册</div> <div>新人福利 VIP会员</div> 3) 新闻 将光标定位到<section id="news">后面，按Enter键，输入以下代码。 <div> <h4>叮叮快报</h4> </div> <ul> <li>清华大学出版社面向全社会开放资源一览</li> <li>抗击新冠肺炎应急手册出版</li> <li>教育部倡议全国大学生“停学不停课”</li> <li>50万图书折半促销</li> <li>《Web前端设计从入门到实战》限时免费</li> </ul> 4. 主要内容 1) 本周推荐 将光标定位到<section id="recommendbook">后面，按Enter键，输入以下代码。 <div class="title"> <h3><!--本周推荐图标--><span class="icon-book"></span>本周推荐</h3>查看更多<div class="title-cover"></div> </div> <div class="content"> <div class="content-item"> <div class="recommend-description"> <h3>Web前端设计从入门到实战——HTML5、CSS3、JavaScript项目案例开发</h3> <span>单价： ￥69.60</span> <span class="icon-cart"></span> <div class="description-text"> <p>本书基于Web标准和响应式Web设计思想深入浅出地介绍了Web前端设计技术的基础知识，对Web体系结构、HTML5、CSS3、JavaScript和网站制作流程进行了详细的讲解，内容翔实，结构合理，语言精练，表达简明，实用性强，易于自学。 </p> </div> </div> </div> <div class="content-item"> <div class="recommend-description"> <h3>最强Android架构大剖析</h3> <span>单价： ￥84.60</span> <span class="icon-cart"></span> <div class="description-text"> <p>本书作者以研究操作系统并从事相关培训工作为生，是业内著名的操作系统专家，著有多本操作系统的畅销书。本书是他针对Android系统写的第一本书。根据以往读者的反馈，在本书的内容上摒弃了以源代码讲解的方式，而改用实验的方法。 </p> </div> </div> </div> <div class="content-item"> <div class="recommend-description"> <h3>Spring Boot开发实战</h3> <span>单价： ￥29.90</span> <span class="icon-cart"></span> <div class="description-text"> <p>Spring Boot致力于简化开发配置并为企业级开发提供一系列非业务性功能，而Vue则采用数据驱动视图的方式将程序员从烦琐的DOM操作中解救出来。利用Spring Boot+Vue，我们可以快速开发出大型SPA应用。</p> </div> </div> </div> <div class="content-item"> <div class="recommend-description"> <h3>深入理解Java虚拟机</h3> <span>单价： ￥122.60</span> <span class="icon-cart"></span> <div class="description-text"> <p>这是一部从工作原理和工程实践两个维度深入剖析JVM的著作，是计算机领域公认的经典，繁体版在中国台湾也颇受欢迎。自2011年上市以来，前两个版本累计印刷36次，销量超过30万册，两家主要网络书店的评论近90000条，内容上近乎零差评，是原创计算机图书领域不可逾越的丰碑。 </p> </div> </div> </div> </div> 2) 最近新书 将光标定位到<section id="newbook">后面，按Enter键，输入以下代码。 <div class="title"> <h3><!--最近新书图标--><span class="icon-new"></span>最近新书</h3>查看更多<div class="title-cover"></div> </div> <div class="content"> <div class="content-item"> <span class="mark">新</span> <div class="new-description"> <h3>动手学深度学习</h3> <span>单价： ￥84.50</span> <span class="icon-cart"></span> </div> </div> <div class="content-item"> <span class="mark">新</span> <div class="new-description"> <h3>Kubernetes权威指南</h3> <span>单价： ￥84.60</span> <span class="icon-cart"></span> </div> </div> <div class="content-item"> <span class="mark">新</span> <div class="new-description"> <h3>深入浅出Webpack</h3> <span>单价： ￥75.10</span> <span class="icon-cart"></span> </div> </div> <div class="content-item"> <span class="mark">新</span> <div class="new-description"> <h3>网页设计与网站建设从入门到精通</h3> <span>单价： ￥44.90</span> <span class="icon-cart"></span> </div> </div> </div> 3) 最近促销 将光标定位到<section id="salesbook">后面，按Enter键，输入以下代码。 <div class="title"> <h3><!--最近促销图标--><span class="icon-sale"></span>最近促销</h3>查看更多<div class="title-cover"></div> </div> <div class="content"> <div class="content-item"> <span class="mark1">50%</span> <div class="description"> <h3>轻松学习Python数据分析</h3> <span>现价： ￥28.05</span> <span>原价： <del>￥56.10</del></span> <span class="icon-cart"></span> </div> </div> <div class="content-item"> <span class="mark1">90%</span> <div class="description"> <h3>SQL即查即用</h3> <span>现价： ￥4.58</span> <span>原价： <del>￥45.80</del></span> <span class="icon-cart"></span> </div> </div> <div class="content-item"> <span class="mark1">10%</span> <div class="description"> <h3>移动开发架构设计实战</h3> <span>现价： ￥75.90</span> <span>原价： <del>￥84.60</del></span> <span class="icon-cart"></span> </div> </div> <div class="content-item"> <span class="mark1">20%</span> <div class="description"> <h3>机器学习基础</h3> <span>现价： ￥72.00</span> <span>原价： <del>￥90.00</del></span> <span class="icon-cart"></span> </div> </div> </div> 4) 畅销图书 将光标定位到<section id="bestselling">后面，按Enter键，输入以下代码。 <div class="title"> <h3><!--畅销图书图标--><span class="icon-sell"></span>畅销图书</h3> </div> <ul> <li>深度学习 ［deep learning］ <div class="curr"> <div class="p-name">深度学习 ［deep learning］<strong>￥43.50</strong> <del>￥52.00</del> </div> </div> </li> <li>Hadoop权威指南： 大数据的存储与分析(第4版)，累计销量超过10万册 <div class="curr"> <div class="p-name">Hadoop权威指南： 大数据的存储与分析(第4版)，累计销量超过10万册<strong>￥43.50</strong> <del>￥52.00</del> </div> </div> </li> <li>和秋叶一起学PPT 第3版 <div class="curr"> <div class="p-name">和秋叶一起学PPT 第3版<strong>￥43.50</strong> <del>￥52.00</del> </div> </div> </li> <li>深度学习优化与识别 <div class="curr"> <div class="p-name">深度学习优化与识别<strong>￥43.50</strong> <del>￥52.00</del> </div> </div> </li> <li>区块链原理、设计与应用 <div class="curr"> <div class="p-name">区块链原理、设计与应用<strong>￥43.50</strong> <del>￥52.00</del> </div> </div> </li> </ul> 5) 合作伙伴 将光标定位到<section id="partner">后面，按Enter键，输入以下代码。 <div class="title"> <h3><!--合作伙伴图标--><span class="icon-partner"></span>合作伙伴</h3> </div> <ul> <li>中国电子商务研究中心</li> <li>清华大学出版社</li> <li>中国人民大学出版社</li> <li>中国社会科学出版社</li> <li>机械工业出版社</li> </ul> 6) 关于书店 将光标定位到<section id="about">后面，按Enter键，输入以下代码。 <div class="title"> <h3><!--关于书店图标--><span class="icon-about"></span>关于书店</h3> </div> <div class="content"> <p>叮叮书店成立于2020年6月，是由教育部主管，清华大学主办的综合书店。</p> </div> 5. 页脚 1) 购物指南 将光标定位到<! 购物指南 ><div class="col">后面，按Enter键，输入以下代码。 <h4>购物指南</h4> <ul> <li>购物流程</li> <li>会员介绍</li> <li>联系客服</li> </ul> 2) 配送方式 将光标定位到<! 配送方式 ><div class="col">后面，按Enter键，输入以下代码。 <h4>配送方式</h4> <ul> <li>上门自提</li> <li>限时达</li> </ul> 3) 支付方式 将光标定位到<! 支付方式 ><div class="col">后面，按Enter键，输入以下代码。 <h4>支付方式</h4> <ul> <li>货到付款</li> <li>在线支付</li> </ul> 4) 售后服务 将光标定位到<! 售后服务 ><div class="col">后面，按Enter键，输入以下代码。 <h4>售后服务</h4> <ul> <li>售后政策</li> <li>价格保护</li> </ul> 6. 版权信息 将光标定位到<div id="copyright" class="center">后面，按Enter键，输入以下代码。 <div>Copyright©2020-2028 叮叮书店 版权所有 | 京ICP证000001号音像制品经营许可证 </div> <address>通信地址： 清华大学学研大厦A座 电话： (010)00000000 网管信箱： netadmin@tup.tsinghua.edu.cn </address> 在Chrome浏览器进行预览，效果如图3.19所示。 图3.19“叮叮书店”项目首页预览页面效果 3.9小结 本章详细介绍了HTML5结构标签和基础标签，重点讲解了列表标签，简单介绍了引用、术语定义和格式标签，介绍了网页常见内容结构以及如何调试HTML，并通过“叮叮书店”项目首页说明了如何建立页面内容结构并添加文本内容。 3.10习题 1. 选择题 (1) 下列标签中，()是结构标签。 A. <br>B. <break> C. <header>D. <head> (2) 下列标签中，()是注释标签。 A. <! >B. /**/ C. //D. ' (3) HTML5中的列表不包括()。 A. 无序列表B. 有序列表 C. 定义列表D. 公用列表 (4) 在HTML5文档中，使用()标签标记定义列表。 A. <ol>B. <ul> C. <dl>D. <list> (5) 下列标签中，()是没有语义的。 A. <span>B. <p> C. <ol>D. <pre> 2. 简答题 (1) 元素显示时，默认是一个块元素和默认是一个内联元素有什么区别？ (2) HTML5基础标签有哪些？ (3) 列表元素有哪几类？怎么使用？ (4) <article>标签和<section>标签有什么区别？ (5) 写出网页常见内容结构的标签代码。