HTML 中的项目符号标记 - TypeScript

在 HTML 中，我们可以使用项目符号标记来创建有序或无序列表。在本文中，我们将介绍如何在 TypeScript 中使用项目符号标记。

无序列表

无序列表使用项目符号来标记列表项，常见的项目符号包括实心圆圈、空心圆圈和实心方块。使用 <ul> 标签来创建无序列表，使用 <li> 标签来创建列表项。

const myList: HTMLUListElement = document.createElement('ul');
const myItem1: HTMLLIElement = document.createElement('li');
myItem1.textContent = 'item 1';
myList.appendChild(myItem1);

const myItem2: HTMLLIElement = document.createElement('li');
myItem2.textContent = 'item 2';
myList.appendChild(myItem2);

const myItem3: HTMLLIElement = document.createElement('li');
myItem3.textContent = 'item 3';
myList.appendChild(myItem3);

上述代码创建了一个无序列表，其中包含三个列表项。

有序列表

有序列表使用数字或字母来标记列表项。使用 <ol> 标签来创建有序列表，使用 <li> 标签来创建列表项。

const myList: HTMLOListElement = document.createElement('ol');
const myItem1: HTMLLIElement = document.createElement('li');
myItem1.textContent = 'item 1';
myList.appendChild(myItem1);

const myItem2: HTMLLIElement = document.createElement('li');
myItem2.textContent = 'item 2';
myList.appendChild(myItem2);

const myItem3: HTMLLIElement = document.createElement('li');
myItem3.textContent = 'item 3';
myList.appendChild(myItem3);

上述代码创建了一个有序列表，其中包含三个列表项，由数字 1、2、3 标记。

自定义项目符号

我们还可以使用 CSS 样式自定义项目符号。首先，我们需要通过 CSS 样式为列表项设置自定义项目符号：

ul.my-list li {
  list-style-type: none;
  padding-left: 1em;
  position: relative;
}

ul.my-list li:before {
  content: "\2022";
  position: absolute;
  left: -1em;
}

上述 CSS 样式为类为 my-list 的无序列表中的每个列表项设置了一个实心圆圈作为项目符号。接着，在 TypeScript 中创建无序列表时，需要设置其类名为 my-list：

const myList: HTMLUListElement = document.createElement('ul');
myList.classList.add('my-list');

const myItem1: HTMLLIElement = document.createElement('li');
myItem1.textContent = 'item 1';
myList.appendChild(myItem1);

const myItem2: HTMLLIElement = document.createElement('li');
myItem2.textContent = 'item 2';
myList.appendChild(myItem2);

const myItem3: HTMLLIElement = document.createElement('li');
myItem3.textContent = 'item 3';
myList.appendChild(myItem3);

上述代码创建了一个无序列表，其中包含三个列表项。每个列表项使用实心圆圈作为项目符号。