Paragraph đơn giản

Trở về

  • 2,413

Thể hiện một đoạn văn bản thông qua html là một trong những kiến thức đơn giản nhất, tuy nhiên không phải ai cũng hiểu rõ cách viết như thế nào cho đúng chuẩn.

Văn bản (paragraph) đơn giản

Thể hiện một đoạn văn bản đơn giản bằng tag <p>

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<p>Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng, với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng.</p>
</body>
</html>

Hiển thị trình duyệt:

Download file để thực hành

Xuống hàng trong cùng đoạn văn bản

Xuống hàng trong cùng đoạn văn bản bằng tag <br />

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<p>Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng.<br />
với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng.</p>
</body>
</html>

Hiển thị trình duyệt:

Xuống hàng khác đoạn văn bản

Xuống hàng khác đoạn văn bản ta sử dụng 2 tag <p>

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
p {
    margin-bottom: 15px;
}
</style>
</head>
<body>
<p>Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng.</p>
<p>với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng.</p>
</body>
</html>

Hiển thị trình duyệt:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.