《Web前端开发》第3章 HTML常用标签.pptx

;HTML提供了丰富的标签用于添加文本、超链接、图像、多媒体、列表、表格和表单等页面元素。;3.1.1文本

3.段内换行br

由p构成的段落，段落结束才换行。如果需要段内换行，可以使用br/。;4.预留格式pre

默认情况下，段落内连续空格和空行只会被显示成一个空格，如果需要连续空格，可以使用特殊字符nbsp;产生空格。

注意，常用的特殊字符还包括小于号lt;、大于号gt;和○c版权符号copy;。

pre定义预格式化的文本，有时需要按照文本的原始格式显示在页面中，文本中的空格和换行符会被保留。;5.段内组合span

span标签可以组合一小段文字，以便对其单独进行样式设置。

6.强调strongem

strong表示重要的文本，em表示强调。strong内的文本通常默认粗体显示，em默认斜体显示。;7.水平分割线hr

hr/会显示为一条水平分割线，线条样式不可以设置。

8.注释

HTML代码可以使用!--和--添加注释，注释可以跨行，注释里面的内容不会显示在网页上。;3.1.2超链接

超链接被单击时可以跳转到外部网站或本网站其他网页，也可以跳转到当前网页的某个位置。超链接的载体可以是文字、图片等内容，格式如下：

ahref=跳转的目标位置文字或图片/a

（1）跳转到外部网站

如下代码可以单击“学习网站”字样，跳转到/zh-CN主页。

ahref=/zh-CN学习网站/a

（2）跳转到本网站另一个页面

（3）跳转到当前页面的特定位置

当网页文档内容较多，可以定义跳转到页面特定位置，常用于长文章页面的目录导航。首先需要定义页面的特定位置作为锚点，并用id属性给锚点命名；然后设置href属性为“#锚点名字”即可。

（4）虚拟超链接

当跳转位置暂时不确定时，可以采用虚拟超链接，即#，例如。

ahref=#学习网站/a

此时超链接文字仍会出现下划线，但是单击不会进行跳转。

;【例3-2】使用超链接，完成如图3-7所示的网页。;3.2图像、音频、视频;3.2.1图像

3.figure标签

figure可以将图片与图片标题组合在一起，图片用img标签，图片标题用figcaption标签。

4.绝对地址与相对地址

网页中引用其他图片、网页等资源时，需要给出这个资源的位置。这个位置可以是URL、绝对地址或者是相对地址。

（1）如果引用其他服务器资源，用URL表示。例如，

imgsrc=/img/w3school.gif/

（2）如果引用网页所在服务器其他资源，用相对地址表示。相对地址可以很方便的从网页文件所在的位置出发，找到资源所在位置。

;相对地址

;3.2.2音频

1.音频格式

常见的音频文件格式为.ogg、.mp3、.wav文件，其中.ogg与.mp3更方便用于网页。每种不同格式文件支持的浏览器不同，所以在网页中插入音频时常常引用同一个音频的不同文件格式，以保证浏览器正常播放。如果只有一种音频格式，可以使用在线转换工具进行格式转换。

;3.2.2音频

2.audio

（1）使用audio标签直接插入单一来源的音频文件，格式如下：

audiosrc=音频文件controls=controlsloop=loop/audio

其中，src取值由音频文件位置、文件名、后缀构成；controls属性可选，取值controls表示显示控制条；loop属性可选，取值loop表示循环播放。

【例】插入名为peppa.mp3的音频文件

audiosrc=peppa.mp3controls=controls浏览器不支持HTML5:audio/audio

（2）使用audio与source标签插入多来源的音频文件，

audiocontrols=controls

sourcesrc=peppa.mp3type=audio/mp3/source

sourcesrc=peppa.oggtype=audio/ogg/source

浏览器不支持HTML5:audio

/audio

;3.2.3视频

1.视频格式

常见的视频文件格式为.mp4、.webm、.ogg文件，不同文件格式之间可以相互转换。

2.video

（1）使用video标签直接插入单一来源的视频文件，格式如下：

videosrc=视频文件controls=contr