HTML的代码书写有哪些规范-木庄网络博客

本文摘自PHP中文网，作者php中世界最好的语言，侵删。

这次给大家带来HTML的代码书写有哪些规范，书写HTML的代码的注意事项有哪些，下面就是实战案例，一起来看一下。

通用约定
标签

自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；
可选的闭合标签（closing tag），需闭合 ( 例如：</li> 或 </body>)；
尽量减少标签数量；

<img src="images/google.png" alt="Google">  
<input type="text" name="title">   
<ul>  
  <li>Style</li>  
  <li>Guide</li>  
</ul>  
<!-- Not recommended --> 
<span class="avatar">  
  <img src="...">  
</span>  
<!-- Recommended --> 
<img class="avatar" src="...">

Class 与 ID

class 应以功能或内容命名，不以表现形式命名；
class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
使用唯一的 id 作为 Javascript hook，同时避免创建无样式信息的 class；

<!-- Not recommended --> 
<div class="j-hook left contentWrapper"></div>   
<!-- Recommended --> 
<div id="j-hook" class="sidebar content-wrapper"></div>

属性顺序

HTML 属性应该按照特定的顺序出现以保证易读性。

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

<a id="..." class="..." data-modal="toggle" href="###"></a>  
   
<input class="form-control" type="text">  
   
<img src="..." alt="...">

引号

属性的定义，统一使用双引号。

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » HTML的代码书写有哪些规范

HTML的代码书写有哪些规范

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论