Hướng dẫn how do you make a line in html? - làm thế nào để bạn tạo một dòng trong html?


Thí dụ

Sử dụng thẻ để xác định các thay đổi theo chủ đề trong nội dung:

Các ngôn ngữ chính của web

HTML là ngôn ngữ đánh dấu tiêu chuẩn để tạo các trang web. HTML mô tả cấu trúc của một trang web và bao gồm một loạt các yếu tố. Các phần tử HTML cho trình duyệt biết cách hiển thị nội dung.


CSS là ngôn ngữ mô tả cách các phần tử HTML được hiển thị trên màn hình, giấy hoặc trên các phương tiện khác. CSS tiết kiệm rất nhiều công việc, bởi vì nó có thể kiểm soát bố cục của nhiều trang web cùng một lúc.


CSS là ngôn ngữ mô tả cách các phần tử HTML được hiển thị trên màn hình, giấy hoặc trên các phương tiện khác. CSS tiết kiệm rất nhiều công việc, bởi vì nó có thể kiểm soát bố cục của nhiều trang web cùng một lúc.

JavaScript là ngôn ngữ lập trình của HTML và Web. JavaScript có thể thay đổi nội dung HTML và giá trị thuộc tính. JavaScript có thể thay đổi CSS. JavaScript có thể ẩn và hiển thị các yếu tố HTML, và nhiều hơn nữa.

Hãy tự mình thử »


Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng

Thẻ

hr { display: block; margin-before: 0.5em; margin-after: 0.5em; margin-start: auto; margin-end: auto; overflow: hidden; border-style: inset; border-width: 1px;}
0 xác định một lỗi theo chủ đề trong trang HTML (ví dụ: sự thay đổi của chủ đề).


Phần tử hr { display: block; margin-before: 0.5em; margin-after: 0.5em; margin-start: auto; margin-end: auto; overflow: hidden; border-style: inset; border-width: 1px;}0 thường được hiển thị như một quy tắc ngang được sử dụng để tách nội dung (hoặc xác định thay đổi) trong trang HTML.

Hỗ trợ trình duyệt
Yếu tốYes Yes Yes Yes Yes

Đúng

Thuộc tính toàn cầu


Thẻ hr { display: block; margin-before: 0.5em; margin-after: 0.5em; margin-start: auto; margin-end: auto; overflow: hidden; border-style: inset; border-width: 1px;}0 cũng hỗ trợ các thuộc tính toàn cầu trong HTML.

Thuộc tính sự kiện



Thẻ hr { display: block; margin-before: 0.5em; margin-after: 0.5em; margin-start: auto; margin-end: auto; overflow: hidden; border-style: inset; border-width: 1px;}0 cũng hỗ trợ các thuộc tính sự kiện trong HTML.

Thí dụ

Nhiều ví dụ hơn


JavaScript là ngôn ngữ lập trình của HTML và Web. JavaScript có thể thay đổi nội dung HTML và giá trị thuộc tính. JavaScript có thể thay đổi CSS. JavaScript có thể ẩn và hiển thị các yếu tố HTML, và nhiều hơn nữa.

Thí dụ

Hãy tự mình thử »


JavaScript là ngôn ngữ lập trình của HTML và Web. JavaScript có thể thay đổi nội dung HTML và giá trị thuộc tính. JavaScript có thể thay đổi CSS. JavaScript có thể ẩn và hiển thị các yếu tố HTML, và nhiều hơn nữa.

Thí dụ

Hãy tự mình thử »


JavaScript là ngôn ngữ lập trình của HTML và Web. JavaScript có thể thay đổi nội dung HTML và giá trị thuộc tính. JavaScript có thể thay đổi CSS. JavaScript có thể ẩn và hiển thị các yếu tố HTML, và nhiều hơn nữa.

Thí dụ

Hãy tự mình thử »


JavaScript là ngôn ngữ lập trình của HTML và Web. JavaScript có thể thay đổi nội dung HTML và giá trị thuộc tính. JavaScript có thể thay đổi CSS. JavaScript có thể ẩn và hiển thị các yếu tố HTML, và nhiều hơn nữa.


Hãy tự mình thử »

Thêm ví dụ "hãy thử nó" dưới đây.


Định nghĩa và cách sử dụng

Thẻ

hr { display: block; margin-before: 0.5em; margin-after: 0.5em; margin-start: auto; margin-end: auto; overflow: hidden; border-style: inset; border-width: 1px;}
0 xác định một lỗi theo chủ đề trong trang HTML (ví dụ: sự thay đổi của chủ đề).

Thí dụ

Phần tử

hr { display: block; margin-before: 0.5em; margin-after: 0.5em; margin-start: auto; margin-end: auto; overflow: hidden; border-style: inset; border-width: 1px;}
0 thường được hiển thị như một quy tắc ngang được sử dụng để tách nội dung (hoặc xác định thay đổi) trong trang HTML.
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

JavaScript là ngôn ngữ lập trình của HTML và Web. JavaScript có thể thay đổi nội dung HTML và giá trị thuộc tính. JavaScript có thể thay đổi CSS. JavaScript có thể ẩn và hiển thị các yếu tố HTML, và nhiều hơn nữa.


