学习目标：

1. 掌握文本控制标签的用法

2. 掌握图像标签的用法

3. 掌握列表标签的用法

4. 掌握超链接标签的用法

5. 熟悉结构标签的用法

6. 熟悉页面交互标签的用法

7. 熟悉全局属性的用法

HTML5是什么？

HyperText Markup Language 超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

HTML5标签和属性

HTML5即包含旧版本HTML的大部分标签和属性，也包含一些新的标签和属性。标签的应用使网页结构更加清晰明确，属性的应用使标签的功能更加强大。掌握标签和属性的用法是熟练使用HTML5制作的基础。

2.1文本控制标签

无论网页如何丰富，文字通常都是网页中最基本的元素之一。为了使文字排版整齐，结构清晰，HTML5提供了一系列文本控制标签。例如，页面格式化标签，文本格式化标签等。

2.1.1 页面格式化标签

结构清晰的文章通常通过标签，段落，分割线等对内容进行排列，网页也不例外。 为了使网页中的文字有条理地显示，HTML5提供了相应的页面格式化标签，例如 标题标签，段落标签，水平线标签，换行标签。

1.标题标签

标题标签用于见文本设置为标题，HTML5提供了6个等级的标题标签，即  , 

, 

, 

, 

, 
  .从

到 

,标题标签的重要性程度依次递减。标题标签的基本语法格式如下：

< hn>标题文本 

n的取值范围 1~6，代表1~6级标题；

 align为可选属性，用于指定标题的对齐方式。 align属性的取值如下：

left : 用于设置标题文字左对齐 （默认属性值）

center ：用于设置标题文字居中对齐

right ： 用于设置标题文字右对齐

基本语法如下：

标题方式  

注意：

1. 一个页面最好只使用一个

标签，该标签通常用在网站的Logo部分

2.由于标题标签拥有特殊的语义，切勿为了设置文字加粗或更改文字的大小而使用标题标签。

3.在HTML5中，一般不建议使用标题标签的 align 属性设置对齐方式，可使用css样式代码设置。

2.段落标签

要想使网页中的文字有条理地显示，还可以使用段落标签，它可以将整个网页的文字分为若干个段落。在网页中，可以使用

标签来定义段落。

标签是HTML5中常用的标签，默认情况下，一个段落的文字会根据浏览器窗口的大小自动换行。

标签的基本语法格式如下：

段落文本

align为

标签的可选属性，用于设置段落文本的对齐方式。

提示  ： 
表示换行

3.水平线标签

    在网页中，  水平线用于将段落与段落隔开，使网页内容结构清晰，层次分明。水平线可通过

标签来定义。

标签基本语法格式如下:

是单标签，在网页中输入“
” ,就可以添加一条默认样式的水平线。通过设置属性和属性值，可以更改水平线的样式。

标签的常用属性介绍

属性名作用属性值align用于设置水平线的对齐方式

标签的常用属性介绍

属性名作用属性值align用于设置水平线的对齐方式可选值包括 left，right，center（默认值）size用于设置水平线的粗细以像素（px）为单位，默认为2pxcolor用于设置水平线的颜色可为颜色的英文名称，十六进制颜色值，rgb（r，g，b）width用于设置水平线的宽度 可以是确定的像素值，也可以是浏览器窗口的百分比（默认值为100%）

注意：在实际工作中，不建议使用

的外观属性设置水平线的样式，最好通过css样式代码来设置。

4. 换行标签

在Word中，按“Enter”键可以将一段文字换行，但在网页中，如果想将某段文本强制换行显示，就需要使用换行标签
.

2.1.2 文本格式化标签

文本格式化标签用于为文字设置粗体，斜体或下划线等特殊的文本效果常用的文本格式化标签及文本显示效果

常用的文本格式化标签及文本显示效果

文本格式化标签文本显示效果标签和标签文本加粗显示标签和标签文本以添加下划线的样式显示标签和标签文本斜体显示标签和标签文本以添加删除线的样式显示标签文本斜体显示，该标签常用于标注引用的参考文献

上图中的文本格式化标签均为双标签

1.标签和标签

