web标准主要强调的是一个网站的结构,样式,行为。这三者在网站进行编写的时候应该尽量做的分离,从而达到结构清晰,易于阅读,易于维护的目的。那么我们又该如何进行分离呢?
其实答案就是按结构,样式,行为来分,哈哈。而更具体的说就是将所有html代码放在html文件中,将css代码放在css文件中,将js代码放在js文件中。接下来,进一步阐明三门语言各自的职责。
HTML:HTML作为整个页面的骨架。负责的对整个页面内容的进行合理的组织,同时通过语义化的标记使得页面的内容易于读者阅读,利于SEO。应该做到的点:
1.结构良好:良好的结构将有利于页面的拓展,且会影响到后续CSS,JS代码的质量,推荐篇文章
2.做到标签的语义化:例如如果是标题那么请记得用h1-h6,如果是语气的加强请使用strong.我觉得这方面有个很好的入口点就是设想你的页面是为“盲人阅读者而写”的。而盲人是无法看到样式的加粗来得知该内容的强调的内容。其对该内容为强调是通过阅读机来语气的加强来得知的。而阅读机则是想搜索引擎一样是通过标签的语义来进行判断的
3.标签字母要小写
4.标签要闭合
5.标签不允许随意嵌套CSS:CSS主要是负责页面的样式,使得页面的不至太过于单调乏味,也是页面的的内容布局更为优美,给访问者以美感。
JS:javascript使得页面具有具有动态性,交互性。想想各种鼠标hover时的想过,轮播图。可知js使得页面更加的丰富多彩。另一方面,js也是得一些例如表单检验的工作可以提前在客户端完成,进一步提升了用户体验。
最后,想强调一下我在《DOM编程艺术》中get到的一个思想,"平稳退化,渐进增强"。具体的阐释是这样的:
1.渐进增强:先实现最基本的页面功能,然后在此基础上进行优化,使得页面的行为更加的丰富,进而提高用户体验。
2.平稳退化:通常我们都会通过js来实现某种效果,从而达到提高用户体验的目的。但试想如果用户浏览器禁用了js,页面的最基本用能是否还能使用?如表单的填写,内容的展示。
其中有一个例子至今印象深刻,对于注册登录时。通常我们都是提供一个登录或注册按钮。然后检测按钮的click事件,并将form表单设置为display:none;用户的浏览器无法使用js想想是否该网站的登录,注册功能便变得无法使用了。而作者提供的解决方法是用a作为按钮。设为<a href="login.html">登录</a>
,而在js中通过hack登陆按钮的click事件来达到能用js时,点击登陆按钮弹出登陆框的效果(当然在click事件发生时会通过阻止默认事件使得页面不跳转),而当js不能使用时,也能通过跳转单独的登录页面进行登录功能的使用。书感觉还是挺好的,尤其是里面的思想,建议有空找来阅读阅读。