我们接着说说定义列表,在实际开发中,定义列表使用的不多,但是这个不妨碍我们学习它。
它由两部分组成:定义条件和定义描述。
语法:
<dl>
<dt>定义名词</dt>
<dd>定义描述</dd>
</dl>
dl英文意思 definition list ,dt英文意思definition term,dd英文意思definition description。
<html>
<head>
<title>定义列表</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>它是制作网页的标准语言,控制显示网页的结构</dd>
<dt>CSS</dt>
<dd>它是层叠样式表,控制网页内各种样式的显示</dd>
<dt>Javascript</dt>
<dd>它是脚本语言,控制着网页的行为</dd>
</dl>
</body>
</html>
从预览效果中,我们会发现<dd>标签会缩进文本。但是请不要在定义列表以外的地方使用<dd>标签来缩进文本,会造成某些浏览器难以预料的后果。切记!
这里插一句,关于HTML中标签符的误区。
前面章节我们接触了不少HTML标签符,初学者在学习过程中,对于标签符的语义不熟悉,常常为了省事,使用一个标签代替另一个标签来实现效果,示例代码:
<html>
<head>
<title>HTML误区</title>
</head>
<body>
<div>1.HTML</div>
<div>2.CSS</div>
<span>3.Javascript</span><br>
<span>4.PHP</span>
</body>
</html>
从浏览器实现效果和有序列表差不多,多数初学者都会自诩,这个方法太聪明了,有了这种错误的想法,会导致在学习HTML过程中,没有认真的把每一个标签符的语义弄懂,就稀里糊涂的开始下一个标签符的学习,为了实现效果就会用其他标签符代替。
HTML语言的精髓就在于,每一个标签符都有它自身的语义,语义非常重要,一个语义结构良好的网页,会对你维护网页和代码量有很多好处,试想满篇代码都是用几乎相同的标签符来实现全部功能,在排错时,如何定位错误呢?
另外,为什么要特别注意标签符的语义,因为搜索引擎SEO对标签符的作用和分值都不同,只有严格按照标签符的语义范围来使用它,才能在SEO工作中有的放矢,游刃有余,否则开发的网页不利于SEO工作,也给你的推广带来麻烦。
我们做个总结,HTML的列表常用的有三种,分别是有序列表ol,无序列表ul和定义列表dl;有序列表和无序列表的列表项li,定义列表是dt和dd;有序列表和无序列表可以通过属性type来改变列表项的符号形态。
做个训练题吧:
请制作一张问卷调查网页,大标题使用<h3>标签,问卷调查题目使用<h4>标签,前两个问题选项使用有序列表,最后一个问题选项使用无序列表。请思考一下,自己动手把代码写出来,看看效果。
……………………………………………………………………………………别偷懒,努力写!
答案:
<html>
<head>
<title>训练题</title>
</head>
<body>
<h3>虾米大王问卷调查</h3>
<h4>你一般是通过什么途径来学习编程的呢?</h4>
<ol>
<li>百度搜索引擎</li>
<li>购买书籍教程</li>
<li>报名培训班</li>
<li>自学</li>
</ol>
<h4>你目前掌握的编程语言有哪些?</h4>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>PHP</li>
</ol>
<h4>虾米大王教你学编程系列之HTML入门基础课程怎么样?</h4>
<ul>
<li>浅显易懂,重点突出</li>
<li>内容丰富,贴近实战</li>
<li>我很喜欢!</li>
</ul>
</body>
</html>
今天的内容到这里,下一节我们分享关于表格的内容。
加油啊,骚年!!!