艺兔的编程博客

Appearance

列表：有序列表和无序列表 ​

在html中，有三种类型的列表，有序列表，无序列表和描述列表，其中有序列表和无序列表是使用的最多的，对于描述列表使用频率不高。可以到用的时候去查MDN文档.

我们来看下我们要编写的博客页面，像下面这张图中，前面带有1,2,3数字的元素的列表就是有序列表，有顺序的意思。 而前面是项目符号的元素列表，我们叫做无序列表。

有序列表 Order List ​

我们先来看下有序列表，同样的道理，如果我们来设计这个语言，那么我们会这么写<有序列表></有序列表>， 然后既然是列表，那么肯定是由多个元素组成的，每一个元素就是一个列表项，大致会是这样的：

html
<有序列表>
	<列表项>这个列表项的内容</列表项>
	<列表项>这个列表项的内容</列表项>
	<列表项>这个列表项的内容</列表项>
</有序列表>

将以上翻译成英文的话，就是：

html
<OrderList>
  <ListItem>这个列表项的内容</ListItem>
  <ListItem>这个列表项的内容</ListItem>
  <ListItem>这个列表项的内容</ListItem>
</OrderList>

那一般html标签都采用简写的形式，我们取每一个单词的首字母，同时html标签是不区分英文的大小写的， 所以最后变成下面这个样子，有序列表会按照从上往下的顺序自动生成序号.

html
<ol>
  <li>这个列表项的内容</li>
  <li>这个列表项的内容</li>
  <li>这个列表项的内容</li>
</ol>

好了，现在我们知道了有序列表的标签是<ol></ol>, 当中的列表项的标签是<li></li>, 我们先把我们要做的博客页上的有序列表这块内容完成吧

html
<!-- 省略...-->
<p>在HTLML中，大多数元素都是由三部分组成:</p>

<ol>
  <li>开始标签</li>
  <li>结束标签</li>
  <li>元素内容</li>
</ol>

<p>更多内容可查阅 MDN Web 文档</p>
<!-- 省略...-->

无序列表 Unorder List ​

有序列表是Order List, 那么无序列表就是Unorder List, 简写后就是<ul></ul>, 无论是有序列表还是无序列表都会存在列表项，列表项的标签我们已经知道是<li></li>, 我们现在来完成博客页面中的无序列表的内容。

html
<!-- 省略...-->
<h3>我们为什么要学习HTML?</h3>
<p>掌握这门语言的理由有很多，大致我想到有以下五大原因：</p>

<ul>
  <li>html是网页开发最基础的语言</li>
  <li>你能够按照自己的想法做出自己想要的页面（告别WordPress）</li>
  <li>为将来开发真正的网页应用程序打下坚实的基础</li>
  <li>可以在朋友面前装X 😃</li>
  <li>作为自己的一个兴趣爱好，享受编程的快乐</li>
</ul>
<!-- 省略...-->

很多兄弟们最开始学习有序列表和无序列表的时候往往分不清<ol>和<ul>, 其实记html标签的时候不要单存的去记标签，记住这些英文单词就不会弄混了，比如有序列表就是Order List, 无序列表就是Unorder List, 列表项就是List Item . 要像说话一样的去写代码。

本节就到这里了，下一节课我们讲讲如何再网页中插入图片?

本节完成后的代码如下：

html
<!DOCTYPE html>
<html>
  <head>
    <title>构建网页的基础语言：HTML</title>
  </head>

  <body>
    <!--
    <h1>构建网页的基础语言：HTML</h1>
    <h2>构建网页的基础语言：HTML</h2>
    <h3>构建网页的基础语言：HTML</h3>
    <h4>构建网页的基础语言：HTML</h4>
    <h5>构建网页的基础语言：HTML</h5>
    <h6>构建网页的基础语言：HTML</h6>
    -->

    <h1>📖 艺兔的编程博客</h1>

    <h2>构建网页的基础语言：HTML</h2>

    <p>作者：<strong>Deepseek</strong> 本文生成于：2055年2月30日（星期八）。</p>

    <p>
      现代网站和网页应用的<em>核心技术</em>由 HTML、CSS 和 JavaScript
      构成：HTML负责网页的结构与内容，CSS控制样式与布局，而JavaScript则实现交互与动态功能，三者协同工作，共同支撑起万维网的开发基础，无论是简单的静态页面还是复杂的在线应用，最终都依赖于这三种基础语言在浏览器中的运行。
    </p>

    <p>
      在这篇文章中，
      我们主要讲解HTML。我们将学习什么是HTML以及我们为什么要学习HTML。
    </p>

    <h3>什么是HTML？</h3>
    <p>
      HTML是超文本标记语言，英文全称：<strong>H</strong>yper<strong>T</strong>ext
      <strong>M</strong>arkup
      <strong>L</strong
      >anguage。是开发者用来结构化和描述网页内容的标记语言（注意：并非编程语言）。
    </p>
    <p>
      HTML通过元素定义内容类型：段落、链接、标题、图片、视频等。浏览器能解析HTML代码并将其呈现为可视化网页。
    </p>
    <p>在HTLML中，大多数元素都是由三部分组成:</p>

    <ol>
      <li>开始标签</li>
      <li>结束标签</li>
      <li>元素内容</li>
    </ol>

    <p>更多内容可查阅 MDN Web 文档</p>

    <h3>我们为什么要学习HTML?</h3>
    <p>掌握这门语言的理由有很多，大致我想到有以下五大原因：</p>

    <ul>
      <li>html是网页开发最基础的语言</li>
      <li>你能够按照自己的想法做出自己想要的页面（告别WordPress）</li>
      <li>为将来开发真正的网页应用程序打下坚实的基础</li>
      <li>可以在朋友面前装X 😃</li>
      <li>作为自己的一个兴趣爱好，享受编程的快乐</li>
    </ul>

    <p>希望本文让你有所收获，我们下次见！</p>
  </body>
</html>