Một số kỹ thuật ít ai biết trong HTML/CSS

Một số kỹ thuật ít ai biết trong HTML/CSS
Một số kỹ thuật ít ai biết trong HTML/CSS

 Một số kỹ thuật ít ai biết trong HTML/CSS

Sự xuất hiện của HTML5 đã giới thiệu một thuộc tính mới được gọi là 'data'. Trong bài viết này, tôi sẽ xem xét một số ví dụ về cách sử dụng thuộc tính này cũng như nó nên được sử dụng như thế nào cho hợp lý.

Vì các trang web đang chứa dữ liệu nhiều hơn và giống một ứng dụng hơn, nên chúng bắt đầu nắm giữ dữ liệu nhiều hơn về các phần tử cụ thể. Lấy ví dụ, nếu chúng ta đang tạo ra một ứng dụng về âm thanh. Chúng ta có thể có mã đánh dấu chuẩn như sau:


<audio controls="controls">

  <source src="track1.mp3" type="audio/mpeg" />

</audio>


Các mã đánh dấu ở trên là hoàn toàn chấp nhận được, nhưng đôi khi chúng ta có thể muốn lưu trữ các thông tin thêm về từng bản nhạc thay vì chỉ nguồn. Ví dụ, chúng ta có thể muốn chỉ định các thông tin cụ thể khác về bản nhạc như thời lượng, nhiệp điệu và nghệ sĩ. Chúng ta có thể làm điều này bằng cách gán các thuộc tính data tuỳ biến vào mỗi nguồn âm thanh chẳng hạn như:


<audio controls="controls">
  <source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />
</audio>


Cách sử dụng thuộc tính Data

Đặc tả của W3C cho thuộc tính data phát biểu rằng:

Thuộc tính data tuỳ biến nhằm mục đích lưu trữ dữ liệu tùy biến riêng cho trang web hoặc ứng dụng, mà đối với chúng không có thuộc tính hay phần tử nào thích hợp hơn.

Điều này có nghĩa rằng chúng ta chỉ nên sử dụng dữ liệu đó trong nội bộ ứng dụng của chúng ta và nó không nên được sử dụng để hiển thị các thông tin cho người dùng. Điều quan trọng cũng cần phải lưu ý là bạn có thể chỉ định bất kỳ số lượng các thuộc tính tuỳ biến nào cho một phần tử với bất kỳ giá trị nào mà bạn muốn.

Khi nào nên sử dụng thuộc tính Data?

<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

 Lần này, thuộc tính data được sử dụng để chỉ ra giá trị bong bóng ở trong bong bóng thông báo.

Thuộc tính Data với CSS

[data-role="page"] {

  /* Styles */

}

 

<div data-role="mobile">

Mobile only content

</div>

base

Đầu tiên khi đã chỉ định đường link tương đối, bạn có thể chỉ định default các path là root. Rồi đưa vào trong thẻ head.

<html>
  <head>
    <base href="http://codethue.online" target="_blank">
  </head>
  <body>
    <div>
      <a href="/ykyk1218">ykyk1218</a>
    </div>
  </body>
</html>

Làm như thế này thì địa chỉ đường link trong thẻ a sẽ thành https://codethue.online/ykyk1218. Và ta cũng có thể chỉ định thuộc tính target mặc định bằng việc gắn thêm nó vào.

Cách sử dụng Trong nghiệp vụ làm SEO thì các đường dẫn path tuyệt đối sẽ tối hơn các path tương đối, tôi đã nghe đâu đó là như vậy nên có thể đây cũng là một trong số các yếu tố quan trọng chúng ta nên lưu ý. Tuy nhiên nó cũng có khả năng dễ bị gây rối nên các bạn cũng cần cẩn thận khi áp dụng nó

address

Điền thông tin liên lạc đối với đoạn văn đó.

Nếu ở đây ta có cả thẻ article, thì địa chỉ liên lạc sẽ là nội dung của bài post được viết trong thẻ article, nó sẽ được làm nổi bật hơn, còn nếu không có thì sẽ được viết toàn bộ ở phần document (nội dung được viết trong thẻ body)

cite

Yếu tố thể hiện title của tác phẩm.

Trước bản HTML5, thì không chỉ title của tác phẩm mà cả tên tác giả cũng được hiển thị ra nhưng từ HTML5 thì đã bị giới hạn title của tác phẩm.

<div>
  <p>Basket ball<cite>Slumdan</cite>words</p>
  <blokquote>
   Fight!
    Play!
    by Nguyen Na
  </blockquote>
</div>

Chúc bạn học tốt !!