仓酷云

标题: 来看看：标准HTML代码能够节俭修正代码的工夫 [打印本页]

作者: 兰色精灵 时间: 2015-1-15 23:31
标题: 来看看：标准HTML代码能够节俭修正代码的工夫
那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
网页制造poluoluo文章简介：css技能-扫除过剩的标签让代码加倍成心义.
假如你是一个喜好甚么都用<div>来标签的人,那末这个教程必定很合适你.在这个教程里侧重讲怎样标准的来写HTML代码让它加倍的成心义.你有无履历过如许的场景:在主笔他人的模版时发明那些语意不明的标签,你的感到是甚么模样的.学完这个教程后你会发明标准的代码不单单为你今后修正代码省下工夫,出格是当你调试一个年夜的项目时你会发明,本来标准代码以后是那末的有效.

1.扫除不用要的<div>标签

良多人都喜好用<div>来包裹<form>和<ul>来创建菜单列表.你有无想过如许一个过剩的<div>是否是必要的.你可使用css划定规矩来完成一样的效果.

Example1:

这个例子展现怎样删除<form>中的<div>.

Example2:

偶然候我们会给内容增加一个分外的<div>标签来以示这是一个内容.在事例顶用了<divclass="sidebox">来包含内容区.假如一个内容有一个题目的话(如:<h4>),那末我们就能够把这个<h4>来取代<div>.

2.利用有语义的标签

用有语义的标签来编写你的HTML文档(如:<h1>为题目;<p>为段落;<ul>为列表.)那末即便用户不撑持css的话,那你的文档也被准确的读出来.

Example:

这个例子很好的申明了,利用有语义标签的优点.

3.只管削减利用<div>

你有无见过那末凌乱的模板,各处都能够看到<div>标签,看到这些,你的头有无变年夜了.你是不是由于罕用</div>来停止标签,大概由于多用了<div>标签而把一个结构弄乱了.我想年夜多半初学者都有如许的履历.以是尽量的少利用<div>,它会使调试和编纂加倍的简单.

Example1:

利用<p>来取代<div>来创立导航.

Example2:

看怎样利用<span>来取代<div>完成一样的效果.

4.格局(缩进)代码

你应当格局源代码(即缩进嵌套元素),以便于简单浏览和修正.假如你利用DW来编写代码的话,那末你就能够很便利的格局代码.

5.在</div>标签以后增加注解.

你有无见过在一些模版在</div>以后有说明这一部分是甚么.(如:header;contant;footer.)以是你能够在</div>以后到场一个.如许他人就能够晓得这是一个页脚停止点.

写完代码累了,那就放松一下:

</p>
Table中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。

作者: 活着的死人 时间: 2015-1-17 23:01
可以使用CSS检查工具进行设计。

作者: 小妖女 时间: 2015-1-24 14:40
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 精灵巫婆 时间: 2015-2-1 17:49
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 因胸联盟 时间: 2015-2-7 14:02
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 柔情似水 时间: 2015-2-22 18:44
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

作者: 海妖 时间: 2015-3-7 02:37
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 再现理想 时间: 2015-3-14 11:08
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

作者: 若相依 时间: 2015-3-21 06:14
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

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