CSS 使用id属性的规则
html中的id属性是什么?本篇文章给大家带来的内容是介绍html中的id属性,让大家了解id属性的使用方法,希望对大家有所帮助。
html的id属性是什么?
html的id属性其实就是一个HTML元素标签的标志,可以用来唯一表示该元素的标识符;它在 HTML 文档中必须是唯一的。例:
1 2 3 |
|
这里的"demo"和"p1"都是id属性的值,分别用来表示了一个<div>标签和<p>标签;则,这两个值不能在其他标签的id属性中再次被使用。
id属性的语法:
1 2 3 4 |
|
以上的写法都可以,我们看看使用css给#p1添加字体颜色后的效果:
1 2 3 |
|
效果图:
使用id属性的规则
html的id属性可以在文档中的任何位置被使用,但必须要遵循一些规则:
1、id属性的值必须是以字母(az或AZ)开头,例:
1 2 |
|
说明:id属性的值是大小写敏感的
2、后续字符可以是字母,数字(0-9),连字符( - ),下划线(_)
1 2 3 4 |
|
3、每个id属性值在文档中必须是唯一的
这样就可以方便我们通过这个id属性值来确定了Web站点的唯一元素,就可以使用css或者js来操作这个唯一元素,例:设置元素样式、修改元素中包含的内容等等。
id属性的使用
id属性是一个非常强大的属性,它可以为Web页面执行多个操作:
1、样式表选择器(id选择器):
这是大多数人都在使用的ID属性的一个功能。因为它们是唯一的,所以当我们使用ID属性设置样式时,可以确保只对网页上的一个项目进行样式设置。例:
1 2 3 |
|
1 |
|
效果图:
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 |
|
效果图:
3、在脚本中使用
当我们需要在Javascript中查找一个HTML元素时,可以使用ID属性,来精确查找一个元素,在对这个元素进行设置。例:
1 2 3 4 5 |
|
效果图:
4、其他处理
id属性允许我们以任何需要的方式来处理Web文档。例如,可以和PHP一起使用,将HTML提取到数据库中,ID属性标识字段。
总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。
以上就是html中的id属性是什么?id属性的使用的详细内容,更多请关注php中文网其它相关文章!
CSS 使用id属性的规则的更多相关文章
- CSS的class、id、css文件名的常用命名规则
CSS的class.id.css文件名的常用命名规则 (一)常用的CSS命名规则 头:header 内容:content/container 尾:footer ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
- CSS之cursor属性
CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...
- CSS Counters 计数属性
CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...
- html css中id和class的区别比较
在定义样式的时候,有时候会将id和class的用法弄混淆,所以在这里特意说明一下: id和class属性是网页中两个通用的属性,它们协同工作使整个页面变得丰富多彩.当我们为一个元素定义样式时.可以使用 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- 区分html与css中的属性
CSS中id与Class的区别 1.在CSS文件里书写时,ID加前缀"#":CLASS用"." 2.id一个页面只可以使用一次:class可以多次引用. 3.I ...
- [转] CSS float 浮动属性
http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...
- 怎样通过css的media属性,适配不同分辨率的终端设备?
怎样通过css的media属性,适配不同分辨率的终端设备,示比例如以下: <!DOCTYPE html> <html> <head> <title>首页 ...
随机推荐
- Web for pentester_writeup之Code injection篇
Web for pentester_writeup之Code injection篇 Code injection(代码注入) Example 1 <1> name=hacker' 添加一个 ...
- 天天玩微信,Spring Boot 开发私有即时通信系统了解一下
1/ 概述 利用Spring Boot作为基础框架,Spring Security作为安全框架,WebSocket作为通信框架,实现点对点聊天和群聊天. 2/ 所需依赖 Spring Boot 版本 ...
- loadrunner常用web动作函数
web_custom_request ---允许使用任何http请求方法 脚本一: web_custom_request("baidu_request","URL=ht ...
- NOIP模拟 13
我终于又厚颜无耻地赖着没走 ...... T1 矩阵游戏 用了30hmin找规律,然后发现貌似具有交换律,然后发现貌似有通项公式,然后发现貌似每次操作对通项的影响是相同的,然后发现貌似跟N没啥关系.. ...
- NOI导刊总结
NOI导刊总结 前两天去郑州,参加了什么NOI导刊的培训,然后就发现大佬是真的多,还十分意外的发现了一个事,清华北大是不是发笔记本和耳机,为啥三个老师的都一模一样... 这几天主要以讲.NOIP知识点 ...
- m102 SE赛
这次考试考完试正在刷提交记录的时候,到我这突然oj卡了一下,然后卡了大约10s,再刷出来就发现:
- NOIP模拟27(命悬一线)
考得太悬了!
- Python3.x安装教程及环境变量配置
python3.x安装 1.直接到官网https://www.python.org/下载,安装就可以了. 2.安装比较简单,点exe文件一直下一步就可以了(注意:安装的时候有个选择是否添加环境变量,这 ...
- Docker 资源 | 官方文件
Docker资源 Docker官方英文资源: docker官网:http://www.docker.com Docker windows入门:https://docs.docker.com/windo ...
- 给一个整数数组,找到两个数使得他们的和等于一个给定的数 target。
描述 给一个整数数组,找到两个数使得他们的和等于一个给定的数 target. 你需要实现的函数twoSum需要返回这两个数的下标, 并且第一个下标小于第二个下标.注意这里下标的范围是 0 到 n-1. ...