第2章
HTML5 语法和基础标签
本章将详细讲解HTML的语法和常用的HTML元素。经过本章的学习，读者将学会怎样在网页上显示图片、链接以及不同类型的文本。
本章所有的案例都需要读者动手练习，仅靠阅读是绝对没办法学会如何制作页面的，学习过程中切勿只当一个旁观者。只有切实地把案例中的代码都敲出来并在浏览器上得到正确的效果，才能确保学会正确使用HTML元素和它们的属性，并在本章学习结束后没有阻碍地完成本章任务。
本章任务
学习HTML中最基础的元素，完成案例中的咖啡馆介绍页面。
要求：
（1）单击图2-1咖啡馆介绍页面中的“查看菜单”，页面会滚动到图2-2的状态。
（2）按照图2-2所示的顺序对咖啡馆菜单进行百分百还原。
（3）使用两种浏览器打开咖啡馆介绍页面，检查不同浏览器渲染的页面是否一致。
（4）创建一个img文件夹，把所有的图片资料放在一起。
需要注意的是，HTML的主要功能是使网页结构化，但其无法控制网页的样式，所以本章案例大多不够美观，但别急，在之后的章节中会使用CSS来解决这个问题。
image.png
图2-1 咖啡馆介绍
image.png
图2-2 咖啡馆菜单
2.1 HTML基础语法
HTML页面由不同元素经过嵌套组成，本小节讲解HTML页面所遵循的语法规则。
2.1.1 HTML语法规则
简单来说，HTML的语法就是给文本加上表明文本含义的标签(Tag)，让人和浏览器能够更好地理解文本。本小节主要讲解HTML的相关概念，建立语法体系，案例较少。如果你在阅读本小节时感到困惑，可以先快速浏览这一部分内容，之后遇到问题时再返回查看。
1.HTML文档
HTML文档以.html或.htm为文件后缀，告知浏览器该文件的类型。
HTML文档的打开方式：双击.html文件即可在浏览器中打开，如图2-3所示。
image.png
图2-3 打开HTML文件的方法
选择打开HTML文档的浏览器：在.html文件上单击右键，弹出菜单，在【打开方式】中选择想要使用的浏览器，如图2-4所示。
image.png
图2-4 选择浏览器
2.元素语法
标签：HTML标签是由尖括号包围的关键词，如p是一个表明段落的关键词，给p加上标签，就成为<p>标签。
元素：一个元素通常是由一个开始标签、内容以及一个结束标签组成的。结束标签中要用“/”表示元素结束，如图2-5所示。
image.png
图2-5 元素结构
3.属性
属性用来指定元素的附加信息，使元素个性化。如图2-6和图2-7所示，属性添加在开始标签中，属性由属性名和双引号括起来的属性值组成，它们之间使用等号连接，语法如下。
<元素名 属性名1="值1" 属性名2="值2"></元素名>
图2-6 id属性
image.png
图2-7 href属性
表2-1列出了适用于大部分元素的属性。
表2-1 适用于大部分元素的属性
属性 值 描述
class classname 规定元素的类名（classname）
id id 规定元素的唯一id
style style_definition 规定元素的行内样式
title text 规定元素的额外信息（可在工具提示中显示）
元素名和属性名都不区分大小写，一般采用小写。当元素拥有不止一个属性的时候，属性之间用空格隔开，代码如下。
<div class="btn" id="start">Start</div>
2.1.2 HTML文档的基础结构
以一个最简单的HTML文档为例，来展示HTML文档的基础结构，代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>我是HTML文档</p>
</body>
</html>
下面分别解释这段代码中每个元素的含义。
<!DOCTYPE html>声明位于HTML文档的第一行，为浏览器提供HTML的版本信息。
<html>元素是页面的根元素，所有的HTML文档都应该有一个<html>元素。<html>元素可以包 含<head>和<body>两部分。
<head>元素包含整个网页的信息。
<title>元素用于文档的名字，通常出现在浏览器窗口的标题栏或状态栏中。
<meta>元素通常用于指定网页的描述及其他元数据。<meta>元素的charset属性告知浏览器此页面的字符编码格式，如charset=“UTF-8”表示此页面遵循unicode(万国码)的编码标准。
<body>元素用来存放文档的具体内容。
<p>元素表示一个段落。
2.1.3 元素的嵌套
1.什么是嵌套
把一个元素放入另一个元素中称为元素的嵌套，嵌套构建HTML页面的方式。可以将<head>元素嵌套在<html>元素中，<p>元素嵌套在<body>元素中，代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>一起进入<em>HTML乐园</em></p>
</body>
</html>
2.树形图表示嵌套关系
为了更好地理解这段代码，将代码转换为树形图的形式，如图2-8所示。
image.png
图2-8 元素的嵌套树形图
3.使用元素的嵌套保证标签的正确匹配
嵌套的一个重要作用就是保证标签的正确匹配。正确的标签匹配情况是，一个元素完全包含于另一个元素，如图2-9所示，代码如下。
<p>一起进入<em>HTML乐园</em></p>
image.png
图2-9 em元素完全嵌套在p元素中
提示：<em>标签的作用是强调内容。
当两个元素互相交叉的时候，标签的匹配会出现错误，如图2-10所示，代码如下。
<p>一起进入<em>HTML乐园</p></em>
image.png
图2-10 em元素从p元素中漏出，嵌套错误
错误的嵌套可能导致网页无法在浏览器上使用，正确的嵌套可以避免标签不匹配。
2.2 文本元素
平时经常用到的标题、段落、超链接、文本换行、被CSS取代的文本格式化等都是HTML中的文本元素，使用正确的文本元素对网页的可读性有重要意义，请务必认真学习。
2.2.1.标题
HTML标题是通过<h1>到<h6>标签定义的，<h1>定义最大的标题，<h6>定义最小的标题，浏览器显示效果如图2-11所示，代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>This is a h1</h1>
<h2>This is a h2</h2>
<h3>This is a h3</h3>
<h4>This is a h4</h4>
<h5>This is a h5</h5>
<h6>This is a h6</h6>
</body>
</html>
image.png
图2-11 HTML标题
用户可以通过标题快速浏览网页，所以用标题呈现文档结构是很重要的。应该按照标题的级别，将<h1>用作最重要的主标题，将<h2>用作次重要的标题，依此类推至<h6>。这和一本书的结构是一样的，有章、节、小节等。请确保将<h1>到<h6>只用于标题，不要仅仅为了生成粗体或大号的文本而使用标题标签。
2.2.2 段落——<p>标签
在一篇文章中，作者一般会使用分段的形式划分不同的内容，使文章易于阅读。<p>可以在网页中实现分段的效果，使每个段落都另起一行并且段落之间会有间距。接下来通过一首古诗来了解<p>的样式，浏览器显示效果如图2-12所示，代码如下。
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>竹里馆</h1>
<p>独坐幽篁里，
弹琴复长啸。</p>
<p>
深林人不知，
明月来相照。</p>
</body>
</html>
image.png
图2-12 <p>标签的应用
由图2-12可以看出，浏览器会自动忽略标签内部的换行。请记住，浏览器不会介意换行、回车和大多数的空格，标签中的内容可以在任意一行开始，在任意一行结束。因此，只需要确认元素是以开始标签开始、以结束标签结束就够了。
2.2.3 HTML折行——
标签
如果需要在不产生一个新段落的情况下进行换行，请使用
，浏览器显示效果如图2-13所示，代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>竹里馆</h1>
<p>独坐幽篁里，
弹琴复长啸。</p>
<p>
深林人不知，
明月来相照。</p>
</body>
</html>
image.png
图2-13 换行符效果
元素只代表换行，所以它没有元素内容，也没有结束标签。这类没有标记文本和结束标签的元素称为空元素。
提示：一般来说，HTML元素都需要开始标签和结束标签。但是空元素例外，这一类HTML元素没有内容，所以不需要闭合。
常见空元素：
（1）
：表示换行。
（2）
：表示分隔线。
（3）<input>：表示文本框等。
（4）<img>：表示图片。
（5）<meta> ：常用于指定网页的描述、关键词、文件的最后修改时间、作者及其他元数据。
读者在阅读一本书的时候，通常会写批注帮助理解。代码的世界同样如此，开发人员利用注释标注某一部分代码的功能，使代码易于阅读。
如果用“<!--”和“-->”把注释内容括起来，浏览器就会把注释内容通通忽略掉。
在古诗最前面加入注释“这是一首王维的古诗”，且不显示在浏览器的页面中，浏览器显示效果如图2-14所示，代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>竹里馆</h1>
<p>独坐幽篁里，
弹琴复长啸。</p>
<p>
深林人不知，
明月来相照。</p>
</body>
</html>
image.png
图2-14 浏览器没有识别注释内容
2.2.4 文本格式化
文本格式化标签可以实现文本的不同样式和意义，如<em>标签表示强调，<i>标签表示斜体，<strong>标签表示加粗等。格式化文本的效果现在已经被CSS样式所取代，只要简单了解即可。文本格式化的相关标签如表2-2所示。
表2-2 文本格式化的相关标签
标签 描述
<b> 定义粗体文本
<big> 定义大号字
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
定义下标字
定义上标字
<ins> 定义插入字
<del> 定义删除字
文本格式化在浏览器上的显示效果如图2-15所示，代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains
subscript
<br />
This text contains
superscript
</body>
</html>
image.png
图2-15 文本格式化在浏览器上的显示效果
2.3 HTML超链接——<a>标签
2.3.1 初识超链接
超链接由<a>标签定义，几乎在所有网页中都可以找到超链接的存在。超链接主要实现两个功能：①页面之间的跳转；②书签。
大家通过常用的搜索引擎“百度”就能体会超链接的功能。在浏览器的地址栏中输入www.baidu.com进入百度首页，在搜索栏中输入关键词“超链接”，如图2-16所示。
image.png
图2-16 超链接案例
单击第一个词条“超链接 百度百科”，会跳转到另一个页面，如图2-17所示。这一步操作中的跳转功能就是通过超链接<a>元素来实现的。超链接在本质上属于网页的一部分，它是一种允许页面之间进行链接的元素。各个网页链接在一起才能真正构成一个网站。
image.png
图2-17 跳转结果
在图2-18页面的“目录”中，单击最后一条“动态静态”，可以看到页面跳转到了同一页面的最下部，即图2-19所示的“动态静态”位置，这是运用了超链接的锚点功能，也可以理解为书签功能。
image.png
图2-18 单击“动态静态”
image.png
图2-19 同一页面跳转
提示：所谓超链接，是指从一个网页指向一个目标的连接关系。这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
2.3.2 超链接语法
超链接语法如下。
<a href="url">Link text</a>
<a>标签的常用属性如表2-3所示。
表2-3 <a>标签的常用属性
属性 值 描述
href URL 规定链接指向的页面的URL，可以是任何有效文档的相对或绝对路径
target _blank
_parent
_self
_top 规定在何处打开链接文档
2.3.3 href属性——绝对路径和相对路径
1.绝对路径
要找到需要的文件就必须知道文件位置，而表示文件位置的方式就是路径。例如，一张图片的路径是C:/website/img/photo.jpg，只要看到这个路径，不需要其他信息，就知道photo.jpg文件是在计算机C盘的website目录下的img子目录中，类似这样完整的描述文件位置的路径就是绝对路径。
在文件上单击右键，选择属性即可查看该文件的路径信息，如图2-20所示。
image.png
图2-20 查看文件的绝对路径
2.相对路径
相对路径，顾名思义就是自己相对于目标位置的路径。如图2-21所示，将文件夹1视为根目录，文件1.html通过<a>元素链接到文件2.html。此时，文件2.html的绝对路径是：文件夹1/网页文件/文件2.html；文件2.html的相对路径是：文件2.html。
image.png
图2-21 查看文件的相对路径
将图2-21中的文件夹网页文件从文件夹1移动到文件夹2，结果如图2-22所示。此时，文件2.html的绝对路径是：文件夹1/文件夹2/网页文件/文件2.html；文件2.html的相对路径是：文件2.html。
image.png
图2-22 查看文件的相对路径
在写一个网站的时候，一般把多个页面放在一个文件夹下。当移动项目文件夹时，文件的绝对路径发生变化，相对路径不变。所以，如果一个文件夹里面有多个页面互相跳转的时候，请使用相对路径，避免因文件夹的移动等因素造成的路径变化。
提示：URL的写法
每使用一次“..”，就上溯一层父目录，如果你想上溯两层父目录，可以写成“../..”
请严格地使用HTML语言中的符号，所有字符应该是英文字符，不可以用“\”来代替“/”
练习
（1）以文件夹1为根目录，请写出图2-23中所有文件的路径。
（2）在文件1.html中，写出文件3.html的绝对路径和相对路径。
（3）在文件5.html中，写出文件3.html的绝对路径和相对路径。
image.png
图2-23 文件路径示意图
2.3.4 target属性
<a>标签的target属性规定在何处打开链接文档。默认值为_self，在当前窗口中打开被链接文档。
表2-4 terget属性值
值 描述
_blank 在新窗口中打开被链接文档
_self 默认。在相同的窗口中打开被链接文档
_parent 在父框架集中打开被链接文档
_top 在整个窗口中打开被链接文档
framename 在指定的框架中打开被链接文档
2.3.4 <a>元素的应用
【应用2-1】页面跳转
使用<a>标签，实现从“超链接.html”跳转到“目标.html”。
首先，准备好两个页面作为素材。新建文件夹“超链接”，在文件夹内新建两个文件夹，分别命名为“超链接.html”和“目标.html”，如图2-24所示。
image.png
图2-24 超链接文件夹
其次，使用之前学过的元素，在目标页面中写任意内容，在浏览器运行测试页面是否能正常显示，浏览器显示效果如图2-25所示，代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>目标页面</title>
</head>
<body>
<h1>目标页面</h1>
<h3>第一小节</h3>
<p>所谓超链接，是指从一个网页指向一个目标的连接关系。这个目标可以是另一个网页，也可以是相同页面上的不同位置，还可以是一个图片，一个电子邮箱地址，一个文件，甚至是一个应用程序。
</p>
</body>
</html>
image.png
图2-25 在浏览器中打开目标文件
最后，在“超链接.html”中写入一个<a>元素，在标签内写入文本“跳转到目标页面”并且指定<a>元素的href属性为目标链接的地址，浏览器显示效果如图2-26所示，代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>目标页面</title>
</head>
<body>
<a href="目标.html">跳转到目标页面</a>
</body>
</html>
image.png
图2-26 在浏览器打开超链接文件
这样，就在页面上成功写入了一个超链接，单击“跳转到目标页面”，页面跳转到“目标.html”。
【应用2】设置锚点
准备如图2-27所示的素材页面，实现点击页面最顶部的“书签：第六小节”，使页面滚动到第六小节所在位置，代码如下。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>目标页面</title>
</head>
<body>
<a href="">书签：第六小节</a>
<h3>第一小节</h3>
<h3>第二小节</h3>
<h3>第三小节</h3>
<h3>第四小节</h3>
<h3>第五小节</h3>
<h3>第六小节</h3>
<p>所谓超链接，是指从一个网页指向一个目标的连接关系。这个目标可以是另一个网页，也可以是
相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
</p>
<h3>第七小节</h3>
<h3>第八小节</h3>
<h3>第九小节</h3>
<h3>第十小节</h3>
<h3>第十一小节</h3>
<h3>第十二小节</h3>
</body>
</html>
image.png
图2-27 素材页面
用id属性为第六小节的位置设置锚点，代码如下。
<h3 id="mark">第六小节</h3>
id属性会在文档中放置一个标志，id名是独一无二的。在一个HTML文档中，一个id不可以出现多次。
提示：在HTML4之前，需要使用name属性来建立锚点，后被id属性代替。HTML5已经不再支持name属性。
在超链接中添加标记，使用“#”+id名称的方式来寻找id标志，代码如下。
<a href="#mark">书签：第六小节</a>
此时，单击超链接，页面就会跳转到用id标记过的位置，如图2-28所示。
image.png
图2-28 跳转到被标记的位置
2.4 HTML图像——<img>标签
在HTML中，图像由<img>标签定义。<img>是空标签，它只包含属性，并且没有闭合标签，语法如下。
<img src="url" alt="text">
表2-5 <img>标签的必选属性
属性 值 描述
alt text 规定图像的替代文本
src URL 规定显示图像的URL
1.src属性
src是<img>标签的必选属性，它的值是图像文件的URL，也就是引用该图像文件的绝对路径或相对路径。
提示：为了方便整理文档，创作者通常会把图像文件存放在一个单独的文件夹中，命名为pics、images等。
width控制图片的宽度，height控制图片的高度。如果没有设置宽高的话，浏览器上会显示图片原本的尺寸。
2.alt属性
alt属性指定了替代文本，当图片地址有误时，显示alt里面的文字内容。
设置图片的宽度和高度，并且在图片地址出错的时候用文字标注图片信息，浏览器显示效果如图2-29、图2-30所示，代码如下。
<img src="img/lemon.jpg" alt="柠檬" width="400px" height="300px"/>
image.png
图2-29 当图片地址正确的时候
image.png
图2-30 当图片地址出错的时候
【案例2-1】一个超链接图片
把图片标签嵌套在超链接标签里面，得到一个超链接图片，如图2-31所示。单击图片，可以跳转到链接的地址，如图2-32所示。代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>目标页面</title>
</head>
<body>
<a href="https://www.baidu.com/"><img src="img/bee.png"/></a>
</body>
</html>
image.png
图2-31 超链接图片在浏览器上的显示效果
image.png
图2-32 单击图片跳转到链接中的地址
2.4 列表
列表是一种常用的将内容分类的方法。
表2-6 列表相关的元素
标签 描述
<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。
2.4.1 无序列表
当列表中的顺序不重要并且更改次序不影响表达的时候，通常使用无序列表<ul>元素。无序列表的子项是且只能是<li>元素，不可以在<ul>元素中嵌套其他元素。
不规定样式的时候，无序列表使用粗体圆点标识它的每一个子项，如图2-33所示，代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>apple</li>
<li>banana</li>
<li>peach</li>
<li>grape</li>
</ul>
</body>
</html>
image.png
图2-33 无序列表在浏览器上的显示效果
2.4.2 有序列表
当列表的顺序有意义并且不能随意更改的时候，要使用有序列表<ol>。有序列表的子项同样只能是<li>标签。
不规定样式的时候，有序列表使用阿拉伯数字标识它的每一个子项，如图2-34所示，代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li>apple</li>
<li>banana</li>
<li>peach</li>
<li>grape</li>
</ol>
</body>
</html>
image.png
图2-34 有序列表在浏览器上的显示效果
2.4.3 自定义列表
自定义列表不仅仅是一个项目，而是项目及其注释的组合。
自定义列表以<dl>标签开始，自定义列表项以<dt>开始，自定义列表项的定义以<dd>开始，如图2-35所示，代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<dl>
<dt>apple</dt>
<dd>a red fruit</dd>
<dt>banana</dt>
<dd>a yellow fruit</dd>
<dt>orange</dt>
<dd>an orange fruit</dd>
<dt>grape</dt>
<dd>a purple fruit</dd>
</dl>
</body>
</html>
image.png
图2-35 自定义列表在浏览器上的显示效果
2.4.4 列表的嵌套
列表之间可以相互嵌套，如图2-36所示，代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li>咖啡</li>
<li>奶茶</li>
<li>果汁
<ul>
<li>苹果汁</li>
<li>橙汁</li>
<li>柠檬汁</li>
<li>西瓜汁</li>
</ul>
</li>
</ol>
</body>
</html>
image.png
图2-36 有序列表内部嵌套了一个无序列表
列表嵌套需要注意哪些事项呢？先来观察A同学提交的练习结果是否有问题，如图2-37所示，代码如下。
<body>
<h1>列表嵌套</h1>
<ul>
<li>咖啡</li>
<ol>
<li>意式浓缩</li>
<li>拿铁</li>
<li>卡布奇诺</li>
</ol>
<li>茶</li>
<ol>
<li>红茶</li>
<li>绿茶</li>
<li>果茶</li>
</ol>
<li>果汁</li>
<li>可乐</li>
<li>雪碧</li>
</ul>
</body>
image.png
图2-37 A同学练习结果的渲染结构
从A同学练习结果的渲染结构上看，并不能发现问题所在。但是，HTML使用不同标签的目的并不是为了表现外观，而是构建合理的结构。从结构上分析，很容易找到A同学的错误，如图2-38所示。
image.png
图2-38 A同学练习结果的结构
列表是一种表示顺序的文本形式，嵌套可以表现内容之前的包含关系。
分析上述案例的语义，可以得知这是一个对饮料的分类，即饮料分为咖啡、茶、果汁、雪碧、可乐5种类型。其中，咖啡又包括意式浓缩、拿铁、卡布奇诺3种类型，茶包括红茶、绿茶、果茶3种类型。因此，该案例中存在两个问题：①没有将咖啡种类放在咖啡目录下，没有将茶的种类放在茶目录下，结构上违背了列表原先要表达的实际含义；②违反了<ul>元素只能有<li>这一种元素作为子项。
修改之后正确的代码如下。
<body>
<h1>列表嵌套</h1>
<ul>
<li>咖啡
<ol>
<li>意式浓缩</li>
<li>拿铁</li>
<li>卡布奇诺</li>
</ol>
</li>
<li>茶
<ol>
<li>红茶</li>
<li>绿茶</li>
<li>果茶</li>
</ol>
</li>
<li>果汁</li>
<li>可乐</li>
<li>雪碧</li>
</ul>
</body>
思考与练习
一、填空题
1.（ ）标签必须直接嵌套于ul、ol中。
二、单选题
- 选出你认为最合理的定义标题的方法。（ ）
A.<span class=”heading”>文章标题</span>
B.<p><b>文章标题</b></p>
C.<h1>文章标题</h1>
D.<strong>文章标题</strong>
2.
标签在HTML中的语义为（ ）。
A.换行
B.B.强调
C.C.段落
D.D.标题
3.以下哪个是无序列表？（ ）
A.<UL>
B.<OL>
C.<DIR>
D. <DL>
- 下面哪一个标符可以用来换行？（ ）
A.<HR>
B.<BR>
C.<TR>
D.<T1>
三、多选题
1.一份标准的HTML文档有哪几个必须的HTML标签？（ ）
A.<html>
B.<head>
C.<title>
D.<body>
四、判断题
1.在不涉及样式情况下，页面元素的优先显示与结构摆放顺序无关。（ ）
2.在不涉及样式情况下，页面元素的优先显示与标签选用无关。（ ）
五、简答题
- img的alt和title有哪些不同点？
- 写出ul、ol、dl三种列表的HTML结构。
实践题
请完成本章开头的“本章任务”,如图2-39所示。
image.png
图2-39 咖啡馆介绍
网友评论