什么是干净的HTML和CSS代码？ [英] What is a clean HTML and CSS code?

问题描述

<div class="mainHeader">
 <div class="row">
 <div style="float: left"><a class="img-Logo" href="/">
    <img src="/img/logo.png">
  </a></div>
  <div style="float: left" class="mainNAV">
    <div class="mainNAV-item"><a href="/">Home</a></div>   
  <div class="mainNAV-item"><span style="font-weight: bold; color: #000"><a href="/news">News</a></span></div>   
    <div class="mainNAV-ittem"><a href="/about">About</a>   </div>
    </div>
  </div>
</div>
  <div> </div>
  <div style="margin: 2em 1em 1.5em"><div class="artilce_title"><h1>ARTICLE TITLE</h1></div>   <h3 style="font-style: italic; font-size 18px">     By <a href="/authors/jon.doe">Jon Doe</a>
    </h3>
   </div>...<br><br><span style="color: red"></span><p>...</p>...<br><br><div style="font-size: 10px; color: #666"><span>
<a href="#" onclick="window.location='/authors/jon.doe'"><img style="border: 0" src="/img/uploads/jon.doe.jpg"></a>
  <div class="author-bio">
          Jon Doe is a staff writer for Example.com.
</div>
</span></div>
</div>

我尝试过：

What I have tried:

<div class="mainHeader">
 <div class="row">
 <div style="float: left"><a class="img-Logo" href="/">
    <img src="/img/logo.png">
  </a></div>
  <div style="float: left" class="mainNAV">
    <div class="mainNAV-item"><a href="/">Home</a></div>   
  <div class="mainNAV-item"><span style="font-weight: bold; color: #000"><a href="/news">News</a></span></div>   
    <div class="mainNAV-ittem"><a href="/about">About</a>   </div>
    </div>
  </div>
</div>
  <div> </div>
  <div style="margin: 2em 1em 1.5em"><div class="artilce_title"><h1>ARTICLE TITLE</h1></div>   <h3 style="font-style: italic; font-size 18px">     By <a href="/authors/jon.doe">Jon Doe</a>
    </h3>
   </div>...<br><br><span style="color: red"></span><p>...</p>...<br><br><div style="font-size: 10px; color: #666"><span>
<a href="#" onclick="window.location='/authors/jon.doe'"><img style="border: 0" src="/img/uploads/jon.doe.jpg"></a>
  <div class="author-bio">
          Jon Doe is a staff writer for Example.com.
</div>
</span></div>
</div>

推荐答案

当您混音时，您尝试过的是混乱内联样式定义。清理 HTML 严重依赖 CSS 来获得更少的维护，易于阅读的标记。此外，在设计标记时，您必须遵循HTML元素的正确结构，包括缩进，语义，命名元素等。这里有一篇文章描述：什么漂亮的HTML代码看起来像CSS-Tricks [ ^ ]



我建议你开始学习CSS，以便掌握它在HTML标记中的使用方法。如果你懒惰或没有进入UX设计，那么我建议你看看CSS boostrap。但是，您仍然需要学习CSS，因此会知道如何根据您的需要调整现有的样式定义。

What you've tried is messy as you are mixing inline style definition. Clean HTML heavily relies on CSS to obtain less maintenance, easy-to-read markup. Also when designing your markup, you have to follow proper structure of your HTML elements including indention, semantics, naming elements, etc. Here's an article describing: What Beautiful HTML Code Looks Like | CSS-Tricks[^]

I would suggest you to start learning CSS to get a grasp on how it use it in your HTML markup. If you're lazy or not into UX design, then I'd recommend you to look at CSS boostrap. However, you would still need to learn CSS so would know how to tweak existing style definition based on your needs.

这篇关于什么是干净的HTML和CSS代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！