容易被忽略的5个HTML技巧

Souleigh ✨ 等级 514 0 0

对于所有 Web 开发人员来说,无论你选择的是哪种框架或后端语言,都需要大量使用 HTML(超文本标记语言)。

各种框架和编程语言可能会此消彼长,但 HTML 永不会过时。只是,就算 HTML 的应用如此广泛,这种语言中还是有不少多数开发人员都不了解的标签和属性。

而且,尽管市面上有各种模板引擎(例如 Pug)可用,但你仍然需要对 HTML 和 CSS 有所了解。

如果你经常使用 CSS,请查看我最近的博客,了解一些鲜为人知却非常有用的 CSS 属性:

https://medium.com/javascript-in-plain-english/6-css-properties-nobody-is-talking-about-e6cab5138d02

我认为,大家最好尽可能使用 HTML 特性来实现所需的功能,尽量不要动用 JavaScript。当然我也承认,HTML 写起来可能会枯燥无味。

虽然许多开发人员每天都在使用 HTML,但他们并没有试着提升自己的技能水平,没有想过真正用好一些鲜为人知的 HTML 特性。

以下是你应该了解的 5 个 HTML 标签和属性:

1. 延迟加载图像

图像延迟加载可以帮助开发人员提升网站性能和响应速度。

延迟加载可防止设备第一时间加载屏幕上尚不需要的图像。但是,当你向下滚动或靠近图像时,图像就会开始加载。

换句话说,当用户滚动时才加载图像,让图像变为可见,否则就不加载。

这可以通过纯 HTML 轻松实现。

你所要做的就是将 loading= "lazy"属性添加到你的图像文件中。

添加属性后,你的图片元素应如下所示:

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

使用谷歌的 Lighthouse 工具,你可以深入了解这一特性可以为你节省的内容加载字节数:

https://developers.google.com/web/tools/lighthouse/

2. 输入建议

尝试搜索什么事物时获取有用的关联建议确实会很有帮助。

如今,输入建议和自动完成功能相当流行,你一定已经在谷歌和 Facebook 等网站上注意到它们了。

你可以使用 JavaScript 添加输入建议,方法是在输入字段上设置一个事件侦听器,然后将搜索的术语与预定义建议进行匹配。

https://www.w3schools.com/howto/howto\_js\_autocomplete.asp

但是,HTML 也允许你使用标签显示一组预定义的建议。

请记住,此标签的 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. 图片标签

你是否遇到过图像无法按预期缩放的问题?我当然就遇到过很多次。

当你试图构建一个图像展示网站,或使用一个大尺寸图像并将其显示为缩略图时,往往就会发生这种情况。

更改视口宽度时,你可能会注意到某些图像未按预期缩放。

幸运的是,HTML 的标签使开发人员可以很轻松地解决这一问题,这个标签让你可以添加适合不同宽度的多个图像,而不必只对一张图上下缩放。

你的代码将如下所示:

<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>

如你所见,我们指定了特定图像必须显示的一个最小宽度。此标签与

4. Base URL

创建网站索引或站点地图时,这是我最喜欢的标签之一。

当你有很多锚标签重定向到某个 URL,并且所有 URL 都以相同的基础地址开头时,这个标签就会派上用场。

例如,如果我要指定 Elon Musk 和 Bill Gates 的 Twitter 内容的 URL,则 URL(域)的开头都会相同,而其后将是他们各自的 ID。

一般来说,我必须将链接与相同的域名一起粘贴两次。

但是,HTML 有一个标签,可用于设置基础 URL,如下所示:

<head>  
  <base href="https://www.twitter.com/" target="_blank">  
</head>  
<body>  
<img src="elonmusk" alt="Elon Musk">  
<a href="BillGates">Bill Gate</a>  
</body>

上面的代码将生成一个图像重定向到“https://www.twitter.com/elonmusk”和一个锚标记重定向到“https://www.twitter.com/billgates”。标签必须具有“href”或一个目标属性。

5. 文档刷新

如果要在页面一段时间不活动时,或者第一时间将用户重定向到另一个页面,只需使用纯 HTML 即可轻松实现。

当你打开某些站点时,你可能已经注意到了此特性,看到了“你将在 5 秒钟内被重定向”这一行文字。

此行为已烘焙到 HTML 中,你可以使用标签,在其上设置 http-equiv= "refresh"来启用它。

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

这里的 content 属性指定了重定向倒计时的秒数。值得注意的是,尽管谷歌声称将这种形式的重定向与其他重定向一样对待,但除非确实需要,否则使用这种类型的重定向是不明智的。

因此应该只在某些情况下才使用它,例如在长时间不活动后重定向页面。

最后的想法

HTML 和 CSS 非常强大,你可以只使用两者就构建出色的网站。

但是,尽管人们在大量使用这两种语言,可许多开发人员并没有真正沉浸其中。

除了上面我分享的一些技巧外,还有很多这样的技巧和窍门,当然它们都值得你在自己的项目中尝试。

如果你还计划使用 JavaScript,那么一定要查看我最近的博客,其中讨论了一些可以节省你时间的技巧:

