HTML5内容结构与文本
　　内容结构简称结构，是为网页内容建立一个框架，就像写文章先写一个提纲。结构使页面内容看起来不会杂乱无章，每一部分都紧密联系，形成一个整体。采用HTML5结构标签可以将页面划分成不同的区域或块形成结构，然后在不同的区域或块中填充内容，如报刊/杂志版面设计一样。本章首先详细介绍HTML5结构标签和基础标签，接下来简单了解格式化标签，然后重点介绍HTML5列表，最后详细介绍建立叮叮书店首页内容结构的过程。
　　本章要点：
　　 HTML5结构标签。
　　 HTML5基础标签。
　　 HTML5格式化标签。
　　 HTML5列表。
3.1  HTML5结构标签 
　　HTML5结构标签用于搭建页面主体内容结构，形成不同的区块，完成整个页面的排版布局。表3.1列出了HTML5结构标签。
表3.1  HTML5结构标签
标    签
描    述
　　　<article>
　　　　定义文章（HTML5新标签）
　　　<aside>
　　　　定义页面内容之外的内容（HTML5新标签）
　　　<details>
　　　　定义元素的细节（HTML5新标签）
　　　<footer>
　　　　定义section或page的页脚（HTML5新标签）
　　　<header>
　　　　定义section或page的页眉（HTML5新标签）
　　　<main>
　　　　定义文档的主要内容（HTML5.2新标签）
续表
标    签
描    述
　　　<nav>
　　　　定义导航链接（HTML5新标签）
　　　<section>
　　　　定义section（HTML5新标签）
　　　<summary>
　　　　为details元素定义可见的标题（HTML5新标签）
　　　<div>
　　　　定义文档中的节
　　　<span>
　　　　定义文档中的行内元素
　　
3.1.1  <header>标签
　　<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元素应当含有其包含元素的信息。页脚通常包含文档的建立日期、作者、版权信息、使用条款链接和联系信息等。用户可以在一个文档中使用多个<footer>标签。
3.1.8  <details>标签和<summary>标签
　　<details>标签用于描述文档或文档中某个部分的细节。details元素实际上是一种用于标识其内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型值的open属性，当open属性值为true时元素内部的子元素被展开显示，当open属性值为false时其内部的子元素被收缩起来不显示。open属性的默认值为false，当页面打开时其内部的子元素处于收缩状态。
　　<summary>标签可以为details元素定义标题，标题是可见的，用户单击标题时会展开显示details元素的内容，再次单击标题时details元素会收缩起来不显示。summary元素从属于details元素。
　　如果details元素内没有定义summary元素，浏览器会提供默认的文字显示，例如“详细信息”。
　　
　　提示：IE和Edge不支持<details>标签。
3.1.9  <div>标签
　　HTML5中几乎所有的标签都是有具体语义的，例如<title>标签用于定义文档的标题。但<div>和<span>标签并没有具体标识这个元素到底是什么，需要用户在实际使用中根据元素的内容确定。
　　<div>标签用来定义文档中的分区或节。<div>标签可以把文档分割为独立的、不同的部分，是一个容器标签，<div>的内容可以是任何HTML5元素。如果有多个<div>标签把文档分成多个部分，可以使用id或class属性来区分不同的<div>。
　　div元素在显示时默认是一个块元素，块元素的宽度为100%，而且后面隐藏附带有换行符，块元素在页面显示时始终占据一行，这样块元素周围的元素不能与块元素显示在同一行上。例如下面的代码：
　　
     <div>
       <h3>这是一个标题</h3>
       <p>这是一个段落</p>
     </div>
     <span>一些文本</span>
     <span>一些其他文本</span>
　　
