HTML——超链接、背景、音频、视频、内嵌框架标签

一、超链接

 当用户点击文字、图像、视频等页面元素时,页面会发生跳转,则这些页面元素就是超链接

1、超链接标签 

 <a href='url地址' target='页面打开的方式'>  页面元素(文字、图像、音频、视频)  </a>

  •   href 必须属性:值是要跳转的页面的地址,通常用'#'表示空链接
  •   target 属性:新页面打开的方式,取值有'_self'和'_blank'
             
                '_self':表示在原窗口打开页面(默认值)
                
                '_blank':表示在新窗口中打开页面

2、链接分类 

a. 外部链接

 <a href='http://www.qq.com' target='_blank'>  腾讯 </a>

b.内部链接

 <a href='01.html' >  公司简介  </a>

c.空链接:#

 <a href='#' >  公司地址 </a>

d.下载链接:压缩包 .zip/文件 .exe

 <a href='img.zip' >  下载文件 </a>

e.网页元素链接(文本、图像、表格......)

 <a href='http://www.baidu.com' >

        <img src='img.jpg'>

 </a>

f.锚点链接

点击链接,可快速定位到页面中某个位置

  • 第一步:在'锚点'位置给标签添加id属性
  • 第二步:在超链接位置中<a>标签的href属性值为'#id名'

在链接文本的 href 属性中,设置属性值为 #名字 形式

 <a href='#two'>  第2集 </a>

找到目标位置标签,添加一个 id 属性=刚才的名字

 <h3 id='two' >  第2集介绍</a>

二、给页面设置背景颜色、背景图像


       (1)背景色:给body标签添加bgcolor属性
       
       (2)背景图像:给body标签添加background属性 

三、 音频标签

<audio src="../audio/西海情歌.mp3" controls='controls' autoplay='autoplay'> </audio>
        

  •          'controls'属性:表示的是标签带有控制按扭
  •          'autoplay'属性:表示是否可以进行自动播放
  •          'loop'属性:表示循环播放    
  •          'src'属性:表示音频文件的地址
  •          'preload'属性:预加载属性,页面加载时音频也加载,并预备播放,若使用了'autoplay'属性则该属性被忽略

四、 视频标签

 <video src="#" controls='controls' autoplay='autoplay' poster="../images/avatar.png">       </video>
        
          'src'属性:表示视频文件的url
          
          'controls'属性:表示标签带有播放控制的按钮
          
          'autoplay'属性:表示是否可以进行自动播放
          
          'poster'属性:表示在视频文件下载时显示的图片
          
          'loop'属性:表示循环播放
          
          'height'属性:表示视频播放器的高度
          
          'width'属性:表示播放器的宽度

  三、内嵌框架标签:将页面显示在指定的位置


     <iframe src="002.html" frameborder="1" name="if" height="600" width="400"></iframe> 

猜你喜欢

转载自blog.csdn.net/hi_Celia/article/details/120762945