Sự hiểu biết hiện tại của tôi là các phần tử HTML khác nhau được phân tách về chức năng của chúng bằng kiểu CSS mặc định, sang một bên ngữ nghĩa.

Sử dụng CSS tùy chỉnh, bạn có thể (không thể ngờ được) làm cho bất kỳ phần tử HTML nào hoạt động giống như bất kỳ phần tử nào khác.

Nếu điều đó là chính xác, điều duy nhất tôi không thể giải thích là các dấu đầu dòng trên <li>các phần tử. CSS gây ra chúng? Làm thế nào bạn có thể thêm nó vào các phần tử khác?

Lưu ý cho độc giả trong tương lai: Gần đây tôi đã biết các phần tử HTML cũng khác nhau theo danh mục nội dung .

Các dấu đầu dòng được chứa "trong" phần đệm của <ul>phần tử:

Phần đệm được đánh dấu màu xanh lá cây và lề màu cam:

Giảm phần đệm cho thấy rằng các viên đạn nằm "trong" phần đệm đó:

<ul>Ví dụ, tăng lợi nhuận của ví dụ, sẽ dịch chuyển nó sang phải.

Tài list-stylesản tự điều khiển đạn. Đặt nó thành nonesẽ ẩn chúng. Bạn sẽ cần đặt lề và đệm 0nếu bạn cũng muốn loại bỏ thụt lề.

ul
{
    list-style: none;
}

Nếu bạn muốn loại bỏ tất cả các lề / đệm và các dấu đầu dòng, hãy sử dụng điều này:

ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

Tất nhiên, bạn cũng có thể áp dụng dấu đầu dòng cho các điều khiển HTML khác:

div
{
    padding-left: 40px;
}
a
{
    display: list-item;
    list-style: disc;
}

<div>
    <a href="#">Item #1</a>
    <a href="#">Item #2</a>
    <a href="#">Item #3</a>
    <a href="#">Item #4</a>
</div>

Các trình duyệt thường có "biểu định kiểu mặc định" —một tập hợp các kiểu CSS áp dụng cho các phần tử HTML cụ thể. Hãy xem các kiểu mặc định của Firefox , kiểu mặc định của Chrome và kiểu mặc định của IE .

Thông thường, <ul>thẻ có các kiểu CSS có thể ghi đè mặc định sau:

ul {
  display: block;
  list-style-type: disc;
  margin-before: 1em; /* equivalent to margin-top in most languages */
  margin-after: 1em;  /* equivalent to margin-bottom in most languages */
  margin-start: 0px;  /* equivalent to margin-left in LTR */
  margin-end: 0px;    /* equivalent to margin-right in LTR */
  padding-start: 40px;/* equivalent to padding-left in LTR*/
}

• list-style-type: disc khiến biểu tượng đĩa xuất hiện bên cạnh mục.
• list-style-positionvà list-style-imagechưa được đặt. Giá trị mặc định của chúng lần lượt là outsidevà none. Điều này có nghĩa là discbiểu tượng được xác định ở trên sẽ xuất hiện ở bên trái của liphần tử (trong hầu hết các ngôn ngữ) và không can thiệp vào lichính hộp hiển thị.
• Các marginvà paddingcài đặt đặt nội dung đúng cách.

Một <li>thẻ như sau:

li {
  display: list-item;
}

• display: list-itemtương tự như display: block;và cho phép các mục danh sách riêng biệt xuất hiện trên các dòng khác nhau.

Xem trang này https://css-tricks.com/almanac/properties/l/list-style/

Các viên đạn đến từ các phần tử ul. Bạn có thể sửa đổi chúng bằng cách sử dụng thuộc tính list-style-type hoặc list-style-image

Dấu đầu dòng cho <li>các phần tử chỉ là mặc định của trình duyệt. Cũng giống như nó có phông chữ mặc định, kích thước phông chữ, gạch dưới cho các liên kết (màu xanh lam), v.v. Để đảm bảo bạn ghi đè mặc định của trình duyệt, hãy sử dụng một số css reset http://cssreset.com/ hoặc bootstrap css.

Phong cách cho <li>được xác định bởi <ul>hoặc bao <ol>quanh nó. ví dụ

ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}
ol.lower-alpha {list-style-type: lower-alpha;} 
ul.image{ list-style-image: url("//cdn.sstatic.net/stackoverflow/img/favicon.ico?v=6cd6089ee7f6");} 
ul.singleline { display:flex; list-style:none; } // css3 only

<ul class="circle">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ul class="square">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ol class="upper-roman">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>
<ol class="lower-alpha">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>
<ul class="image">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
<ul class="singleline">
    <li>One </li>
    <li>Two </li>
    <li>Three </li>
</ul>

Tôi nghĩ câu hỏi ban đầu thực sự là, "làm thế nào tôi có thể thêm dấu đầu dòng vào các phần tử KHÁC, vì CSS được cho là cho phép bạn tạo kiểu bất kỳ thứ gì (như phần tử p) để trông giống một cái gì đó khác (như LI).

Câu trả lời dường như là, LI là một trường hợp đặc biệt, AFAIK. Có thể là sai. Tôi đã thử thêm <style="display: list-item; list-style-type:disc;">vào <p>các phần tử và không nhận được dấu đầu dòng. (Chỉ được thử nghiệm với Chrome).

Bạn thực sự có thể thêm các ký tự dấu đầu dòng ( •) theo cách thủ công hoặc theo chương trình vào đầu mỗi phần tử p và đặt lề và phần đệm để trông giống như một khối UL / LI, tôi đoán vậy.

Dấu đầu dòng trên các mục danh sách là một ví dụ về nội dung đã tạo . Ví dụ khác về nội dung được tạo ra bao gồm các con số trong danh sách đặt hàng, quầy CSS và :beforevà :afterpseudo-yếu tố.

CSS gây ra chúng?

Đặt display: list-itemtrên một phần tử sẽ làm cho nó hiển thị dấu đầu dòng. Bạn cũng có thể thay đổi diện mạo và vị trí .

Làm thế nào bạn có thể thêm nó vào các phần tử khác?

Xem các ví dụ bên dưới:

.mylist.type1 > span {
  display: list-item;
  /* inside: the marker is placed inside the element box before its content */
  list-style-position: inside;
}
.mylist.type2 > span {
  display: list-item;
  /* outside (default): the marker is placed outside the element box towards left */
  /* by the way you are not restricted to just bullets */
  list-style-type: lower-roman;
}
.mylist.type2 {
  /* add some room on left for bullets positioned outside */
  padding-left: 2em;
}

<div class="mylist type1">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>
<hr>
<div class="mylist type2">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

Để kiểm soát chính xác hơn, tôi khuyên bạn nên sử dụng các phần tử giả (và bộ đếm CSS nếu bạn muốn đếm).