　　其显示效果如图3.1所示。由于“<span>一些文本</span>”在<div>标签的后面，div是块元素，所以显示在下一行。
3.1.10  <span>标签
　　<span>标签用来定义文档中一行的一部分，在显示时默认是一个行内元素，行内元素没有固定的宽度，根据span元素的内容决定。span元素的内容主要是文本。
　　在图3.1所示的示例中，第2个<span>标签前面也是一个<span>标签，所以第2个<span>标签的内容紧接着前一个<span>标签的内容显示。
3.2  HTML5基础标签
　　基础标签是HTML5使用最多的标签，见表3.2。
表3.2  HTML5基础标签
标    签
描    述
               <h1>～<h6>
　　　　　　　　　标题1～标题6
               <p>
　　　　　　　　　定义段落
               <br>
　　　　　　　　　换行
               <hr>
　　　　　　　　　水平线
               <!-->
　　　　　　　　　注释
　　
3.2.1  标题
　　标题使用<h1>～<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题，HTML5会自动在标题前后添加一个额外的换行。下面的代码使用了<h1>～<h6>，显示效果如图3.2所示。
　　
     <h1>这是一个标题</h1>
     <h2>这是一个标题</h2>
     <h3>这是一个标题</h3>
     <h4>这是一个标题</h4>
     <h5>这是一个标题</h5>
     <h6>这是一个标题</h6>
3.2.2  段落
　　正文段落使用<p>标签进行定义，例如：
　　
     <p>这是一个段落</p>
     <p>这是另一个段落</p>
3.2.3  换行符
　　在一个段落内，如果当前行没有结束，需换行显示，可以使用<br>标签。
　　
     <p>这是<br />一个段落<br />被换行</p>
3.2.4  注释
　　注释标签用于在HTML5源代码中插入注释，注释会被浏览器忽略。
　　
     <!--这是一个注释-->
　　
　　在左括号后需要写一个惊叹号，右括号前就不需要了。
3.3  HTML5格式化标签
　　HTML5定义了很多供文本格式化输出的元素，有确定的语义，通过呈现特殊的样式加以区分，比如粗体和斜体字。
　　<tt>呈现类似打字机或者等宽的文本效果、<i>显示斜体文本效果、<b>呈现粗体文本效果、<big>呈现大号字体效果、<small>呈现小号字体效果，这些元素都是字体样式元素，建议用户使用样式表设定来取得更加丰富的效果。
　　另外，<em>把文本定义为强调的内容、<strong>把文本定义为语气更强的强调的内容、<dfn>定义一个定义项目、<code>定义计算机代码文本、<samp>定义样本文本、<kbd>定义键盘文本、<var>定义变量、<cite>定义引用，这些都是短语元素，这些标签拥有确切的语义，如果只是为了达到某种视觉效果而使用，建议用户使用样式表。
3.3.1  文本格式化标签
　　表3.3列出了HTML5定义的文本格式化标签。
表3.3  文本格式化标签
标    签
描    述
<sub>
　　　　下标文本
续表
标    签
描    述
<sup>
　　　　上标文本
<ins>
　　　　插入文本
<del>
　　　　删除文本
<wbr>
　　　　定义在文本的何处适合添加换行符（HTML5新标签）
<pre>
　　　　预格式文本
　　
　　<wbr>标签规定在文本的何处适合添加换行符，作用是建议浏览器在这个标签处换行，注意只是建议而不是必须在此处换行，还需要根据整行文字的长度而定，也可以称“软换行”。<wbr>当浏览器窗口或者父级元素的宽度足够宽时不进行换行，而当宽度不够时主动在此处进行换行。例如下面的代码：
　　
     <p>
     To learn AJAX, you must be familiar with the XM<wbr>LHttpRequest Object.
     </p>
　　
　　在正常情况下，当宽度过小不足以在行末书写完一个完整单词时会将行末的整个单词放到下一行，实现换行，如果在单词的中间位置加入<wbr>标签，就会拆分一个单词换行。
　　
　　提示：<wbr>对中文没有作用。
　　
　　<pre>用来定义预格式化文本，在<pre>标签内容中的文本通常会保留空格和换行符，显示为等宽字体。
　　3.1  HTML5(format).html，说明了在HTML5文件中如何对文本进行格式化，页面显示如图3.3所示。

