HTML常用标签

常用标签(二)

  • 超链接标签
    • 定义超链接标签
  • 多媒体标签
    • progress进度条标签
    • img标签
    • map标签
    • audio标签
    • video标签
    • embed标签
    • source标签

超链接标签

定义超链接标签

1、常用属性
a:常用属性

target :窗口的方式打开
            取值: _blank 在新窗口打开
                  _self 默认。在当前窗口中打开链接的文档。
                  _top 在框架顶部打开链接的文档(在整个窗口中打开被链接的文档)
            href: 用于从一个页面链接到另一个页面。记录需要跳转的地址
            

b:对应路径

a)绝对路径: 绝对路径要从根目录开始进行查找 需要添加对应的协议 file:///
            b) 相对路径: 相对于自己来进行查找,在跳转时不需要添加协议
                        ./ 当前目录
                        .// 上一级目录
            使用a标签来定义锚点。作用:快速找到页面中需要的位置
            锚点的实现:
                        1.需要找到的位置的定义a标签,a标签中添加id属性,属性名自定义
                        2.在需要跳转的a标签href属性的最后添加#后面跟锚点的名称来实现快速定位

2、代码

<body>
        
        
        <a href = "https://www.jd.com" target = "_blank">
            打开京东
        a>
                        
            
        <a href = "file:///F:\VS Code\HTML-workspace\code\day01\html.html" target = " _blank">
            绝对路径访问文件
        a>
        
         
        <a href = "../../code/day01/Demo.html" tarfet = "_blank">
           相对路径访问文件
        a>

多媒体标签

progress进度条标签

1、属性
a:progress属性

<p>
     需要配置属性:
     min 最小值
     max 最大值
     value 当前值
p>

b:meter属性

<p>
    需要配置属性:
    min 最小值
    max 最大值
    low 优化的最小值 警告的最小值
    high 优化的最大值 警告的最大值
    optimum 良好值
    value 当前值
p>

2、代码

<body>
        <progress id = "pro" min = "0" max = "100" value = "20">
            进度条标签
        progress>

        <meter min = 0 max = "100" value = "41">定义范围内的度量meter>
        <script>
            var obj = document.getElementById("pro");
           setInterval(function(){
            if(obj.value < 100){
                obj.vlue = obj.value + 1;
            }else{
                obj.value = 0;
            }
           },100);
        script>
    body>

img标签

1、属性

<img />
        <p>
            scr =图像路径
            注意:如果图片是绝对路径,那么必须加上协议。
            width 设置图像宽度
            height 设置图像高度
            注意:大小分 等比例大小(只设置高度或者宽度) 和 规定比例大小(同时设置高度和宽度)
            ismap 将点击的坐标传送到服务器
            usemap 图像定义为客户端图像映射
            图像映射:带有可点击区域的图像
            映射的实现:
                        uesmap属性值与<map name = "">map>标签的name属性进行关联,建立img和map标签之间的关系
        p>

2、代码

<body>
        <img src = "Wechat.jpg" height = "200" alt = "图片加载失败!" title = "傲娇"/>

        <a href = "">
            <img src = "Wechat.jpg" ismap/>
        a>
        <hr/>
        <a href = "http://www.jd.com" target = "_blank" >
            <img src = "Wechat.jpg" alt = "请点击!" usemap = ""/>
        a>
    body>

map标签

1、属性

<p>
   <map name="">map>
   定义和护短图像映射
   属性:name属性值,属性值自定义,在img标签中用usemap属性值通过#号查找对应name的属性值
   <area shape="" coords="" href="" alt="">
   定义图像映射图像的区域
   shape 定义区域的形状
   取值: rect 矩形 cricle 图 poly 多边形 dafault 默认整张图
   coords 定义区域的坐标值
   rect : 矩形对角的像素坐标值
   cricle : 圆心和半径值
   href 点击区域跳转的位置
   taget 打开的方式
p>

2、代码

<body>
    <img src = "Wechat.jpg" usemap = "#name" />
    <map name = "name">
        <area shape = "circle" coords = "350,300,1090,870" href = "http://www.jd.com" target = "_blank"/>
    map>
body>

audio标签

属性

<audio src=""> 加载音频audio>
        <p>
            autoplay 自动播放
            controls 播放控件 不可缺
            src 声音地址
            loop 循环播放
            preload 提前加载准备播放
        p>

video标签

属性

<video src="">加载视频video>
        <p>
            src 视频地址
            controls 播放控件
            height 视频高度
            width 视频宽度
            poster 定义视频在点击播放前显示的图像
            autoplay 自动播放
        p>

embed标签

属性

<embed src="" type="">
        
        <p>
            width 
            height
            src
            type 文件的mime类型
        p>

source标签

属性

<source/>
        
        <p>
            src 媒介的地址
            type 媒介的类型
        p>

你可能感兴趣的:(Web前端基础,html,前端,javascript)