html 链接 id属性_HTML id属性

html 链接 id属性

The id attribute is used to specify a unique id for an element in HTML. This id cannot be used for multiple elements in HTML. You can add the id to any HTML element.

id属性用于为HTML中的元素指定唯一的ID 。该ID不能用于HTML中的多个元素。您可以将id添加到任何HTML元素。

The naming id attributes The id name is case-sensitive, the name must have one character and no whitespaces in two words (spaces, tabs, etc).

命名id属性id名称区分大小写，名称必须有一个字符，并且两个单词(空格，制表符等)中不能有空格。

使用id属性 (Using id attribute)

The id attribute can be used to reference the HTML tag in CSS and JavaScript to perform a certain transformation in an HTML tag that contains the id attribute. We use # followed by the name of the id attribute to refer to the element.

id属性可用于引用CSS和JavaScript中HTML标签，以在包含id属性HTML标签中执行某些转换。我们使用＃后跟id属性的名称来引用该元素。

在CSS中引用id属性 (Referencing id Attribute in CSS)

<!DOCTYPE html>
<html>
<head>
<style>
#element {
background-color: #f40;
color: #fff;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="element">Hello! This is an HTML element. </h1>
</body>
</html>

Output

输出量

在JavaScript中引用id属性 (Referencing id attribute in JavaScript)

In JavaScript also, we can use the id attribute to reference an element and perform a specific task on it. document.getElementById() is used to reference an element using JavaScript.

同样在JavaScript中，我们可以使用id属性来引用元素并对其执行特定任务。 document.getElementById()用于使用JavaScript引用元素。

<!DOCTYPE html>
<html>
<body>
<h1 id="greeting">Welcome Text</h1>
<button onclick="displayResult()">Say Hello!</button>
<script>
function displayResult() {
document.getElementById("greeting").innerHTML = "Hello! ";
}
</script>
</body>
</html>

Output

输出量

After clicking on the "Say Hello!" button...

点击“说声你好！”之后 按钮...

网页中ID的使用 (Uses of id in Webpage)

ids of elements along with links are a great way for navigation to element on the same page which is so long.

元素的id和链接是导航到同一页面上太长元素的一种好方法。

Using the link to a specific id in the page will navigate us to that element in HTML.

使用指向页面中特定ID的链接，可以将我们导航到HTML中的该元素。

We will see a separate example to do this.

我们将看到一个单独的示例来执行此操作。

HTML中的类与ID属性 (Classes vs ID Attribute in HTML)

In HTML, two elements are used to reference the HTML element. A class can be used to reference multiple HTML elements whereas id can be used to reference single HTML elements.

在HTML中，两个元素用于引用HTML元素。一个类可以用来引用多个HTML元素，而id可以用来引用单个HTML元素。

Read: Class attribute in HTML

阅读： HTML中的Class属性