图3.3  HTML5(format).html示意图
　　源代码如下：
　　
     <head>
         <title>文本格式化标签</title>
     </head>
     <body>
     m<sup>2</sup><br>
     H<sub>2</sub>O<br>
     <del>删除文本</del><br>
     <ins>插入文本</ins>
     <p>To learn AJAX, 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.3.2  引用和术语定义标签
　　表3.4列出了HTML5引用和术语定义标签。
表3.4  引用和术语定义标签
标    签
描    述
       <abbr>
　　　　　　　　　　　　　缩写
       <address>
　　　　　　　　　　　　　地址
       <bdo>
　　　　　　　　　　　　　文字方向
       <blockquote>
　　　　　　　　　　　　　长的引用语
       <q>
　　　　　　　　　　　　　短的引用语
　　
　　<abbr>标签表示简称或缩写，比如“IP”，通过对缩写进行标记，能够为浏览器、拼写检查和搜索引擎提供有用的信息。建议用户在<abbr>标签中使用title属性，这样当鼠标指针移动到abbr元素上时会显示简称的完整信息。
　　<address>标签定义文档或文章的作者的联系信息。在一般情况下，如果address元素位于body元素内，表示文档所有者的联系信息；如果address元素位于article元素内，表示作者文章的联系信息。address元素中的文本通常显示为斜体。
　　
　　提示：address元素通常在footer元素中使用。
　　
　　<bdo>标签表示文字的输出方向，不是每种文字都是从左向右的顺序，比如阿拉伯文是从右向左的。<bdo>标签必须和dir属性一起使用，不论是什么文字，都以单个字符为单位，若颠倒顺序，从右往左显示，可以称为“反排效果”。
　　<blockquote>和<q>标签定义引用，最好使用cite属性，cite属性规定引用的来源，属性值是URL。
　　<blockquote>标签在浏览器中显示时会在左、右两边进行缩进（增加外边距）。<q>标签用于简短的行内引用，在浏览器中显示时会添加引号。
　　3.2  HTML5(address).html，说明了如何在HTML5文件中写地址，如何实现缩写或首字母缩写，如何改变文字的方向，页面显示如图3.4所示。
　　源代码如下：
　　
     <head>
         <title>引用和术语定义标签</title>
     </head>
     <body>
     定义地址：<address>通讯地址：清华大学学研大厦A座<br>
         读者服务部（购书）：（010）62781733<br>
         网管信箱：netadmin@tup.tsinghua.edu.cn</address><br>
     定义缩写：<abbr title="Internet Protocol">IP</abbr><br>
     如果浏览器支持bdo：
     <bdo dir="rtl">浏览器</bdo><br>
     这是长的引用：
     <blockquote cite="http://baike.baidu.com/link?url=Klkjb3BWg5GnjHyOMD8xM 	39bFlgQbwiXwiCqIcsCtH98Hp9sd_oWNPs2w-9rCSo_OKZpP-8lz4LG91ZGjUH0HK">HTML	5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修	改。</blockquote>
     这是短的引用：<q cite="https://www.baidu.com/">百度一下</q>
     </body>
　　
3.3.3  HTML5新增格式标签
　　表3.5列出了HTML5新增格式标签。
表3.5  HTML5新增格式标签
标    签
描    述
     <mark>
     定义有记号的文本（HTML5新标签）
     <meter>
     定义预定义范围内的度量（HTML5新标签）
     <progress>
     定义任何类型的任务的进度（HTML5新标签）
     <rp>
     定义若浏览器不支持ruby元素显示的内容（HTML5新标签）
     <rt>
     定义ruby注释的解释（HTML5新标签）
     <ruby>
     定义ruby注释（HTML5新标签）
     <time>
     定义日期/时间（HTML5新标签）
　　
