Làm thế nào để bạn chèn một dòng trong mã html?

Bắt đầu từ HTML5, bây giờ chúng ta cần đính kèm dấu gạch chéo vào thẻ của phần tử trống. Vì vậy, thay vì chỉ có

0, bạn nên làm cho nó có

1

Trong các trình duyệt, thẻ

1 được hiển thị dưới dạng thước kẻ hoặc đường kẻ ngang, như thế này

Các thuộc tính của thẻ

1

Thẻ

1 chấp nhận các thuộc tính như

4,

5,

6 và

7

Trước khi cho bạn thấy các thuộc tính riêng lẻ trông như thế nào và hoạt động như thế nào, tôi sẽ đặt mọi thứ trong phần thân vào trung tâm bằng mã CSS này

body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

Thuộc tính chiều rộng

Thuộc tính

4 được sử dụng để chỉ định chiều rộng cho thẻ

1. Nó lấy pixel hoặc tỷ lệ phần trăm làm giá trị

Thuộc tính màu

Thuộc tính

5 được sử dụng để chỉ định màu cho thẻ

1

________số 8

Đây là giao diện của nó nếu chúng ta đặt màu xanh lục cho thẻ

1

Thuộc tính kích thước

Bạn có thể xác định chiều cao cho thẻ

1 bằng thuộc tính

6. Giá trị phải được đặt bằng pixel

0

Chiều cao của

5 trông giống như ảnh chụp màn hình bên dưới

Thuộc tính căn chỉnh

Thuộc tính

7 được sử dụng để đặt căn chỉnh cho thẻ

1. Nó nhận các giá trị

8,

9 và

00

Mặc định là bên trái – nghĩa là nếu căn chỉnh không được đặt, thẻ

1 sẽ tự động căn bên trái

6

Đặt căn chỉnh của

00 cho thẻ

1 trông như thế này

Sự kết luận

Bài viết này cho bạn biết thẻ

1 trông như thế nào, nó được dùng để làm gì và các thuộc tính mà nó chấp nhận

Vì thẻ

1 xuất hiện dưới dạng quy tắc nằm ngang trong trình duyệt nên bạn có thể nghĩ đến việc sử dụng thẻ này để vẽ một đường

Nhưng bạn không nên làm điều này vì quy tắc ngang chỉ xuất hiện về mặt trình bày, không phải về mặt ngữ nghĩa. Thay vào đó, bạn nên vẽ một đường thẳng bằng

06 hoặc

07 tùy từng trường hợp.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ nó với bạn bè và gia đình của bạn

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Kolade Chris

Nhà phát triển web và nhà văn kỹ thuật tập trung vào các công nghệ giao diện người dùng

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Các đường kẻ ngang là một cách để phân tách nội dung và có thể được thực hiện bằng cách sử dụng phần tử nhân sự HTML hoặc quy tắc đường viền CSS

Hôm nay tôi sẽ chỉ cho bạn cách sử dụng phần tử HTML U để thêm ý nghĩa ngữ nghĩa cho phần gạch chân của bạn và CSS để tô điểm cho chúng. Bạn cũng sẽ học cách chỉ sử dụng CSS để thêm gạch chân vào văn bản và nội dung

HTML có thẻ hr để tuyên bố ngắt theo chủ đề cho nội dung. Trong các đặc tả HTML cũ hơn, thẻ HR chỉ là một quy tắc ngang và không cung cấp ý nghĩa ngữ nghĩa như bây giờ. Ngày nay, nó không cung cấp dấu ngắt có thể nhìn thấy, nhưng nên được tạo kiểu bằng CSS. Điều này mang lại nhiều quyền kiểm soát hơn cho nhà thiết kế để làm cho thẻ nhân sự phù hợp với chủ đề của trang web

• Gạch dưới HTML bằng cách sử dụng phần tử nhân sự
• Màu, kích thước và kiểu đường kẻ ngang HTML với CSS
• Vui vẻ khi áp dụng các kiểu cho các đường ngang
• Chuyển đổi các yếu tố nhân sự
• Bản tóm tắt

Gạch dưới HTML bằng cách sử dụng phần tử nhân sự

Kể từ khi bắt đầu HTML, hoặc ít nhất là theo như tôi có thể nhớ, phần tử U là một cách nhanh chóng và bẩn thỉu để chèn một đường ngang hoặc thước kẻ ngang vào một trang web. Phần tử U rất tuyệt vì nó có thể được sử dụng cho các tình huống sau

• Nghỉ theo chủ đề
• ngữ nghĩa
• Nhận thức trực quan tốt hơn
• Không có thẻ đóng

Its simple to add a horizontal line in your markup, just add: . Browsers draw a line across the entire width of the container, which can be the entire body or a child element.

Ban đầu, phần tử nhân sự được tạo kiểu bằng các thuộc tính. Ngày nay, với HTML5, thẻ nhân sự đã trở thành ngữ nghĩa, có nghĩa là nó cho trình duyệt, công nghệ đọc hỗ trợ và hệ thống tự động khác biết rằng có một ngắt theo chủ đề ở cấp độ đoạn văn.

Đây là một sự gián đoạn trong luồng nội dung, nhưng không phải là một trang mới. Nó tốt hơn phục vụ như một hàng đợi trực quan của một sự thay đổi trong chủ đề. Ví dụ: bạn có thể đặt chúng ở cuối phần, trước tiêu đề phụ mới

Màu, kích thước và kiểu đường kẻ ngang HTML với CSS

