不常提及但使用有效的HTML技巧

图片懒加载

可以通过为图片文件添加loading="lazy"的属性来实现:

<img src="image.png" loading="lazy" alt="lazy" width="200" height="200" />

输入提示

HTML也是能够让我们来实现预定义输入建议功能的,通过标签来实现。需要注意的是,使用时这个标签的id属性需要和input元素的list属性一致。

<label for="country">请选择国家:</label>
<input list="countries" name="country" id="country">
<datalist id="countries">
  <option value="UK">
  <option value="Germany">
  <option value="USA">
  <option value="Japan">
  <option value="India">
  <option value=“China”>
</datalist>

Picture标签

HTML提供了标签,允许我们来添加多张图片资源,并且根据不同的分辨率需求来展示不同的图片。

<picture>
  <source media="(min-width:768px)" srcset="med_flower.jpg">
  <source media="(min-width:495px)" srcset="small_flower.jpg">
  <img src="high_flower" style="width: auto;" />
</picture>

我们可以定义不同区间的最小分辨率来确定图片素材,这个标签的使用有些类似和标签。

Base URL

<head>
  <base href="https://www.weibo.com/" target="_blank">  
</head>
<body>
  <a href="jackiechan">成龙</a>
  <a href="kukoujialing">贾玲</a>
</body>

页面重定向(刷新)

<meta http-equiv="refresh" content="4; URL='https://google.com' />

转自:前端技术网站

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值