web开发培训指南北京尚学堂.docVIP

北京尚学堂提供 HTML 语义 HTML5为我们提供了很多旨在精确描述内容的语义元素。确保你可以从它丰富的词汇中获益。 !-- bad -- div id=main div class=article div class=header h1Blog post/h1 pPublished: span21st Feb, 2015/span/p /div p…/p /div /div !-- good -- main article header h1Blog post/h1 pPublished: time datetime=2015-02-2121st Feb, 2015/time/p /header p…/p /article /main 你需要理解你正在使用的元素的语义。用一种错误的方式使用语义元素比保持中立更糟糕。 !-- bad -- h1 figure img alt=Company src=logo.png /figure /h1 !-- good -- h1 img alt=Company src=logo.png /h1 简洁 保持代码的简洁。忘记原来的XHTML习惯。 !-- bad -- !doctype html html lang=en head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleContact/title link rel=stylesheet href=style.css type=text/css / /head body h1Contact me/h1 label Email address: input type=email placeholder=you@ required=required / /label script src=main.js type=text/javascript/script /body /html !-- good -- !doctype html html lang=en meta charset=utf-8 titleContact/title link rel=stylesheet href=style.css h1Contact me/h1 label Email address: input type=email placeholder=you@ required /label script src=main.js/script /html 可访问性 可访问性不应该是以后再想的事情。提高网站不需要你成为一个WCAG专家，你完全可以通过修复一些小问题，从而造成一个巨大的变化，例如： 学习正确使用alt?属性 确保链接和按钮被同样地标记（不允许div） 不专门依靠颜色来传递信息 明确标注表单控件 !-- bad -- h1img alt=Logo src=logo.png/h1 !-- good -- h1img alt=My Company, Inc. src=logo.png/h1 语言 当定义语言和字符编码是可选择的时候，总是建议在文档级别同时声明，即使它们在你的HTTP标头已经详细说明。比任何其他字符编码更偏爱UTF-8。 !-- bad -- !doctype html titleHello, world./title !-- good -- !doctype html html lang=en meta charset=utf-8 titleHello, world./title /html 性能 除非有正当理由才能在内容前加载脚本，不要阻塞页面的渲染。如果你的样式表很重，开头就孤立那些绝对需要得样式，并在一个单独的样式表中推迟二次声明的加载。两个HTTP请求显然比一个慢，但是感知速度是最重要的因素。 !-- bad -- !doctype html meta charset=utf-8 script src=analytics.js/script titleHello, world./title p.../p !-- good -- !doctype html meta charset=utf-8 titleHello, world./title p.../p script src=analytics.js/script CSS 分号 虽然分号在技术上是CSS一个分