Rumah >hujung hadapan web >html tutorial >HTML的代码书写有哪些规范

HTML的代码书写有哪些规范

php中世界最好的语言
php中世界最好的语言asal
2018-01-24 10:31:353247semak imbas

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

通用约定
标签

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

<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中文网其它相关文章!

相关阅读:

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

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

怎样用HTML和CSS做出大白

Atas ialah kandungan terperinci HTML的代码书写有哪些规范. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn