第二章 HTML5基础标签和语法
本章将详细讲解HTML的语法，以及常用的HTML标签。经过本章的学习，将学会怎样在网页上显示图片、链接、以及不同类型的文本。
本章所有的案例都要求动手练习，切勿只当一个单纯的旁观者。单纯的阅读绝对没办法学会写一个页面，切实地把案例都敲出来并在浏览器上得到正确的效果，才能确保正确使用标签和它的属性，并在本章学习结束后没有阻碍地写出本章任务。
本章任务：学习HTML中的最基础的元素。这些元素足够完成下面的“咖啡馆介绍页面”。需要注意的是，HTML的主要功能是使网页结构化。HTML无法控制网页的样式，所以本章案例大多不够美观，但别急，在之后的章节中，将使用CSS来解决这个问题。
要求：
（1）点击图2.1下面的‘查看菜单’的时候，页面会滚动到‘咖啡馆菜单’置顶的状态，如下图2.2所示
（2）咖啡馆菜单请按照图中所示的顺序进行百分百还原，如图2.2所示
（3）请使用两种浏览器打开你的页面，检查是否与下图所示一致
（4）请把图片资料和文件放在一个文件夹中
2.1 写HTML标签要遵循的规则
经过前面的学习，已经完整体验过怎样写出一个HTML页面了，如图2.3所示。HTML页面由不同元素经过嵌套组成，下面讲解HTML页面所遵循的语法规则。
2.1.1 HTML语法规则
简单地来说，HTML的语法就是给文本加上表明文本含义的标签(Tag)，让人和浏览器能够更好地理解文本。本小节主要讲解概念，建立语法体系，案例较少。如果读起来感到困惑，可以先快速地过完这一部分内容，之后遇到问题时再返回查看。
1.HTML文档
HTML文档以 .html或.htm为文件后缀,来告知浏览器该文件的类型。
HTML文档的打开方式：双击.html文档即可在浏览器打开文件，如图2.4所示。
如何在打开时选择浏览器：
在XXX.html上单击右键，在“打开方式”中选择想要使用的浏览器，如图2.5所示。
2.元素
标签：HTML 标签是由尖括号包围的关键词，如：“p”是一个表明段落的关键词，给“p”加上标签，成为
标签。 元素：一个元素通常是由一个开始标签、内容，以及一个结束标签组成。结束标签中要写一个“/”来表示元素的结束，如图2.6所示。
3.属性
属性用来指定元素的附加信息，使元素个性化如图2.7、2.8所示，属性添加在开始标签中。属性由属性名和用双引号括起来的属性值组成，它们之间使用等号连接： <元素名 属性名="值1" 属性名="值2"></元素名>
大多数元素都可以使用的属性
id id名，唯一标识
class 类名， 标识一类元素
style 样式
title 描述信息
元素名和属性名都不区分大小写，一般习惯采用小写。
当元素拥有不止一个属性的时候，属性之间用空格隔开，如图2.9所示。
2.1.2页面的结构以及根元素
下面是一个最简单的HTML文档，如图2.10所示。
<!DOCTYPE html>声明版本和文档类型
<html>元素是页面的根元素，所有的HTML文档都应该有一个元素。<html>元素可以包含两个部分:<head>和<body>。
<head>元素用于包含整个网页的信息。
<title>元素里面写文档的名字，通常出现在浏览器最上面的窗口中。
<meta> 通常用于指定网页的描述，及其他元数据。<meta>元素的charset属性告知浏览器此页面属于什么字符编码格式。如：charset=“UTF-8”表示此页面遵循unicode(万国码)的编码标准。
<body>元素用来存放文档的具体内容。
<p>标签是文档的内容，表示一个段落。
2.1.3 元素的嵌套
1.什么是嵌套
把一个元素放入另一个元素中，称为元素的嵌套。如图2.11“<head>元素嵌套在<html>元素中”，“<p>元素嵌套在<body>元素中”，嵌套是HTML页面构建的方式。
2.将上面的页面转换为树形图的形式来帮助理解如图2.12所示。
3.使用元素的嵌套保证你的标签匹配
嵌套的一个重要作用就是保证你的标记正确匹配。
正确的标签匹配情况是：一个元素完全包含于另一个元素，如图2.13、2.14所示。
Tips:<em>标签的作用是强调内容
当两个元素互相交叉的时候，标签的匹配出现错误，如图2.15、2.16所示。
错误的嵌套可能导致网页无法在浏览器上使用。谨记嵌套，可以避免标签不匹配。
2.2文本元素
2.2.1.标题——<h1>到<h6>元素
HTML标题是通过 <h1> - <h6> 标签进行定义的,<h1> 定义最大的标题， <h6> 定义最小的标题，如图2.17、2.18所示。
Tips:浏览器会自动地在标题的前后添加空行。
请确保将<h1>到<h6>标签只用于标题，不要仅仅是为了生成粗体或大号的文本而使用标题标签。用户可以通过标题来快速浏览网页，所以用标题来呈现文档结构是很重要的。
应该将<h1>用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推至<h6>。这和一本书的结构是一样的，有章，有节，还有小节，其实h1到h6就是这个意思。
2.2.2 段落——<p>元素
在一篇文章中，一般会使用分段的形式划分不同的内容，使文章易于阅读。<p>标签可以在网页中实现分段的效果。每个段落都另起一行并且段落之间会有一些垂直的距离。
接下来通过一首古诗来了解p标签的样式 如图2.19、2.20所示。
由上面例子可以看到,浏览器会自动忽略了标签内部的换行。请记住，浏览器不会介意换行、回车和大多数的空格。因此，标签中的内容可以在任意一行开始，同一行或者任意一行结束。只需要确认元素是以开始标签开始，以结束标签结束就够了。
2.2.3 HTML 折行---<br/>元素
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用标签，如图2.21、2.22所示。
<br>没有任何内容的元素，也没有结束标签，因为它只代表换行。这类没有标记文本和结束标签的元素称为‘空元素’。
Tpis:
一般来说，html元素都需要开始标签和结束标签。但是空元素例外，这一类html元素没有内容，所以不需要闭合。
常见空标签： <br> 换行
<hr> 分隔线
<input> 文本框等
<img> 图片
<meta> 常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
元素的注释
在阅读一本书的时候，通常会在旁边写批注帮助理解。在代码的世界同样如此，通过写注释可以标注某一部分代码的功能，使代码易于阅读。
如果用<!--和-->这两个标记把内容括起来，浏览器就会把它们通通都忽略掉。
例如：在古诗最前面，加入“这是一首王维的古诗”这样的注释，且不显示在浏览器的页面中，如图2.23和2.24所示。
2.2.4 文本格式化
文本格式化标签可以实现文本的不同样式和意义，如<em>标签表示强调，<i>标签表示斜体，<strong>标
签表示加粗等。如图2.25、2.26所示。
格式化文本的效果完全可以使用字体的样式来代替，之后的CSS基础中我们会详细讲解这部分内容。所以格式文本并不常用，我们只需了解即可。
2.2.5 HTML 超链接--<a>元素
超链接<a>元素可以说是最重要的文本元素，先来认识一下网页中都在哪些地方使用<a>元素。
在浏览器的地址栏中输入baidu.com进入百度首页，在搜索栏中输入“超链接”。如图2.27所示。
点击第一个词条“超链接百度百科”，会跳转到另一个页面，如图2.28所示。
这一步操作中的跳转功能，就是通过超链接<a>元素来实现的。超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。
在图2.28页面的“目录”中，点击最后一条“动态静态”，可以看到，页面跳转到了同一页面的最下部，也就是“目录”中“动态静态”的位置。如图2.29所示。
从这一步操作中可以了解到，超链接还可以从一个网页跳转到相同页面的不同位置。
Tips:
所谓超链接，是指从一个网页指向一个目标的连接关系。这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
案例1：从一个页面跳转到另一个页面
准备好两个页面作为素材。新建文件夹“超链接”，在文件夹内新建两个文件夹，命名为“超链接1.html”和“超链接2.html”，如图2.30所示。
目标：使用<a>标签，“从超链接.html”跳转到“目标.html”。
首先，使用之前学过的元素，在目标页面中写任意内容,代码如图2.31所示。在浏览器运行测试页面是否能正常显示，结果如图2.32所示。
在“超链接.html”中写入一个<a>元素，在标签内写入文本“跳转到目标页面”并且指定<a>元素的href属性为目标链接的地址，代码如图2.33所示,在浏览器打开如图2.34所示。
这样，就在页面上成功写入了一个超链接，点击“跳转到目标页面”，页面跳转到“目标.html”。
成功跳转之后，来了解超链接中的属性和语法。
超链接的href属性
语法及介绍
<a> 标签的 href 属性用于指定超链接目标的 URL，比如“baidu.com”，如图2.35所示。
href属性的值可以是任何有效文档的相对路径或绝对路径。
2.2.6什么是绝对路径和相对路径？
1.绝对路径
平时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径。例如一张图片的路径：C:/website/img/photo.jpg。只要看到这个路径，不需要其他信息，就知道photo.jpg文件是在C盘的website目录下的img子目录中。
类似于这样完整的描述文件位置的路径就是绝对路径。
怎样查看文件的绝对路径：
在文件上单击右键，选择属性即可查看文件的路径信息，如图2.36所示。
2.相对路径
相对路径，顾名思义就是自己相对于目标位置，案例1中使用的就是相对路径。 例如：将文件夹1视为根目
录，文件1.html通过<a>元素链接到文件2.html。
在图2.37中，文件2.html的绝对路径是：文件夹1/网页文件/文件2.html，相对路径是：文件2.html。
将文件夹“网页文件”，从文件夹1移动到文件夹2，如图2.38所示。此时，文件2.html的绝对路径是：文件夹1/文件夹2/网页文件/文件2.html，相对路径是：文件2.html。
我们在写一个网站的时候，一般把多个页面放在一个文件夹下。当移动项目文件夹时，文件的绝对路径发生变化，相对路径不变。所以，如果一个文件夹里面有多个页面互相跳转的时候，请使用相对路径，避免因为文件夹的移动等因素造成的路径变化。
Tips:
url的写法
每使用一次”.. ”，就上溯一层父目录，如果你想上溯两层父目录，你可以这样写:“../..”
请严格的使用HTML语言中的符号，所有字符应该是英文字符，也不可以用”\”来代替”/”
小练习：
1.请把案例1中的相对路径改为绝对路径，尝试是否能够正常跳转。
2.以文件夹1为根目录，请写出下面文件的路径
（1）在文件1.html中，写出文件3.html的绝对路径和相对路径
（2）在文件5.html中，写出文件3.html的绝对路径和相对路径
案例2：从一个页面跳转到另一个页面的固定位置
本案例依然使用案例1中的两个页面作为素材，如图2.40 2.41所示。
页面中的某一位置夹了一个书签，通过书签来直接找到页面中这个被标记的位置。这个功能一般在目标页面的篇幅较长，出现滚动条的时候使用。
为了有明确的视觉效果，将目标页面中的小节内容复制二十次，并将小标题从一到二十排开。使页面变长，内容变多，如图2.42、2.43、2.44所示。
本案例的目标是：点击超链接，直接跳转到目标页面上第十二小节。
实现目标的思路是：给目标页面的第十二小节做标记，在超链接的href中添加这个标记，实现跳转到某一页面的标记位置。
1.在目标页面的十二小节处做标记。
Id属性会在文档中放置一个标志，id名是独一无二的。在一个html文档中，一个id不可以出现多次，如图2.45所示。
在html4之前，这个功能需要使用name属性来建立锚点，后被id属性代替。Html5已经不再支持name属性。
2.在超链接中添加这个标记
使用“#”+id名称的方式来寻找id标志，如图2.46所示。
此时，点击超链接，页面就会跳转到用id标记过的位置，如图2.47所示。
2.3 HTML图像——<img>元素
在 HTML 中，图像由 <img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用src属性，它的值是图像的地址，定义图像的标签如图2.48所示。
src属性
<img> 标签的 src 属性是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的绝对路径或相对路径。
Tips:
为了整理文档的存储，创作者通常会把图像文件存放在一个单独的文件夹中，而且通常会将这些目录命名为"pics" 或者 "images" 之类的名称。
width宽度和height高度
Width控制图片的宽度,height控制图片的高度。
如果没有设置宽高的话，浏览器上会显示图片原本的尺寸。
alt属性
当图片地址有误的时候，显示alt里面的文字内容。
小案例：设置图片的宽度和高度，并且在图片地址错误的时候用文字标注图片信息如图2.49、2.50、2.51所示。
一个超链接图片
把图片标签嵌套在超链接标签里面，得到一个超链接图片，如图2.52所示。点击图片，可以跳转到链接的地址，如图2.53、2.54所示。
2.4 列表
列表是一种常用的将内容分类的方法。
1.无序列表
当列表中的顺序不重要，更改次序不影响表达的时候，通常使用无序列表<ul>元素。无序列表的子项是且只
能是<li>元素，不可以在<ul>元素中嵌套其他元素。
不规定样式的时候，无序列表使用粗体圆点标识它的每一个子项，如图2.55、2.56所示。
2、有序列表
当列表的顺序有意义并且不能随意更改的时候，要使用有序列表<ul>。同样的，有序列表的子项同样只能是<li>元素。
不规定样式的时候，有序列表使用阿拉伯数字标识它的每一个子项，如图2.57、2.58所示。
3.自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始，如图2.59、2.60所示。
4.列表的嵌套
列表之间可以相互嵌套如图2.61、2.62所示。
列表嵌套的注意事项
首先来观察一位同学提交的小练习是否有问题，如图2.63、2.64所示。
从渲染结构上看，并不能发现问题所在。但是HTML的目的并不是为了表现外观，HTML使用不同标签的目的是构建合理的结构。从结构上分析，很容易找到上述案例的错误，如图2.65所示：
列表是一种表示顺序的文本形式，嵌套可以表现内容之前的包含关系。分析本案例的语义，可以得知这是一
个对饮料的分类，即饮料分为咖啡、茶、果汁、雪碧、可乐几种类型。其中，咖啡又包括意式浓缩、拿铁、卡布
奇诺三种，茶包括红茶、绿茶、果茶三种。
在上述案例中，1.将咖啡的具体种类与饮料种类放在了同一个级别，引起了结构的混淆。2.违反了<ul>元
素只能有<li>这一种元素作为子项。
本章作业：请完成本章开头的“本章任务”
