Gia Huy

Định dạng bài viết Median UI

admin
· 37 phút đọc · 23 lượt xem

Hình ảnh kèm chú thích

Hình ảnh kèm chú thích
Chú thích là những đoạn văn ngắn xuất hiện bên dưới hình ảnh trong sách, tạp chí hoặc báo chí, dùng để mô tả hình ảnh hoặc giải thích hành động hay lời nói của những người trong ảnh.

Định dạng viết:

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img class='lazy full' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Text_here</td>
    </tr>
  </tbody>
</table>

Hình ảnh dạng lightbox

Hiển thị bản xem trước hình ảnh cỡ lớn

Hình ảnh dạng lightbox

Định dạng viết:

<div class='lightBox'>
  <details>
    <summary class='n'><span class='c flex center'></span></summary>
  </details>
  <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
</div>

Hình ảnh dạng lưới

Hiển thị nhiều hình ảnh theo bố cục dạng lưới

Hình ảnh dạng lưới
Hình ảnh dạng lưới
Hình ảnh dạng lưới
Hình ảnh dạng lưới

Định dạng viết:

<div class='psImg grImg'>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
</div>

Cuộn hình ảnh

Hiển thị nhiều hình ảnh với chức năng cuộn (chỉ hoạt động trên giao diện di động)

Cuộn hình ảnh
Cuộn hình ảnh
Cuộn hình ảnh

Định dạng viết:

<div class='psImg scImg scrlH'>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
</div>

Hiển thị/ẩn hình ảnh

Hiển thị nhiều hình ảnh trong khi ẩn/hiện các hình ảnh còn lại.

Sau khi nhấp vào ‘Hiển thị tất cả’, hình ảnh không thể ẩn đi được nữa.

Hiển thị/ẩn hình ảnh
Hiển thị/ẩn hình ảnh
Hiển thị/ẩn hình ảnh
Hiển thị/ẩn hình ảnh
Hiển thị/ẩn hình ảnh
Hiển thị/ẩn hình ảnh

Định dạng viết:

<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  
  <div class='btImg'>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage'>Show all</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
  </div>
</div>

Tải ảnh chậm

Hoãn tải hình ảnh cho đến khi chúng hiển thị trong khung nhìn để cải thiện hiệu suất trang web.

Xin lưu ý rằng các hình ảnh sử dụng tính năng lazyload sẽ không hiển thị khi người dùng tắt JavaScript trên trình duyệt. Ngoài ra, các hình ảnh thu nhỏ (thumbnail) cũng sẽ không xuất hiện nếu tất cả hình ảnh trong một bài viết đều sử dụng lazyload.

Tải ảnh chậm

Định dạng viết:

<div class='separator'>
  <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
</div>
  • Bạn cần thay đổi thuộc tính alt='image_title' thành tiêu đề hình ảnh của bạn.
  • Thay thế toàn bộ mã trong các thuộc tính data-src và src ở dòng tiếp theo bằng các đường dẫn (URL) hình ảnh của bạn.
  • Việc sử dụng <noscript> rất quan trọng để làm phương án dự phòng trong trường hợp người dùng tắt JavaScript trên trình duyệt.
  • Để các hình ảnh thu nhỏ (thumbnail) hiển thị, hãy đảm bảo có ít nhất một hình ảnh không sử dụng tính năng lazyLoad.

Bài viết liên quan (thủ công)

Hiển thị các bài viết liên quan ở giữa bài đăng (theo cách thủ công)

Thành phần này được viết thủ công và không tự động xuất hiện trong mọi bài viết; ưu điểm là widget này có thể được đặt tại bất kỳ đoạn văn nào bạn muốn.

Có thể bạn sẽ muốn đọc bài viết này:

Định dạng viết:

<div class='pRelate notranslate'>
  <!--[ Related title ]-->
  <b>Có thể bạn sẽ muốn đọc bài viết này:</b>
  <ul>
    <li><a href='your_url'>post_title</a></li>
    <li><a href='your_url'>post_title</a></li>
    <li><a href='your_url'>post_title</a></li>
  </ul>
</div>

Dấu ngăn cách nội dung

Có sẵn 3 kiểu dáng khác nhau

Định dạng viết:

<hr>

Định dạng viết:

<hr class='dot'>

