当前位置：首页 > article >正文

HTML学习记录

article 2025/2/19 18:14:52

HTML学习记录

学习参考
学习记录
- 列表
- - 1、有序列表
  - 2、无序列表（网页中见得比较多）
  - 3、列表嵌套
  - 4、自定义列表
  - 5、代码
- 表格

学习参考

网课：
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频

网站：
MDN
w3school

学习记录

列表

1、有序列表

有顺序/侧重顺序的列表
网站：
今日头条主页头条热榜
尚硅谷百度百科目录

<ol>
	<li>把冰箱门打开</li>
	<li>把大象房间去</li>
	<li>把冰箱门关上</li>
</ol>

2、无序列表（网页中见得比较多）

无顺序/不侧重顺序的列表
网站：
央视网首页头部横向排列列表

  <!-- 无序列表（Unordered List） -->
  <h2>我想去的几个城市</h2>
  <ul>
    <li>成都</li>
    <li>上海</li>
    <li>西安</li>
    <li>武汉</li>
  </ul>

3、列表嵌套

列表中的某项内容，又包含一个列表（注意！嵌套时，务必把结构写完整）

<h2>我想去的几个城市</h2>
  <ul>
    <li>成都</li>
    <!-- 列表可以嵌套 -->
    <li>
      <!-- span该标签只是包裹文字，无任何语义 -->
      <span>上海</span>
      <ul>
        <li>外滩</li>
        <li>
          <span>东方明珠</span>
          <ul>
            <li>xxxx</li>
          </ul>
        </li>
        <li>迪士尼乐园</li>
        <li>杜莎夫人蜡像馆</li>
      </ul>
    </li>
    <li>西安</li>
    <li>武汉</li>
  </ul>

注意！li 标签最好写在ul或ol中，不要单独使用

4、自定义列表

网站:
央视网底部关于我们、业务概况等等

  <h2>如何更好的学习</h2>
  <dl>
    <!-- 自定义列表中一个术语名称可以有多个术语描述 -->
    <dt>做好笔记</dt>
    <dd>笔记是我们以后复习的一个抓手</dd>
    <dd>笔记可以是电子版，也可以是纸质版</dd>
    <dt>多加练习</dt>
    <dd>只有敲出来的代码，才是自己的</dd>
    <dt>别怕出错</dt>
    <dd>错很正常的，改正后并记住，就是经验</dd>
  </dl>

5、代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>列表</title>
</head>
<body>
  <!-- 注意，列表的样式不重要，要注意语义！重要的是语义 -->

  <!-- 有序列表（Ordered List）-->
  <h2>要把大象放在冰箱总共分几步？</h2>
  <ol>
    <!-- 列表项List Item -->
    <li>把冰箱门打开</li>
    <li>把大象放进去</li>
    <li>把冰箱门关上</li>
  </ol>

  <!-- 无序列表（Unordered List） -->
  <h2>我想去的几个城市</h2>
  <ul>
    <li>成都</li>
    <li>上海</li>
    <li>西安</li>
    <li>武汉</li>
  </ul>

  <!-- （自）定义列表（Definition List） -->
  <h2>如何更好的学习</h2>
  <dl>
    <!-- 术语标题/名称（title） -->
    <dt>做好笔记</dt>
    <!-- 术语描述 -->
    <dd>笔记是我们以后复习的一个抓手</dd>
    <dt>多加练习</dt>
    <dd>只有敲出来的代码，才是自己的</dd>
    <dt>别怕出错</dt>
    <dd>错很正常的，改正后并记住，就是经验</dd>
  </dl>
  

  <!-- 语义很重要，使用div没有对应的语义 -->
  <div>
    <div>把冰箱门打开</div>
    <div>把大象放进去</div>
    <div>把冰箱门关上</div>
  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>列表注意事项</title>
</head>
<body>
  <!-- 不要单独使用li标签 -->
  <li>哈哈</li>

  <!-- 列表中的元素只能是li，如果要使用别的标签，请用li包裹起来 -->
  <h2>要把大象放在冰箱总共分几步？</h2>
  <ol>
    <li>把冰箱门打开</li>
    <li>把大象放进去</li>
    <li>把冰箱门关上</li>
    <li>
      <a href="https://www.baidu.com">去百度</a>
    </li>
  </ol>

  <h2>我想去的几个城市</h2>
  <ul>
    <li>成都</li>
    <!-- 列表可以嵌套 -->
    <li>
      <!-- span该标签只是包裹文字，无任何语义 -->
      <span>上海</span>
      <ul>
        <li>外滩</li>
        <li>
          <span>东方明珠</span>
          <ul>
            <li>xxxx</li>
          </ul>
        </li>
        <li>迪士尼乐园</li>
        <li>杜莎夫人蜡像馆</li>
      </ul>
    </li>
    <li>西安</li>
    <li>武汉</li>
  </ul>

  <h2>如何更好的学习</h2>
  <dl>
    <!-- 自定义列表中一个术语名称可以有多个术语描述 -->
    <dt>做好笔记</dt>
    <dd>笔记是我们以后复习的一个抓手</dd>
    <dd>笔记可以是电子版，也可以是纸质版</dd>
    <dt>多加练习</dt>
    <dd>只有敲出来的代码，才是自己的</dd>
    <dt>别怕出错</dt>
    <dd>错很正常的，改正后并记住，就是经验</dd>
  </dl>
</body>
</html>