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>