您好,欢迎来到北京美业网! 北京网站建设咨询热线:13521800010
技术交流
您当前位置:美业网 >> 最新资讯 >> 技术交流 >> 浏览文章

网站建设干货之HTML5代码规范

时间:2017/5/6 11:12:40     信息来源:http://www.jswzjs.com     点击:

HTML 代码约定

很多 Web 开发人员对 HTML 的代码规范知之甚少。

在2000年至2010年,许多Web开发人员从 HTML 转换到 XHTML。

使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。

而针对于 HTML5 ,我们应该形成比较好的代码规范,以下提供了几种规范的建议。

使用正确的文档类型

文档类型声明位于HTML文档的第一行:

<!DOCTYPE html>

如果你想跟其他标签一样使用小写,可以使用以下代码:

<!doctype html>

使用小写元素名

HTML5 元素名可以使用大写和小写字母。

推荐使用小写字母:

  • 混合了大小写的风格是非常糟糕的。

  • 开发人员通常使用小写 (类似 XHTML)。

  • 小写风格看起来更加清爽。

  • 小写字母容易编写。

不推荐:

<SECTION>

<p>这是一个段落。</p>

</SECTION>

非常糟糕:

<Section>

<p>这是一个段落。</p>

</SECTION>

推荐:

<section>

<p>这是一个段落。</p>

</section>

除此之外,中星小编还介绍4款最受欢迎的HTML5/CSS3应用及代码,一起来看看吧。

1、基于HTML5 Canvas的图表插件Chart.js

chart.js是一款基于HTML5 Canvas的图表插件,chart.js的功能非常强大,它不仅提供了常见的柱形图、折线图、饼状图,而且还提供了环形图、雷达图,样式外观多样,图表的色彩搭配也比较清新。chart.js还有一个特点就是图表在初始化的时候有弹性动画特效,这也是HTML5 Canvas的一大功劳。

网站建设干货之HTML5代码规范

柱形图折线图饼状图环形图雷达图极线图

2、HTML5 3D动画柱状图表

这次我们要分享一款很酷的HTML5 3D图表应用,它是一款柱状图表,呈3D的外观样式,并且我们可以改变图表的颜色主题,让其更加符合你的需求。这款HTML5图表可以切换需要查看的图表数据,在切换的时候有不错的动画效果,而且,我们还可以切换图表的大小,以适应不同大小的浏览窗口。

网站建设干货之HTML5代码规范

3、CSS3 3D环形进度条 带进度百分比

这是一款基于纯CSS3的环形进度条,而且,从外观上看,这款进度条很有3D立体的感觉,尤其是在进度条上有立体的投影,显得非常小巧迷人。另外,进度条的环形中央带有进度百分比,可以实时根据进度来更新百分比的数值,和之前分享的HTML5/CSS3扇形进度条动画相比有一定优势。

网站建设干货之HTML5代码规范

4、纯CSS3垂直Tab菜单 Tab样式可自定义

Tab菜单在网页上使用起来非常方便,也比较节省空间,所以很多门户网站很喜欢用Tab菜单。今天我们要来分享一款垂直方向的Tab菜单,它是用纯CSS3实现的,加载和切换特别灵活。另外,Tab菜单的样式你可以使用CSS重新定义,扩展很方便。

、编码格式:使用UTF-8

请确保您的编辑器使用的字符编码为UTF-8,没有字节顺序标记。在html模板或文档中通过meta来定义编码格式。

6、注释

根据需要解释代码,这个就不多说了,团队开发这个非常重要,尽管很多时候大家不愿意遵守,但确实重要!

7、TODO待定项

尚未实现的或待定的内容一定要标识强调出来,利用TODO辨识,而非其他诸如@@来强调。在todo项中如果有必要列明联系人,比如负责人。在TODO后追加一个冒号作为行动内容,例如TODO:为网站增加html5模板。

本文由北京网站建设北京网站建设公司、美业网收集整理发布,如有转载请注明出处。
北京网站建设公司_北京网站设计公司
文章热词:HTML5 北京网站建设