Chào mừng bạn đến blog Ynghialagi.com Trang Chủ

Table of Content

Trang chủ
Bài đăng

Các thẻ (tag) nào được dùng để mô tả một danh sách không thứ tự (danh sách với bullets) Mới nhất

Mẹo về Các thẻ (tag) nào được sử dụng để mô tả một list không thứ tự (list với bullets) 2022


You đang tìm kiếm từ khóa Các thẻ (tag) nào được sử dụng để mô tả một list không thứ tự (list với bullets) được Update vào lúc : 2022-03-27 11:22:17 . Với phương châm chia sẻ Bí kíp Hướng dẫn trong nội dung bài viết một cách Chi Tiết 2022. Nếu sau khi đọc Post vẫn ko hiểu thì hoàn toàn có thể lại Comment ở cuối bài để Mình lý giải và hướng dẫn lại nha.


Thẻ ul, ol và li là một trong những thẻ HTML cơ bản, thường xuyên được sử dụng. Hôm nay Freehost Page sẽ hướng dẫn bạn cách sử dụng chúng.


Nội dung chính


  • Danh sách dùng để làm gì?

  • Sự rất khác nhau giữa ul và ol

  • Thay đổi Style của thẻ li

  • 1. Thẻ list có thứ tự Ordered List <ol>

  • 2. Thẻ list không còn thứ tự Unordered List <ul>

  • 3.Thẻ xác lập list <dl>


    • Danh sách dùng để làm gì?


    Danh sách là những thứ mà có liên quan mật thiết với nhau do có điểm lưu ý chung nào đó, ví dụ điển hình list học viên trong một lớp, list những công ty giàu nhất toàn thế giới, list nhiều chủng loại thực phẩm tốt cho trí não…


    Khi bạn sử dụng thẻ list, nghĩa là bạn thông báo cho những người dân đọc cũng như những công cụ tìm kiếm biết sự liên quan của những thành phần nằm trong list.


    Sự rất khác nhau giữa ul và ol


    Các list không còn thứ tự kiểu như vậy này:



    Được tạo thành từ những thẻ ul và li


    —


    Còn list được đánh thứ tự kiểu như vậy này:


    Được tạo thành từ những thẻ ol và li.


    Code mẫu


    Code mẫu cho list không còn thứ tự ul li ở trên:


    <ul>

    <li>Táo</li>

    <li>Mận</li>

    <li>Đào</li>

    </ul>


    Còn dưới đấy là của list có thứ tự ol li:


    <ol>

    <li>Toán</li>

    <li>Lý</li>

    <li>Hóa</li>

    </ol>


    Nhìn cả hai list toàn bộ chúng ta hoàn toàn có thể thấy, list có thứ tự và không còn thứ tự đều cần đến thẻ <li></li> nằm trong tâm.


    Giải thích từ viết tắt: ul là viết tắt của từ tiếng Anh unordered list (nghĩa là không còn thứ tự), li là viết tắt của list, còn ol là viết tắt của ordered list (nghĩa là có thứ tự).


    Để kiểm soát và điều chỉnh style cho list bạn dùng CSS. Một bộ phận hoàn toàn có thể bạn không để ý, đó là menu thường được viết bằng thẻ những thẻ ul và li để thể hiện sự liên quan với nhau.


    Thay đổi Style của thẻ li


    Thẻ li theo mặc định nếu ở trong thẻ ul sẽ có được style kiểu chấm tròn đậm, còn nếu trong thẻ ol sẽ có được style kiểu số như một, 2, 3,…CSS được cho phép toàn bộ chúng ta tùy biến style này qua thuộc tính list-style-type. Sau đấy là một số trong những ví dụ:


    1. Style chấm tròn nhạt



    Code mẫu – bạn để ý quan tâm cái list-style-type:


    <ul style=”list-style-type: circle;”>

    <li>Táo</li>

    <li>Mận</li>

    <li>Đào</li>

    </ul>


    2. Style hình vuông vắn đậm



    <ul style=”list-style-type: square;”>

    <li>Táo</li>

    <li>Mận</li>

    <li>Đào</li>

    </ul>


    Dĩ nhiên là bạn phải để style cho ul trong file CSS riêng chứ không viết trực tiếp vào trong thẻ HTML như trên, tôi viết ra thế cho dễ quan sát và minh họa thôi.


    Nếu muốn hủy bỏ style – tức là không chấm tròn, chấm vuông hay số má gì hết thì bạn để list-style-type: none; thường thì toàn bộ chúng ta chỉ sử dụng giá trị none khi làm menu bằng ul và li.


    Có bạn hỏi thế những list-style mặc định mang tên là gì, tôi xin nói luôn:


    • Style kiểu chấm tròn của ul là list-style-type: disc

    • Còn style kiểu số của ol là list-style-type: decimal

    Vì nó là style mặc định rồi nên bạn không cần viết CSS thì nó vẫn hiện chấm tròn và số tương ứng.


    3. Style là ảnh


    Cái này phải nói là rất hay, bạn hoàn toàn có thể không thích mấy cái chấm tròn, chấm vuông, số, ký tự…và lại thích list được ghi lại bằng ảnh của riêng bạn, nó làm cho website trở nên đậm cá tính hơn, toàn bộ chúng ta kiểm soát và điều chỉnh điều này thông qua thuộc tính list-style-image, tôi thí dụ luôn:


    Code mẫu: 


    <ul style=”list-style-image: url(‘https://cdn.freehost.page/wp-content/uploads/2022/02/bullet-yellow.png’);”>

    <li>Táo</li>

    <li>Mận</li>

    <li>Đào</li>

    </ul>


    Trong URL đó đó là đường dẫn của ảnh mà bạn muốn nó làm bullet. Nếu muốn bạn hoàn toàn có thể tự vẽ ra bullet bằng công cụ đồ họa nào đó, hoặc cách nhanh hơn là lên trang IconFinder tìm với từ khóa bullet rồi chọn cho mình một chú mang về – rất tiện mà cũng đẹp nữa.


    4. Điều chỉnh vị trí của thẻ list


    Để kiểm soát và điều chỉnh vị trí của list toàn bộ chúng ta dùng thuộc tính list-style-position, thuộc tính này còn có 2 giá trị inside và outside, trong số đó outside là giá trị mặc định. Dưới đấy là những ví dụ để bạn thấy sự rất khác nhau giữa chúng:


    A. inside


    ul

    list-style-position:inside;


    B. outside


    ul

    list-style-position:outside;


    Bonus


    Cuối cùng tôi tặng bạn list 10 vương quốc đông dân nhất toàn thế giới xếp theo thứ tự giảm dần và được tạo bằng thẻ ol và li:


  • CHND Trung Hoa

  • Ấn Độ

  • Hoa Kỳ

  • Indonesia

  • Brazil

  • Pakistan

  • Nigeria

  • Bangladesh

  • Liên Bang Nga

  • Nhật Bản

    • tin tức 10 vương quốc này được tìm hiểu thêm từ Wikipedia Việt Nam – cũng Từ đó Việt Nam đứng vị trí số 14 về dân số, mà khổ nỗi diện tích s quy hoạnh nước mình bé đâm ra giá bất động sản lên rất cao quá (chẳng liên quan gì tới ul và li nhỉ :))


    Trong thiết kế và xây dựng Website những thẻ list được sử dụng thật nhiều nhất là trong việc làm menu do đó việc làm rõ những thẻ list rất quan trọng. Trong bài học kinh nghiệm tay nghề toàn bộ chúng ta sẽ cùng nhau tìm hiểu về 3 dạng thẻ list.


    1. Thẻ list có thứ tự Ordered List <ol>


    Thẻ <ol> được sử dụng để tạo một list có thứ tự. Mỗi phần tự của list được định nghĩa bên trong thẻ <li> (list item). Ví dụ để trở thành một Frontend Developer toàn bộ chúng ta cần học:


    <html>

    <head> <title>First Web</title> <meta charset=”utf-8″>

    </head>

    <body toàn thân> <ol> <li> Học HTMl </li> <li> Học CSS </li> <li> Học JavaScript </li> </ol>

    </body toàn thân>

    </html>


    Kết quả:


  • Học HTML

  • Học CSS

  • Học JavaScript

    •  Bên trong thẻ <ol></ol> chỉ chứa trực tiếp một thẻ duy nhất <li></li>. Mỗi thẻ <li> tương ứng với một khuôn khổ có chỉ mục được đánh số thứ tự.

    • Chúng ta hoàn toàn có thể thay đổi những chỉ mục từ số latinh mặc định sang kiểu số La Mã (I, II, III,..) hoặc kiểu vần âm như a, b, c… ở phiên bản HTML 4 trở về trước. Phiên bản HTML 5 hiện tại không tương hỗ mà toàn bộ chúng ta chỉ hoàn toàn có thể thay đổi nó ở trong CSS.

    • Bên trong thẻ <li></li> chứa được hầu hết những thẻ HTML/HTML5, tuy nhiên không được chứa một số trong những thẻ sau này: <html>, <meta>, <body toàn thân>, <link>,…

    2. Thẻ list không còn thứ tự Unordered List <ul>


    Thẻ <ul> được sử dụng để tạo một list không còn thứ tự. Mỗi phần tự của list được định nghĩa bên trong thẻ <li>.


    <html>

    <head> <title>First Web</title> <meta charset=”utf-8″>

    </head>

    <body toàn thân> <ul> <li> Học HTMl </li> <li> Học CSS </li> <li> Học JavaScript </li> </ul>

    </body toàn thân>

    </html>


    Kết quả:


    • Học HTML

    • Học CSS

    • Học JavaScript

    Lưu ý:


    • Giống như thẻ <ol>.  Bên trong thẻ <ul></ul> chỉ chứa trực tiếp một thẻ duy nhất <li></li>. Mỗi thẻ <li> tương ứng với một khuôn khổ.

    • Thẻ <ul> được sử dụng thật nhiều để làm menu.

    • Đôi khi bạn hoàn toàn có thể thấy một loại chỉ mục khác ví như trên như hình vuông vắn,… Thuộc tính này sẽ tiến hành trình làng trong phần CSS ở những bài học kinh nghiệm tay nghề sau.

    • Bên trong thẻ <li></li> chứa được hầu hết những thẻ HTML/HTML5, tuy nhiên không được chứa một số trong những thẻ sau này: <html>, <meta>, <body toàn thân>, <link>,…

    3.Thẻ xác lập list <dl>


    Thẻ <dl> Definition List được sử dụng để xác lập list (có đề mục và phần mô tả đề mục). Nó thường được kết phù thích hợp với những thẻ


    • <dt> Description Term dùng để chứa thuật ngữ đang rất được định nghĩa

    • <dd> Dùng để chứa định nghĩa của thuật ngữ trên <dt>

    Ví dụ:


    <html>

    <head> <title>First Web</title> <meta charset=”utf-8″>

    </head>

    <body toàn thân> <dl> <dt> Lập trình: </dt> <dd> Là việc lập ra chương trình thao tác cho máy tính để thực thi trách nhiệm nào đó. </dd> <dt> Ngôn ngữ lập trình:</dt> <dd> Được sử dụng trong lập trình máy tính để thực thi những thuật toán</dd> </dl>

    </body toàn thân>

    </html>


    Kết quả:



    Lưu ý:


    • Thẻ <dl> chỉ dùng để xác lập một list mô tả. Còn về việc tạo những thuật ngữ trong list thì phải dùng thẻ <dt> và tạo những nội dung mô tả thì dùng thẻ <dd>

    Trên đấy là tổng hợp những thẻ tạo dang sách trong HTML. Để giúp những bạn thuận tiện và đơn thuần và giản dị tiếp cận hơn với bài học kinh nghiệm tay nghề Suntech đã xây dựng video hướng dẫn, bạn hoàn toàn có thể tìm hiểu thêm tại đây. Bạn hoàn toàn có thể đặt vướng mắc trao đổi về bài học kinh nghiệm tay nghề, góp thêm phần cho việc tăng trưởng của hiệp hội lập trình tại Group Facebook. Chúc những bạn học tốt!


    Chia Sẻ Link Download Các thẻ (tag) nào được sử dụng để mô tả một list không thứ tự (list với bullets) miễn phí


    Bạn vừa Read Post Với Một số hướng dẫn một cách rõ ràng hơn về Video Các thẻ (tag) nào được sử dụng để mô tả một list không thứ tự (list với bullets) tiên tiến và phát triển nhất và Chia SẻLink Tải Các thẻ (tag) nào được sử dụng để mô tả một list không thứ tự (list với bullets) miễn phí.



    Hỏi đáp vướng mắc về Các thẻ (tag) nào được sử dụng để mô tả một list không thứ tự (list với bullets)


    Nếu sau khi đọc nội dung bài viết Các thẻ (tag) nào được sử dụng để mô tả một list không thứ tự (list với bullets) vẫn chưa hiểu thì hoàn toàn có thể lại phản hồi ở cuối bài để Admin lý giải và hướng dẫn lại nha

    #Các #thẻ #tag #nào #được #dùng #để #mô #tả #một #danh #sách #không #thứ #tự #danh #sách #với #bullets

Đăng nhận xét