在上一小节中，我们把一些标签放进<div>里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。

如下两图进行比较，如果设计师把两个图给你，哪个图你看上去能更快的理解呢？是不是右边的那幅图呢。

语法：

<div  id="版块名称">…</div>

示例:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>div标签</title>

</head>

<body>

<div id="hotlist">

   <h2>热门课程排行榜</h2>

    <ol>

       <li>前端开发面试心法 </li>

       <li>零基础学习html</li>

       <li>javascript全攻略</li>

    </ol>

</div>

<div id="learningInstruted">

    <h2>web前端开发导学课程</h2>

    <ul>

       <li>网页专业名词大扫盲 </li>

       <li>网站职位定位指南</li>

       <li>为您解密Yahoo网站制作流程</li>

    </ul>

</div>

</body>

</html>

给div命名，使逻辑更加清晰的更多相关文章

  1. CSS学习笔记（7）--html页面的CSS、DIV命名规则

    html页面的CSS.DIV命名规则 CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整 ...

  2. html中css、div命名规范

    html中css.div命名规范 1.类class的命名规范示例 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column ...

  3. js弹窗 js弹出DIV,并使整个页面背景变暗

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  4. DIV命名规范

    DIV命名规范 企业DIV使用频率高的命名方法 网页内容类 --- 注释的写法: /* Footer */ 内容区/* End Footer */ 摘要: summary 箭头: arrow 商标:  ...

  5. div 命名规范！ （野路子出来的好好看看）

    DIV命名规范   DIV命名规范 企业DIV使用频率高的命名方法 网页内容类 --- 注释的写法: /* Footer */ 内容区/* End Footer */ 摘要: summary 箭头:  ...

  6. html页面的CSS、DIV命名规则

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  7. div+css使多行文字垂直居中?

    1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...

  8. css笔记1： html页面的CSS、DIV命名规则

    原地址:http://www.cnblogs.com/rising-fay/archive/2013/02/25/2932592.html CSS命名规则 头:header 内容:content/co ...

  9. 用extern关键字使程序更加清晰

    一.基础研究 之前基于tcc.tlink实现一个新的编译连接工具cc.exe,用到的文件有cs.lib.c0s.obj.main.obj,其中main.obj是我们自己加入的文件,它可以实现开始显示彩 ...

随机推荐

  1. 以不同用户身份运行程序，/savecred只需要输入一次密码（GetTokenByName取得EXPLORER.EXE的令牌，然后调用CreateProcessAsUser，而且使用LoadUserProfile解决另存文件的问题）good

    http://blog.sina.com.cn/s/blog_65977dde0100s7tm.html ----------------------------------------------- ...

  2. TControl.WMLButtonUp的inherited的作用——是为了给子类控件新的处理消息的机会

    意外注意到这个小细节: procedure TControl.WMLButtonUp(var Message: TWMLButtonUp); begin inherited; // 注意,如果是直接点 ...

  3. struts2框架通过jQuery实现AJAX应用

    众所周知,在web2.0时代,哪个web框架要是不跟AJAX沾点边,都不好意思说自己的框架有多么多么NB,当然struts也不例外,从 struts1开始到现在的struts2也都对AJAX有支持.A ...

  4. 浅谈二维RMQ

    针对一些二维区间最值问题,用一维RMQ来解决显然是不够的.所以,要改进算法.鉴于网上没有PASCAL版的RMQ标程与解析,所以小可在这里简单的讲一下. 核心思想和一维的一样,只是在计算区间时略有不同. ...

  5. HDU2059（龟兔赛跑）

    龟兔赛跑 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  6. JSTL和select标签的组合使用

    1.用于根据不同的值显示对应的内容,不能选择 <select name="grade"> <c:choose> <c:when test=" ...

  7. python-类和对象（属性、方法）的动态绑定

    动态绑定 # coding=utf-8 ''' 当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性 ''' from types im ...

  8. dubbo源码分析三：consumer注册及生成代理对象

    本章我们将分析一下consumer向注册中心注册,并获取服务端相应的信息,根据这些信息生产代理对象的过程和源码. 1.类图 上图展示了部分消费者注册及生成代理对象过程中需要使用到的类和接口,其中: s ...

  9. c# MongoDB插入和批量插入，插入原理

    在开发之前,选择MongoDb驱动是件很重要的事情.如果选择不好,在后期的开发的是件很费力的事情,因为我就遇到这样的问题.MongoDb驱动有几种比较流行驱动,官方驱动和samus是两种使用比较多的. ...

  10. Linux下得到显示屏参数的方法

    先安装一个软件,然后使用权ddcprobe可以查看当前支持的分辨率和刷新频率#sudo apt-get install xresprobe运行 #sudo ddcprobe会得到下面的信息vbe: V ...