VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

HTML5 Tuts

HTML5 là gì? Cú pháp HTML5 cơ bản Các thuộc tính HTML5 Sự kiện trong HTML5 WEB Forms 2 trong HTML5 SVG trong HTML5 MathML trong HTML5 WEB Storage trong HTML5 WEB SQL trong HTML5 Sự kiện Server-Sent trong HTML5 WEB Socket trong HTML5 Canvas trong HTML5 Audio & Video trong HTML5 GeoLocation trong HTML5 Micro Data HTML5 Drag & Drop trong HTML5 Web worker trong HTML5 Tổng hợp các thẻ cơ bản trong HTML5 Tổng hợp các thẻ cũ trong HTML5 Tổng hợp các thẻ mới trong HTML5
1 / 3
❮ ❯

Microdata trong HTML5


Geolocation trong HTML5
Drag và Drop trong HTML5

Nội dung chính

  • Microdata trong HTML5
  • Ví dụ Microdata trong HTML5
  • Các thuộc tính Global
  • Các kiểu dữ liệu của thuộc tính
  • Hỗ trợ Microdata API
  • Định nghĩa Microdata Vocabulary

Microdata trong HTML5

Microdata là một cách được tiêu chuẩn hóa để cung cấp các semantic bổ sung trong trang web của bạn.

Microdata cho bạn định nghĩa các phần tử tùy chỉnh của riêng bạn và bắt đầu nhúng các thuộc tính tùy chỉnh trong các trang web. Ở một mức độ cao, microdata bao gồm một nhóm các cặp tên-giá trị.

Các nhóm này được gọi là các item – mục, và mỗi cặp tên-giá trị là một thuộc tính (property). Các item và các thuộc tính được biểu diễn bởi các phần tử chính quy.



Ví dụ Microdata trong HTML5

  • Để tạo một item, thuộc tính itemscope được sử dụng.

  • Để thêm một thuộc tính tới một item, thuộc tính itemprop được sử dụng trên một trong những item con.

Ở đây có hai item, mỗi item có thuộc tính "name":


<div itemscope>
 <p>My name is <span itemprop="name">Zara</span>.</p>
</div><div itemscope>
 <p>My name is <span itemprop="name">Nuha</span>.</p>
</div>

Nói chung các thuộc tính có các giá trị mà là các chuỗi nhưng nó có thể có các kiểu dữ liệu sau:


Các thuộc tính Global

Microdata giới thiệu 5 thuộc tính Global sẽ có sẵn cho bất kỳ phần tử nào để sử dụng và cung cấp ngữ cảnh cho các thiết bị về dữ liệu của bạn:

Thuộc tínhMô tả
itemscopeĐược sử dụng để tạo một item. Thuộc tính này là một thuộc tính logic mà nói rằng có Microdata trên trang này, và đây là nơi nó bắt đầu.
itemtypeThuộc tính này là một URL hợp lệ mà định nghĩa item và cung cấp ngữ cảnh cho các thuộc tính.
itemidThuộc tính này là bộ nhận diện global cho item
itempropThuộc tính này định nghĩa một thuộc tính của item
itemrefThuộc tính này cung cấp một danh sách các phần tử bổ sung để tìm các cặp tên-giá trị của item.


Các kiểu dữ liệu của thuộc tính

Nói chung các thuộc tính có các giá trị mà là các chuỗi được đề cập trong ví dụ trên, nhưng chúng cũng có thể có các giá trị là các URL. Ví dụ sau có một thuộc tính, "image", giá trị của nó là một URL:


<div itemscope>
 <img itemprop="image" src="tp-logo.gif" alt="Example">
</div>

Các thuộc tính cũng có thể có các giá trị là ngày, thời gian hoặc ngày và thời gian. Điều này được thực hiện bởi sử dụng phần tử time và thuộc tính datetime của nó.


<div itemscope>
My birthday is:
<time itemprop="birthday" datetime="1971-05-08">
   Aug 5th 1971
</time>
</div>

Các thuộc tính chính nó cũng có thể là nhóm các cặp tên-giá trị, bằng việc đặt thuộc tính itemscope trên phần tử mà khai báo thuộc tính đó.


Hỗ trợ Microdata API

Nếu một trình duyệt hỗ trợ HTML5 Microdata API, nó sẽ là hàm getItem() trên đối tượng tài liệu global. Nếu trình duyệt không hỗ trợ Microdata, hàm getItem() sẽ không được định nghĩa.

Output:

function supports_microdata_api() {
  return !!document.getItems;
}

Modernizr vẫn không hỗ trợ việc kiểm tra cho Microdata API, vì thế bạn sẽ cần sử dụng hàm đó như đã liệt kê ở trên.

HTML5 Microdata chuẩn bao gồm cả HTML Markup (chủ yếu cho phương tiện tìm kiếm) và tập hợp các hàm DOM (chủ yếu cho trình duyệt).

Bạn có thể bao gồm Microdata Markup trong các trang web của bạn, và các phương tiện tìm kiếm mà không hiểu các thuộc tính microdata sẽ bỏ qua chúng. Nhưng nếu bạn cần truy cập hoặc thao tác microdata thông qua DOM, bạn sẽ cần kiểm tra có hay không trình duyệt hỗ trợ Microdata DOM API.


Định nghĩa Microdata Vocabulary

Để định nghĩa Microdata Vocabulary, bạn cần một URL không gian tên mà chỉ tới một trang web đang làm việc. Ví dụ: http://data-vocabulary.org/Person có thể được sử dụng như là không gian tên cho một Microdata Vocabulary cá nhân với các thuộc tính được đặt tên như sau:

  • name - Tên người như là một chuỗi đơn.

  • Photo - Một URL tới một hình ảnh của người đó.

  • URL - Một Website thuộc về người đó.

Sử dụng các thuộc tính trên như sau:


<section itemscope itemtype="http://data-vocabulary.org/Person">
<h1 itemprop="name">Andy Runie</h1>
<p>
<img itemprop="photo" src="http://www.example.com/photo.jpg">
</p>
<a itemprop="url" href="http://www.example.com/blog">My Blog</a>
</section>

Google hỗ trợ Microdata như là một phần của chương trình Rich Snippets của họ. Khi Crawler phân tích trang web của bạn và tìm thấy thuộc tính microdata mà phù hợp với http://data-vocabulary.org/Person, nó phân tích những thuộc tính này và lưu chúng cùng với phần còn lại của dữ liệu trang.

Bạn có thể kiểm tra ví dụ trên sử dụng Rich Snippets Testing Tool.


Geolocation trong HTML5
Drag và Drop trong HTML5

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Cú pháp HTML5 cơ bảnHTML5 là gìTổng hợp các thẻ mới trong HTML5Tổng hợp các thẻ cũ trong HTML5Tổng hợp các thẻ cơ bản trong HTML5Web Worker trong HTML5Drag và Drop trong HTML5Microdata trong HTML5Geolocation trong HTML5Audio và Video trong HTML5Canvas trong HTML5WebSockets trong HTML5

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml