1.01.12 HTML常用标签

1.图片标签

  1. 图片标签格式:jpg jpeg png gif webp 等等

    • jpg jpeg不具备透明度
    • gif 动图
    • webp 同等质量图片的体积更小
  2. 文件路径

    • 网络路径

      • 例如:
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F29%2F20200329042030_uCcGM.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644545987&t=a44742004793c2446e40ac5959cddcc3" alt="">
    • 本地路径

      • 相对路径
        • 从当前的文件位置到另一个文件位置的所在的路径
        • 当前文件夹 ./ (./也可以忽略)
        • 上一级文件夹 …/
        • 例如:<img src="../img/图片名.png" alt="">
      • 绝对路径
        • 从盘符开始到目标文件所在的路径(建议不要使用)
        • 例如:<img src="C:\img\a\b\图片名.png" alt="">
    • base64位

      • 使用前得将图片转成字符编码
      • 例如:<img src="data:image/jpeg;base64,R0lGODlhLAEsAfQZAP///wUFBR8fHy8vLz8/P09PT19fX29vb39/f4+Pj5+fn6+vr7+/v8/Pz9/f3+/v7/sBAfAMDP85Of9qav+pqf/v7//。。。。。。。。。(转字符编码都会很长,省略)" alt="">
  3. alt属性与title属性

    • alt:当图片加载错误时,提示语句;也可以让屏幕阅读器掌握图片内容
    • title:鼠标悬浮时,显示的文字
  4. vspace属性与hspace属性(不建议使用的属性)

    • vspace:图片垂直间距——使用了会增加元素的上下间距
    • hspace:图片水平间距——使用了会增加元素的左右间距

2.布局元素div元素

  • 分割与包裹页面内容
    • 没有内外边距,但是独占一行
    • 相比于独占一行的p标签、ul标签等,不会有内外边距

3.框架元素iframe

  • 页面中的子窗口 iframe
    • src属性 嵌套别的页面的网络路径
    • frameborder属性 边框大小
    • 不常用

4.链接元素<a>标签

  1. a标签在电脑上的作用

    • 超链接
      • 站内跳转:网页转到自己写的另一个页面(自己服务器的另一网页)
      • 站外跳转:跳转到网络上的网页
    • 锚点
      • 去到页面的对应内容的位置
    • 回到顶部(相当于锚点)
    • 下载文件
    • 发送邮件
  2. a标签的属性

    1. href属性:

      • 超链接

        • href属性=“目标页面的地址”
        • 站内跳转——目标页面的地址像img的src那样的地址填写规则
          • 绝对路径
          • 相对路径
        • 站外跳转——目标页面的地址像img的src那样的地址填写规则
          • 网络路径
      • 锚点

        • href属性="#网页元素的id"
        • 例如:<a href="#list45"> </a>
      • 回到顶部

        • href属性="#top"(top可以省略,即可以写成:href="#")
        • 例如:<a href="#top"> </a>(<a href="#"> </a>)
      • 下载文件

        • href属性=“文件的路径”(img的src那样的地址填写规则)
        • 例如:<a href=./文件名字.ppt">下载文件</a>
      • 发送邮件

        • href=“mailto:邮箱地址?CC=抄送人地址&Subject=邮件的主题&Body=邮件内容”
        • 例如:<a href= " mailto: 1208989480@qq.com ?CC=zhuangzhanfen@gmail.com&Subject=今晚上分!&Body=不服solo?">发送邮件</a>
    2. target属性:当a标签是超链接的作用时,target属性定义如何打开链接

      • _self:当前窗口打开
      • _blank:新窗口打开
      • _parent:父窗口打开
      • _top:顶层串口打开
    3. download属性:当a标签是下载文件的作用时,download属性可以修改要下载的文件的文件名

      • 下载自己服务器的文件时,才能修改文件名,download属性才生效,否则不生效
      • download属性 接受一个 filename (文件名) 作为属性值或不设置任何属性值,download属性指示浏览器下载 URL 而不是导航到它,因此将提示用户将其保存为本地文件。
      • 例如:<a href=./文件名字.ppt" download="修改的文件名">下载文件</a>
  3. a标签在手机上的作用

    • 打电话
      • 例如:<a href="tel: 17688073824">拨打电话</a>
    • 发短信
      • 例如:<a href-"sms : 17688073824">发送短信</a>
    • 跳转到其他APP(唤醒APP)
      • 例如:
        <a href="taobao:">淘宝</a>
        <a href-"alipay:">支付宝</a>
        <a href="weixin:">微信</a>
        <a href="mqq:">QQ</a>
        <a href="baiduboxapp:">百度</a>
        <a href="BaiduSS0:">百度</a>
        <a href="openApp. j dMoblie:">京东</a>
        <a href="jd:">京东</a>
        <a href="bilibili:">打开bilibili</a>
    • 尝试:
      1. 在本地服务器运行web项目(例如:运行后wen项目的地址为:http://127.0.0.1:5500/html/0112%E7%BB%83%E4%B9%A02.html)
      2. 找到本地ip(例如ip为:192.168.64.42)
      3. 手机连接电脑的热点,使其处于同一个局域网
      4. 必要时需要关闭电脑防火墙,以防阻断手机对电脑本地服务器的访问
      5. 可以用手机访问该web项目,手机浏览器上填写网址:http://192.168.64.42:5500/html/0112%E7%BB%83%E4%B9%A02.html(即这是的127.0.0.1改为192.168.64.42)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值