标记语言——再谈清单
发布时间：2020-03-17 09:48:06 所属栏目：编程 来源：站长网
导读：点击这里返回剧本之家 HTML教程 栏目． 上文：标志说话锚点 原文出处Chapter 8 再谈清单 先前在第一章,我们接头过几种标志清单的做法,研究以ul和li将它们标志成无序清单的甜头.这个要领能标识清单的布局,确保全部赏识器与装备都能正确表现它的内容,同时也让
|
点击这里返回剧本之家 HTML教程 栏目．
上文：标志说话——锚点 原文出处 Chapter 8 再谈清单 先前在第一章,我们接头过几种标志清单的做法,研究以<ul>和<li>将它们标志成无序清单的甜头.这个要领能标识清单的布局,确保全部赏识器与装备都能正确表现它的内容,同时也让我们能以CSS为它加上各类样式. 而在各类情形下,处理赏罚个体题目时标志清单的全部做法写出来的话塞满整本书都不难,我不规划塞满整本书,可是我简直规划以独立一章接头除了无序清单之外的其他几种清单种别.研究几种得当行使清单的状况. 清单是个组织页面布局的强盛器材,为每个独立的项目加上意义,让你能在稍后以css加上独立的样式. 让我们先来看看编了号的项目清单,以及两种标志这类清单的做法.或者你一眼就能看出哪种要领较量有益,可是我仍会再度具体声名这个例子,以便夸大布局化标志,行使正确器材办理题目的重要性. 编号项目清单的标志法,哪种最好? 假设你规划标志一个步调清单,每个项目之前都有编号,我们将会研究两种可以或许告竣这个方针的差异要领,同时声名为何某个要领较量合用. 要领A:乱中有序 <ul> <li>1. Chop the onions.</li> <li>2. Saute the onions for 3 minutes.</li> <li>3. Add 3 cloves of garlic.</li> <li>4. Cook for another 3 minutes.</li> <li>5. Eat.</li> </ul> 前面这份清单也许是烹调汗青上最糟糕的食谱之一.可是拿来当简朴的例子还蛮吻合的,加点盐和鸡蛋也许好些,或是...不管,回到正题. 要领A我们选择以无序清单标志这些步调,以便得到我们在第一章提过的全部甜头,我们为内容加上布局,同时知道大大都赏识器,屏幕阅读器以及其他装备都能正确处理赏罚这部门内容,稍侯我们也能用css等闲为它指定样式,很棒!可是... 数字游戏 因为这是个有编号的清单,因此我们在每个项目之前加上编号,编号之后随着句号,以便标识每个步调的次序,可是假如稍侯必要在第2步,第3步之间加上新步调的话该怎么办呢?这下我们必要(手动)为新增步调之后的全部项目从头编号.对这个清单来说,不是什么贫困事,可是假如你正在修改某个具有100个项目标清单时,修改进程就会变得很是冗长乏味了. 呈现小圆点标记 因为我们以无序清单标志这个示例中的布局,因此在每个编了号的项目之前城市看到一个小圆点标记(就像图8-1),你或者会喜好小圆点标记,假如不喜好的话虽然可以通过CSS把它去掉,可是不行使CSS赏识这个清单的时辰必然会再看到这些小圆点标记. 图8-1,赏识器封锁CSS阅读要领A的功效 有个更简朴,更具意义,更轻易维护的要领,让我们看看要领B. 要领B:有序清单 <ol> <li>Chop the onions.</li> <li>Saute the onions for 3 minutes.</li> <li>Add 3 cloves of garlic.</li> <li>Cook for another 3 minutes.</li> <li>Eat.</li> </ol> 我确信这是大大都人选用的做法,可是这并不代表我们都没有在某些环境下,由于某种缘故起因行使要领A.<ol>代表"有序清单"(ordered list),因此语义上我们行使了正确的元素办理手上的题目.要领B尚有什么出格之处? 自动编号 或者你发明我们不必手动为每个清单项目加上编号了,在行使了<ol>时,会自动依照次序发生编号,假如我们的步调清单内包括了高出100个项目,而我们必要在中间插入几个新步调时,我们只必要简朴的在正确的位置插入新的<li>项目就行了,赏识器会自动从头编号,的确就跟把戏一样. 假如行使要领A的话,我们就必要在插入每个项目标时辰手动批改全部编号,我任意都能想到比这更风趣的事变可以做... 图8-2,十一版赏识器表现要领B的结果,在每个步调之前都自动加上编号. 图8-2 赏识器表现要领B的结果 舒畅的包装者,第二部 要领B的另一个甜头是,很长的清单项目在换行的时辰,会缩进到发生的编号后头,而要领A则会折到编号下面(图8-3) 图8-3 较量要领A和要领B换行结果 清单种类 固然有序清单的预设编号样式凡是是阿拉伯数字(1,2,3,4,5等),可是我们能通过行使CSS的list-style-type属性换掉编号样式.而list-style-type能在以下几种任选其一: decimal: 1,2,3,4,...(凡是是预设值) upper-alpha: A,B,C,D... lower-alpha: a,b,c,d... upper-roman: I,II,III,IV... lower-roman: i,ii,iii,iv... none: 不加上编号 因此,举例来说,假如我们想让要领B发生大写罗马编号的话,我们就可以或许以下的CSS告竣目标: ol li { list-style-type: upper-roman; } 图8-4就是要领B配上这份CSS在赏识器内的表现结果,我们的步调列示意在不再是预设的阿拉伯数字,而是改用罗马数字编号了.虽然,标志的部门如故完全沟通.改变主意了吗?只要做点小小的修改,换上先火线出的其他样式,就能顿时把清单的编号方法改成你喜好的样子. 图8-4 换用罗马数字的有序清单 HTML的type属性:之前也许有些人会直接在<ol>标签中行使type属性,把清单的编号方法换成罗马数字,英笔墨母等等,然而,为了支持稍早所述的CSS法则,从HTML 4.01尺度开始就不提议行使type属性了,因此,你不该该再行使type属性,应该改用CSS. 稍后,在能力延长中,我们会以CSS为这个有序清单加上样式.但此刻让我们先看看另一个清单种类的例子. 1 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