Định dạng viết:

<hr class='line'>

Thụt lề văn bản

Xác định độ thụt lề của dòng đầu tiên trong một khối văn bản.

“Không giống như bài thi, tất cả những câu hỏi phức tạp đều có được đáp án. Trong cuộc sống thật sự, có những việc mãi mãi không bao giờ có được đáp án.” – Cô gái năm ấy chúng ta cùng theo đuổi – (Cửu Bá Đao)

Định dạng viết:

<p class='pIndent'>text_paragraph</p>

Chữ cái lớn đầu dòng

Làm cho chữ cái đầu tiên của đoạn văn lớn hơn phần còn lại của văn bản.

Gặp gỡ là chữ Duyên và đi qua cuộc đời nhau là Định mệnh sắp đặt. Đó là món quà ý nghĩa mà cuộc sống dành tặng cho mỗi người. Đôi khi chỉ cần nghĩ đến nó thôi cũng đủ lý do để mỉm cười.

Định dạng viết:

<p><span class='dropCap'>T</span>ext_paragraph</p>

Ghi chú khối

Các câu hoặc đoạn văn nằm trong các khối màu đặc biệt

1. Ghi chú tiêu chuẩn

Hạnh phúc luôn trong tầm tay mỗi chúng ta! Hãy mang hạnh phúc đến cho người khác và bạn sẽ tìm thấy niềm hạnh phúc của chính mình!

Định dạng viết:

<p class='note'>text_paragraph</p>

2. Lưu ý cảnh báo

Thay vì nói ‘Đấy không phải lỗi của em’, hãy nói: ‘Sự cố đã xảy ra, em đề xuất hướng xử lý trước mắt là… và em sẽ rút kinh nghiệm lần sau.‘

Định dạng viết:

<p class='note wr'>text_paragraph</p>

Danh sách hướng dẫn

Danh sách các bài hướng dẫn

  1. ‘Thành công không phải là định mệnh mà đó chính là cuộc hành trình.’
  2. ‘Kỷ luật là cầu nối giữa mục tiêu và thành tựu.’
  3. ‘Sự chăm chỉ sẽ đánh bại tài năng nếu tài năng không nỗ lực.’
  4. ‘Thành công là tổng hòa của những nỗ lực nhỏ lặp lại mỗi ngày.’

Định dạng viết:

<ol class='step noList'>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
</ol>

Danh sách ưu/nhược điểm

Hiển thị nội dung liệt kê các ưu điểm hoặc nhược điểm của sản phẩm.

Ưu điểm chat GPT:
  1. Phản hồi tự nhiên: Giao tiếp mạch lạc, thân thiện và dễ hiểu như con người.
  2. Đa năng: Hỗ trợ học tập, dịch thuật, viết nội dung, lập trình và lên ý tưởng sáng tạo.
  3. Tiết kiệm thời gian: Tổng hợp, tóm tắt và xử lý khối lượng lớn thông tin chỉ trong vài giây.
  4. Đa ngôn ngữ: Hỗ trợ tốt nhiều ngôn ngữ khác nhau, bao gồm cả tiếng Việt.

Định dạng viết:

<b>Ưu điểm:</b>
<ol class='pros noList'>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
</ol>
Nhược điểm chat GPT:
  1. Thông tin sai lệch: Đôi khi tự bịa ra thông tin không chính xác nhưng tỏ ra rất tự tin (hiện tượng ảo giác thông tin).
  2. Thiếu cảm xúc và hiểu biết thực tế: Không có ý thức, cảm xúc thật hay sự thấu hiểu sâu sắc về ngữ cảnh xã hội phức tạp.
  3. Gây phụ thuộc: Dùng quá mức có thể làm giảm tư duy phản biện và khả năng sáng tạo tự nhiên của người dùng
  4. Không thay thế được chuyên gia: Cần cẩn trọng khi dùng cho các quyết định y tế, pháp lý hay tài chính quan trọng.

Định dạng viết:

<b>Nhược điểm:</b>
<ol class='cons noList'>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
</ol>

Bảng

1. Bảng mặc định

Tên Chức vụ Văn phòng Tuổi Ngày bắt đầu Lương
Hổ Nixon Kiến trúc sư hệ thống Edinburgh 61 25/04/2011 320.800 đô la
Garrett Winters Kế toán viên Tokyo 63 25/07/2011 170.750 đô la

2. Không có dòng cột

Tên Chức vụ Văn phòng Tuổi Ngày bắt đầu Lương
Hổ Nixon Kiến trúc sư hệ thống Edinburgh 61 25/04/2011 320.800 đô la
Garrett Winters Kế toán viên Tokyo 63 25/07/2011 170.750 đô la

3. Có màu nền

Tên Chức vụ Văn phòng Tuổi Ngày bắt đầu Lương
Hổ Nixon Kiến trúc sư hệ thống Edinburgh 61 25/04/2011 320.800 đô la
Garrett Winters Kế toán viên Tokyo 63 25/07/2011 170.750 đô la

4. Thêm màu nền khi rê chuột

Tên Chức vụ Văn phòng Tuổi Ngày bắt đầu Lương
Hổ Nixon Kiến trúc sư hệ thống Edinburgh 61 25/04/2011 320.800 đô la
Garrett Winters Kế toán viên Tokyo 63 25/07/2011 170.750 đô la

Định dạng viết:

<div class='table noWrap w100'>
  <table>
    <thead>
      <tr>
        <th>title_1</th>
        <th>title_2</th>
        <th>title_3</th>
        <th>title_4</th>
        <th>title_5</th>
        <th>tille_6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
      </tr>
      <tr>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
      </tr>
    </tbody>
  </table>
</div>
  • noWrapChức năng này được sử dụng để vô hiệu hóa xuống dòng, có nghĩa là văn bản trong cột sẽ chỉ được viết trên một dòng.
  • w100Điều này có nghĩa là bảng sẽ có chiều rộng bằng 100% hoặc bằng chiều rộng của trang bài viết, các tùy chọn khác bao gồm w90chiều rộng 90% hoặc xóa lớp này để có chiều rộng tự động điều chỉnh.
  • Thêm vào class='table noLine'để xóa đường kẻ dọc trong cột.
  • Dùng class='table withBg'để thêm màu nền cho hàng.
  • Được sử dụng class='table hoverBg'để hiển thị màu nền khi con trỏ chuột di chuyển qua hàng trong bảng.
  • Các tổ hợp của class='table noLine withBg'hoặc class='table noLine hoverBg'đều được cho phép.

Tabs

Sắp xếp nội dung trên các màn hình, tập dữ liệu và các tương tác khác nhau.

Bạn có thể thêm tối đa 4 thẻ.

‘Cha mẹ là quê hương thứ hai, là ngọn đèn soi sáng bước chân ta đi.’
Tình cảm của cha mẹ giống như dòng suối mát lành chảy suốt đời người.
Mọi hy sinh thầm lặng của mẹ, bờ vai vững chãi của cha chính là điểm tựa an toàn nhất.
Dù ngoài kia thế giới có đổi thay, vòng tay gia đình vẫn luôn rộng mở đón ta về.

Định dạng viết:

<!--[ Active function ]-->
<input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked>
<input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-4' type='radio' name='postTabs'>

<!--[ Tabs header/title ]-->
<div class='tbHd scrlH'>
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  <label for='fTabs-1' data-text='Chapter 1'></label>
  <label for='fTabs-2' data-text='Chapter 2'></label>
  <label for='fTabs-3' data-text='Chapter 3'></label>
  <label for='fTabs-4' data-text='Chapter 4'></label>
</div>

<div class='tbCn'>
  <!--[ Tabs content ]-->
  <div class='tbText-1'>
    content_here
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-2'>
    content_here
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-3'>
    content_here
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-4'>
    content_here
  </div>
</div>

Mục lục

Nêu rõ tên các chương hoặc phần của bài viết.

Ở một số giao diện, Mục lục có thể được tạo theo cơ chế bán tự động.

Tiêu chuẩn Việt Nam TCVN 2737:2023
  1. Định nghĩa về các loại tải trọng theo TCVN 2737:2023
  2. Phân loại tải trọng
  3. Tổ hợp tải trọng TCVN 2737:2023
    1. a. Tổ hợp tải trọng theo trạng thái giới hạn thứ I (kiểm tra bền, chịu lực)
    2. b. Tổ hợp tải trọng theo trạng thái giới hạn thứ II (kiểm tra biến dạng, võng, nứt)

