Bài 14: tạo danh sách trong html

Ví dụ về một danh sách có thứ tự và một danh sách đặt trong HTML:

Danh sách không có thứ tự:

Mục
Mục
Mục
Mục

Danh sách đặt hàng:

mục đầu tiên
Phần tử thứ hai
mục thứ ba
thứ tư

Chức năng HTML có thứ tự

Một danh sách có thứ tự bắt đầu với thẻ <ul>. Mỗi mục trong danh sách bắt đầu với <li> thẻ.

Danh sách các mục được đánh dấu bằng những viên đạn (vòng tròn nhỏ màu đen):

Thí dụ

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

Chức năng HTML thứ tự - The Style Attribute

Một thuộc tính style có thể được thêm vào một danh sách không có thứ tự, để xác định phong cách của các điểm đánh dấu:

Style	Description
list-style-type:disc	The list items will be marked with bullets (default)
list-style-type:circle	The list items will be marked with circles
list-style-type:square	The list items will be marked with squares
list-style-type:none	The list items will not be marked

Đĩa:

<ul style="list-style-type:disc">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

Vòng tròn:

<ul style="list-style-type:circle">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

Quảng trường:

<ul style="list-style-type:square">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

Không ai:

<ul style="list-style-type:none">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

Chức năng ra lệnh HTML

Một danh sách đặt hàng bắt đầu với thẻ <ol>. Mỗi mục trong danh sách bắt đầu với <li> thẻ.

Danh sách các mục được đánh dấu bằng những con số:

Thí dụ

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

Chức năng HTML ra lệnh - Các Loại Thuộc tính

Một loại thuộc tính có thể được thêm vào một danh sách đặt hàng, để xác định các loại điểm đánh dấu:

Type	Description
type="1"	The list items will be numbered with numbers (default)
type="A"	The list items will be numbered with uppercase letters
type="a"	The list items will be numbered with lowercase letters
type="I"	The list items will be numbered with uppercase roman numbers
type="i"	The list items will be numbered with lowercase roman numbers

số:

<ol type="1">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

Chữ in hoa:

<ol type="A">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

Chữ viết thường:

<ol type="a">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

Số hoa La Mã:

<ol type="I">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

Số La Mã chữ thường:

<ol type="i">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

HTML Mô tả Chức năng

HTML cũng hỗ trợ danh sách mô tả.

Một danh sách mô tả là một danh sách các từ, với một mô tả của từng kỳ hạn.

Thẻ <dl> xác định danh sách mô tả, <dt> thẻ xác định thời hạn (tên), và <dd> thẻ mô tả từng kỳ hạn:

Thí dụ

<dl>

  <dt>Coffee</dt>

  <dd>- black hot drink</dd>

  <dt>Milk</dt>

  <dd>- white cold drink</dd>

</dl>

Chức năng HTML lồng nhau

Danh sách có thể được lồng vào nhau (danh sách bên trong danh sách):

Thí dụ

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

      <li>Black tea</li>

      <li>Green tea</li>

    </ul>

  </li>

  <li>Milk</li>

</ul>

	Danh sách các mục có thể chứa danh sách mới, và những phần tử HTML, giống như hình ảnh và liên kết, vv

Chức năng ngang

danh sách HTML có thể được theo kiểu bằng nhiều cách khác nhau với CSS.

Một trong những cách phổ biến, là phong cách một danh sách sẽ được hiển thị theo chiều ngang:

Thí dụ

<!DOCTYPE html>

<html>

<head>

<style>
ul#menu li {
    display:inline;
}</style>

</head>

<body>

<h2>Horizontal List</h2>

<ul id="menu">

  <li>HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>

  <li>PHP</li>

</ul>

</body>

</html>

Với một phong cách thêm một chút, bạn có thể làm cho nó trông giống như một trình đơn:

Thí dụ

ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: orange;
}

Chương Tóm tắt

Sử dụng các phần tử HTML <ul> để xác định một danh sách có thứ tự
Sử dụng các thuộc tính style của HTML để xác định kiểu đạn
Sử dụng các phần tử HTML <ol> để xác định một danh sách đặt hàng
Sử dụng các loại thuộc tính HTML để xác định các loại số
Sử dụng các thẻ <li> yếu tố để xác định một mục danh sách
Sử dụng các thẻ <dl> yếu tố để xác định một danh sách mô tả
Sử dụng các phần tử HTML <dt> để định nghĩa thuật ngữ mô tả
Sử dụng các phần tử HTML <dd> để xác định dữ liệu mô tả
Chức năng có thể được lồng vào bên trong danh sách
Danh sách các mục có thể chứa các thành phần HTML khác
Sử dụng màn hình hiển thị thuộc tính CSS: inline để hiển thị một danh sách theo chiều ngang

Danh sách thẻ HTML

Tag	Description
<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines the term in a description list
<dd>	Defines the description in a description list

Bài 14: tạo danh sách trong html

Ví dụ về một danh sách có thứ tự và một danh sách đặt trong HTML:

Danh sách không có thứ tự:

Danh sách đặt hàng:

Chức năng HTML có thứ tự

Thí dụ

Chức năng HTML thứ tự - The Style Attribute

Đĩa:

Vòng tròn:

Quảng trường:

Không ai:

Chức năng ra lệnh HTML

Thí dụ

Chức năng HTML ra lệnh - Các Loại Thuộc tính

số:

Chữ in hoa:

Chữ viết thường:

Số hoa La Mã:

Số La Mã chữ thường:

HTML Mô tả Chức năng

Thí dụ

Chức năng HTML lồng nhau

Thí dụ

Chức năng ngang

Thí dụ

Thí dụ

Chương Tóm tắt

Danh sách thẻ HTML

0 Bình luận:

Đăng nhận xét

Recent Comments

Arsip Blog