标签和标签均用于设置文本加粗显示，两者的区别在于：标签是物理标签(物理标签只用于设置显示样式），标签是逻辑标签（逻辑标签不仅用于设置显示标签，还用于将标签语义化，起强调作用）。推荐使用标签。

2.标签和标签

标签和标签军用于设置文本以添加下划线的样式显示。标签是物理标签，只用于设置下划线的显示样式。标签是逻辑标签，除了用于设置下划线的显示标签外，还用于将标签语义化。推荐用标签

3.标签和标签

标签和标签均用于设置文本斜体显示，标签是物理标签，标签是逻辑标签，推荐使用标签。

4.标签和标签

标签和标签均用于设置文本以添加删除线的样式显示。标签是物理标签，标签是逻辑标签。推荐用标签

5.标签

标签是一个逻辑标签，文本以斜体显示，其中的文本是对某个参考文献的引用。与标签，标签中的文本的显示样式相同，区别在于 标签着重强调引用的内容。

6.

 6.1  datetime ：

用于定义时间或日期，其值必须为一个有效的时间或日期，例如 14:00 ，2015-09-01  等 。 由机器解读，不会显示在页面中。

6.2 pubdate ：

用于设置文档的发布日期和时间，取值为pubdate ，可省略。

 7.标签

标签是一个逻辑标签，用于高连显示文本，以引起阅读者的注意。

2.1.3文本样式标签

文本样式标签用于设置文字效果。例如：字体，字号，文字颜色。

语法：  文本内容

标签用于设置文本样式，其常用的属性有3个：

属性名作用face设置字体，例如黑体，宋体等size设置字号，取1~7的整数值，无须添加单位color设置文字颜色

你好 陌生人

2.1.4特殊字符

2.2  图像标签

2.2.1  常用图像格式

1.GIF格式

特点： 支持动画，是一种无损压缩的图像格式。支持透明图像效果，适合在网页中使用。只能处理256种颜色，常用于Logo，小图标和其他色彩相对单一的图像

2.PNG格式

特点：图像体积小，支持AIpha透明（半透明，全透明）图像效果。不支持动画，只支持256种颜色。

3.JPEG格式

特点：有损压缩的图片格式，每次修改都会导致数据丢失，是专门为照片设计的图像格式。

2.2.2  图像标签及属性

语法： 

2.2.3  绝对路径和相对路径

在计算机查找文件时，需要明确该网页文件所在的位置，文件所在的位置称为路径。

1. 绝对路径

绝对路径就是网页中的文件或文件夹在盘符（C盘，D盘等）中的真正路径。

2. 相对路径

相对路径就是相当于当前文件的路径，没有盘符。以HTML网页文件为起点，通过层级关系描述目标图像的位置。                                     

设置相对路径的方法有三种：

2.1  图像和HTML网页文件位于同一文件夹：设置相对路径时，只需输入图像的名称即可。例如：

2.2  图像位于HTML网页文件的下一级文件夹：设置相对路径时，输入文件夹名和图像名两者用“/”

隔开。例如：< img src=" img / img01/logo.gif / >

2.3  图像位于HTML网页文件的上一个文件夹：设置相对路径时，在图像名之前添加“ ../ ” ;  如果位于上两级文件夹，则需要使用 “ ../ ../ ” 。例如：< img src=" ../logo.gif '' />

注意： 在网页中不推荐使用绝对路径，因为网页制作完成后会上传到服务器上，路径存储根目录会发生改变，使用绝对路径可能会导致路径存储根目录不存在。

2.3列表标签

一个网站由许多 个网页组成，每个网页中都有相应的信息。将这些信息以列表的方式呈现。HTML5中提供了三种列表，分别为无序列表，有序列表，定义列表

2.3.1无序列表

语法：

          

2.3.2有序列表

特点：各个列表项按照一定的顺序排列

语法：

         

2.3.3定义列表

特点：对名词进行解释和描述。无任何列表项目符号。

语法：

        

注意：

1. 

,
,
这3个标签之间不允许出现其他标签。

2.  标签必须与

标签相邻。

2.3.4 列表嵌套

代码：

 

                 
  • 列表1
    •              
  • 列表2
    •              
  • 列表3
    •            
  •                 
                          
    1. 列表1
      2.                    
    2. 列表2
      3.                    
    3. 列表3
      4.                 
               
    •          

2.4 超链接标签

想从首页跳转到其他页面，需要在首页的相应位置添加超链接。

2.4.1创建超链接

使用 标签创建

语法： 文本或图像

标签用于定义超链接，href属性和target属性为常用属性。

* href：用于指定链接页面的URL，当为标签设置href属性时，标签就具有了链接的功能。

* target：用于指定链接页面的打开方式，其取值包括_self 和 _blank 两个，其中 _self 为默认值，表示在原窗口打开链接页面，_blank 表示在新窗口打开链接页面

注意：

1.不确定链接目标时，通常将标签的 href 属性值设置为 “#” 即 href= “#” ，表示该链接为一个空链接。

2.在网页中不仅可以创建文本超链接，而且可以为网页元素(如图像，音频，视频等）创建超链接。

代码：

                      列表嵌套             

         点击跳转至360浏览器页面     
         点击跳转图像标签学习页面         
              

    

图示：

2.4.2 锚点链接

如果网页内容过多，页面过长，那么浏览页面还是就需要不断地拖动滚动条，这不方便。为了提高效率，HTML5提供了一种特殊的链接——锚点链接，通过锚点链接能够快速定位到目标内容。

创建锚点链接分为两步

（1） 创建锚点链接对象：

链接文本 < /a >

(2) 创建锚点跳转目标：

<标签 id=“ id ” > 显示内容

代码 1：

                      锚点链接              

1.字母A

   

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

2.字母B

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

3.字母C

    

CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

         

图示：

代码2

        文本链接 百度 新浪 网易

2.5 结构标签

结构标签是HTML5中新增的标签，用于丰富页面的功能结构。有

标签，