1.图片标签
-
图片标签格式:jpg jpeg png gif webp 等等
- jpg jpeg不具备透明度
- gif 动图
- webp 同等质量图片的体积更小
-
文件路径
-
网络路径
- 例如:
<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="">
-
-
alt属性与title属性
- alt:当图片加载错误时,提示语句;也可以让屏幕阅读器掌握图片内容
- title:鼠标悬浮时,显示的文字
-
vspace属性与hspace属性(不建议使用的属性)
- vspace:图片垂直间距——使用了会增加元素的上下间距
- hspace:图片水平间距——使用了会增加元素的左右间距
2.布局元素div元素
- 分割与包裹页面内容
- 没有内外边距,但是独占一行
- 相比于独占一行的p标签、ul标签等,不会有内外边距
3.框架元素iframe
- 页面中的子窗口 iframe
- src属性 嵌套别的页面的网络路径
- frameborder属性 边框大小
- 不常用
4.链接元素<a>
标签
-
a标签在电脑上的作用
- 超链接
- 站内跳转:网页转到自己写的另一个页面(自己服务器的另一网页)
- 站外跳转:跳转到网络上的网页
- 锚点
- 去到页面的对应内容的位置
- 回到顶部(相当于锚点)
- 下载文件
- 发送邮件
- 超链接
-
a标签的属性
-
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>
-
-
target属性:当a标签是超链接的作用时,target属性定义如何打开链接
- _self:当前窗口打开
- _blank:新窗口打开
- _parent:父窗口打开
- _top:顶层串口打开
-
download属性:当a标签是下载文件的作用时,download属性可以修改要下载的文件的文件名
- 下载自己服务器的文件时,才能修改文件名,download属性才生效,否则不生效
- download属性 接受一个 filename (文件名) 作为属性值或不设置任何属性值,download属性指示浏览器下载 URL 而不是导航到它,因此将提示用户将其保存为本地文件。
- 例如:
<a href=./文件名字.ppt" download="修改的文件名">下载文件</a>
-
-
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>
- 例如:
- 尝试:
- 在本地服务器运行web项目(例如:运行后wen项目的地址为:
http://127.0.0.1:5500/html/0112%E7%BB%83%E4%B9%A02.html)
- 找到本地ip(例如ip为:192.168.64.42)
- 手机连接电脑的热点,使其处于同一个局域网
- 必要时需要关闭电脑防火墙,以防阻断手机对电脑本地服务器的访问
- 可以用手机访问该web项目,手机浏览器上填写网址:
http://192.168.64.42:5500/html/0112%E7%BB%83%E4%B9%A02.html(即这是的127.0.0.1改为192.168.64.42)
- 在本地服务器运行web项目(例如:运行后wen项目的地址为:
- 打电话