　　<mark>标签
　　<mark>标签定义带有记号的文本，表示在页面中需要突出显示或高亮显示，通常在引用原文时使用，以引起用户的注意。mark元素是对原文内容起补充作用的一个元素，一般用于把内容重点表示出来。<mark>标签最主要的目的是引起当前用户的注意，例如在搜索引擎列出的搜索条目中高亮显示条目中的关键字。
　　<meter>标签
　　<meter>标签表示规定范围内的数量值，称为gauge（尺度），例如磁盘用量、查询结果的相关性等。
　　
　　提示：<meter>标签不能用于指示进度（在进度条中）。
　　
　　meter元素有6个属性，见表3.6。
表3.6  meter元素的属性
属    性
值
描    述
value
number
必需，规定度量的当前值。在元素中表示实际值，该属性值默认为0
min
number
规定范围的最小值。指定规定范围时允许使用的最小值，默认为0，值不能小于0
max
number
规定范围的最大值。指定规定范围时允许使用的最大值，如果属性值小于min，那么把min属性值视为最大值。默认为1
low
number
规定被视作低的值的范围。规定范围的下限值，必须小于或者等于high的值
high
number
规定被视作高的值的范围。规定范围的上限值，如果属性值小于low，那么把low属性值视为high属性值；如果属性值大于max，那么把max属性值视为high属性值
optimum
number
规定范围的最优值。属性值必须在min属性值与max属性值之间，可以大于high属性值
　　
　　low和high可以视为在规定范围内（最小值和最大值之间）的理想值，超出这个范围显示时用特定样式区分。
　　<progress>标签
　　<progress>标签代表一个任务的完成进度，进度可以是不确定的，表示进度正在进行，但不清楚还有多少工作量没有完成，也可以用0到某个最大数字之间的数字来表示准确的进度情况。
　　progress元素有两个属性，见表3.7。
表3.7  progress元素的属性
属    性
值
描    述
value
number
规定已经完成多少任务。value属性值必须大于0，且小于或等于max属性值
max
number
规定任务一共需要多少工作。max属性值必须大于0
　　
　　3.3  HTML5(progress).html，说明了如何在HTML5文件中使用<progress>、<meter>和<mark>标签，页面显示如图3.5所示。
　　源代码如下：
　　
     <head>
         <title>progress、meter和mark
         标签</title>
     </head>
     <body>
     <h2>HTML5</h2>
     <p>超文本标记语言（<mark>HTML</mark>）的第五次重大修改。</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>
　　
　　<ruby>标签
　　<ruby>标签定义Ruby注释（中文注音或字符）。在日本，将音标标记在文字上边的印刷方式叫作“Ruby”，<ruby>标签采用了日本印刷业的这个术语。
　　ruby元素由一个或多个字符（需要解释注音）和一个提供注音的rt元素组成，还包括可选的rp元素，定义当浏览器不支持ruby元素时显示的内容。
　　<ruby>内容是需要注释或注音标的文字。
　　<rt>内容是音标或注释，需要跟在注释文本的后边。
　　<rp>内容是浏览器不支持ruby元素时显示的，主要用来放置括弧，<rp>默认是不可见的。
　　<time>标签
　　<time>标签表示公历的日期或时间，时间和时区偏移是可选的。time元素能够以计算机可读的方式对日期和时间进行编码，这样搜索引擎能够根据<time>标签得到更精确的搜索结果。
　　time元素主要有一个属性，见表3.8。
表3.8  time元素的属性
属    性
值
描    述
datetime
YYYY-MM-DDThh:mm:ssTZ
YYYY：年
MM：月（例如01表示January）
DD：天
T：分隔符，若规定时间
hh：时
mm：分
ss：秒
Z：时区标识符，表示使用UTC标准时间
规定日期和时间，否则由元素的内容给定
　　
　　3.4  HTML5(ruby).html，说明了如何在HTML5文件中使用<ruby>和<time>标签，页面显示如图3.6所示。

图3.6  HTML5(ruby).html示意图
　　源代码如下：
　　
     <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>
             <h1>关于学院<time datetime="2018-04-13">04月13日</time>讲座的通知</h1>
             <p>发布日期:<time datetime="2018-04-10">2018年04月10日</time></p>
         </header>
         <p>大家好.......。</p>
     </article>
     </body>