Ngày nay, phần tử nhân sự HTML được tạo kiểu bằng CSS thay vì thuộc tính. Điều này không chỉ sử dụng đúng hệ thống [CSS] để xác định quy tắc hiển thị mà còn cho phép bạn sử dụng lại cùng một quy tắc nhiều lần. Điều này làm cho mã của bạn dễ bảo trì hơn và bố cục của bạn nhất quán hơn

Các trình duyệt hiển thị đường bằng cách áp dụng các kiểu cho sự kết hợp của kiểu nền và đường viền. Đường viền là kiểu chính cho dòng mặc định. Xóa đường viền cũng xóa dòng

0

Tại sao bạn muốn làm điều này?

Một dòng vô hình vẫn có thể hữu ích để cung cấp thông tin ngữ nghĩa cho tác nhân người dùng mà không có sự lộn xộn trực quan có thể ảnh hưởng đến trải nghiệm người dùng mong muốn

Các kiểu mặc định HR của trình duyệt phổ biến là

1

Bạn có thể kiểm soát độ rộng của dòng bằng cách đặt thuộc tính chiều rộng và sau đó căn giữa nó bằng quy tắc CSS sau

2

Bạn cũng có thể điều chỉnh độ dày của đường bằng cách đặt giá trị chiều cao. Màu được đặt bằng thuộc tính màu nền. Như một phần thưởng, bạn cũng có thể sử dụng thuộc tính độ mờ để làm cho đường bán trong suốt

3

Trình duyệt thông thường đặt lề thành khoảng một nửa chiều rộng của ký tự. Nhưng bạn có thể thay đổi giá trị này thành bất kỳ giá trị nào bạn muốn. Điều này có thể thêm khoảng trắng chất lượng vào bố cục của bạn và nhấn mạnh sự ngắt quãng nội dung

4

Bạn có thể áp dụng nhiều biến thể phong cách khác nhau cho các đường kẻ ngang của mình. Bạn không bị giới hạn chỉ về màu sắc và chiều rộng. Ở đây tôi đặt kiểu nền của đường kẻ ngang thành hình 5 ngôi sao màu vàng. Sau đó, tôi làm cho chúng lặp lại trên trục x trong khi căn giữa đường

tiền boa. đặt màu nền thành trong suốt để bạn không vô tình hiển thị màu phía sau hình ảnh

5

Điều chỉnh kích thước, màu sắc và kiểu đường viền sẽ làm cho đường trông khác đi và có tác dụng giống nhau trong tất cả các trình duyệt hiện đại. Ví dụ: trong phần minh họa này, đường viền có màu đỏ, nét đứt và rộng 1px

Vui vẻ khi áp dụng các kiểu cho các đường ngang

Một vài tuần trước, tôi đã xuất bản một bài báo về cách tạo sọc nền bằng CSS. Bởi vì bạn có thể áp dụng các quy tắc nền tương tự cho một đường nằm ngang, bạn có thể thực hiện một số điều khá thú vị với phần tử nhân sự

Nhưng trước tiên, hãy xem một vài thủ thuật CSS đơn giản. Ví dụ đầu tiên này thay đổi kiểu của đường thành đường đứt nét

6

Bây giờ, áp dụng một trong các kỹ thuật kẻ sọc cho đường ngang. Ở đây tôi sử dụng linear-gradients để tạo hiệu ứng. Đường viền của đường ngang bị xóa và kích thước được đặt thành 40px. 40px là tùy ý, điều quan trọng là tạo hai gradient tuyến tính đầu tiên bằng một nửa chiều cao của HR. Bạn cũng sẽ cần đặt kích thước nền phù hợp với chiều cao

7

Chuyển đổi các yếu tố nhân sự

Với CSS3, bạn cũng có thể làm cho các dòng của mình thú vị hơn. Phần tử nhân sự theo truyền thống là một đường nằm ngang, nhưng với thuộc tính biến đổi CSS, bạn có thể thay đổi giao diện của chúng. Một phép biến đổi yêu thích trên phần tử nhân sự là thay đổi vòng quay

Bạn có thể xoay phần tử nhân sự của mình để nó hơi chéo

8

Hoặc bạn có thể xoay nó để nó hoàn toàn thẳng đứng

9

Bạn nên áp dụng điều này một cách thận trọng vì điều này có thể gây ra sự gián đoạn không mong muốn cho bố cục của bạn. Nhưng thật tốt khi biết rằng bạn có thể áp dụng các phép biến đổi cho phần tử nhân sự

Bản tóm tắt

Các đường ngang là một cách tuyệt vời để thêm giá trị trực quan vào bố cục của bạn. Phần tử nhân sự HTML cung cấp ý nghĩa ngữ nghĩa cho bố cục của trang. Nó chỉ có thể được tùy chỉnh bằng CSS. Nhưng bạn có thể áp dụng tất cả các loại phong cách điên rồ cho một đường ngang để tạo ảnh hưởng bố cục rất thú vị

Chia sẻ bài viết này với bạn bè của bạn

Cách sử dụng phần tử Datalist cho mục nhập có hướng dẫn

Cách đăng ký bản quyền hợp lệ⚖ một trang web - Yêu cầu về pháp lý & HTML👨🏼‍💻

Không gian HTML và CSS 🌌 Tạo bố cục để tăng người dùng 🙌 Tương tác bằng cách sử dụng chiều cao dòng, khoảng trắng và lề 📦

Làm cách nào tôi có thể tạo một dòng trong HTML?

Thẻ HTML cho một dòng là gì?