[翻译]标记语言和样式手册 Chapter 9 精简标签（4）
作者：zhaozy 来源：3user.com 发布时间：2008-02-01 09:55:00
接着,来看看另一个精简标签的做法:消除不必要的<div>标签,直接取用现有的块级标签.
不必要的<div>
除了减少指定样式所需的分类属性外,还有另一个精简标签的简单方法:那就是当<div>标签里有块级元素时,就把<div>去掉,接下来看看这两个例子.
方法A:使用<div>
<div id="nav">
<ul>
<li><a href="archives.html">Archives</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
这是个非常小巧的导航条,只以一个无序清单构成,我们为包住整个清单的<div>指定了nav作为id.
但是<ul>和<div>一样是块级元素,为什么不直接为它指定id呢?让我们看看方法B.
方法B:去掉<div>
<ul id="nav">
<li><a href="archives.html">Archives</a></li>
<li><a href="about.html">About</a></li>
</ul>
方法B显示能直接使用ul,扔掉多余的<div>,任何定位,内外补丁之类的样式设定同样能指定给<ul>,就像指定给<div>一样简单.因此转而扔掉外包标签,所见一部分标记源码.
有个重点必须留意,那就是这个做法只在nav不包含<ul>以外的标签时才适用,举例来说,里面不能有多余的段落,<blockquote>或者<form>.由于这些标签通常不适合放在<ul>中,因此以<div>作为外包标签应该更有道理.然而,对于方法A,方法B所举的例子来说,无序清单是唯一内涵的标签,因此扔掉<div>就说得通,事实上,考虑所有外包标签的存在意义十分重要,它真的需要放在哪里吗?有没有现存的块级元素可以使用?简洁的标记代码不难办到.
其他例子
另一个可以扔掉<div>的情形是外包<form>的情况,举例来说,如果原本是这样的话:
<div id="myform">
<form>
... form elements here ...
</form>
</div>
其实能用更简单的写法:
<form id="myform">
... form elements here ...
</form>
同样的,如果网站的页尾只包含单一段落,除了这样写之外:
<div id="footer">
<p>Copyright 1999-2004 Dan Cederholm</p>
</div>
也能写成这样:
<p id="footer">Copyright 1999-2004 Dan Cederholm</p>
当然只有在页尾只包含一个段落的时候才能如此修改.
归纳
看了两种精简标签代码的简单方法,首先是节制的使用分类属性,并且以继承选择器设定样式;再来是直接为现存的单一块级元素指定id,而不用多余的<div>外包它们.
这些方法看起来只能节省无关紧要的一点大小,但是当开始为整个网站实施这些方法之后,精简,结构化的代码就会逐渐明朗,也会写出更灵活,符合语义,未来更容易维护的内容.
0
投稿猜你喜欢
- Python安装新包，pip是很好用的安装工具。pip list 可以查询所有已安装的包和版本。怎么知道本地安装包的版本是否有可以更新的新版
本文实例讲述了Python实现二叉树及遍历方法。分享给大家供大家参考，具体如下：介绍：树是数据结构中非常重要的一种，主要的用途是用来提高查找- 实际项目中遇到python模块相互引用问题，查资料，终于算是弄明白了。首先交叉引用或是相互引用，实际上就是导入循环，关于导入循环的详细说明，
- 最近想抢冰墩墩的手办和钥匙圈，但是同志们抢的速度太快了，无奈，还是自己写脚本吧。添加火狐浏览器插件Omnibug是一个插件，可以简化web度
- 相信为数不少的系统管理员每天都在做着同一样的工作——对数据进行备份。一旦哪一天疏忽了，而这一天系统又恰恰发生了故障，需要进行数据
- #!/usr/bin/python# -*- coding: utf-8 -*-from scapy.all import *from ti
- # coding:utf-8import urllibimport urllib2import cookielibfrom bs4 impo
- 本文实例为大家分享了Bootstrap实现渐变顶部固定自适应导航栏的具体代码，供大家参考，具体内容如下具体代码如下所示：<!DOCTY
- 最近因为项目需求，需要写个爬虫爬取一些题库。在这之前爬虫我都是用node或者php写的。一直听说python写爬虫有一手，便入手了pytho
- 前言以前版本的 Celery 需要一个单独的库（django-celery）来与 Django 一起工作，但从 3.1 开始不再是这种情况。
- 上一篇实战爬取知乎热门话题的实战，并且保存为本地的txt文本先上代码，有很多细节和坑需要规避，弄了两个半小时import requestsi
- 在前面章节我们通过 os包学习了如何创建、读取一个文件夹，但是并没有学习如何创建、读写一个文件，接下来我们就学习关于文件的处理。当我们学习完
- 视图代码lis = []#设置一个空列表用来存放发送的验证码，用来验证def yzm1(): res1 = &qu
- 想查找mac下python的site-packages目录，如果用网上搜的安装目录之类的去找，进去每一层很多都是软链接形式存在，比较浪费时间
- 编写思路:把本地文件在客户端通过base64编码以后发送目的地.测试过程中,上传文件过大,导致超时不成功，后来经过改善.把编码分
- 具体代码如下所示：<SCRIPT LANGUAGE="JavaScript"> <!-- var dn
- Office家族成员中，人们对于Access 2000的了解，往往只局限在它的操作界面中，对于数据库管理的功能仍只是停留在建立表、数据输入、
- 首先，adb实现对设备的reboot命令是：adb reboot . 但是如果是两台/多台设备的时候，需要声明serial number:
- 背景介绍#ubuntu 20.04 版本系统自带的 MySQL 版本是 8.0，普通方法很难安装 5.7 版本的。由于 8.0 版本较 5.
- 动机： 查询功能是我们在网站上见过的最普遍也是最常用的一个功能模块了。以往的信息查询都是连接到数据库的，每一次点击都必须要后台数据库的支持。