Định dạng viết:

<details class='sp toc' open=''>
  <summary>Contents</summary>
  <div class='toC'>
    <ol>
      <li><a href='#your_url'>heading_1</a></li>
      <li><a href='#your_url'>heading_2</a></li>
      <li>
        <a href='#your_url'>heading_3</a>
        <ol>
          <li><a href='#your_url'>subheading_3</a></li>
          <li><a href='#your_url'>subheading_3</a></li>
          <li><a href='#your_url'>subheading_3</a></li>
          <li><a href='#your_url'>subheading_3</a></li>
        </ol>
      </li>
    </ol>
  </div>
</details>
  • open='' được sử dụng để giữ cho widget luôn mở; hãy loại bỏ thuộc tính này để widget tự động đóng lại khi trang được tải.
  • Thay thế văn bản ‘Contents’ để đổi tiêu đề tiện ích.

Việc này có thể phức tạp hơn một chút do được viết thủ công, nhưng bạn có thể quyết định vị trí đặt widget này bằng cách làm theo các bước dưới đây:

  1. Thêm thuộc tính ID:
    Các thẻ tiêu đề trong bài viết được đánh dấu bằng <h2>, <h3>, <h4>, hoặc trong Chế độ Soạn thảo/Chế độ Viết, chọn Title, Subtitle, Small Title. Thêm một ID đặc biệt vào mỗi thẻ tiêu đề tìm thấy.

    Dưới đây là một ví dụ về cách viết đúng:

    <h2>Tiêu đề chính</h2>
    <h2 id='main_heading'>Tiêu đề chính</h2>

    Mỗi mã định danh phải là duy nhất, việc sử dụng trùng lặp mã định danh bị nghiêm cấm.

  2. Liên kết đến các thẻ tiêu đề:
    Thêm #trước mỗi ID bạn muốn gọi, ví dụ: một thẻ tiêu đề có ID id='main_heading'có thể được gọi bằng href='#main_heading'.

    Ví dụ về cách viết đúng:

    <li><a href='#main_heading'>Tiêu đề chính</a></li>
    <li><a href='main_heading'>Tiêu đề chính</a></li>

Ẩn/hiện nội dung

Các thông tin chi tiết bổ sung mà người dùng có thể mở và đóng khi cần.

Được sử dụng để tạo các tiện ích tương tác mà người dùng có thể ẩn hoặc hiển thị theo nhu cầu.

Hiện nội dung

Bố em là một kỹ sư xây dựng. Công việc của bố khá bận rộn nhưng bố vẫn luôn dành thời gian quan tâm đến gia đình. Mỗi khi rảnh rỗi, bố thường chơi cầu lông hoặc dạy em học bài. Mẹ em là giáo viên tiểu học. Mẹ rất hiền và luôn chăm sóc gia đình chu đáo. Sau giờ làm việc, mẹ thường nấu những bữa cơm ngon cho cả nhà. Em gái em năm nay học lớp một. Em gái rất đáng yêu nhưng đôi khi cũng khá nghịch ngợm. Tuy vậy, em luôn yêu thương và nhường nhịn em gái.

Định dạng viết:

<details class='sp notranslate'>
  <summary>Spoiler</summary>
  <p>text_paragraph</p>
</details>

Ẩn/hiện danh sách

Chuyển đổi giữa việc ẩn và hiển thị một lượng lớn nội dung

Số lượng hàng là không giới hạn; bạn thậm chí có thể thêm hơn 100 hàng.

Mác 75 là gì?

Mác 75 (thường gọi là vữa mác 75 hoặc hồ mác 75) là loại vữa xi măng có khả năng chịu lực nén tối thiểu đạt 75 kg/cm² (tương đương khoảng 7.5 MPa) sau 28 ngày tuổi. Đây là loại mác vữa thông dụng nhất trong ngành xây dựng dân dụng hiện nay.

Bê tông mác 150

Bê tông mác 150 (ký hiệu M150) là khả năng chịu lực nén của mẫu bê tông đạt mức 150 kg/cm². Con số này đo trên khối lập phương chuẩn 15x15x15 cm sau 28 ngày dưỡng hộ. Đây là loại vật liệu có độ cứng trung bình, chuyên dùng cho các kết cấu ít chịu tải trọng lớn trong xây dựng.