Hướng dẫn how do you make a line in html? - làm thế nào để bạn tạo một dòng trong html?

Cập nhật lần cuối - Thứ bảy ngày 09 tháng 1 năm 2021

Hướng dẫn how do you make a line in html? - làm thế nào để bạn tạo một dòng trong html?
Thật dễ dàng để thêm các đường ngang bằng cách sử dụng HTML hoặc CSS, nhưng nó có thể không hoạt động như bạn nghĩ.

Các dòng 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ử HR HR hoặc quy tắc biên giới CSS.

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

HTML có thẻ HR để khai báo thời gian cho nội dung. Trong các thông số kỹ thuật HTML cũ hơn, thẻ HR chỉ là một quy tắc theo chiều ngang và không cung cấp ý nghĩa ngữ nghĩa hiện tại. Ngày nay, nó không cung cấp một khoảng nghỉ 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 quyền kiểm soát nhiều hơn cho nhà thiết kế để làm cho thẻ HR khớp với chủ đề của trang web.

HTML nhấn mạnh bằng cách sử dụng phần tử HR

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

  • Phá vỡ theo chủ đề
  • Ngữ nghĩa
  • Nhận thức thị giác tốt hơn
  • Không có thẻ đóng

Nó đơn giản để thêm một đường ngang trong đánh dấu của bạn, chỉ cần thêm:. Các trình duyệt vẽ một đường trên toàn bộ chiều rộng của container, có thể là toàn bộ cơ thể hoặc một phần tử con.


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

Đây là một sự phá vỡ 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 một phần, trước một tiêu đề phụ mới.

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

Ngày nay, phần tử HR HR được tạo kiểu với CSS chứ không phải thuộc tính. Điều này không chỉ sử dụng đúng hệ thống (CSS) để xác định các quy tắc kết xuất mà nó cho phép bạn sử dụng lại quy tắc tương tự nhiều lần. Điều này làm cho mã của bạn có thể duy trì hơn và bố cục của bạn phù hợp hơn.

Các trình duyệt hiển thị đường dây bằng cách áp dụng các kiểu cho sự kết hợp giữa các kiểu nền và đường viền. Biên giới là kiểu chính cho dòng mặc định. Loại bỏ đường viền cũng loại bỏ dòng.

style="border: none;">

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ể cản trở 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à:

hr { display: block; margin-before: 0.5em; margin-after: 0.5em; margin-start: auto; margin-end: auto; overflow: hidden; border-style: inset; border-width: 1px;}

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

hr {width: 60%;margin-left: auto;margin-right: auto;}

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

hr {width: 300px;margin-left: auto;margin-right: auto;height: 100px;background-color:#666;opcaity: 0.5;}

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

hr {width: 80%;height: 8px;margin-left: auto;margin-right: auto;background-color:#666;border: 0 none;margin-top: 100px;margin-bottom:100px;}

Bạn có thể áp dụng nhiều biến thể kiểu khác nhau cho các đường ngang của bạn. Bạn không giới hạn chỉ màu sắc và chiều rộng. Ở đây tôi đặt kiểu nền của đường ngang thành hình ảnh của 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 tập trung dòng.

Pro-tip: Đặ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.

 .five-star-line { height: 20px; background-image: url(img/5-star-rating.png); background-repeat: repeat-x; background-position: center; background-color: transparent; border: none; width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; }

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

Có niềm vui á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 viết về việc tạo các 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 dòng nằm ngang, bạn có thể làm một số điều khá thú vị với phần tử HR.

Nhưng trước tiên, chúng ta 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 dòng thành một đường nét đứt.

 .striped-border { border: 1px dashed #000; width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; }

Bây giờ, áp dụng một trong các kỹ thuật sọc cho đường ngang. Ở đây tôi sử dụng các cấp độ tuyến tính để làm cho ảnh hưởng. Đường viền của đường ngang được xóa và kích thước được đặt thành 40px. 40px là tùy ý, điều quan trọng là tạo ra hai độ dốc tuyến tính đầu tiên 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.

.zig-zag { border: none; width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; height: 40px; background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -20px 0, linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -20px 0, linear-gradient(315deg, #ECEDDC 25%, transparent 25%), linear-gradient(45deg, #ECEDDC 25%, transparent 25%); background-size: 40px 40px; background-color: #EC173A;}

Biế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 bạn thú vị hơn. Phần tử nhân sự theo truyền thống là một đường ngang, nhưng với thuộc tính biến đổi CSS, bạn có thể thay đổi cách chúng nhìn. Một chuyển đổi yêu thích trên phần tử HR là thay đổi vòng quay.

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

 .incline-line{ width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; transform: rotate(10deg); border-color: purple; }

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

 .vertical-line{ width: 50%; margin: auto; margin-top: 50%; margin-bottom: 50%; transform: rotate(90deg); border-color: purple; }

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 bạn có thể áp dụng các biến đổi cho phần tử HR.

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ử HR HR cung cấp ý nghĩa ngữ nghĩa cho bố cục của một 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 ra bố cục rất thú vị.