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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。