《web前端最佳实践》-HTML篇_html/css_WEB-ITnose
很多人把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)不要使用
推荐阅读
-
web前端篇:html基础知识
-
前端基础??CSS+DIV布局_html/css_WEB-ITnose
-
CSS非ASCII字符最佳实践_html/css_WEB-ITnose
-
自学篇之js 提取复选框和单选框的值 和纯css的3D按钮_html/css_WEB-ITnose
-
终于成为博客员的一员了,这是我的第一篇博文,写一个关于ul li内容宽度的问题和解决方案_html/css_WEB-ITnose
-
CSS-浮动篇float_html/css_WEB-ITnose
-
tips 前端 背景与元素的透明和模糊_html/css_WEB-ITnose
-
前端的哪些行为会坑到程序员?_html/css_WEB-ITnose
-
CSS 之 核心篇_html/css_WEB-ITnose
-
所历前端“姿势”更替记(其一)_html/css_WEB-ITnose
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论