CSS rules using the id attribute

Html id attribute what is? The contents of this article is to give us a presentation in html id attribute, so that we learn how to use the id attribute, we want to help.

 

What html id attribute that?

html id attribute is actually a sign element tag HTML, can be used to represent a unique identifier for the element; it must be unique within the HTML document. example:

<div id="demo">
   <p id="p1">PHP中文网！</p>
</div>

Here "demo" and "p1" is the id attribute value, are used to represent a <div> tag and <p> tags; then, these two values ​​can not be reused in other tag id attribute.

id attribute syntax:

<p ID="p1">测试文字</p>
<p id="p1">测试文字</p>
<p Id="p1">测试文字</p>
<p iD="p1">测试文字</p>

Above wording can, we look at using css to # p1 add effects after the font color:

#p1{
color: red;
}

Renderings:

The rule uses the id attribute

html id attribute can be used anywhere in the document, but must follow some rules:

1, must be based on the value of the id attribute letter (az or AZ) beginning , for example:

<p id="p">测试文字</p>
<p id="A">测试文字</p>

Description: The value of the id attribute is case sensitive

2. Subsequent characters can be letters, numbers (0-9), a hyphen (-), underscore (_)

<p id="pa">测试文字</p>
<p id="A1">测试文字</p>
<p id="p-a">测试文字</p>
<p id="A_1">测试文字</p>

3, each id attribute value must be unique in the document

This will help us to determine the Web site by using the id attribute values ​​unique elements, you can use css or js to manipulate the only element, for example: Set element style, modify the contents of the elements contained and so on.

Use the id attribute

id attribute is a very powerful attribute, it can perform multiple operations for a Web page:

1, the stylesheet selector (id selector):

This is a feature that most people are using the ID attribute. Because they are unique, so when we use the ID property styles, you can ensure that only one item on the web page style settings. example:

#p1{
color: red;
}

<p id="p1">测试文字</p>

Renderings:

2, used to link to a named anchor in:

Web browsers allow us to locate the exact position of Web documents by the end of the URL pointing to the ID value. We simply add the id value to the end of the URL of the page and preceded by a pound sign (#). We can also add a pound sign (#) and ID name in the href attribute of the element to link to the page itself these anchor points. example:

<div class="demo">
    <ul>
        <li>
            <a href="#a1">标题1</a>
        </li>
        <li>
            <a href="#a2">标题2</a>
        </li>
        <li>
            <a href="#a3">标题3</a>
        </li>
    </ul>
    <div class="container">
        <div>
            <h3 id="a1">标题1</h3>
            <p>测试文字！测试文字！测试文字！测试文字！</p>
        </div>
        <div>
            <h3 id="a2">标题2</h3>
            <p>测试文字！测试文字！测试文字！测试文字！</p>
        </div>
        <div>
            <h3 id="a3">标题3</h3>
            <p>测试文字！测试文字！测试文字！测试文字！</p>
        </div>
    </div>
</div>

Renderings:

3, using a script

当我们需要在Javascript中查找一个HTML元素时，可以使用ID属性，来精确查找一个元素，在对这个元素进行设置。例：

<p id="p1">测试文字！</p>

<script>
    document.getElementById("p1").innerHTML="PHP中文网!"
</script>

效果图：

4、其他处理

id属性允许我们以任何需要的方式来处理Web文档。例如，可以和PHP一起使用，将HTML提取到数据库中，ID属性标识字段。

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

以上就是html中的id属性是什么？id属性的使用的详细内容，更多请关注php中文网其它相关文章！

• 

•