Web开发人员都在广泛的使用HTML。无论你使用什么框架或者选择哪个后端语言，框架在变，但是HTML始终如一。尽管被广泛使用，但还是有一些标签或者属性是大部分开发者不熟知的。虽然现在有很多的模版引擎供我们使用，但是我们还是需要尽可能的熟练掌握HTML内容，就像CSS一样。. S0 m) g7 ]; S 前端开发中最好尽可能使用HTML特性来实现我们的功能，而不是使用JavaScript实现相同的功能，尽管编写HTML可能会是重复的和无聊的。许多开发人员每天都在使用HTML，但他们并没有尝试改进自己的项目，也没有真正利用HTML的一些鲜为人知的特性。下面这5个通过HTML标签/属性实现的功能虽然不常提及但也很有用。1 c" n- C; P# i M 注：所提到的标签和属性的兼容性需要大家根据实际场景来选取是否使用。 ; W a# g1 @/ h* D; x' j 一、图片懒加载 ; K4 u5 ?3 Q: c0 d 9 h7 t7 S* o; Q& n 换言之，当用户滚动到图片出现时再进行加载，否则不加载。这就降低了屏幕内容展示过程中的图片素材的请求数量，提升了站点性能。4 r u. Z+ K. U* b [# C 往往我们都是通过javascript来实现的，通过监听页面滚动事件来确定加载对应的资源。但是在不完全考虑兼容性的场景下，我们其实可以通过图片文件添加loading="lazy"的属性来实现。- d& S2 d. u' u8 |* z6 w2 l( r <img src="image.png" loading="lazy" alt="lazy" width="200" height="200" /> 二、输入提示 4 }# ]3 ]9 H% b4 Y 当用户在进行输入搜索功能时，如果能够给出有效的提示，这会大大提升用户体验。输入建议和自动完成功能现在到处可见，我们可以使用Javascript添加输入建议，方法是在输入框上设置事件侦听器，然后将搜索到的关键词与预定义的建议相匹配。7 O0 E- {+ m. R1 D" B; c5 u, ~ 其实，HTML也是能够让我们来实现预定义输入建议功能的，通过<datalist>标签来实现。需要注意的是，使用时这个标签的id属性需要和input元素的list属性一致。+ H6 x' w V8 E6 m' d0 ^ <p><label for="country">请选择喜欢的国家:</label></p><p><input list="countries" name="country" id="country"></p><p><datalist id="countries"></p><p> <option value="UK"></p><p> <option value="Germany"></p><p> <option value="USA"></p><p> <option value="Japan"></p><p> <option value="India"></p><p> <option value=“China”></p><p></datalist></p> 三、Picture标签 + ?; c# o% ]: g 你是否遇到过在不同场景或者不同尺寸的设备上面的时候，图片展示适配问题呢？我想大家都遇到过。针对只有一个尺寸的图片素材的时候，我们往往可以通过CSS的object-fit属性来进行裁切适配。但是有些时候需要针对不同的分辨率来显示不同尺寸的图片的场景的时候，我们是否可以直接通过HTML来实现呢？1 A1 ~6 s' e5 W' ^9 p HTML提供了<picture>标签，允许我们来添加多张图片资源，并且根据不同的分辨率需求来展示不同的图片。2 Q% F8 [! q( x* U/ Q) _+ l6 n <p><picture></p><p> <source media="(min-width:768px)" srcset="med_flower.jpg"></p><p> <source media="(min-width:495px)" srcset="small_flower.jpg"></p><p> <img src="high_flower" style="width: auto;" /></p><p></picture></p> ) b( M, H: Z0 @) Q4 h 四、Base URL 0 z+ K& Z; `7 Z6 O- r6 l ! }% X1 {: p% L" c. h' Y <p><head></p><p> <base href="https://www.weibo.com/" target="_blank"> </p><p></head></p><p><body></p><p> <a href="jackiechan">成龙</a></p><p> <a href="kukoujialing">贾玲</a></p><p></body></p> 0 j$ z2 M/ ?: E5 z1 E h 五、页面重定向（刷新） 2 N! m3 O3 Y' r+ U& h! F4 U% G ! W; }" C7 M3 K" O4 ?) m( t <meta http-equiv="refresh" content="4; URL='https://google.com' /> " C. H1 T! R }: N- _+ ^: ], i1 D- G 六、后记 1 l1 U* t+ k9 h 0 V( a# z$ z9 u- K- P) v1 m1 c5 G 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2021-3-5 12:51:50