2021系列——2021年你必须知道的HTML标记和属性

myzbx 2024-12-02 22:38 52 浏览

据谷歌统计，全球有700多种编程语言，是不是听上去很耸人听闻？！现今，各种框架和各种编程语言一直是你方唱罢我登场，来来往往。

而对于HTML，不管你习惯与否，它始终在那。无论选择哪种框架或后端语言，所有Web开发人员都必须躲不开使用HTML。个人认为，即使是实现相同的功能，最好还是使用HTML编写，而非JS，尽管我也承认编写HTML可能显得比较“重体力”，而且很无聊。

HTML有如此广泛的用途和“坚强的生命力”，仍有开发人员所不太知晓的标签和属性。以下是您应该了解的5个HTML标记和属性：

1 . 懒加载图片

懒加载避免加载浏览器上那些不需要去即可加载的图像，而是当向下滑动页面或接近图像时，图像才开始加载。

换句话说，当用户下滑页面时加载图像，呈现他们，否则不做加载。懒加载图像可以帮助提高网站性能和响应速度。

这可以通过HTML轻松实现，所要做的就是将loading= “lazy”属性添加到图像文件中。

添加属性后，我们的图片元素会是这样：

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

通过使用Google的Lighthouse工具，你可以get到相关的一些技巧。

相关地址：https://developers.google.com/web/tools/lighthouse/

2 . 输入推荐

用户在做搜索录入时，如果能够拿到相关的输入内容推荐，应该会提升使用体验。

如今，输入补全推荐功能是相当普遍的，你可以在天猫、头条、抖音等太多平台见到。你可以通过JS添加输入补全推荐，方法是在输入字段上设置事件侦听，这样能够把搜索到的词条与预定义推荐进行匹配。

但是，通过HTML也可以使用<datalist>标签显示一组预定义的补足推荐，需要注意下，此标记的ID属性必须与输入字段列表属性相同。

<label for="country">Choose your country from the list:</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">
</datalist>

3 . 图片标签

你是否曾经遇到图像无法按预期缩放的情况？我是遇到过的，譬如当我要使用大图，同时把它显示为缩略图时，很可能会发生这种情况。

更改viewport width时，你会注意到某些图像未按预期缩放。幸运的是，HTML通过使用<picture>标记使开发人员很容易地解决这个问题，该标记允许你添加适合不同宽度的多个图像，而不必单个缩放。

如下所示：

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

如你看到的，我们指定了必须显示特定图像的最小宽度。

这个标签和<audio>和<video>标签非常相似。

4 . base URL

在创建网站索引或站点地图的时候，这应该算是我最喜欢的标签之一。

如果我们有很多锚标签重定向到某个URL，并且所有URL都以相同的base address开头时，这个标签应该非常有用。

例如，如果我要指定zhang san和wang er的微博handles的URL，则URL的开头会相同，而其后是它们各自的ID。通常，我必须将链接与相同的域名一起粘贴两次。

不过，HTML有一个<base> tag，这使我可以设置基本URL的标记，如下所示：

<head>
  <base href="https://www.weibo.com/" target="_blank">
</head>
<body>
<img src="zhangsan" alt="Zhang San">
<a href="wanger">Wang Er</a>
</body>

上面的代码将生成一个图像重定向到“ https://www.weibo.com/zhangsan”和一个锚标记重定向到“ https://www.weibo.com/wanger”。

这个<base> tab应该要么是具有“href”或是所提供对象的属性。

5 . 文档刷新

如果要把用户重定向到另一个页面，那么是可以用纯HTML来轻松实现的。

过往你打开某些网站的时，可能注意到了这个功能：弹出“你会在5秒钟内被重定向”。

你是可以通过<meta> tab，并对它进行设置http-equiv= “refresh”从而使用它。

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

在此，content属性指定重定向发生的秒数。

HTML加CSS是很强大，我们其实是可以仅使用它们两就构建出像样的网站的，只要你足够沉浸于其中，不断学习。

HTML 属性

上一篇：HTML中script标签中的那些属性
下一篇：前端初学者必看，这10 个CSS3 属性，你需要熟悉

2021系列——2021年你必须知道的HTML标记和属性

1 . 懒加载图片

2 . 输入推荐

3 . 图片标签

4 . base URL

5 . 文档刷新

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