HTML代码的基本规范有哪些

这篇文章主要讲解了“HTML代码的基本规范有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“HTML代码的基本规范有哪些”吧！
（1）HTML代码的基本规范
1. HTML的命名和格式
任何代码的混乱都是从命名和格式的混乱开始的，所以一定要有统一和规范的命名和格式，以下是一些基本的规范。
HTML代码所有的标签名和属性应该都为小写，虽然HTML代码是大小写不敏感的，但是W3c的规范建议为小写；属性值应该用双引号包括。
给所有的关键元素定义元素的id和class，便于和CSS，JavaScript的交互；id名称中的关键词用下划线（_）连接，class的关键词用中划线（-）连接，根据实际的意义和Dom树的层级关系定义合适的名称。
HTML代码的层级缩进为4个空格；值为空的元素定义应该单独占用一行；包含子元素的元素的起始标签和闭合标签分别单独占用一行。
例子：

…

2 CSS代码和HTML代码分离
样式可以直接写在标签的style属性里面，也可以写在页面head区域的style标签里面，这两种方式都是不好的方式，尤其第一种方式。应该把样式单独写到css样式文件中，方便代码的重用和维护。
3. 写标准的HTML代码
所有的HTML标签应该正确闭合；所有的元素定义都要有起始和闭合标签，即使元素的值为空，除了如下这些标签，如下的标签是可以自闭合：
停止规范不支持的标签，如下的标签规范已经不推荐使用，尽管浏览器可以正确的解析：
停止使用规范不支持的属性，如下的属性已经不推荐使用：body的background属性，某些标签的align属性，td和th上的nowrap属性，某些标签的width和height属性等。其实这些规范不推荐的标签和属性都是一些影响外观的标签和属性，都可以通过CSS样式来设置。
应该经常验证代码的标准性，可以使用w3c提供的验证工具:Unicorn。
（2）高可读性的HTML代码
1. 合适的地方用合适的标签
HTML代码不是纯粹为了让浏览器展现，也需要良好的可读性，方便代码的检查和维护，更重要的是各种搜索引擎也能更好地识别页面内容，所以要写有语义的HTML代码，即经常提到的HTML标签语义化。
div和span是两个典型的没有任何语义的标签，所以使用这两个标签之前先确认，是否有更具有语义的标签可以代替。

h2到h7是作为标题的，h2是最高级别的标题，网页中显示标题的地方应该使用这些标题标签。
和
这两个标签的语义是强调和重点强调，代替了没有任何语义的标签和。

table标签最早是经常用于布局，至今还有大量的页面是由table来布局的，table布局遭到了前端工程师们的一致唾弃，使得很多新手不敢使用这个标签了，这里要强调的是table的语义是表格，如果需要列出一些统计数据等，table标签是首选。

不好的例子：

正文内容，需要强调的内容

导航1
导航2
导航3

规范的例子：

正文内容，需要强调的内容

2. 给页面添加必要的meta
meta信息描述有关页面的信息，放在页面的head部分，用于搜索引擎更友好的识别。如下是常用的一些定义：




3. 不要省略某些免费云主机域名标签的属性
标签的alt属性的作用是当图片不能正常显示的时候的替换文字，标签的title属性可作为说明信息，并且当鼠标hover时显示为提示信息。
（3）高性能的HMTL代码
1. CSS文件在前，JavaScript文件在后，JavaScript代码放到页面底部
JavaScript文件的下载和解析会阻塞页面的加载，所以在head部分，CSS的引用写在前面，而JavaScript文件的引用写在后面；
另外script标签有两个属性async和defer,defer设置为true,则意味着此JavaScript文件滞后执行,不影响页面HTML的渲染，async是HTML5中新引入的属性，已经得到了大多数现代浏览器的支持，此属性设置为true意味着文件异步加载和执行。两个属性的区别是async下载完成后就会执行，而defer则会还是按照在页面的的次序来执行，所以下载和执行不一定会连续。可以根据实际的项目情况设置这两个属性，提高页面加载的速度。
2. 精简HTML代码
越精简的HTML代码，页面的传输的时间就会越短，页面的渲染的时间也会更快,相应的用户体验就会越好，所以很有必要精简页面加载的HTML代码。
页面的精简主要从如下几个地方入手：
删除多余标签
多余的标签大多是为了方便布局而加入的，例如如下的代码：

代码中最外层的div标签大部分情况下是没有必要，其内层的ul标签可以完全担当其作用，可以直接删除此标签，并适当调整ul的样式。
动态加载和渲染非关键区域
在页面中某些区域并不是用户重点关注的区域，例如页面的广告，一些统计信息等，此类内容可以等待页面关键区域加载后通过javascript代码动态加载和显示。
3. 谨慎使用iframe
iframe有两个缺点：1，iframe会阻塞主页面的Onload事件；2，iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。
如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。感谢各位的阅读，以上就是“HTML代码的基本规范有哪些”的内容了，经过本文的学习后，相信大家对HTML代码的基本规范有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@byun.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。百云主机公众号手机网站二维码Copyright Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有广州百云主机计算有限公司粤ICP备17096448号-1
粤公网安备 44010402001142号增值电信业务经营许可证编号：B1-20181529

相关推荐: Java位运算实例分析

本文小编为大家详细介绍“Java位运算实例分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“Java位运算实例分析”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。java位运算可以分为左移和右移，其中右移还有无符号右移。java只对…