Khi viết HTML, bạn thường cần chèn ngắt dòng. Ngắt dòng là cần thiết trong địa chỉ, bài thơ hoặc khi văn bản vượt quá chiều rộng trình duyệt có sẵn. Nếu bạn không chèn dấu ngắt dòng của riêng mình, thì văn bản sẽ được định dạng theo một cách kỳ lạ
Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách chèn ngắt dòng trong mã HTML của bạn với một số ví dụ "có và không có", để bạn có thể bắt đầu sử dụng nó một cách chính xác và định dạng văn bản của mình tốt hơn
Cú pháp ngắt dòng HTML cơ bản
Bạn có thể chèn ngắt dòng trong HTML bằng thẻ
The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
2, thẻ này tương đương với dấu xuống dòng trên bàn phímXin lưu ý rằng HTML sẽ bỏ qua bất kỳ ngắt dòng nào từ phím quay lại của bàn phím
Nếu bạn đang thắc mắc tại sao lại có dấu gạch chéo lên trong thẻ
The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
2 ở trên, thì dấu gạch chéo này rất quan trọng khi HTML4 vẫn còn được sử dụng rộng rãi. Với HTML5, bạn không cần phải gạch chéo nữa. Nhưng cả hai sẽ làm điều tương tựNếu bạn đang sử dụng một trình định dạng mã như đẹp hơn, nó sẽ luôn chèn dấu gạch chéo khi bạn lưu hoặc dán ngay cả khi bạn không đặt nó vào đó
Cách chèn ngắt dòng trong địa chỉ
Ngắt dòng rất quan trọng khi bạn viết địa chỉ trên một bức thư, chẳng hạn như để định dạng đúng
Đây là một ví dụ về một địa chỉ không ngắt dòng
Địa chỉ không có ngắt dòng [
The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
2 thẻ] trông như thế này
The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
Tôi đã thêm một số mã CSS để căn giữa mọi thứ với Flexbox và làm cho văn bản lớn hơn một chút
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-size: 3rem;
max-width: 1000px;
margin: 0 auto;
}
Đây là giao diện của nó trong trình duyệt
Đây là địa chỉ có ngắt dòng
Và đây là cách chúng ta có thể thêm ngắt dòng để định dạng đúng địa chỉ của mình
The White House
1600 Pennsylvania Avenue
NW Washington, DC
20500
USA
Nó trông như thế này trong trình duyệt
Cách thêm ngắt dòng vào bài thơ
Các bài thơ thường được viết bằng các câu ngắt quãng ngắn để tạo ra các thứ bậc hình ảnh và định dạng chúng một cách độc đáo.
Vì vậy, nếu bạn muốn viết một bài thơ trong mã HTML của mình, thẻ
The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
2 giúp quá trình định dạng dễ dàng hơn cho bạnBài thơ không ngắt dòng
I dabbled around a lot when I decided to learn to code
I went from A to Z with resources
When I decided to make my own things
I discovered I've been in the old all while
So I remained a novice in coding
But then I found freeCodeCamp
I got my hands on the platform
I went from novice to ninja in coding
And now I'm a camper for life
Nó trông như thế này trong trình duyệt
Bạn có thể thấy bài thơ không có hệ thống phân cấp trực quan, nó không được định dạng đúng cách và vì vậy nó không thể đọc được như một bài thơ
Bài thơ có ngắt dòng
I dabbled around a lot when I decided to learn to code
I went from A to Z with resources
When I decided to make my own things
I discovered I've been in the old all while
So I remained a novice in coding
But then I found freeCodeCamp
I got my hands on the platform
I went from novice to ninja in coding
And now I'm a camper for life
Tôi cũng đã thay đổi kích thước phông chữ một chút trong CSS
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-size: 2.5rem;
max-width: 1000px;
margin: 0 auto;
}
Bây giờ nó trông như thế này trong trình duyệt
Bạn có thể thấy rằng bài thơ bây giờ dễ đọc hơn và được định dạng đúng cách
Một số lời khuyên có giá trị. Không sử dụng thẻ
The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
2 để tạo khoảng trắng giữa các thành phần cấp khối [
The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
2,
The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
3,
The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
4,
The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
5,
The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
6, v.v.]. Thay vào đó, hãy sử dụng thuộc tính lề CSSBạn có thể thắc mắc - vì thẻ
The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
2 là một phần tử, nên có thể tạo kiểu cho nó không?Vâng, nó có thể. Nhưng thực tế không có nhu cầu thực sự để tạo kiểu cho nó vì tất cả những gì nó làm là tạo ra một vài khoảng trắng
Phần kết luận
Tôi hy vọng hướng dẫn này đã cung cấp cho bạn kiến thức cơ bản cần thiết để sử dụng thẻ
The White House, 1600 Pennsylvania Avenue NW Washington, DC 20500, USA.
2 để bạn có thể làm cho văn bản HTML của mình trông đẹp hơnCảm ơn bạn đã đọc và tiếp tục mã hóa
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
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
Phần tử HTML chính xác để chèn một dòng là gì?
thẻ này được sử dụng cho dòng mới
Thẻ HTML chính xác để chèn Mcq ngắt dòng là gì?
dùng để chèn ngắt dòng trong HTML.