HTML入门基础(013)

我们接着说说定义列表,在实际开发中,定义列表使用的不多,但是这个不妨碍我们学习它。

 

它由两部分组成:定义条件和定义描述。

 

语法:

<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>

 

今天的内容到这里,下一节我们分享关于表格的内容。

 

加油啊,骚年!!!

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虾米大王

有你的支持,我会更有动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值