整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
程序开发过程中，我们始终要谨记的一点就是：程序是写给人看的，不是写给机器看的。任何项目开发，都必须要考虑到人员迭代，我们不能让下一个接手你代码的人，在看到你写的代码时会说出这样的话，“这个代码是人写出来的吗？可读性太差了”。因此，我们必须遵循一定的规范，让代码的可读性更强。
今天，我们就一起来看下前端开发过程所能涉及到的跟HTML有关的规范问题。
HTML5
在HTML文件中，推荐使用支持HTML5特性的文档声明，<!DOCTYPE html>。
首先是在文件的命名上，应当采用驼峰式命名，首字母小写，后面每个单词首字母大写，而且对于具体的文件应当具有语义化，能够给人一种直观的感受这个文件的作用是什么。现在前端开发开发过程中都讲求模块化开发，甚至是组件化开发，在文件命名时更应该以模块名或者组件名来命名。
例如在写一个AngularJS应用时，由于会涉及到Controller，Service，Filter等概念，我们会分别建立一个文件，假如这个模块的名字是库存管理stockManage，我们可以这样来命名文件。
stockManageCtrl
stockChangeService
stockChangeFilter
我们所说的语义化指的是使用具有语义化的标签，在H5中添加了类似于header, nav, article, section, aside, footer等标签，从单词的意思上我们也很容易看出标签的含义。
我们不推荐使用只有div标签的页面，例如
不推荐使用
而是应该使用以下这种带有语义化的标签。
推荐使用
img标签是网页用来显示照片的标签，在页面所有标签中占据的比例非常之高，但是在使用img标签时也有下面需要注意的点。
给定width和height属性
因为浏览器在加载图片的过程中，需要先下载图片，然后再解析图片的高度和宽度，如果不给img元素设定高度和宽度，这样在图片加载过程中会不断的计算，重排页面的布局，在网络不好的时候就会经常出现元素出现不规律移动的情况。因此给img元素设定width和height属性是必要的。
alt属性
img标签的alt属性表示的是在图片无法显示时，使用文字来代替显示，它可以用在以下几个场景中：
网路延迟太大
src属性指定路径出错
浏览器禁用图像
由于其有良好的信息提示效果，并且有助于网页SEO效果，强烈建议在img标签中使用alt属性。
而且很重要的一点是img标签的引入是需要呈现出与页面相关的内容，其他情况应该使用CSS样式实现。例如我们不推荐下面这种情况。
不推荐
而推荐使用下面这种情况
推荐使用
前端文件主要包括HTML页面文件，CSS样式文件和Javascript脚本文件。我们应该让三者各司其职，在HTML中不应该出现CSS和JS表达式；在JS文件中，不应该出现大量的HTML和CSS代码。在HTML文档中应当尽量少的引入CSS和JS文件。为了保证文件的纯净，我们应当遵循下面的原则。
一个HTML文件应该只引入一个CSS文件
合理运用JS合并技术（Gulp, Webpack插件），保证引入JS文件不多于两个
不使用行内脚本元素（<script>alert('Hello World')</script>）
不在标签上使用style内联样式
不要使用style属性
脚本加载在网页加载过程中是一个很耗性能的过程，如果把JS文件放在head标签里，它的加载会一直阻塞DOM的解析，造成页面延迟。
因此现在讲求的是脚本的异步加载过程，我们会使用到async关键字，考虑到浏览器的兼容性，我们推荐使用下面的方式加载脚本。
推荐方式
合理使用ID和锚点可以非常方便的实现当前页面间的跳转，现在越来越多的教程网页由于是单页面，经常会用到锚点跳转。
对锚点知识还不了解的，可以看看我写的这篇文章《神奇的html锚点，让你的网页在内部自由的跳转》。
今天这篇文章主要总结了前端开发过程中的HTML规范问题，相信大家也或多或少遇到过，希望这篇文章能加深大家的认识。
者：sunshine小小倩
转发链接：https://juejin.im/post/592d4a5b0ce463006b43b6da
使用2个空格缩进
<ul>
<li>Fantastic</li>
<li>Great</li>
</ul>.example {
color: blue;
}只允许使用小写。
所有的代码都用小写字母：适用于元素名，属性，属性值（除了文本和CDATA）， 选择器，特性，特性值（除了字符串）。
<!-- 不推荐 -->
<A HREF="/">Home</A><!-- 推荐 -->
<img src="google.png"
alt="Google">建议删除行尾白空格。
<!-- 不推荐 -->
<p>What? </p><!-- 推荐 -->
<p>Yes please.</p>如果没有特殊需求，一般采用utf-8编码。如果是cms站点，则遵守该站点的编码规则。
<!-- 网页编码 -->
<meta charset="utf-8">尽可能的去解释你写的代码。说明该代码包括什么、目的是什么、能做什么、为什么使用它等。
注释是否需要详尽，取决于项目的复杂程度。
一般单行注释：
<!-- col -->模块间注释：
<!-- news -->
<div class="news">
<h2>News</h2>
<p>...</p>
</div>
<!--/ news -->循环注释：
<ul>
<!-- loop: new list -->
<li>new's title 1</li>
<li>new's title 2</li>
<li>new's title 3</li>
<li>new's title 4</li>
<li>new's title 5</li>
<!-- /loop: new list -->
</ul>cms输出注释：
<!-- cms: news list -->
<ul>
<li>new's title 1</li>
<li>new's title 2</li>
<li>new's title 3</li>
<li>new's title 4</li>
<li>new's title 5</li>
</ul>
<!-- /cms: news list -->Tab选项卡内容注释：
<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->使用html5文档声明，不再使用XHTML（application/xhtml+xml）。
HTML5是目前所有HTML文档类型中的首选：
<!DOCTYPE html>编写有效、正确的HTML代码，否则很难达到性能上的提升。
可以使用一些工具验证你的代码，如 W3C HTML validator
根据HTML各个元素的用途而去使用它们。
<!-- 不推荐 -->
<div class="col">
<div class="title">
news</div>
<p>list1</p>
<p>list2</p>
<p>list3</p>
</div><!-- 推荐 -->
<div class="col">
<h2 class="title">
news</h2>
<p>list1</p>
<p>list2</p>
<p>list3</p>
</div>部分标签说明：
不推荐使用的标签：
给多媒体元素，比如canvas、videos、 images增加alt属性，提高可用性（特别是常用的img标签，尽可量得加上alt属性，提供图片的描述信息）。
<!-- 不推荐 -->
<img src="world.jpg"><!-- 推荐 -->
<img src="world.jpg"
alt="our world images">在样式表和脚本的标签中忽略type属性。
HTML5默认type为text/css和text/javascript类型，所以没必要指定。即便是老浏览器也是支持的。
<!-- 不推荐 -->
<link rel="stylesheet"
href="//www.google.com/css/maia.css"
type="text/css">
<script src="
//www.google.com/
js/gweb/analytics/autotrack.js"
type="text/javascript">
</script><!-- 推荐 -->
<link rel="stylesheet"
href="//www.google.com/css/maia.css">
<script src="
//www.google.com/
js/gweb/analytics/autotrack.js">
</script>每个块元素、列表元素或表格元素都独占一行，每个子元素都相对于父元素进行缩进。按设计稿划分模块，尽量使页面模块化，模块与模块之前要有清晰的注释。
如上面页面框架，推荐写法：
<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
<!-- container -->
<div class="container">
<!--news-->
<div class="news">
<h2>news<h2>
<p>...</p>
</div>
<!--news-->
</div>
<!--/container-->
<!--sidebar-->
<div class="sidebar">
sidebar</div>
<!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->保证整个页面在未加载样式表时仍有较好的层次清晰的页面结构。
<!-- 不推荐 -->
<div class="logo">My Site</div>
<div class="nav">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">Mobile</a>
</div>
<div class="news">
<div>News</div>
<a href="#">
news list 1</a>
<a href="#">
news list 2</a>
<a href="#">
news list 3</a>
</div><!-- 推荐 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
<li><a href="#">
Home</a></li>
<li><a href="#">
News</a></li>
<li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
<h2>News</h2>
<ul>
<li><a href="#">
news list 1</a>
</li>
<li><a href="#">
news list 2</a>
</li>
<li><a href="#">
news list 3</a>
</li>
</ul>
</div>H标签使用
strong、b使用
将需要加粗的文字使用b标签来显示。
将需要强调的文字（主要指包含关键词的信息）使用strong标签来强调主要内容。
注：b是粗体标签，属于实体标签，它所包围的字符将被设为bold（粗体）；strong 是加重语气标签，属于逻辑标签，它的作用是加强字符语气。
在很多情况下，a都要使用title来说明该链接的相关说明或目的意义。
例如：当使用overflow隐藏掉a中的溢出文字时，该a中的title是必不可少的，它可以告诉用户被隐藏掉的文字内容是什么；又或者当一个图片型链接出现时，该a中的title同样是必不可少的，它可以告诉用户这个图片链接是做什么用的。
注：仅在img里添加alt标签在火狐提示文字是出不来的，alt是图片加载失败或未加载完全时显示出来的提示文字，要想鼠标移上去显示提示信息应该用title，严谨的写法是img里加入alt和title这两个标签。
代码保持精简，最优化，这样搜索引擎才更喜欢。
*请认真填写需求信息，我们会在24小时内与您取得联系。
