Web开发人员都在广泛的使用HTML。无论你使用什么框架或者选择哪个后端语言，框架在变，但是HTML始终如一。尽管被广泛使用，但还是有一些标签或者属性是大部分开发者不熟知的。虽然现在有很多的模版引擎供我们使用，但是我们还是需要尽可能的熟练掌握HTML内容，就像CSS一样。- U _+ h9 W1 ^* B, ?: b. U" }# g H7 ?/ ?+ m, H. w5 S& ], I$ | 注：所提到的标签和属性的兼容性需要大家根据实际场景来选取是否使用。 / H0 y; ?6 s Y R+ x 一、图片懒加载 4 Y l7 b* `. }4 Z 图片懒加载可以帮助提升网站的性能和响应能力。图片懒加载可以避免立即加载那些不在屏幕中立即显示的图片素材，当用户滚动临近图片时再去开始加载。5 G% H7 C0 Y! j7 @* F3 q" L 换言之，当用户滚动到图片出现时再进行加载，否则不加载。这就降低了屏幕内容展示过程中的图片素材的请求数量，提升了站点性能。4 T) D- _( P9 L1 ~# ` . z# {" c0 T* |- b! U" F0 c0 J <img src="image.png" loading="lazy" alt="lazy" width="200" height="200" />二、输入提示 . |: b5 U5 S9 z- X5 n 当用户在进行输入搜索功能时，如果能够给出有效的提示，这会大大提升用户体验。输入建议和自动完成功能现在到处可见，我们可以使用Javascript添加输入建议，方法是在输入框上设置事件侦听器，然后将搜索到的关键词与预定义的建议相匹配。$ r" J& ?' V3 p4 U: k 其实，HTML也是能够让我们来实现预定义输入建议功能的，通过<datalist>标签来实现。需要注意的是，使用时这个标签的id属性需要和input元素的list属性一致。4 i% u9 x8 |& z* ^4 B* p6 v <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标签 0 }1 p: s9 w% p' S& }+ T! X% w) O* e 2 A" T" C$ ^& x9 h& }/ B9 I : h8 T, S( c- ]0 _% d1 }, M7 E% k <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>, M) E [& O5 v4 S; C* S- u 四、Base URL % z3 A& @: e' Y 5 G" x. l: r. V- S2 z <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>- y( I: D2 t8 o6 v 五、页面重定向（刷新） 0 B: B( ?# J/ Z / `4 [* {0 v1 i8 [. p0 Z <meta http-equiv="refresh" content="4; URL='https://google.com' />) F: R% {2 g! C1 \" C6 @# n 六、后记 7 Y* q, y v0 \, n }6 A1 Z) m4 \* \& M" k. C 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2021-3-5 12:51:50