HTML5常用标签（2-4）链接标签及多媒体标签

栏目: Html5 · 发布时间: 6年前

内容简介：链接标签a

链接标签

<a> 标签用于定义超链接，超链接可以让用户从一个网页跳转到另一个网页。

<a> 标签最重要的属性是 href 属性，它指定了链接目标的 URL。

在浏览器中，通常超链接的默认外观是：

HTML5常用标签（2-4）链接标签及多媒体标签

注意

在 HTML 4.01 中， <a> 标签可以是超链接或锚。在 HTML5 中， <a> 标签始终是超链接，但是如果未设置 href 属性，则只是超链接的占位符。

HTML5 提供了一些新属性，同时不再支持一些 HTML 4.01 属性。

属性

属性	值	描述
download	filename	指定被下载的超链接目标。
href	URL	指定链接指向页面的 URL。
hreflang	language_code	指定被链接文档的语言。
media	media_query	指定被链接文档是为何种媒介/设备优化的。
rel	text	规定当前文档与被链接文档之间的关系。
target	_blank、_parent、_self、_top、framename	指定在何处打开超链接。 _blank：在新窗口中打开 _parent：在当前的父窗口中打开，如果不存在父窗口，此选项的行为方式与 _self 等同 _self：当前窗口打开（默认） _top：在整个窗口中打开 framename：在指定的框架中打开
type	MIME type	指定被链接文档的的 MIME 类型。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一个标题</title>
<body>
    <p> 异步社区<a href="https://www.epubit.com/">传送门</a></p>
</body>
</html>

异步社区：传送门

link

<link> 标签用于指定外部资源。

link 元素最常见的用途是链接样式表。

注意

link 元素定义了 6 个属性，其中 rel 属性是必选的，它说明了当前文档与被链接资源之间的关系。

属性

属性	值	描述
href	URL	指定被链接资源的 URL。
hreflang	language_code	指定被链接资源使用的语言。
sizes	HeightxWidth	指定图标的大小（比如 `sizes="16x16"` ）。
media	media_query	指定被链接的资源将被显示到什么设备上。
rel	alternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、tag	指定当前文档与被链接资源之间的关系。
type	MIME_type	规定被链接文档的 MIME 类型。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一个标题</title>
    <link rel="stylesheet" type="text/css" href="css/fishc.css" >
</head>
<body>
    <h1>我通过外部样式表进行格式化。</h1> 
    <p>我也一样！</p>
</body>
</html>

放在同级目录css文件内的fishc.css:

body{
    color: green;
}

我通过外部样式表进行格式化。

我也一样！

多媒体标签

video

<video> 标签定义视频，比如电影片段或其他视频流。

语法

vedio:autoplay|controls|height|loop|muted|poster|preload|src|width

属性值

属性	值	说明
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto、metadata、none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

支持格式说明

目前， <video> 元素支持三种视频格式：MP4、WebM、Ogg。

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器。

WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器。

Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器。

浏览器支持表：

浏览器	MP4	WebM	Ogg
Internet	Explorer	YES	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES	YES	YES

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一个标题</title>
</head>
<body>
    <video width="640" height="360" controls>
    <source src="随便一个视频地址或者自己服务器上的视频地址"  type="video/mp4">
    您的浏览器不支持 HTML5 video 标签。
    </video>
</body>
</html>

audio

<audio> 标签定义声音，比如音乐或其他音频流。

语法

audio:autoplay|controls|loop|muted|preload|src;

属性值

属性	值	说明
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loopNew	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto、metadata、none	规定当网页加载时，音频是否默认被加载以及如何被加载。
srcNew	URL	规定音频文件的 URL。

支持格式说明

目前， <audio> 标签定义声音，支持的3种文件格式：MP3、Wav、Ogg。

浏览器支持表：

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一个标题</title>
</head>
<body>
    <audio controls><source src="随便一个音频地址或者自己服务器上的音频地址" >
    您的浏览器不支持 audio 元素。
    </audio>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网