Html开发常用习惯:
引入CSS, JS
根据HTML5规范, 通常在引入CSS和JS时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值。
HTML5 规范链接
•使用link
•使用style
•使用script
<!-- External CSS -->
<link rel="stylesheet" href="code_guide.css">
<!-- In-document CSS -->
<style>
...
</style>
<!-- External JS -->
<script src="code_guide.js"></script>
<!-- In-document JS -->
<script>
...
</script>
属性顺序
属性应该按照特定的顺序出现以保证易读性;
•class
•id
•name
•data-*
•src, for, type, href, value , max-length, max, min, pattern
•placeholder, title, alt
•aria-*, role
•required, readonly, disabled
class是为高可复用组件设计的,所以应处在第一位;
id更加具体且应该尽量少使用,所以将它放在第二位。
<a class="..." id="..." data-modal="toggle" href="#">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">
boolean属性
boolean属性指不需要声明取值的属性,XHTML需要每个属性声明取值,但是HTML5并不需要;
更多内容可以参考 WhatWG section on boolean attributes:
boolean属性的存在表示取值为true,不存在则表示取值为false。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
JS生成标签
在JS文件中生成标签让内容变得更难查找,更难编辑,性能更差。应该尽量避免这种情况的出现。
减少标签数量
在编写HTML代码时,需要尽量避免多余的父节点;
很多时候,需要通过迭代和重构来使HTML变得更少。
<!-- Not well -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
上一篇:前端开发常用命名规范`
下一篇:Html开发常用习惯之(一)
该文本人以上希望对初学朋友有些帮助同时自己笔记留用,谢谢!
更多关注付义方技术博客:http://blog.csdn.net/fuyifang
或者直接用手机扫描二维码查看更多博文: