HTML id Attribute
HTML id Attribute （HTML id 属性:）
The id attribute is used to define a unique identifier for an HTML element. It is commonly used to point to a style in a style sheet, as well as anchor links and targets for scripts. The id value is case-sensitive and should be unique within the HTML document. （Id属性用于为HTML元素定义唯一标识符。它通常用于指向样式表中的样式，以及脚本的锚点链接和目标。id值区分大小写，并且在HTML文档中应该是唯一的。）
This attribute can be used by CSS and JavaScript (via the HTML DOM) to perform specific tasks for the element with the specified id. （CSS和JavaScript （通过HTML DOM ）可以使用此属性为具有指定ID的元素执行特定任务。）
In CSS, you must write a hash ( # ) character followed by the id of the element for selecting the element with a specified id. It must have at least one character, and must not contain whitespace (tabs, spaces, etc.).
In HTML5, the id attribute can be used for any HTML element. （在HTML5中， id属性可用于任何HTML元素。）
In HTML 4.01, the id attribute cannot be used with the following elements: <head>, <html>, <base>, <param>, <style>, <script>, and <title>.
Syntax
Syntax （语法）
<tag id="id"></tag>
Example of the HTML id attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#grey {
color: grey;
}
#purple {
color: purple;
}
</style>
</head>
<body>
<h1>Example of the HTML class attribute</h1>
<p id="grey">
It is a some red paragraph.
（这是一个红色的段落。）
</p>
<p>This is a some text.</p>
<p id="purple">
It is a some yellow paragraph.
（这是一个黄色的段落。）
</p>
</body>
</html>
An HTML element can have only one unique id belonging to that single element unlike the class attribute where a class name can be used by multiple elements. （HTML元素只能有一个属于该单个元素的唯一ID ，这与类属性不同，类名称可以由多个元素使用。）
Example of the HTML id and class attributes:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#green-bg {
background-color: green;
color: white;
padding: 20px;
text-align: center;
}
.text-grey {
color: grey;
padding: 5px 15px;
}
</style>
</head>
<body>
<h1>Example of the HTML "id" and "class" attributes:</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
</p>
<h2 id="green-bg">HTML ID attribute</h2>
<p class="text-grey">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。）
</p>
<p class="text-grey">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。这段文字归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的一部分拼凑在一本样本书中）
</p>
<p class="text-grey">
The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
</p>
</body>
</html>
Bookmarks
Bookmarks （书签）
You can use HTML bookmarks to allow readers to jump to other parts of a web page when it is too long. （您可以使用HTML书签，允许读者在网页太长时跳转到网页的其他部分。）
To add a bookmark, first, create the bookmark and then add a link to it. When you click on the link, the page will scroll to the part with the bookmark. （要添加书签，请先创建书签，然后添加指向该书签的链接。当您单击链接时，页面将滚动到带有书签的部分。）
Example of adding a bookmark:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
line-height: 1.5;
color: #777777;
}
a {
color: #20c7c1;
display: inline-block;
padding: 5px 15px;
}
strong {
display: block;
color: #1129dc;
}
</style>
</head>
<body>
<h1>Example of the HTML "id" and "class" attributes:</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<a href="#text2">Jump to the text-2</a>
<a href="#text3">Jump to the text-3</a>
<p id="text-1">
<strong>Text number 1</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
</p>
<p id="text2">
<strong>Text number 2</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book
</p>
<p id="text3">
<strong>Text number 3</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
<strong>Text number 4</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
<strong>Text number 5</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>