Web开发人员都在广泛的使用HTML。无论你使用什么框架或者选择哪个后端语言，框架在变，但是HTML始终如一。尽管被广泛使用，但还是有一些标签或者属性是大部分开发者不熟知的。虽然现在有很多的模版引擎供我们使用，但是我们还是需要尽可能的熟练掌握HTML内容，就像CSS一样。- D; v$ w/ T$ j7 l % I5 ?$ e* j8 F; M+ q 注：所提到的标签和属性的兼容性需要大家根据实际场景来选取是否使用。 5 Y# I {* y- \0 ]6 E0 d 一、图片懒加载 1 a8 |% }% |# v { 图片懒加载可以帮助提升网站的性能和响应能力。图片懒加载可以避免立即加载那些不在屏幕中立即显示的图片素材，当用户滚动临近图片时再去开始加载。; x7 Z0 q. \( _ # A1 ]3 M# I! d7 _6 C( K) N1 W 往往我们都是通过javascript来实现的，通过监听页面滚动事件来确定加载对应的资源。但是在不完全考虑兼容性的场景下，我们其实可以通过图片文件添加loading="lazy"的属性来实现。3 f% `1 g- T& Q; b# X, Z/ x <img src="image.png" loading="lazy" alt="lazy" width="200" height="200" />二、输入提示 5 Y8 I7 Q- r1 |1 Y8 _ 当用户在进行输入搜索功能时，如果能够给出有效的提示，这会大大提升用户体验。输入建议和自动完成功能现在到处可见，我们可以使用Javascript添加输入建议，方法是在输入框上设置事件侦听器，然后将搜索到的关键词与预定义的建议相匹配。' d! A) I4 c W0 \7 d; f0 q W 8 @9 [) Z9 R4 F3 H3 R" ~, X- g <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 T5 S$ M9 ?5 a" Y$ N: t 你是否遇到过在不同场景或者不同尺寸的设备上面的时候，图片展示适配问题呢？我想大家都遇到过。针对只有一个尺寸的图片素材的时候，我们往往可以通过CSS的object-fit属性来进行裁切适配。但是有些时候需要针对不同的分辨率来显示不同尺寸的图片的场景的时候，我们是否可以直接通过HTML来实现呢？* R: t1 k6 R; M. \# B6 T- Y! p 7 {8 ^3 P% T% U8 m' ^ <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>6 j& J1 A7 p5 g! k 四、Base URL 4 \7 d+ \/ v9 j0 r + e! |3 ^& \4 k+ M <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>4 t0 `; `. b2 A 五、页面重定向（刷新） 4 E. X' i6 s0 ^0 t/ g ) A% t3 w1 D N1 a6 {7 r- B <meta http-equiv="refresh" content="4; URL='https://google.com' />+ L0 R% |& K* C: L* ~1 x' q% |7 y 六、后记 ) L& w( x8 q- b) Q+ T( y0 X HTML和CSS是非常强大的，哪怕我们仅仅使用这两种技术也能创建出一些奇妙的网站。虽然它们的使用量很大很普遍，还是有很多的开发者并没有真正的深入了解他们，还有很多的内容需要我们深入的去学习和理解，实践，有很多的技巧等待着我们去发现。# G. `3 N, d' h( Z0 Z 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2021-3-5 12:51:50