HTML 学习笔记(四)- 强调、列表

17 阅读2分钟

强调

斜体

带语义:

  • <em>

不带语义

  • <span>+ CSS
  • <i>

加粗

带语义:

  • <strong>

不带语义:

  • <span> + CSS
  • <b>

下划线

带语义:

  • <mark>

不带语义

  • <span>+ CSS
  • <u>

最佳实践

<i>, <b>, <u> 基本淘汰,因为没带语义,下划线建议只在超链接中使用


列表

  • 无序列表
  • 有序列表
  • 描述列表

无序列表

<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

有序列表

<ol>
  <li>沿这条路走到头</li>
  <li>右转</li>
  <li>直行穿过第一个十字路口</li>
  <li>在第三个十字路口处左转</li>
  <li>继续走 300 米,学校就在你的右手边</li>
</ol>

嵌套列表

<ol>
  <li>
    先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀,调成“腌料”,鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀,腌渍半小时。
  </li>
  <li>
    用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀,调成“综合调味料”。
  </li>
  <li>
    鸡丁腌好以后,色拉油下锅烧热,先将鸡丁倒入锅内,用大火快炸半分钟,炸到变色之后,捞出来沥干油汁备用。
  </li>
  <li>
    在锅里留下约两大匙油,烧热后将切好的干辣椒下锅,用小火炒香后,再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅,用大火快炒片刻后,再倒入“综合调味料”继续快炒。
    <ul>
      <li>
        如果你采用正宗川菜做法,最后只需加入花生米,炒拌几下就可以起锅了。
      </li>
      <li>如果你在北方,可加入黄瓜丁、胡萝卜丁和花生米,翻炒后起锅。</li>
    </ul>
  </li>
</ol>

描述列表

用于:标记一组项目及其相关描述

如: 问题和答案

<dl>
  <dt>内心独白</dt>
  <dd>
    戏剧中,某个角色对自己的内心活动或感受进行念白表演,这些台词只面向观众,而其他角色不会听到。
  </dd>
  <dt>语言独白</dt>
  <dd>
    戏剧中,某个角色把自己的想法直接进行念白表演,观众和其他角色都可以听到。
  </dd>
  <dt>旁白</dt>
  <dd>
    戏剧中,为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白,只面向观众,内容一般都是角色的感受、想法、以及一些背景信息等。
  </dd>
</dl>

一个术语可以有多个描述

<dl>
  <dt>旁白</dt>
  <dd>
    戏剧中,为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白,只面向观众,内容一般都是角色的感受、想法、以及一些背景信息等。
  </dd>
  <dd>
    写作中,指与当前主题相关的一段内容,通常不适于直接置于内容主线中,因此置于附近的其他位置(通常位于主线内容旁边一个文本框内)。
  </dd>
</dl>