Bê tông mác 250

Mác 250 (hay M250) là mức mác bê tông có cường độ chịu nén giới hạn đạt 250 kg/cm² tính trên mẫu thử hình lập phương kích thước chuẩn sau 28 ngày bảo dưỡng theo điều kiện tiêu chuẩn. Con số này biểu thị khả năng chịu lực nén tối đa của mỗi centimet vuông bề mặt bê tông trước khi bị phá hủy.

Bê tông mác 300

Bê tông mác 300 (ký hiệu M300 hoặc cấp độ bền B22.5) là loại bê tông có cường độ chịu lực nén tối thiểu đạt 300 kg/cm² (tương đương khoảng 28.90 MPa đến 30 MPa) sau 28 ngày bảo dưỡng theo tiêu chuẩn. Con số này cho biết khả năng chịu tải trọng nặng và chống chịu lực ép của kết cấu.

Định dạng viết:

<!--[ Accordion start ]-->
<div class='showH'>
  <!--[ line 1 ]-->
  <details class='ac alt'>
    <summary>accordion_title</summary>
    <div class='aC'>
      <p>text_paragraph</p>
    </div>
  </details>
  
  <!--[ line 2 ]-->
  <details class='ac alt'>
    <summary>accordion_title</summary>
    <div class='aC'>
      <p>text_paragraph</p>
    </div>
  </details>
  
  <!--[ line 3 ]-->
  <details class='ac alt'>
    <summary>accordion_title</summary>
    <div class='aC'>
      <p>text_paragraph</p>
    </div>
  </details>
  
  <!--[ line 4 ]-->
  <details class='ac alt'>
    <summary>accordion_title</summary>
    <div class='aC'>
      <p>text_paragraph</p>
    </div>
  </details>
</div>

Công cụ tô màu cú pháp

Các khối để hiển thị mã nguồn như HTML, CSS hoặc JavaScript.

Tiêu chuẩn

<pre>Your_code_is_here</pre>

.html

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

.css

/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
a:hover{opacity:.9;transition:opacity .1s}

.js

function downloadJSAtOnload() {
    var d = document.createElement('script');
    d.src = 'https://www.googletagmanager.com/gtag/js?id=00000', document.body.appendChild(d)
}
window.addEventListener ? window.addEventListener('load', downloadJSAtOnload, !1) : window.attachEvent ? window.attachEvent('onload', downloadJSAtOnload) : window.onload = downloadJSAtOnload;
window.dataLayer = window.dataLayer || [];

