HTML5常用标签(2-4)链接标签及多媒体标签

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

内容简介:链接标签a

链接标签

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>

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

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Effective C++

Effective C++

梅耶 (Scott Meyers) / 侯捷 / 电子工业出版社 / 2011-1-1 / 65.00元

《Effective C++:改善程序与设计的55个具体做法(第3版)(中文版)(双色)》内容简介:有人说C++程序员可以分为两类,读过Effective C++的和没读过的。世界项级C++大师scott Meyers成名之作的第三版的确当得起这样的评价。当您读过《Effective C++:改善程序与设计的55个具体做法(第3版)(中文版)(双色)》之后,就获得了迅速提升自己C++功力的一个契机......一起来看看 《Effective C++》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具