3.4  HTML5列表
　　表3.9列出了HTML5列表标签，HTML5支持有序、无序和定义列表。
表3.9  列表标签
标    签
描    述
　　　　　<ol>
                         有序列表
　　　　　<ul>
                         无序列表
　　　　　<li>
                         列表项
　　　　　<dl>
                         定义列表
　　　　　<dt>
                         定义列表项目
　　　　　<dd>
                         定义列表项目描述
　　
3.4.1  无序列表
　　无序列表是一个项目的列表，每个项目默认使用粗体圆点进行标记。无序列表用<ul>标签定义，每个列表项用<li>标签定义，列表项内容可以使用段落、换行符、图片、链接以及其他列表等。
　　无序列表有一个可选属性type，用来规定列表里项目符号的类型，但不赞成使用，建议用样式取代它。
　　3.5  HTML5(ul).html，使用了无序列表，页面显示如图3.7所示。
　　源代码如下：
　　
     <head>
         <title>无序列表</title>
     </head>
     <body>
     <h2>无序列表：</h2>
     <ul>
         <li>茶
             <ul>
                 <li>红茶</li>
                 <li>绿茶</li>
             </ul>
         </li>
         <li>牛奶</li>
         <li>咖啡</li>
     </ul>
     </body>
　　
3.4.2  有序列表
　　有序列表也是项目，列表项目使用数字进行标记。有序列表用<ol>标签定义，每个列表项用<li>标签定义，列表项内容可以使用段落、换行符、图片、链接以及其他列表等。
　　有序列表常用两个可选属性，type用来规定列表里项目编号的类型，start用来规定起始的序号，见表3.10。
表3.10  有序列表的可选属性
属    性
值
描    述
   start
　　　number
规定列表中的起始点
   reversed
　　　reversed
规定列表顺序为降序
　　
　　3.6  HTML5(ol).html，使用了不同类型的有序列表，页面显示如图3.8所示。
　　源代码如下：
　　
     <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.4.3  定义列表
　　定义列表是项目及其注释的组合，定义列表以<dl>标签开始，每个定义列表项以<dt>标签开始，每个定义列表项的描述以<dd>标签开始，在定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等。
　　3.7  HTML5(dl).html，使用了定义列表，页面显示如图3.9所示。
　　源代码如下：
　　
     <head>
         <title>定义列表</title>
     </head>
     <body>
     <h4>一个定义列表：</h4>
     <dl>
         <dt>咖啡</dt>
         <dd>黑色的热饮料</dd>
         <dt>Milk</dt>
         <dd>白色的冷饮料</dd>
     </dl>
     </body>
3.5  叮叮书店首页内容结构的建立
　　在制作一个网页时，首先要确定整个页面的内容结构，采用先整体后局部、自上而下的方法将页面划分成不同的区域，然后确定每一个区域的内容，最后完成一个页面文档内容的结构化框架。常见的页面内容结构如图3.10所示，下面以制作叮叮书店首页为例说明整个过程。

图3.10  常见的页面内容结构示意图
3.5.1  分析设计页面内容结构
　　整个页面内容是一个大的容器，可以看成是Word文档的一页，一般由页眉、内容和页脚3个区域组成。叮叮书店是一个典型的由页眉、内容（分为左边内容区、右边边栏区）和页脚组成的结构。
　　页眉由网站logo、导航菜单、站内搜索和购物车组成，如图3.11所示。

图3.11  叮叮书店首页的页眉结构示意图
　　页脚由页脚导航和版权信息组成，如图3.12所示。

