仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1340|回复: 8
打印 上一主题 下一主题

[HTML5] 给大家带来网页优化的最基本部分:HTML的优化

[复制链接]
简单生活 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:16:44 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
通过大家的心得,或许能找出"怎么学html5"这个问题的答案。另,我会不定期把群里面关于技术的讨论贴到本帖,敬请关注。破洛洛文章简介:网页优化的最基本的部分应当就是HTML的优化,详细来讲起首就是标志的清算,清算标志不单单能缩减文档的巨细,并且可以让文档更容易于保护进步搜刮引擎的可见度(Cleanmarkupmeansbetteraccessibility,easiermaintenance,andgoodsearchenginevisibility),可是即
在Perfectionkills上看到他客岁写的一篇文章,关于HTML优化的,讲的很具体,临时纪录之,只管内里有些器材其实不能在今朝的情况里使用。在以后WEB使用渐渐前端化的潮水下,对客户真个优化愈来愈遭到存眷,怎样削减代码,怎样让使用疾速的展现给用户,怎样削减用户守候工夫等等,如雅虎的34条优化黄金法例内里提出了细致的优化计划。
网页优化的最基本的部分应当就是HTML的优化,详细来讲起首就是标志的清算,清算标志不单单能缩减文档的巨细,并且可以让文档更容易于保护进步搜刮引擎的可见度(Cleanmarkupmeansbetteraccessibility,easiermaintenance,andgoodsearchenginevisibility),可是即使是那些号称高度优化过的网页,假如细心检察代码,仍旧能够发明良多能够删减大概已过期的标志用法:
1.script里的正文符
  1. <SCRIPTlanguage=javascript><!--Beginalert("daimaren.cn");//End--></script>
复制代码
除非是像95Netscape1.0这类几近尽迹的扫瞄器必要如许的处置,在年夜部分支流扫瞄器里,往剧本块里增加HTML正文是完整不必要的。
2.<![CDATA[…]>
  1. <scripttype="text/javascript">//<![CDATA[...//]]></script>
复制代码
这是别的一个常常在js代码块里增加的毛病防备措施,他是在处置真实的XHTML文档(“application/xhtml+xml”content-type)时为了避免代码将形如<号剖析为标签入手下手,一切在CDATA内包括的内容,城市被当做文本处置。可是实践情形是,今朝几近一切的网页的content-type都是text/html,也就是说它们不是严厉意义上的xml文档,而是只是text文本,以是这个毛病防备处置措施是完整没有需要的,即便你断定要撑持xml的文档,也要视情形公道的使用CDATA。
3.onclick=”…”,onmou搜索引擎优化ver=”“等等。
将事务属性写在HTML标签内是一种很不明智的做法,下降了代码的可保护性,同时净化了标签,假如将事务属性经由过程JS静态增加,不但能够天真把持,还能够使用JS客户端缓存的上风,让这些事务属性不用每次跟从文档哀求。
4.onclick=”javascript:…”
这是一个风趣的javascript凌乱,伪协定和内涵的事务处置程序能够构成高达10W多种过剩的组合,现实是事务属性外部的内容在剖析后成为body的一个fucution,这个function然后会作为事务处置程序,以是javascript:在此成为一个无用的过剩标签。
5.href=”javascript:void(0)”
持续javascript:伪协定,有一个臭名远扬的就是javascript:void(0),他是用来制止默许的锚点举措的,它在JS没法一般剖析大概堕落时(disabled/notavailable/errors)会使得锚点完整不成用,幻想的办理计划是在href里填写准确的URL,然后用JS往静态改写,如许即便在JS未实行的情形下也不会呈现锚点不成用的情况。HREF=“#”是一个精简和更快的替换计划。
6.style=”…”
没有甚么实质性的毛病,只是前期保护贫苦,别的移到外联的CSS文件中能够缓存起来进步页面实行效力。
7.<scriptlanguage=”Javascript”…>
最简单曲解的属性之一,以为这个是剧本的“言语”,这个属性是云云陈旧,在1999年就已不保举被利用了。
8.<scriptcharset=”…”…>
  1. <scripttype="text/javascript"charset="UTF-8">...</script>
复制代码
script标签的另外一个简单被曲解的属性,charset在HTML4.01里的形貌:请注重,charset属性是指字符的src属性所指定的剧本编码,它不触及的剧本元素的内容。(Notethatthecharsetattributereferstothecharacterencodingofthescriptdesignatedbythesrcattribute;itdoesnotconcernthecontentoftheSCRIPTelement.),也就是说他只在外联剧本的时分指定剧本文件的编码格局。不保举利用。
下面说的都是一些毛病大概不保举的用法,上面是一些能够公道疏忽以清算标志的属性:
1.<stylemedia=”all”…>
HTML4.01划定的默许媒体是“screen”,可是经由测试发明几近一切扫瞄器并未依照划定实行,而是用“all”替换,假如你要利用media=”all”,那倡议能够省略此属性。
2.<formmethod=”get”…>
form的默许method是get,以是假如要利用get能够不必再指明。
3.<inputtype=”text”…>
在HTML4.01和HTML5草案里划定了input的默许属性为text,以是能够疏忽。
4.<metahttp-equiv=”Content-type”…>
指定文件的字符编码一向都引发极年夜的凌乱,Content-type的优先级其实不比HTTPHEADER高,当二者都存在时,哀求头更优先,以是假如你能把持好服务器呼应,而且设置好HEADER,那MATE就能够平安的疏忽,除非页面必要当地扫瞄的时分。
5.<aid=”…”name=”…”…>
假如不想兼容陈旧的扫瞄器(如Netscape4),完整不必在一个元素上同时呈现ID和NAME。
上面是在HTML(非XHTML)下一些更极度的标志优化办法:

  • 删除正文
  • 删除代码空缺
  • 移除可选停止标签,如P标签能够不写停止标签
  • 移除属性引号
  • 移除布尔属性的值,如option的selected
  • 只管移除内联的款式和剧本等
  • 只管优化类和ID名
  • http://daimaren.cn-》//daimaren.cn
X啊,老外罗哩罗嗦的,最初再写点是关于毛病的,欠好优化示例:
1.移除doctype,HTMLCompresor是一个HTML优化工具,它会间接往失落文档声明,会招致页面触发奇异形式,很欠好。
2.用B替换STRONG用I替换EM。
HTMLCompresor会间接用B替换STRONG用I替换EM,B不是一个激烈的夸大,一样I和EM也纷歧样,B和I只是字体作风,他们会影响页面衬着,同时也不具有语义。
3.删除titlealt等标签属性。,勤俭字符和无停滞和用户体验的衡量,得失相当。
</p>
每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习html5viewport的使用能帮你做到这一点……
小魔女 该用户已被删除
沙发
发表于 2015-1-17 21:25:11 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
蒙在股里 该用户已被删除
板凳
发表于 2015-1-26 23:04:15 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
兰色精灵 该用户已被删除
地板
发表于 2015-2-5 06:52:39 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
若相依 该用户已被删除
5#
发表于 2015-2-11 08:16:48 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
飘飘悠悠 该用户已被删除
6#
发表于 2015-3-2 02:45:41 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
分手快乐 该用户已被删除
7#
发表于 2015-3-11 04:43:36 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
透明 该用户已被删除
8#
发表于 2015-3-17 22:12:00 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
只想知道 该用户已被删除
9#
发表于 2015-3-25 10:09:13 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-14 12:51

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表