html中的id属性是什么?本篇文章给大家带来的内容是介绍html中的id属性,让大家了解id属性的使用方法,希望对大家有所帮助。

html的id属性是什么?

html的id属性其实就是一个HTML元素标签的标志,可以用来唯一表示该元素的标识符;它在 HTML 文档中必须是唯一的。例:

1

2

3

<div id="demo">

   <p id="p1">PHP中文网!</p>

</div>

这里的"demo"和"p1"都是id属性的值,分别用来表示了一个<div>标签和<p>标签;则,这两个值不能在其他标签的id属性中再次被使用。

id属性的语法:

1

2

3

4

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

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

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

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

以上的写法都可以,我们看看使用css给#p1添加字体颜色后的效果:

1

2

3

#p1{

color: red;

}

效果图:

使用id属性的规则

html的id属性可以在文档中的任何位置被使用,但必须要遵循一些规则:

1、id属性的值必须是以字母(az或AZ)开头,例:

1

2

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

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

说明:id属性的值是大小写敏感的

2、后续字符可以是字母,数字(0-9),连字符( - ),下划线(_)

1

2

3

4

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

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

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

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

3、每个id属性值在文档中必须是唯一的

这样就可以方便我们通过这个id属性值来确定了Web站点的唯一元素,就可以使用css或者js来操作这个唯一元素,例:设置元素样式、修改元素中包含的内容等等。

id属性的使用

id属性是一个非常强大的属性,它可以为Web页面执行多个操作:

1、样式表选择器(id选择器):

这是大多数人都在使用的ID属性的一个功能。因为它们是唯一的,所以当我们使用ID属性设置样式时,可以确保只对网页上的一个项目进行样式设置。例:

1

2

3

#p1{

color: red;

}

1

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

效果图:

2、用于链接到的命名锚点中:

Web浏览器允许我们通过指向URL末尾的ID值来定位Web文档中的精确位置。我们只需将id值添加到页面URL的末尾,并在前面加一个井号(#)。我们还可以通过在元素的href属性中添加井号(#)和ID名称来链接到页面本身的这些锚点。例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<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>

效果图:

3、在脚本中使用

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

1

2

3

4

5

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

<script>

    document.getElementById("p1").innerHTML="PHP中文网!"

</script>

效果图:

4、其他处理

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

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

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

CSS 使用id属性的规则的更多相关文章

  1. CSS的class、id、css文件名的常用命名规则

    CSS的class.id.css文件名的常用命名规则        (一)常用的CSS命名规则 头:header       内容:content/container       尾:footer   ...

  2. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  3. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

  4. CSS Counters 计数属性

    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...

  5. html css中id和class的区别比较

    在定义样式的时候,有时候会将id和class的用法弄混淆,所以在这里特意说明一下: id和class属性是网页中两个通用的属性,它们协同工作使整个页面变得丰富多彩.当我们为一个元素定义样式时.可以使用 ...

  6. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  7. 区分html与css中的属性

    CSS中id与Class的区别 1.在CSS文件里书写时,ID加前缀"#":CLASS用"." 2.id一个页面只可以使用一次:class可以多次引用. 3.I ...

  8. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  9. 怎样通过css的media属性,适配不同分辨率的终端设备?

    怎样通过css的media属性,适配不同分辨率的终端设备,示比例如以下: <!DOCTYPE html> <html> <head> <title>首页 ...

随机推荐

  1. Web for pentester_writeup之Code injection篇

    Web for pentester_writeup之Code injection篇 Code injection(代码注入) Example 1 <1> name=hacker' 添加一个 ...

  2. 天天玩微信,Spring Boot 开发私有即时通信系统了解一下

    1/ 概述 利用Spring Boot作为基础框架,Spring Security作为安全框架,WebSocket作为通信框架,实现点对点聊天和群聊天. 2/ 所需依赖 Spring Boot 版本 ...

  3. loadrunner常用web动作函数

    web_custom_request  ---允许使用任何http请求方法 脚本一: web_custom_request("baidu_request","URL=ht ...

  4. NOIP模拟 13

    我终于又厚颜无耻地赖着没走 ...... T1 矩阵游戏 用了30hmin找规律,然后发现貌似具有交换律,然后发现貌似有通项公式,然后发现貌似每次操作对通项的影响是相同的,然后发现貌似跟N没啥关系.. ...

  5. NOI导刊总结

    NOI导刊总结 前两天去郑州,参加了什么NOI导刊的培训,然后就发现大佬是真的多,还十分意外的发现了一个事,清华北大是不是发笔记本和耳机,为啥三个老师的都一模一样... 这几天主要以讲.NOIP知识点 ...

  6. m102 SE赛

    这次考试考完试正在刷提交记录的时候,到我这突然oj卡了一下,然后卡了大约10s,再刷出来就发现:

  7. NOIP模拟27(命悬一线)

    考得太悬了!

  8. Python3.x安装教程及环境变量配置

    python3.x安装 1.直接到官网https://www.python.org/下载,安装就可以了. 2.安装比较简单,点exe文件一直下一步就可以了(注意:安装的时候有个选择是否添加环境变量,这 ...

  9. Docker 资源 | 官方文件

    Docker资源 Docker官方英文资源: docker官网:http://www.docker.com Docker windows入门:https://docs.docker.com/windo ...

  10. 给一个整数数组,找到两个数使得他们的和等于一个给定的数 target。

    描述 给一个整数数组,找到两个数使得他们的和等于一个给定的数 target. 你需要实现的函数twoSum需要返回这两个数的下标, 并且第一个下标小于第二个下标.注意这里下标的范围是 0 到 n-1. ...