图3.12  叮叮书店首页的页脚结构示意图
　　页面主要内容由左边内容区和右边边栏区组成，其中左边内容区由横幅广告、本周推荐、最近新书和最近促销组成，右边边栏区由边栏广告、畅销图书、图书分类、合作伙伴和关于书店组成，如图3.13所示。
3.5.2  用HTML5结构标签确定页面内容结构
　　顶层结构
　　首先建立文档内容顶层结构。启动WebStorm，打开叮叮书店项目首页index.html（在第2章的2.5节建立），进入编辑区。操作步骤如下：
　　将光标定位到<body>的后面，按回车键，输入下面的代码：
　　
     <!--页眉-->
     <header class="container"></header>
     <!--导航菜单-->
     <div id="nav"></div>
     <!--内容-->
     <div id="content-wrapper" class="container"></div>
     <!--页脚-->
     <div id="footer-wrapper"></div>
     <!--版权信息-->
     <div id="copyright" class="container"></div>

图3.13  叮叮书店首页的内容结构示意图
　　提示：id和class属性不仅仅是区分元素的标识，更是为以后的样式和脚本准备的，id表示唯一，体现个性，class是一类，体现共性。id和class属性值最好能见名知意。
　　分层结构
　　然后自上而下建立分层结构。操作步骤如下：
　　1）页眉
　　将光标定位到<header class="container">的后面，按回车键，输入下面的代码：
　　
     <!--网站logo-->
     <div id="logo"></div>
     <!--站内搜索-->
     <div id="search"></div>
　　
　　2）导航菜单
　　将光标定位到<div id="nav">的后面，按回车键，输入下面的代码：
　　
     <nav class="container">
         <!--购物车-->
         <div id="cart"></div>
     </nav>
　　
　　3）内容
　　将光标定位到<div id="content-wrapper" class="container">的后面，按回车键，输入下面的代码：
　　
     <!--左边内容区-->
     <main>
         <!--横幅广告-->
         <div id="adv"></div>
         <!--本周推荐-->
         <section id="recommend">
             <section class="recommend-book"></section>
             <section class="recommend-book"></section>
         </section>
         <!--最近新书-->
         <section id="new">
             <div class="content">
                 <section class="book"></section>
                 <section class="book"></section>
             </div>
         </section>
         <!--最近促销-->
         <section id="sales">
             <div class="content">
                 <section class="book"></section>
                 <section class="book"></section>
             </div>
         </section>
     </main>
     <!--右边边栏区-->
     <aside>
         <!--边栏广告-->
         <div id="advert"></div>
         <!--畅销图书-->
         <section id="best-selling"></section>
         <div id="classify-partner">
             <!--图书分类-->
             <section id="classify"></section>
             <!--合作伙伴-->
             <section id="partner"></section>
         </div>
         <!--关于书店-->
         <section id="about"></section>
     </aside>
　　
　　4）页脚
　　将光标定位到<div id="footer-wrapper">的后面，按回车键，输入下面的代码：
　　
     <!--页脚导航-->
     <footer class="container"></footer>
　　
3.5.3  添加文本内容
　　页眉文本
　　1）网站logo
　　将光标定位到<div id="logo">的后面，按回车键，输入下面的代码：
　　
     <h1>叮叮书店</h1>
　　
　　2）导航菜单
　　将光标定位到<nav class="container">的后面，按回车键，输入下面的代码：
　　
     <ul>
         <li>首页</li>
         <li>书籍分类</li>
         <li>特刊降价</li>
         <li>联系我们</li>
         <li>关于我们</li>
     </ul>
　　
　　提示：在组织菜单或链接等并列文本时一般采用无序列表。
　　
　　内容文本
　　1）本周推荐
　　将光标定位到<section id="recommend">的后面，按回车键，输入下面的代码：
　　
     <h2>本周推荐</h2>
