HTML的代码书写有哪些规范


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

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

通用约定
标签

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

1

2

3

4

5

6

7

8

9

10

11

12

<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;

1

2

3

4

<!-- 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

1

2

3

4

5

<a id="..." class="..." data-modal="toggle" href="###"></a

   

<input class="form-control" type="text"

   

<img src="..." alt="...">

引号

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

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

相关阅读:

HTML你一定要知道的优化技巧

html的元素水平垂直居中应该怎么设置

怎样用HTML和CSS做出大白

以上就是HTML的代码书写有哪些规范的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html文件的中文乱码问题与在浏览器中的显示问题

详解Html中相似的标签和属性的有什么区别

Html是什么?Html网页的简单设计方法介绍

为什么使用div+css布局?

手把手教你使用css给Html字体添加边框效果(代码分享)

Html看什么书

Html的<keygen>标签

Html表单边框怎么加颜色?Html form标签的边框颜色实例

Html的元素水平垂直居中应该怎么设置

Html中浮动与清除浮动

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...