最近網路上看了很多html開發中那些問題和不好的習慣,順手總結一下。 一、上下間距 在開發中你會發現你明明設定的兩個p標籤上下間距為20px但你實際測量中會發現他會多4~8px,這是為什麼!如果你是老司機我想我就不用多說了, 因為設計稿中量的都是字與字上下的間距,其實你寫p標籤檢查一下元素,p表標籤會有留白,大概是會有上下都有2px左右的留白。這樣的話在加上你的 上邊距或下邊距你在量的時候就多了點。 lt;meta charset="UTF-8">##1; <br> *{<br> *{<br># padding: 0;<br> }<br> p:nth-child(1){<br> margin-bottom: 20px;<br> lt}<br> style lt}<br> style ; <body><br> < p>p1</p><br> <p>p2</p><br> </body><br></html><br></p></div>[# ;<p></html></p> <p></p>」當量。我們上邊是20px的下外邊距這時我們測量一下;<p><img src="https://img.php.cn/upload/article/000/000/001/617d23889b863ccd0efc5c82c0ad3639-0.png" alt=""> ps:如果你有【FQ工具的話】不妨在Google瀏覽器商城下載一個Page Ruler,個人認為非常好用的一個測量網頁的工具。 </p> <p> </p>發現沒有20的間距成功的變成25,這就是p標籤的留白。 <p></p> <p><img src="https://img.php.cn/upload/article/000/000/001/617d23889b863ccd0efc5c82c0ad3639-1.png" alt="">二、錯誤的巢狀</p> <p> </p> <p><img src="https://img.php.cn/upload/article/000/000/001/9524835e02365187c9b22b16f4c3a537-2.png" alt="">這種巢狀當裡面寫有內容時,當一個螢幕看不完時,一時嵌套錯誤這個可就有你煩的了。最好的解決嗎?我感覺還是註釋,一個好的註釋習慣,讓你更快找到自己的問題還有利於團隊的發展。 </p> <p> </p>這樣時你還會找錯嗎?當你修改時是不是更方便了。 <p></p> <p></p>三、form和table到底先寫誰,當然這個問題只會發生在新手身上<div class="cnblogs_Highlighter"></div> 錯誤:<p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;gutter:true;"><table><form><tr><td>..... </td></tr></form></table></pre><div class="contentsignin">登入後複製</div></div><div class="cnblogs_Highlighter"></div> 正確:######<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;gutter:true;"><form><table><tr><td>..... </td></tr></table></form></pre><div class="contentsignin">登入後複製</div></div>####<p> 按我个人的理解来说,把form写在table中太别扭了。因为table是一个完整的格式,所以说用from来包裹table。</p> <p> </p> <p>四、省略img alt 属性 </p> <p> 当你在网速不佳或图片无法显示的时候,他的作用就来了。你可以带有你图片的描述,让用户在没看到的前提下,也明白这是什么。</p> <p>五、大量使用转义标签 如: ; ⁢ >..........</p> <p> 因为在每个浏览器如 :  默认宽度是不等的,所以当你使用大量  ; 时换个浏览器他就变了。所以说现在这莫多好用的方式为啥还用如此</p> <p> lo的转义标签, 其实还有比较实用的如:©; © 版权商标等等; </p> <p>六、错误的提示方式。</p> <p> 当你给了用户错误的提示时,你说收集的数据也将会出现很大的偏差,如:“请输入地址” ,这个地址你是要家庭地址呢!还是现住地址呢!还又是公司地址呢!所以明确的提示很重要。</p> <p> </p> <p>七、页面中包含太多刷新的步骤。</p> <p> 通过ajax局部刷新,来减少页面的重复加载。增强用户的体验。</p> <p> 八、偏爱于一款浏览器,由于浏览器内核不同,他支持的效果也不同,当你偏爱于一款浏览器时,你在别的浏览器你会崩溃的 。</p> <p> ps:当然IE除外 IE 低版本太可怕,都这个年代了坚决抵制 IE 低版本,当然这只是个人看法,毕竟有数据支持用 IE 低版本用户是有还是又不算少的用户群</p> <p> 有的比如:国企采购 windows 自带 IE 而且国企为了安全买回来后没有升级那一说。当外包到一个国企而且进门不让带手机的,到时候你就明白了。</p>