　　将光标定位到第1个<section class="recommend-book">的后面，按回车键，输入下面的代码：
　　
     <h3>《HTML5权威指南》</h3>
     <div class="content">
         <div class="cover"></div>
         <div class="description">
             <p>作为下一代Web标准，<mark>HTML5</mark>致力于为互联网开发者搭建更加便捷、	        开放的沟通平台。业界普遍认为，在未来几年内，<mark>HTML5</mark>无疑将成为移		        动互联网领域的主宰者。本书是系统学习网页设计和移动设计的参考图书。</p>
             <p>Adam Freeman，曾在多家名企担任高级职务，现为畅销技术图书作家，著有多部	        C#、.NET和Java方面的大部头作品。其中《ASP.NET4高级程序设计（第4版）》、《精	        通ASP.NET MVC 3框架（第3版）》销量均在同品种中名列前茅，备受读者推崇。Freeman	        专门为网页开发新手和网页设计师打造的经典参考书，这本书秉承作者的一贯风格，幽默	        风趣、简约凝练、逻辑性强，是广大Web开发人员的必读经典。</p>
         </div>
     </div>
     <div class="cart-more">加入购物车详细内容</div>
　　
　　将光标定位到第2个<section class="recommend-book">的后面，按回车键，输入下面的代码：
　　
     <h3>《JavaScript权威指南》</h3>
     <div class="content">
         <div class="cover"></div>
         <div class="description">
             <p>经典的JavaScript工具书，从1996年以来，本书已经成为JavaScript程序员		        心中的《圣经》。</p>
             <p>David Flanagan，是一名程序员，也是一名作家。他在O’Reilly出版的其他畅	        销书还包括JavaScript Pocket Reference、The Ruby Programming Language	        以及Java in a Nutshell。David毕业于麻省理工学院，获得计算机科学与工程学位。	        他和妻子、孩子一起生活在西雅图和温哥华之间的美国太平洋西北海岸。</p>
         </div>
     </div>
     <div class="cart-more">加入购物车详细内容</div>
　　
　　2）最近新书
　　将光标定位到<section id="new">的后面，按回车键，输入下面的代码：
　　
     <h2>最近新书</h2>
　　
　　将光标定位到第1个<section class="book">的后面，按回车键，输入下面的代码：
　　
     <h3>《HTML5+CSS3从入门到精通》</h3>
     <div class="effect-1">
         <div class="image-box"></div>
              <div class="text-desc">
                  <h3>《HTML5+CSS3从入门到精通》</h3>
                  <p>《<mark>HTML5</mark>+CSS3从入门到精通》通过基础知识+中小实例+综合	             案例的方式，讲述了用<mark>HTML5</mark>+CSS3设计构建网站的必备知识，相	             对于权威指南、高级程序设计、开发指南同类图书，本书是一本适合快速入手的自学	             教程。</p>
              <div class="cart-more">加入购物车详细内容</div>
          </div>
      </div>
　　
　　将光标定位到第2个<section class="book">的后面，按回车键，输入下面的代码：
　　
     <h3>《响应式Web设计》</h3>
     <div class="effect-1">
         <div class="image-box"></div>
         <div class="text-desc">
             <h3>《响应式Web设计》</h3>
             <p>《响应式Web设计：<mark>HTML5</mark>和CSS3实战》将当前Web设计中热门		        的响应式设计技术与<mark>HTML5</mark>和CSS3结合起来，为读者全面深入地讲解	        了针对各种屏幕大小设计和开发现代网站的各种技术。《响应式Web设计：<mark>HTML5 	        </mark>和CSS3实战》适合各个层次的Web开发和设计人员阅读。</p>
             <div class="cart-more">加入购物车详细内容</div>
         </div>
     </div>
　　
　　3）最近促销
　　将光标定位到<section id="sales">的后面，按回车键，输入下面的代码：
　　
     <h2>最近促销</h2>
　　
　　将光标定位到第1个<section class="book">的后面，按回车键，输入下面的代码：
　　
     <h3>《HTML5和CSS3实例教程》</h3>
     <div class="effect-1">
         <div class="image-box"></div>
         <div class="text-desc"></div>
         <div class="cart-more">加入购物车详细内容</div>
     </div>
　　
　　将光标定位到第2个<section class="book">的后面，按回车键，输入下面的代码：
　　
     <h3>《JavaScript权威指南》</h3>
     <div class="effect-1">
         <div class="image-box"></div>
         <div class="text-desc"></div>
         <div class="cart-more">加入购物车详细内容</div>
     </div>
　　
