第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

html5學習筆記(2)

標簽:
Html5

列表标签

无序列表

无序列表是“没有刻意顺序”的列表


<ul>标签和<li>标签

  • 无序列表使用<ul></ul>标签,每个列表项都是<li></li>标签

    https://img1.sycdn.imooc.com//622b60270001ceb605770211.jpg

  • 无序列表是一个父子组合标签,上阵父子兵,不能单独出现

    https://img1.sycdn.imooc.com//622b60270001054a04530210.jpg

  • <li>标签不能单独使用,它必须放到<ul>或者<ol>中使用

  • <ul>的子标签只能是<li>

  • <li>中可以放任何标签,<li>标签是容器,内部可以放任何其他标签


列表的嵌套

① li不能散着放

② ul的子标签只能是li

③ li里面可以放任何东西

 <ul>
   <li>
    <h3>江苏省</h3> 
    <ul>
     <li>南京</li> 
     <li>苏州</li> 
     <li>无锡</li> 
    </ul> 
   </li> 
   <li>
    <h3>湖北省</h3> 
    <ul>
     <li>武汉</li> 
     <li>黄石</li> 
    </ul>
  </li>
 </ul>


无序列表的type属性

描述
disc默认值,实心圆
circle空心圆
square实心方块
 <ul type="disc">
  <li>苹果</li> 
     <li>香蕉</li>
 </ul>
 <ul type="circle">
  <li>苹果</li> 
  <li>香蕉</li> 
 </ul>
 <ul type="square">
  <li>苹果</li> 
  <li>香蕉</li> 
 </ul>


有序列表

有序列表是“有刻意顺序”的列表


<ol>标签和<li>标签

有序列表使用<ol></ol>标签,每个列表项都是<li></li>标签

 <ol>
  <li>小慕</li> 
  <li>小明</li> 
  <li>小红</li> 
  <li>小强</li>
 </ol>


<ol>标签注意事项

  • <li>标签不能散着放,它必须是<ol>标签或者<ul>标签的子标签

  • <ol>的子标签只能是<li>标签

  • <li>标签中可以放任何东西


<ol>标签的type属性

type属性值意义
a表示小写英文字母编号
A表示大写英文字母编号
i表示小写罗马数字编号
I表示大写罗马数字编号
1表示数字编号(默认)


<ol>标签的start属性

  • start属性值必须是一个整数,指定了列表编号的起始值

  • 此属性的值应为阿拉伯数字,尽管列表条目的编号类型 type属性可能指定为了罗马数字编号等其他类型的编号


<ol>标签的reversed属性

reversed属性指定列表中的条目是否是倒序排列的

reversed属性不需要值,只需要写reversed单词即可,这是HTML5的全新特性

 <ol reversed>
 </ol>


定义列表

定义列表的示例代码

image-20210923212055436


需要逐条给出定义描述的列表,就是定义列表

  • <dl></dl>是定义列表标签,内容交替出现 <dt></dt>,<dt></dt>标签

     <dl>
      <dt>北京</dt> 
      <dd>我国首都、政治中心、文化中心</dd>
      <dt>上海</dt> 
      <dd>国际经济、金融、科技创新中心</dd> 
      <dt>深圳</dt> 
      <dd>经济特区,国际化都市</dd> 
     </dl>


  • 也允许 <dt></dt>和<dt></dt>不交替出现,而是分别处于不同的定义列表中

     <dl>
      <dt>北京</dt> 
      <dd>我国政治中心、文化中心、国际交往中心、科技创新中心</dd> 
     </dl>
     <dl>
      <dt>上海</dt>
      <dd>我国国际经济、金融、贸易、航运、科技创新中心</dd>
     </dl> 
     <dl>
      <dt>深圳</dt>
      <dd>中国经济特区、全国性经济中心城市和国际化城市</dd>
     </dl>



只要语义上有“解释说明”含义的文字,且为列表形态,应该使用定义列表image-20210923212431588


课程总结

  • Q:ul、ol和dl分别要在什么场合下使用?

  • ul和li标签的嵌套使用规则是什么?

  • ul和ol的常见属性有哪些

    https://img1.sycdn.imooc.com//622b611b0001393313751600.jpg


點擊查看更多內(nèi)容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優(yōu)惠券免費領(lǐng)

立即參與 放棄機會
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消