HTML itemscope屬性用法及代碼示例

超文本標記語言項目範圍屬性與項目類型配合使用，以確保塊中包含的 HTML 與特定項目相關。定義項目範圍任何元素的屬性都會創建一個新項目，從而產生許多與該元素關聯的name-value對。

用法:

<element itemscope></element>

示例 1：下麵的例子說明了項目範圍HTML 中的屬性。

HTML


<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
  
        <strong>HTML itemscope Attribute</strong> 
    </center> 
  
    <div itemscope itemtype= 
"https://www.youtube.com/channel/UC0RhatS1pyxInC00YKjjBqQ"> 
  
        <h1 itemprop="name">Courses</h1> 
        <span>Geeksforgeeks: 
            <span itemprop="topic">A Computer</span> 
            Science portal for Geeks 
        </span> 
        <span itemprop="stack">Web Developer</span> 
        <a href= 
            "https://www.youtube.com/watch?v=Bjed-kudYkU"
                itemprop="full_course">Visit Courses</a> 
    </div> 
</body> 
  
</html>

輸出：

結構化數據：下表顯示了前麵示例中的結構化數據。

itemscope	itemtype	channel
	itemprop	(項目名稱)	(項目值)
	itemprop	topic	A Computer
	itemprop	stack	Web Developer
	itemprop	name	Courses
	itemprop	full_course	Visit Courses

示例 2：

HTML


<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <strong>HTML itemscope Attribute</strong> 
    </center> 
  
    <div itemscope itemtype= 
"https://www.youtube.com/channel/UC0RhatS1pyxInC00YKjjBqQ"> 
  
        <h1 itemprop="name">DSA Courses</h1> 
  
        <span>Geeksforgeeks: 
            <span itemprop="topic">A Computer</span> 
            Science portal for Geeks 
        </span> 
        <br> 
  
        <ul> 
            <li> 
                <span itemprop="stack"> 
                    Competitive Programming 
                </span> 
                <a href= 
"https://www.geeksforgeeks.org/courses/competitive-programming-live?utm_source=gfg-article&utm_medium=Q1-2023&utm_campaign=competitive-programming-live"
                    itemprop="full_course">Visit Courses</a> 
            </li> 
              
            <li><span itemprop="stack"> 
                DataStructure & Algorithm 
            </span> 
                <a href= 
"https://www.geeksforgeeks.org/courses/dsa-self-paced?utm_source=gfg-article&utm_medium=Q1-2023&utm_campaign=dsa-self-paced"
                    itemprop="course">Visit Courses</a> 
            </li> 
        </ul> 
    </div> 
</body> 
  
</html>

輸出：

結構化數據：下表顯示了前麵示例中的結構化數據。

itemscope	itemtype	channel
	itemprop	(項目名稱)	(項目值)
	itemprop	topic	A Computer
	itemprop	stack	Competitive Programming
	itemprop	name	Courses
	itemprop	full_course	Visit Courses
	itemprop	stack	DataStructure & 算法
	itemprop	course	Visit Courses

支持的瀏覽器：

穀歌瀏覽器
邊 12 及以上
火狐瀏覽器
Safari
Opera

相關用法

注：本文由純淨天空篩選整理自skyridetim大神的英文原創作品 HTML itemscope Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。