Định dạng văn bản trong HTML

Thảo luận trong 'Tự Học HTML' bắt đầu bởi izdesigner, 12/6/16.

  1. izdesigner

    izdesigner Administrator Thành viên BQT

    Tham gia ngày:
    4/4/16
    Bài viết:
    154
    Đã được thích:
    9
    Điểm thành tích:
    18
    Nếu bạn sử dụng một ứng dụng Word, bạn phải làm quen với các thao tác để in đậm, in nghiêng, hay gạch chân; đó là 3 trong số 10 tùy chọn có sẵn để chỉ cách mà văn bản xuất hiện trong HTML và XHTML.

    In đậm văn bản (Bold Text)

    Bất cứ nội dung gì mà xuất hiện trong phần tử <b>...</b> đều được in đậm.
    Kết quả hiển thị là:
    In nghiêng văn bản (Italic Text)

    Bất cứ nội dung gì xuất hiện trong phần tử <i>...</i> đều được in nghiêng:
    Kết quả hiển thị:
    Gạch chân văn bản (Underlined Text)

    Bất cứ nội dung gì xuất hiện trong phần tử <u>...</u> đều được gạch chân:
    Nó sẽ hiển thị kết quả khi bạn chạy đoạn code trên là:
    Gạch ngang văn bản (Strike Text)

    Bất cứ nội dung nào xuất hiện trong phần tử <strike>...</strike> đều được gạch ngang:
    Kết quả hiển thị là:
    [​IMG]
    Font đơn cách

    Nội dung trong phần tử <tt>...</tt> được viết dưới dạng font đơn cách. Hầu hết các font chữ đều được biết như là các font rộng bởi vì các ký tự khác nhau có độ rộng khác nhau (ví dụ như ký tự 'm' rộng hơn ký tự 'i'). Tuy nhiên trong font đơn cách, các ký tự có độ rộng giống nhau.
    Kết quả hiển thị là:
    Dạng văn bản chỉ số trên

    Nội dung trong phần tử <sup>...</sup> được viết dưới dạng chỉ số trên, kích cỡ của nó bằng kích cỡ của các ký tự quanh nó nhưng độ cao của nó bằng một nửa các ký tự khác.
    Nó sẽ hiển thị kết quả sau khi bạn chạy code trên:
    [​IMG]
    Dạng văn bản chỉ số dưới

    Nội dung trong phần tử <sub>...</sub> được viết ở dạng chỉ số dưới, kích cỡ của nó bằng kích cỡ các ký tự xung quanh nhưng chiều cao bằng một nửa.
    Kết quả hiển thị:
    [​IMG]
    Chèn văn bản

    Bất cứ nội dung xuất hiện trong phần tử <ins>...</ins> được hiển thị như ở dạng văn bản được chèn.
    Nó sẽ tạo ra kết quả sau:
    [​IMG]
    Văn bản bị xóa

    Nội dung xuất hiện trong phần tử <del>...</del> được hiển thị dưới dạng bị xóa.
    Kết quả hiển thị khi bạn chạy code:
    [​IMG]
    Cách làm văn bản hiển thị lớn hơn

    Nội dung trong phần tử <big>...</big> được hiển thị ở một kích cỡ lớn hơn phần còn lại xung quanh nó.
    Kết quả hiển thị:
    [​IMG]
    Cách làm văn bản hiển thị nhỏ hơn

    Nội dung xuất hiện trong phần tử <small>...</small> được hiển thị ở một kích cỡ nhỏ hơn phần còn lại xung quanh nó.
    Kết quả hiển thị là:
    [​IMG]
    Tạo nhóm nội dung

    Phần tử <div> <span> cho phép bạn tạo các phần tử thành nhóm nội dung để tạo ra các khu vực hoặc các tiểu khu của một trang.

    Ví dụ, bạn muốn đặt tất cả các lời chú thích ở cuối trong một trang trong một phần tử <div> để chỉ rằng tất cả các phần tử trong phần tử <div> đó liên quan đến chú thích. Bạn cũng có thể đính kèm một kiểu tới phần tử này để khi chúng xuất hiện bằng cách sử dụng bộ quy tắc đặc biệt của kiểu.
    Nó sẽ hiển thị kết quả như sau:
    [​IMG]
    Bên cạnh đó, phần tử <span> có thể sử dụng để tạo nhóm chỉ cho các phần tử trong một dòng. Vì thế, nếu bạn có một phần của câu hay đoạn văn mà bạn muốn phân nhóm chúng, bạn có thể sử dụng phần tử <span> như ví dụ dưới đây.
    Mã:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Span Tag Example</title>
    </head>
    <body>
    <p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> alongwith CSS</p>
    </body>
    </html>
    Nó sẽ tạo ra kết quả sau:
    Những thẻ này được sử dụng phổ biến với CSS cho phép bạn đính kèm một style tới một khu vực của trang.
     
  2. prokotex

    prokotex New Member

    Tham gia ngày:
    17/8/16
    Bài viết:
    6
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    đang cần kiến thức này để bổ trờ cho ngành seo của mình nè
     

Chia sẻ trang này