HTML代码编码规范

时间：2021-03-05 20:32:36

博客来自：http://www.gbtags.com/gb/tutorials/215/1163.htm


个人主页：http://www.itit123.cn/ 更多干货等你来拿

 HTML代码编码规范

为了保证项目代码的质量，书写HTML和CSS相关代码的时候，需要遵循一定的规则和逻辑，虽然HTML相关代码没有太复杂的逻辑，并且记得一定要验证代码正确性，下面是一些相关的编码规范

书写符合兼容性的代码

为了保证代码一致性，需要保证HTML代码嵌套正确，比如，是否正确的闭合元素

  • 不符合编码规范
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
  • 符合编码规范
<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>

使用语义化的元素

选择和使用具体元素的时候，注意一定要选择能够正确表达HTML结构和逻辑的元素，否则不利于他人理解书写代码的逻辑性

  • 不符合编码规范
<span class="heading"><strong>欢迎登陆</span></strong>
<br><br>
好久没有登录本站，最近如何？
<br><br>
  • 符合编码规范
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>

使用正确的文档结构

文档结构是HTML编辑基础，确定使用最新正确的文档结构，不要随意的删除和添加基础文档结构

  • 不符合编码规范
<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>
  • 符合编码规范
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
</html>

保证语法的统一

随着页面内容的增加，管理HTML会非常的麻烦，好在这里有一些规则能够帮助我们将语法设计的更加干净和有组织。包扩：

  • 在元素名称，属性，值中使用小写字母
  • 缩进嵌套的元素
  • 严格使用双引号，不要写单引号，或者干脆不使用引号
  • 自闭合的元素不要写斜杠（例如，<img>）
  • 忽略boolean属性对应的值

下面是一对例子：

  • 不符合编码规范
<Aside>
<h3>Chicago</h3>
<H5 HIDDEN='HIDDEN'>City in Illinois</H5>
<img src=chicago.jpg alt="Chicago, the third most populous city in the United States" />
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</ASIDE>
  • 符合编码规范
<aside>
  <h3>Chicago</h3>
  <h5 hidden>City in Illinois</h5>
  <img src="chicago.jpg" alt="Chicago, the third most populous city in the United States">
  <ul>
    <li>234 square miles</li>
    <li>2.715 million residents</li>
  </ul>
</aside>

使用实在的ID或者Class值

创建id和class可能是书写HTML代码最坑的地方。这些定义必须和页面逻辑和结构息息相关，而并非仅仅用来定义页面的样式。下面是具体代码例子：

  • 不符合编码规范
<p class="red">出错，请刷新~</p>
  • 符合编码规范
<p class="alert">出错，请刷新~</p>

在图片中使用说明文字

书写图片中alt属性对应值，会帮助其它相关体验软件更好的识别文字，同时对于搜索引擎来说，alt属性能更好的帮助搜索引擎找到对应的内容

  • 不符合编码规范
<img src="puppy.jpg">
  • 符合编码规范
<img src="puppy.jpg" alt="漂亮的小宠物">

将内容和样式隔离

千万不要使用行内的样式。 这样会造成非常差的代码维护性和重用性。尽量使用外部的样式文件来定义样式。

  • 不符合编码规范
<p style="color: #393; font-size: 24px;">Thank you!</p>
  • 符合编码规范
<p class="alert-success">Thank you!</p>

避免过度使用div

div在过去的前端代码开发中会被广泛的使用，用来定义布局或者具体内容，但随着HTML5标准的发布，带来了一些新的HTML元素，例如：

  • section
  • article
  • aside
  • 更多

因此我们尽量使用语义明显的标签来构建布局，例子如下：

  • 不符合编码规范
<div class="container">
  <div class="article">
    <div class="headline">Headlines Across the World</div>
  </div>
</div>
  • 符合编码规范
<div class="container">
  <article>
    <h1>Headlines Across the World</h1>
  </article>
</div>


标签：

相关文章