这篇文章算是很基础的了。旨在介绍如何保证页面代码的整洁、以维护性。使用有语义的页面标签，减少标签的滥用。

1. 移除不必要的<div>标签

嵌套在<form><ul>外面的标签没有必要

例子：

2. 使用有语义的标记

<h1><ul><p>等标签，替代<div>，即便样式表丢失，仍然保证页面的可读性。

3. 尽量少的使用<div>标签

4. 代码缩进格式

5. 在</div>结尾处加上这个<div>块的注释

转：http://www.ghugo.com/coding-clean-and-semantic-templates/

扩展阅读：http://webdesignerwall.com/tutorials/coding-clean-and-semantic-templates

不要滥用div,保持代码的整洁的更多相关文章

  1. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  2. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  3. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  4. div均匀分布代码实例

    多个div在同一行以相同间隔分布: 这样的布局效果使用非常的频繁,也就是让多个div在一行分布,并且div于div之间的间隙是一样的,多用在对于产品的展示之用,下面就介绍一下如何实现此中布局,代码实例 ...

  5. fixedBox固定div漂浮代码 支持ie6以上大部分浏览器

    fixedBox固定div漂浮代码 支持ie6以上大部分浏览器 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  6. window.print打印指定div实例代码

    window.print可以打印网页,但有时候我们只希望打印特定控件或内容,怎么办呢,请看下面的例子 首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印. 复制代码代码如下: <h ...

  7. 弹出DIV锁定代码

    <html>  <head>  <meta http-equiv="Content-Type" content="text/html; ch ...

  8. css两个form不换行，两个div并排代码

    1.form不换行通过table布局实现 <table> <tr> <td> <form method="get" action=&quo ...

  9. 2018.3.29 DIV位置调整代码

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

随机推荐

  1. C#中的枚举类型（enum type）

    ylbtech 原文 C#中的枚举类型(enum type) 概念 枚举类型(enum type)是具有一组命名常量的独特的值类型.在以下示例中: enum Color { Red, Green, B ...

  2. 《C++ primer》--第1，2章小结

    来源:http://blog.csdn.net/wangqiulin123456/article/details/8483853 1.变量初始化:      定义变量时,应该给变量赋初始值,除非确定将 ...

  3. Drupal如何实现类的自动加载？

    Drupal通过spl_autoload_register()注册类加载器实现自动加载: function _drupal_bootstrap_database() { // ... .... spl ...

  4. selenium python （五）打印信息及设置等待时间

    #!/usr/bin/python# -*- coding: utf-8 -*-__author__ = 'zuoanvip' #一般情况下我们要验证打开的页面是否正确,可通过网页的Title和Cur ...

  5. [转]Java Web乱码过滤器

    本文转自http://blog.csdn.net/l271640625/article/details/6388690 大家都知道,在jsp里乱码是最让人讨厌的东西,有些乱码出来的莫名其妙,给开发带来 ...

  6. effective c++：dynamic_cast，避免返回handles指向对象内部

    关于dynamic_cast 假定我们有一个基类指针bp,我们在运行时需要把它转换成他的派生类指针,这个时候需要用到dynamic_cast. Derived *dp = dynamic_cast&l ...

  7. about云资源共享

      Nosql资源: http://www.aboutyun.com/thread-5655-1-1.html (1)redis安置(2)RedisAdminUI.zip(3)redis安装部署(4) ...

  8. php 扩展apc 参数优化

    编辑php.ini 输入下面 [apc] apc.enabled=1apc.shm_segments = 1apc.shm_size = 1Gapc.ttl = 0apc.user_ttl = 0ap ...

  9. 深入浅出谈存储:如何区别NAS、SAN与DAS

    深入浅出谈存储:如何区别NAS.SAN与DAS 2012年02月17日16:51 来源:新浪博客 作者:林沛满 编辑:曾智强 查看全文 赞(0)评论(1) 分享 标签: DAS , SAN , 存储系 ...

  10. linux 5 配置xmanager

    0 关闭防火墙或者打开177端口 iptables -A INPUT -p udp --dport 177 -j ACCEPT 1.vi /etc/inittab id:5:initdefault:  ...