仓酷云

标题: 来谈谈：经由过程语义化的标签削减DIV简化网页代码 [打印本页]

作者: 海妖 时间: 2015-1-15 23:25
标题: 来谈谈：经由过程语义化的标签削减DIV简化网页代码
所有的设计第一步就是构思，构思好了。
网页制造poluoluo文章简介：削减代码和语义化标签.
假如你在天生页面的时分过量的利用div，那你有需要浏览这篇文章了。本文次要存眷怎样经由过程语义化的标签、削减div利用等办法来简化代码。你是不是在修正或人的页面时，被他的七零八落的代码弄晕乎？简便的代码不仅便利本人，同时便利你的团队成员。他在你调试页面或编纂的时分节俭你的工夫（特别关于年夜的项目来讲）。
1、往失落不用要的div标签
我看到很多多少人都在form或ul列表的表面嵌进一个div布局，为何要嵌进这个你不必要的div那？你能够经由过程给响应的语义化的标签订义、援用新的css就能够到达一样的效果。
实例1：
一下案例展现的是怎样往失落div标签并界说一个新的款式给form标签。

实例2
偶然我们为了完成内容间间距的效果而在内容的表面嵌进一个过剩的div标签。一下例子的右边增添了<div></div>来完成间距。可是，既然每一个布局内里都含有题目标签h4,我们就能够给h4设置margin属性来完成间距，从而省往过剩的<div></div>布局。

2、利用语义化的标签
在页面制造过程当中，应只管利用语义化的标签（如：h1界说题目，P界说段落笔墨，ul界说列表项目），即便不界说css款式，你的文档也是成心义的。

实例：
一下图片对照了div界说的布局和语义化标签订义的布局在没有界说css展现的效果。
[attach]292113[/attach]
3、削减利用div的利用
实例1
链接导航效果，用p标签布局取代div标签布局更成心义。

实例2
一下实例我用一个span标签取代了本来的两个div标签布局，但他们完成的结构布局是一样的。

4、格局化你的布局代码
你要坚持格局化你的代码布局，如许简单浏览和调试。假如你利用的是AdobeDreamweaver,你点击Commands>ApplySourceFormatting就很简单完成代码的格局化。

5、正文闭合div标签
开辟模版程序的时分（好比WordPressthemes），模版程序分红几个分歧的文档index.php,header.php,sidebar.php,andfooter.php等。同时，你也应当常常的正文你的div标签布局,不至于本人晕乎。当我看到</div><!–/wrapper–>时，我就可以分明的识别出是<divid=”wrapper”>的正文。

总结：
1、削减利用div标签；
2、应当用div界说页面的次要框架布局，好比头部、内容、边栏和底部等布局；
3、内容应当利用语义化的html标签，而不是div标签；
4、格局化代码同时要闭合div标签布局。
中文原文：削减代码和语义化标签
英文原文：CodingCleanandSemanticTemplates

</p>
支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。

作者: 蒙在股里 时间: 2015-1-17 22:37
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 小妖女 时间: 2015-1-26 23:22
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 活着的死人 时间: 2015-2-5 07:57
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 只想知道 时间: 2015-3-2 05:40
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 因胸联盟 时间: 2015-3-11 05:03
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 透明 时间: 2015-3-17 23:08
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: 若天明 时间: 2015-3-25 11:15
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

欢迎光临仓酷云 (http://www.ckuyun.com/)