2020年2月17号--前端代码规范之HTML

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="&copy; 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代码。

1. 删除多余标签
2. 动态加载和渲染非关键区域
   在页面中某些区域并不是用户重点关注的区域，例如页面的广告，一些统计信息等，此类内容可以等待页面关键区域加载后通过javascript代码动态加载和显示。

谨慎使用iframe

iframe有两个缺点：1，iframe会阻塞主页面的Onload事件；2，iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。
如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
(最后一点不太清楚，继续学习，感谢大老的经验总结，先记录了)