《web前端最佳实践》-HTML篇_html/css_WEB-ITnose

一、web标准

很多人把web标准挂在嘴边，却没有引起足够重视，只关注页面外在的表现而忽略页面本身代码的质量。

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

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

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

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

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

如何做到标准？

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

• 正确闭合标签。

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

• 样式和结构分离。

• 添加javascript禁用的提示信息。

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

二、高可读性HTML

一些小原则

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

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

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

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

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

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

常用几类标签的正确使用方式

网页标题层级

标题标签指的是h1~h6这6个标签，统称hx标签，相比其他的语义标签，标签会受到搜索引擎的“特殊照顾。

(1)在标题处应使用。

(2)页面中只使用一个h1标签，搜索引擎会给予它最高权重。其他模块标题标签从h2开始。

(3)标签使用过程中不要跳级，保持层级连贯性。

(4)不要单纯使用标签给内容设置样式。

正确设计表单

(1)不要使用

(2)不要用展示表单的文本，应使用(用于为输入控件定义文本)；指定关联控件只需把相关控件的id赋予的for属性，这样做不仅把元素触发的事件指向了相关表单元素，扩大了可操作范围，也从语义上绑定了两者。 (3)使用

(4)给输入控件设置合适的水印提示，所谓水印提示，即在未填写之前里面所显示的内容，当控件获取焦点，或者用户开始输入时消失。可使用placeholder属性，IE9以下可使用jquery-placeholder插件模拟。

(5)如有必要，设置tab顺序。很多用户会有使用键盘tab键来切换到下一个输入框的习惯，默认情况下，会安装界面上的分布顺序来处理，如需要特殊设定，可设置tabindex属性值。

(6)使用html5中新引入的表单控件类型，如url、email、search等。高级浏览器有很好的支持，不支持它们的浏览器会以text类型控件展现。

精简html代码

1、删除多余容器，比较典型的是