时间:2021-05-08
本文主要关注如何通过语义化的标签、减少div使用等方法来简化代码。你是否在修改某人的页面时,被他的乱七八糟的代码搞晕乎?简洁的代码不但方便自己,同时方便你的团队成员。他在你调试页面或编辑的时候节省你的时间(尤其对于大的项目来说)。
一、去掉不必要的div标签
我看到好多人都在form或ul列表的外面嵌入一个div结构,为什么要嵌入这个你不需要的div那?你可以通过给相应的语义化的标签定义、引用新的css就可以达到同样的效果。
实例1:
一下案例展示的是如何去掉div标签并定义一个新的样式给form标签。
实例2
有时我们为了实现内容间间距的效果而在内容的外面嵌入一个多余的div标签。一下例子的左边增加了<div></div>来实现间距。但是,既然每个结构里面都含有标题标签h4,我们就可以给h4设置margin属性来实现间距,从而省去多余的<div></div>结构。
二、使用语义化的标签
在页面制作过程中,应尽量使用语义化的标签(如:h1定义标题,P定义段落文字,ul定义列表项目),即使不定义css样式,你的文档也是有意义的。
实例:
一下图片对比了div定义的结构和语义化标签定义的结构在没有定义css展示的效果。
三、减少使用div的使用
实例1
链接导航效果,用p标签结构代替div标签结构更有意义。
实例2
一下实例我用一个span标签代替了原来的两个div标签结构,但他们实现的布局结构是一样的。
四、格式化你的结构代码
你要保持格式化你的代码结构,这样容易阅读和调试。如果你使用的是Adobe Dreamweaver,你点击Commands > Apply Source Formatting就很容易实现代码的格式化。
五、注释闭合div标签
开发模版程序的时候(比如WordPress themes),模版程序分成几个不同的文档index.php, header.php, sidebar.php, and footer.php等。同时,你也应该经常的注释你的div标签结构,不至于自己晕乎。当我看到</div><!– /wrapper –>时,我就能清楚的辨认出是<div id=”wrapper”>的注释。
总结:
1、减少使用div标签;
2、应该用div定义页面的主要框架结构,比如头部、内容、边栏和底部等结构;
3、内容应该使用语义化的html标签,而不是div标签;
4、格式化代码同时要闭合div标签结构。
中文原文:减少代码和语义化标签
英文原文:Coding Clean and Semantic Templates
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
figure标签和figcaption标签是html5新增的语义化标签。figure标签,html5语义化标签。用于规定独立的流内容(图像、图表、照片、代码等等
一:1.语义化标签只是HTML,CSS不存在语义化。HTML是标签,CSS是属性。2.语义化标签简历在文档化页面的基础上面,将网页当做是一个文档,DOM中的D(
语义特性。Html5引入了新的结构化的语义标签,在文档结构上会更加清晰,新添加的智能表单控件和页面元素大大地增强了Html可表达的表单形式,表单是实现用户与页面
HTML5向开发人员提供了很多新的标签,如section,nav,article,header和footer等.这些标签语义化程度高,会被经常使用,但在IE6,
举个例子淘宝网-淘!我喜欢使用description以及keyword标签(不超过300个字符最优)图片添加alt和title使用语义化标签大标题大标题文章使用