https://medium.com/javascript-in-plain-english/5-modern-javascript-tips-and-tricks-to-save-time-7773aff6be26

学习任何东西并精通它都需要时间、奉献精神和实践,HTML 也不例外。

收藏
评论区

相关推荐

练习父组件调用子组件方法----发表评论案例
<DOCTYPE html <html lang"en" <head <meta ch
Golang高并发抓取HTML图片
版权所有,转载请注明:http://www.lenggirl.com/language/gopicture.html(https://links.jianshu.com/go?tohttp%3A%2F%2Fwww.lenggirl.com%2Flanguage%2Fgopicture.html) 使用准备 1.安装Golang 2.
ajax调接口处理表格(easyExcel)
ajax调接口处理表格 show you my codes. 页面新增按钮 html <DOCTYPE html <html lang"en" <head <meta httpequiv"ContentType" content"text/html; charsetGB2312"/ <title中登网信息导入</title <
容易被忽略的5个HTML技巧
对于所有 Web 开发人员来说,无论你选择的是哪种框架或后端语言,都需要大量使用 HTML(超文本标记语言)。 各种框架和编程语言可能会此消彼长,但 HTML 永不会过时。只是,就算 HTML 的应用如此广泛,这种语言中还是有不少多数开发人员都不了解的标签和属性。 而且,尽管市面上有各种模板引擎(例如 Pug)可用,但你仍然需要对 HTML 和 CSS
从零开发一款自动提取网页html并一键转换为md文件的工具(vue源码版)
最近几年涌现出了很多技术博客和技术社区, 也有很多技术同仁开始打造自己的博客, 我们可以把自己的博客同步到不同的技术平台, 但是随着技术平台的增多, 我们文章同步所花费的
破解大众点评的字体加密,这一篇就够了。
咕咕咕,我回来啦。 放了好久的鸽子,说好的写猫眼票房榜推了将近一个月,轻点打我 写猫眼需要先解决字体动态加密,所以先写一篇如何破解简单一点的XX点评字体加密。 下面正文开始: 大家爬取分析XX点评数据,最常见的无非两种: 1、分析所有店铺的各类评分和推荐菜等 2、获得店铺里的评论数据
去掉字符串中的html标签
有些时候只需要获取到字符串中的文字内容,不需要html标签,用以下代码实现 //去掉字符串中标签 content content.replace(/<.?/g, '').replace(/&nbsp;/ig, '').replace(/\s/ig, '')
Python Django开发 经验技巧总结(一)
1.前后台的数据传递view HTML:使用Django模版views.py代码:pythonfrom django.shortcuts import renderdef main_page(request): data 1,2,3,4 return render(request, 'index.html', {'data
js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
教你两招,轻松搞定html页面导出为pdf文件
Hi,大家好,我是麦洛,最近项目中遇到了将html页面导出为pdf文件,现在将相关内容分享出来,希望帮到有需要的伙伴 需求场景在招投标软件中,每个标段结束评标之后,都会生成评标报告评标报告主要包含项目信息,标段信息,投标人信息,投标人报价,评标专家打分等情况,相对来说信息量还是比较大,假如我们要导出评标报告该如何做? html页面直接导出为pdf 后端组装页
破解大众点评的字体加密,这一篇就够了。
咕咕咕,我回来啦。 放了好久的鸽子,说好的写猫眼票房榜推了将近一个月,轻点打我 写猫眼需要先解决字体动态加密,所以先写一篇如何破解简单一点的XX点评字体加密。 下面正文开始: 大家爬取分析XX点评数据,最常见的无非两种: 1、分析所有店铺的各类评分和推荐菜等2、获得店铺里的评论数据 之前写过一篇最火的文章,,就属于第一种。
天哪!几行js代码就可以实现拳皇小游戏
前言今天,我们用原生JS实现一个拳皇人物位置控制的小效果。话不多说,我们赶紧来看下如何实现吧!效果(非静止八神)分别按W、S、A、D键可实现位置移动,并且效果真实。源码html与css很简单,主要是js中有几点需要注意的。<!DOCTYPE html <html lang"en" <head  <meta charset"UTF8"  <title游
一篇文章带你了解JavaScript htmldom 元素
这篇文章将教会大家如何查找和访问网页中的HTML元素。一、找到HTML元素通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。找到DOM中的HTML元素的最简单的方法,是利用元素的id。使用id"intro"找到元素 :var myElement document.getElementById("in
html文本去掉html标签只留文本的解决方案
``` str.replace(/<[^>]+>/g,""); ``` 本文转自 [https://blog.csdn.net/JunZhao09/article/details/108649418](https://blog.csdn
小白怎么成为一个黑客?按照这个路线来!
大家好,我是周杰伦。接下来我会写系列的文章,给大家整理下网络安全的详细的学习步骤和学习资源推荐。今天的主题是——Web安全。Web安全是网络渗透中很重要的一个组成部分,今天跟大家聊一下,如何在三个月内从零基础掌握Web安全。 第一个月第一周:HTML+CSS,学会网页基本格式,学会编写基本网页,表单,学会用浏览器F12检查元素,查看源码 推荐学习地址: H