2020年2月17号–前端代码规范之HTML
HTML命名与格式
1、W3C建议HTML代码的所有标签名和属性都为小写
2、给所有的关键元素定义id和class属性,便于和css、js交互;id名称中的关键词用下划线( _ )连接,class名称中的关键词用( - )连接,根据实际意义和DOM树的层级关系定义合适的名称
3、HTML代码层级缩进为4个空格,值为空的元素单独占一行,包含子元素的起始标签和结束标签各单独占一行。
<divid="info_container"class="info-container">
<divclass="container-top"></div>
<article>
...
</article>
<divclass="container-bottom"></div>
</div>
CSS代码和HTML代码分离
方便代码的重用和维护
写标准的HTML代码
1、所有的HTML标签应该正确闭合
2、停止使用规范不支持的标签
3、停止使用规范不支持的属性
应该经常验证代码的标准性,可以使用w3c提供的验证工具:Unicorn。
合适的地方用合适的标签
就是要使得HTML标签语义化
给页面添加必要的meta
meta信息描述有关页面的信息,放在页面的head部分,用于搜索引擎更友好的识别。如下是常用的一些定义:
<meta name="author"content="John Doe">
<meta name="copyright"content="© 1997 Acme Corp.">
<meta name="keywords"content="corporate,guidelines,cataloging">
<meta name="date"content="1994-11-06T08:49:37+00:00">
不要省略某些标签的属性
<img>
标签的alt属性的作用是当图片不能正常显示的时候的替换文字,<a>
标签的title属性可作为说明信息,并且当鼠标hover时显示为提示信息。
CSS文件在前,JavaScript文件在后,JavaScript代码放到页面底部
JavaScript文件的下载和解析会阻塞页面的加载,所以在head部分,CSS的引用写在前面,而JavaScript文件的引用写在后面;
精简HTML代码
越精简的HTML代码,页面的传输的时间就会越短,页面的渲染的时间也会更快,相应的用户体验就会越好,所以很有必要精简页面加载的HTML代码。
- 删除多余标签
- 动态加载和渲染非关键区域
在页面中某些区域并不是用户重点关注的区域,例如页面的广告,一些统计信息等,此类内容可以等待页面关键区域加载后通过javascript代码动态加载和显示。
谨慎使用iframe
iframe有两个缺点:1,iframe会阻塞主页面的Onload事件;2,iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。
如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以可以绕开以上两个问题。
(最后一点不太清楚,继续学习,感谢大老的经验总结,先记录了)