前端代码指南(一)
2015-12-25 17:10
381 查看
本文翻译自bendc的《Frontend Guidelines》,由于篇幅过长,这里我分成了三篇,分别为HTML、CSS、Javascript,主要介绍了HTML/CSS/Javascript的代码指南,文章中所提出的指南也并不绝对,一切从实际出发,大家可以根据自己所需来取舍。说实话,英语真的不好,请见谅,欢迎大家纠错,Thanks。
前端代码指南(一)
前端代码指南(二)
前端代码指南(三)
但是请确保你了解你使用的语义化标签。如果错误地使用语义化标签还不如不用。
学会正确使用alt属性;
确保标记你的超链接和按钮(即让别人看到就明白那个地方是超链接或按钮)
不要仅使用色彩来传达意思(主要考虑视力障碍者)
显式地标记(label)字段(使用label标签)
如果觉得本文不错的话,帮忙点击下面的推荐哦
>>>>点击阅读原文
前端代码指南(一)
前端代码指南(二)
前端代码指南(三)
HTML
语义化
HTML5为我们提供了大量的语义化标签使我们可以准确地描述内容,所以请使用这些语义化标签。<!-- 糟糕的 --> <div id="main"> <div class="article"> <div class="header"> <h1>Blog post</h1> <p>Published: <span>21st Feb, 2015</span></p> </div> <p>…</p> </div> </div> <!-- 推荐的--> <main> <article> <header> <h1>Blog post</h1> <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p> </header> <p>…</p> </article> </main>
但是请确保你了解你使用的语义化标签。如果错误地使用语义化标签还不如不用。
<!-- 糟糕的 --> <h1> <figure> <img alt=Company src=logo.png> </figure> </h1> <!-- 推荐的 --> <h1> <img alt=Company src=logo.png> </h1>
简洁
保持代码简洁,忘记你XHTML的旧习惯。<!-- 糟糕的 --> <!doctype html> <html lang=en> <head> <meta http-equiv=Content-Type content="text/html; charset=utf-8" /> <title>Contact</title> <link rel=stylesheet href=style.css type=text/css /> </head> <body> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required=required /> </label> <script src=main.js type=text/javascript></script> </body> </html> <!-- 推荐的 --> <!doctype html> <html lang=en> <meta charset=utf-8> <title>Contact</title> <link rel=stylesheet href=style.css> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required> </label> <script src=main.js></script> </html>
可访问性
可访问性不是事后才解决的。你不需要成为一个WCAG专家才能提高你网站的可访问性,你可以通过修复一些小细节来实现,比如:学会正确使用alt属性;
确保标记你的超链接和按钮(即让别人看到就明白那个地方是超链接或按钮)
不要仅使用色彩来传达意思(主要考虑视力障碍者)
显式地标记(label)字段(使用label标签)
<!-- 糟糕的 --> <h1><img alt="Logo" src="logo.png"></h1> <!-- 推荐的 --> <h1><img alt="My Company, Inc." src="logo.png"></h1>
语言
虽然声明语言和字符编码是可选的,但是强烈建议在文档内声明(即使他们已经在HTTP头内指定)。编码格式建议优先考虑utf-8。<!-- 糟糕的 --> <!doctype html> <title>Hello, world.</title> <!-- 推荐的 --> <!doctype html> <html lang=en> <meta charset=utf-8> <title>Hello, world.</title> </html>
性能
除非某个脚本必须在内容之前加载,否则不要让js阻止页面的呈现。如果你的css文件很大,请将这个css文件分离为俩个css文件(需要首先加载的和
可延迟加载的)。俩个http请求虽然比一个慢得多,但是"感官上的速度"才是最重要的因素。
<!-- 糟糕的 --> <!doctype html> <meta charset=utf-8> <script src=analytics.js></script> <title>Hello, world.</title> <p>...</p> <!-- 推荐的 --> <!doctype html> <meta charset=utf-8> <title>Hello, world.</title> <p>...</p> <script src=analytics.js></script>
如果觉得本文不错的话,帮忙点击下面的推荐哦
>>>>点击阅读原文
相关文章推荐
- JSON-lib框架,转换JSON、XML不再困难
- List is a raw type. References to generic type List<E> should be parameterized
- css 文字长时不换行 显示...
- javascript之DOM操作
- jQuery基础事件
- CSS 笔记二(Text/Fonts/Links/Lists)
- 在javascript中关于submit和button提交表单区别
- extjs 按条件查询出的数据在grid上不显示
- jQuery事件对象
- javascript图片预加载实例分析
- jQuery动画效果
- js数据过滤
- javascript中的super
- 【JAVASCRIPT】JS实现淘宝,百度评分功能
- CSS3中REM使用详解
- jQuery事件
- js方法数据验证
- 为<hr>添加样式
- 不得不分享的JavaScript常用方法函数集(下)
- 常用jstl标签小结