天瑞地安科技集团：学习web前端最最容易被忽略的知识点

胜利召唤

  很多人把web标准挂在嘴边，却没有引起足够重视，只关注页面外在的表现而忽略页面本身代码的质量。天瑞地安科技集团帮大家总结了学习web前端最最容易被忽略的知识点。

一、web标准

标准的页面具有哪些优点？

    保证浏览器正确渲染 最大限度的保证页面在不同浏览器正常解析，同时还能最大限度保证在未来的各种客户端中正常解析。

    更容易被搜索引擎搜寻，提高网站搜索排名。标准的页面基本完成了一半的搜索引擎优化工作，搜索引擎的网络“爬虫”目的是读懂网站的内容，并找出网站关键字。合理使用标签和属性，可以帮助搜索引擎准确理解网站内容。

    提高网站易用性。让网站能被更多用户访问，比如视力或肢体障碍用户。

    更好的维护和扩展。 多个开发者如果遵循统一的标准，则会更好的理解和维护已有的页面。标签、样式、以及行为分离的标准页面显然具有更好的扩展性。

如何做到标准？

    标准的HTML页面结构，比如文档类型声明、head（title和引入的文件）、body等。

    正确闭合标签。

    停止使用不标准的标签和属性，简化代码。

    样式和结构分离。

    添加javascript禁用的提示信息。

    添加必要的<meta>标签，比如常用的keywords、description，设置IE浏览器的兼容模式，设置页面在移动设备中的显示等。

二、高可读性HTML的一些原则

    1、注意标签语义化，网页的外观看起来怎样跟浏览器的解析以及搜索引擎的抓取毫无关系，高可读性的html代码除了使开发者自身更易看懂和维护之外，最重要还是给机器去读的。

    2、没必要使用的标签就不要用，可以利用其它的方法去做到同样的效果，比如伪元素。 比较常见的使用不当之处有“分隔符”和“空标签清除浮动”等。

    3、使用一些非文字内容的时候，虽然看似使用空标签配合css就可以完成，但搜索引擎却不能得知它的作用，可以添加一些文字说明，然后再用css将其隐藏。这样做也便于第

    4、熟悉各标签上规范的属性，给html标签添加必要的属性 比如常见的：alt、title、for等。

    5、<br>应仅用于文本内容的换行，不应用于行级元素的换行。

    6、网页中的图片是使用<img>还是background？ 若作为页面内容的一部分，则使用img，若仅用于装饰，使用background。

此文是总结了一些汇道科技教学导师在实践教学当中所提到的知识，内容仅仅是冰山一角。希望能给对WEB前端有兴趣的朋友们有所帮助！