function gtag() {
    dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', '00000');

Tùy chỉnh

'IntersectionObserver'in window||document.write('<script src='https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver'><\/script>');

Mã màu trong cú pháp được thiết lập thủ công; chúng tôi không cung cấp tính năng tự động tô màu cú pháp.

Định dạng viết:

<!--[ Change classname to html, css, or js ]-->
<div class='pre'>
  <pre>code_here</pre>
</div>
  • Thay thế class='pre'bằng class='pre html'để xác định định dạng mã .html , có 3 tùy chọn: pre html, pre css, pre js.
  • Thay thế class='pre'bằng class='pre custom' data-text='custom_code'để viết tiêu đề tùy chỉnh.
  • Thêm style=''thuộc tính vào <pre>thẻ để chỉnh sửa, ví dụ: thêm thuộc tính style='white-space: pre-wrap;'để vô hiệu hóa chức năng cuộn ngang, đoạn mã dài sẽ được viết trên một dòng mới. Thêm thuộc tính style='max-height: 400px;'để xác định chiều cao tối đa của widget chỉ là 400px, hoặc kết hợp cả hai style='white-space: pre-wrap; max-height: 400px;'.
  • Thêm màu thủ công:
    • <i class='red'>code</i>: cho màu đỏ,
    • <i class='blue'>code</i>: cho màu xanh lam,
    • <i class='geen'>code</i>: cho màu xanh lá cây,
    • <i class='gray'>code</i>: cho màu xám,
    • <i class='block'>code</i>: dành cho khối màu xanh lam,
  • Hoặc sử dụng HLJS Parsecông cụ để tự động thêm màu.

Cú pháp đa tab

Hiển thị nhiều đoạn mã trong một khối duy nhất

Định dạng viết:

<div class='pre tb'>
  <!--[ Active function ]-->
  <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
  <input class='prei hidden' id='preT-2' type='radio' name='preTab'>
  <input class='prei hidden' id='preT-3' type='radio' name='preTab'>
  <!--[ Header/title ]-->
  <div class='preH tbHd scrlH'>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT-1' data-text='HTML'></label>
    <label for='preT-2' data-text='CSS'></label>
    <label for='preT-3' data-text='Javascript'></label>
  </div>

  <!--[ Content ]-->
  <div class='preC-1'>
    <pre>code_here</pre>
  </div>
  <div class='preC-2'>
    <pre>code_here</pre>
  </div>
  <div class='preC-3'>
    <pre>code_here</pre>
  </div>
</div>

Các liên kết

Siêu liên kết, được sử dụng để liên kết từ trang này sang trang khác.

1. New! link:
Viết chữ đặt biệt

Định dạng viết:

<a class='new' href='your_url'>link_name</a>
2. Fee! link:
Upload Ảnh Online

Định dạng viết:

<a class='free' href='your_url'>link_name</a>
3. External link:
Trình tạo liên kết 
<a class='extL' href='your_url'>link_name</a>

Thẻ tải xuống

Khung thông tin về các tệp bổ sung mà người dùng có thể tải xuống

giahuy.html 2kb

Định dạng viết:

<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fS'>200kb</span>
  </div>
    
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='your_url'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  </a>
</div>

Với hình ảnh thay vì văn bản:

file_name.zip 200kb

Định dạng viết:

<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT lazy' data-text='zip' data-style='background-image: url(https://blogger.googleusercontent.com/img/.../image.png)'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fS'>200kb</span>
  </div>
    
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='your_url'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  </a>
</div>

Các liên kết ở trên chỉ là ví dụ, khi nhấp vào sẽ không dẫn đến trang nào cả.

Button

Các nút cho phép người dùng thực hiện hành động và đưa ra lựa chọn chỉ bằng một lần chạm.

1. Nút mặc định:
Button
Định dạng viết:
<a class='button' href='your_url'>Button</a>
2. Kiểu dàn ý:
Button
Định dạng viết:
<a class='button ln' href='your_url'>Button</a>
3. Không có nền:
Button
Định dạng viết:
<a class='button sc' href='your_url'>Button</a>
4. Với biểu tượng SVG:
Button
Button
Button
Định dạng viết:
<a class='button' href='your_url'>
  <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  <span>Button</span>
</a>
5. Hai nút trên cùng một hàng:
Info Download
Định dạng viết:
<div class='btnF'>
  <a class='button ln' href='your_url'>
    <span>Info</span>
  </a>
  <a class='button' href='your_url'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
    <span>Download</span>
  </a>
</div>

Các liên kết ở trên chỉ là ví dụ; chúng sẽ không dẫn đến trang nào khi được nhấp vào.

Lazy Youtube

Hoãn tải video YouTube để cải thiện hiệu suất blog.

Định dạng viết:
<!--[ Defer iframe ]-->
<div class='videoYt'>
  <iframe title='Lazy video iframe' class='lazy' data-src='//www.youtube.com/embed/Youtube_videoID' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</div>
  • Thay thế Youtube_videoID với ID YouTube mà bạn muốn sử dụng,
  • Bạn có thể tìm thấy ID video trong URL YouTube, ví dụ: youtube.com/watch?v=kqVH82SHzOw.

Tham chiếu bài đăng

Tài liệu tham khảo, nguồn hoặc chú thích ở cuối bài viết

‘Thượng đế ban cho chúng ta hai cái tai và một cái miệng, để chúng ta nghe nhiều hơn và nói ít đi.’

Tác giả:
Zeno từ Citium

Định dạng viết:
<p class='pRef'>post_reference</p>

// or

<div class='pRef'>post_reference</div>
Uncategorized

Bạn có thể thích những bài đăng này

admin

Người viết tại blog này.

0 nhận xét

Cảm ơn bạn đã góp ý! Website chia sẻ kiến thức phi lợi nhuận, mong bạn tuân thủ quy định.

Nếu bạn muốn để lại nhận xét, hãy viết vào ô bên dưới.

Chưa có nhận xét. Hãy là người đầu tiên.