　　4）畅销图书
　　将光标定位到<section id="best-selling">的后面，按回车键，输入下面的代码：
　　
     <h2>畅销图书</h2>
     <ul>
         <li>深度学习 [deep learning]
             <div class="curr">
                 <div class="p-img"></div>
                 <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-img"></div>
                 <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-img"></div>
                 <div class="p-name">和秋叶一起学PPT 第3版<strong>￥43.50</strong> 	            <del>￥52.00</del></div>
             </div>
         </li>
         <li>深度学习优化与识别
             <div class="curr">
                 <div class="p-img"></div>
                 <div class="p-name">深度学习优化与识别<strong>￥43.50</strong> 	   	            <del>￥52.00</del></div>
             </div>
         </li>
         <li>区块链原理、设计与应用
             <div class="curr">
                 <div class="p-img"></div>
                 <div class="p-name">区块链原理、设计与应用<strong>￥43.50</strong> 	            <del>￥52.00</del></div>
             </div>
         </li>
     </ul>
　　
　　5）图书分类
　　将光标定位到<section id="classify">的后面，按回车键，输入下面的代码：
　　
     <h2>图书分类</h2>
     <ul>
         <li>编程语言</li>
         <li>数据库</li>
         <li>图形图像</li>
         <li>网页制作</li>
         <li>考试认证</li>
     </ul>
　　
　　6）合作伙伴
　　将光标定位到<section id="partner">的后面，按回车键，输入下面的代码：
　　
     <h2>合作伙伴</h2>
     <ul>
         <li>中国电子商务研究中心</li>
         <li>清华大学出版社</li>
         <li>中国人民大学出版社</li>
         <li>中国社会科学出版社</li>
     </ul>
　　
　　7）关于书店
　　将光标定位到<section id="about">的后面，按回车键，输入下面的代码：
　　
     <h2>关于书店</h2>
     <p>叮叮书店成立于2010年6月，是由教育部主管、清华大学主办的综合出版单位，植根于“清		华”这座久负盛名的高等学府，秉承清华人“自强不息，厚德载物”的人文精神。</p>
　　
　　页脚文本
　　将光标定位到<footer class="container">的后面，按回车键，输入下面的代码：
　　
     <ul>
         <li>首页</li>
         <li>关于我们</li>
         <li>服务条款</li>
         <li>隐私策略</li>
         <li>联系我们</li>
     </ul>
　　
　　版权信息文本
　　将光标定位到<div id="copyright" class="container">的后面，按回车键，输入下面的代码：
　　
     <div>Copyright (C) 叮叮书店 2016-2018, All Rights Reserved | 京ICP证000001	号音像制品经营许可证</div>
     <address>通讯地址：清华大学学研大厦A座 读者服务部&nbsp;&nbsp;电话：（010）	62781733&nbsp;&nbsp;网管信箱：netadmin@tup.tsinghua.edu.cn</address>
　　
3.5.4  在浏览器中预览
　　将鼠标指针移到WebStorm主编辑区，在弹出的主流浏览器工具栏中单击Google Chrome图标按钮进行预览，预览效果如图3.14所示。

图3.14  叮叮书店首页预览效果图
3.6  小结
　　本章介绍了HTML5结构标签元素，详细讲述了HTML5常用的基本元素，简单介绍了文本格式化标签，重点介绍了HTML5列表，并通过叮叮书店首页说明了建立页面内容结构的过程。
3.7  习题
　　选择题
　　（1）在下面的标签中，（    ）是HTML5新增的标签。
　　　　A．<br>			B．<break>			C．<header>		D．<head>
　　（2）在HTML5中，注释标签是（    ）。
　　　　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>
　　简答题
　　（1）元素显示时默认是一个块元素和默认是一个行内元素有什么区别？
　　（2）HTML5基础标签有哪些？
　　（3）列表元素有哪几类？怎么使用？
　　（4）<article>和<section>有什么区别？
　　（5）写出常见的页面内容组成结构标记代码。