HTML的代码书写有哪些规范
程序员文章站
2022-04-13 08:02:03
...
这次给大家带来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="...">
引号
属性的定义,统一使用双引号。
相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
以上就是HTML的代码书写有哪些规范的详细内容,更多请关注其它相关文章!
下一篇: XHTML中有哪些常用的标签
推荐阅读
-
HTML的代码规范
-
《Wicket开发指南》一书的代码 wicket电信HTML
-
关于Google发布的JavaScript代码规范你要知道哪些
-
如何编写规范,灵活,稳定,高质量的HTML和css代码_html/css_WEB-ITnose
-
HTML 和 CSS 代码的规范_html/css_WEB-ITnose
-
HTML 和 CSS 代码的规范_html/css_WEB-ITnose
-
sublime - 嵌套在html里面的php代码该遵循怎样的规范
-
编码规范之编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范_html/css_WEB-ITnose
-
sublime - 嵌套在html里面的php代码该遵循怎样的规范
-
编码规范之编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范_html/css_WEB-ITnose