一、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)不要用展示表单的文本,应使用
(4)给输入控件设置合适的水印提示,所谓水印提示,即在未填写之前里面所显示的内容,当控件获取焦点,或者用户开始输入时消失。可使用placeholder属性,IE9以下可使用jquery-placeholder插件模拟。
(5)如有必要,设置tab顺序。很多用户会有使用键盘tab键来切换到下一个输入框的习惯,默认情况下,会安装界面上的分布顺序来处理,如需要特殊设定,可设置tabindex属性值。
(6)使用html5中新引入的表单控件类型,如url、email、search等。高级浏览器有很好的支持,不支持它们的浏览器会以text类型控件展现。
精简html代码
1、删除多余容器,比较典型的是
和
,这是两个没有任何语义,常被滥用的标签。 2、装饰性元素使用css实现。如背景、伪元素等。
3、避免使用table布局,是代码更少,更清晰,避免因重绘或重排而降低性能。
过时的块级和行内元素
每个使用css的人都了解过这两个概念,但是,却都是从样式的角度去理解原生的元素,有点不妥,而且它本身跟“结构与表现分离”的思路有违背,html5中淡化了二者的定义,更具体的分成了7类。 它们是:元数据式内容、流式内容、章节式内容、标题式内容、段落式内容、嵌入式内容和交互式内容。
从内容模型来说,以前对于块级和行内元素中内容有一些限制,html5结束了这种复杂的局面,从实际需求出发重新定义了内容模型。比如元素可以包含块状元素了。还有其他的很多差异,需要大家有重新的认识。
三、小叙Html5
先来看几个时间点。
2012年12月17日,HTML5定义完成。
2014年6月17日,发布标准草案的最终征求意见稿。
2014年10月28日,W3C发布HTML5正式推荐标准。
新特性的使用
近几年,HTML5的概念被炒的过头了,给人感觉是酷炫,甚至“无所不能”,然而它只是一个新的web标准。是对几个应用比较广泛的特性的讨论。
1、简化定义方式。
避免不必要的复杂性,比如文档类型声明、定义页面编码、样式和脚步的引用方式等。
2、使用新标签和新属性。
新标签:
语义化标签:
功能性标签:
新的输入控件类型:tel、search、email等
新属性:
相关课程推荐
![](//m.sbmmt.com/img/upload/course/000/000/001/5d1c6df423564706.jpg)
javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。没有它,你的前端生涯是不完整的。《php.cn独孤九贱(3)-JavaScript视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了javascript知识。
JavaScript教程141537次播放
![](//m.sbmmt.com/img/upload/course/000/000/001/5d1c6e0d2b744633.jpg)
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等,是全球最流行的前端开发框架之一。PHP中文网根据最新版本,独家录制jQuery最新视频教程,回馈PHP中文网的新老用户。
jQuery教程116233次播放
![](//m.sbmmt.com/img/upload/course/000/000/015/612f16c1e1c8e978.jpg)
jQuery是最流行的JS函数库,封装了许多实用的功能,其中最引人入胜的就是Ajax。
jQuery中的Ajax操作,语法简单,操作方便,使Ajax从未如此轻松,前端人员从此不再为与服务器异步交互而发愁,本套课程,精选了最常用的几个方法,从基本的语法到每个参数,再到具体实例进行了全面的讲解。
AJAX教程15866次播放
![](//m.sbmmt.com/img/upload/course/000/000/015/617b8f8af2b97409.jpg)
Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。
Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
Git 与常用的版本控制工具 CVS, Subversion 等不同,它采用了分布式版本库的方式,不必服务器端软件支持
JavaScript教程13837次播放
1/1
![]()