హెచ్టిఎంఎల్ id అట్రిబ్యూట్

హౌములు id అంతర్జాతీయ అంశాలకు ప్రత్యేక id నిర్వచించడానికి ఉపయోగిస్తారు.

ఒక హౌములు డాక్యుమెంట్లో ఒకటికన్నా ఎక్కువ id అంతర్జాతీయ అంశాలు ఉండకూడదు.

id అంతర్జాతీయ అంశాను ఉపయోగించండి.

id అంతర్జాతీయ అంశాలకు ప్రత్యేక ID నిర్వచిస్తుంది. id అంతర్జాతీయ పత్రంలో అంతర్జాతీయ అంశాలకు విలువలు వేర్వేరు ఉండాలి.

id స్టైల్ షేట్లో ప్రత్యేక స్టైల్ ప్రకటనను సూచించడానికి అంతర్జాతీయ అంశాలను ఉపయోగిస్తారు. జావాస్క్రిప్ట్ కూడా ఇది ఉపయోగించవచ్చు మరియు ప్రత్యేక ID కలిగిన అంశాలను సంపాదించవచ్చు.

id యొక్క సంకేతం ఒక పద్ధతిముఖం (#)తో మొదలుకొని, ఆ తర్వాత id పేరును రాయండి. ఆ తర్వాత హౌజ్ బ్రేక్ ({})లో సిఎస్ఎస్ లకు నిర్వచనం చేయండి.

క్రింది ఉదాహరణలో మేము ఒకటి కలిగి ఉన్నాము}} <h1> ఇది id నామం "myHeader" కలిగిన అంశానికి సూచిస్తుంది. ఈ <h1> అంశం హెడ్ భాగంలో అమలు చేస్తారు #myHeader స్టైల్స్ డెఫైనిషన్స్ ద్వారా స్టైల్స్ సెట్ చేస్తారు:

实例

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>

మీరే ప్రయత్నించండి

గమనిక:id నామాలు క్యాపిటలైజేశన్ సెన్సిటివ్ ఉంటాయి!

గమనిక:id కు కనీసం ఒక అక్షరం ఉండాలి, మరియు అది శుభ్రమైన అక్షరాలు కాకూడదు (స్పేస్, టేబులేషన్ మొదలైనవి).

క్లాసు మరియు ID యొక్క వ్యత్యాసం

ఒకే క్లాసు నామాన్ని పలు HTML అంశాలు ఉపయోగించవచ్చు, అయితే ఒకే id నామాన్ని పేజీలో ఒకే అంశం ఉపయోగించవచ్చు:

实例

<style>
/* id నామం "myHeader" కలిగిన అంశానికి స్టైల్స్ సెట్ చేస్తారు */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* క్లాసు నామం "city" కలిగిన అన్ని అంశాలకు స్టైల్స్ సెట్ చేస్తారు */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- ప్రత్యేక id కలిగిన అంశాలు -->
<h1 id="myHeader">My Cities</h1>
<!-- అదే క్లాసు నామాన్ని కలిగిన పలు అంశాలు -->
<h2 class="city">లండన్</h2>
<p>లండన్ ఇంగ్లాండ్ యొక్క రాజధని ఉంది.</p>
<h2 class="city">పారిస్</h2>
<p>పారిస్ ఫ్రాన్స్ యొక్క రాజధని ఉంది.</p>
<h2 class="city">టోక్యో</h2>
<p>టోక్యో జపాన్ యొక్క రాజధని ఉంది.</p>

మీరే ప్రయత్నించండి

అడ్వైజరీ:మా లో ఉంచండి. CSS పాఠ్యక్రమం CSS జ్ఞానాన్ని మరింత తెలుసుకోండి.

HTML బుక్మార్కును ID మరియు లింకుద్వారా అమలు చేస్తారు

HTML బుక్మార్కు వాచకులకు పేజీలో ప్రత్యేక భాగానికి జరిపేలా ఉపయోగిస్తారు.

పేజీ చాలా పొడవైనది అయితే, బుక్మార్కు చాలా ఉపయోగపడుతుంది.

బుక్మార్కును ఉపయోగించడానికి, మీరు ముందుగా దానిని సృష్టించవలసివుంది మరియు దానికి లింకును జోడించవలసివుంది.

అప్పుడు, లింకును క్లిక్ అవ్వడంతో, పేజీ బుక్మార్కు కలిగిన స్థానానికి స్క్రోల్ అవుతుంది.

实例

首先，用 id 属性创建书签：

第四章

然后，在同一张页面中，向这个书签添加一个链接（“跳转到第四章”）：

实例

跳转到第四章

మీరే ప్రయత్నించండి

或者，在另一张页面中，添加指向这个书签的链接（“跳转到第四章”）：

Jump to Chapter 4

在 JavaScript 中使用 id 属性

JavaScript 也可以使用 id 属性为特定元素执行某些任务。

JavaScript ఉపయోగించవచ్చు getElementById() 方法访问拥有特定 id 的元素：

实例

使用 id 属性通过 JavaScript 来处理文本：

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "నీటిని అందించండి!";
}
</script>

మీరే ప్రయత్నించండి

అడ్వైజరీ:దయచేసి ఈ లో చూడండి హెచ్టిఎంఎల్ జావాస్క్రిప్ట్ ఈ చాప్టర్ లో లేదా మా కోసం JavaScript పాఠ్యక్రమం జావాస్క్రిప్ట్ ను నేర్చుకోండి

ఈ చాప్టర్ సమీక్ష

  • id అంశం ఉపయోగించబడి హెచ్టిఎంఎల్ ఎలిమెంట్స్ కు ప్రత్యేక id ని తీసుకుంటుంది
  • id అంశం విలువలు హెచ్టిఎంఎల్ డాక్యుమెంట్లో ప్రత్యేకమైనవి ఉండాలి
  • CSS మరియు JavaScript ఉపయోగించవచ్చు id అంశం ఉపయోగించి ఎలిమెంట్స్ ను ఎంచుకోవడానికి లేదా ప్రత్యేక ఎలిమెంట్స్ యొక్క స్టైల్స్ అమర్చడానికి ఉపయోగించబడవచ్చు
  • id అంశం విలువలు కేస్ సెన్సిటివ్ ఉన్నాయి
  • id అంశాలు హెచ్టిఎంఎల్ బుక్మార్కులను సృష్టించడానికి కూడా ఉపయోగించబడవచ్చు
  • JavaScript ఉపయోగించవచ్చు getElementById() ప్రత్యేక id కలిగిన ఎలిమెంట్స్ ను మార్గదర్శించు పద్ధతి