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)