6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

html笔记09-全局属性

2022-04-16 0 76 web前端社区

6.jpg 0 前端程序猿

全局属性

全局属性(global attributes)是所有元素都可以使用的属性。也就是说,你可以把下面的属性,加在任意一个网页元素上面,不过有些属性对某些元素可能不产生意义。

常见的全局属性。

id

id属性是元素在网页内的唯一标识符。比如,网页可能包含多个<p>标签,id属性可以指定每个<p>标签的唯一标识符。

  1. <p id="p1"></p>
  2. <p id="p2"></p>
  3. <p id="p3"></p>

上面代码中,三个<p>标签具有不同的id属性,因此可以区分。

id属性的值必须是全局唯一的,同一个页面不能有两个相同的id属性。另外,id属性的值不得包含空格。

id属性的值还可以在最前面加上#,放到 URL 中作为锚点,定位到该元素在网页内部的位置。比如,用户访问网址https:/www.baidu.com/index.html#bar的时候,浏览器会自动将页面滚动到bar的位置,让用户第一眼就看到这部分内容。

class

class属性用来对网页元素进行分类。如果不同元素的class属性值相同,就表示它们是一类的。

  1. <p class="para"></p>
  2. <p></p>
  3. <p class="para"></p>

第一个<p>和第三个<p>是一类,因为它们的class属性相同。

元素可以同时具有多个 class,它们之间使用空格分隔。

  1. <p class="p1 p2 p3"></p>

上面的p元素同时具有p1p2p3三个 class。

可以重名,如果元素有相同的class,代表属于同一类。
可以有多个class名,用空格分隔。

id和class的命名规则:

  1. 以字母开头,可以包含数字,字母,-,_的组合
  2. 命名要有一定的语义。方便通过id或者class了解html元素描述的内容。

title

title属性用来为元素添加附加说明。大多数浏览器中,鼠标悬浮在元素上面时,会将title属性值作为浮动提示,显示出来。

  1. <div title="版权说明">
  2. <p>本站内容使用创意共享许可证,可以自由使用。</p>
  3. </div>

上面代码中,title属性解释了这一块内容的目的。鼠标悬停在上面时,浏览器会显示一个浮动提示。一旦鼠标移开,提示就会消失。

tabindex

网页通常使用鼠标操作,但是某些情况下,用户可能希望使用键盘,或者只有键盘可以用。因此,浏览器允许使用 Tab 键,遍历网页元素。也就是说,只要不停按下 Tab 键,网页的焦点就会从一个元素转移到另一个元素,选定焦点元素以后,就可以进行下一步操作,比如按下回车键访问某个链接,或者直接在某个输入框输入文字。

这里就有一个问题,按下 Tab 键的时候,浏览器怎么知道跳到哪一个元素。HTML 提供了tabindex属性,解决这个问题。它的名字的含义,就是 Tab 的顺序(index)。

tabindex属性的值是一个整数,表示用户按下 Tab 键的时候,网页焦点转移的顺序。不同的属性值有不同的含义。

  • 负整数:该元素可以获得焦点(比如使用 JavaScript 的focus()方法),但不参与 Tab 键对网页元素的遍历。这个值通常是-1
  • 0:该元素参与 Tab 键的遍历,顺序由浏览器指定,通常是按照其在网页里面出现的位置。
  • 正整数:网页元素按照从小到大的顺序(1、2、3、……),参与 Tab 键的遍历。如果多个元素的tabindex属性相同,则按照在网页源码里面出现的顺序遍历。
  1. <p tabindex="0">这段文字可以获得焦点。</p>

上面代码中,<p>标签的tabindex0,意味着该元素可以获得焦点,并且也可以被 Tab 键遍历,顺序由其在源码里面的位置决定。

一般来说,tabindex属性最好都设成0,按照自然顺序进行遍历,这样比较符合用户的预期,除非网页有特殊布局。如果网页所有元素都没有设置tabindex,那么只有那些默认可以遍历的元素(比如链接、输入框等)才能参与 Tab 键的遍历,顺序由其在源码的位置决定。因此实际上,只有那些无法获得焦点的元素(比如<span><div>)需要参与遍历,才有必要设置tabindex属性。

accesskey

accesskey属性指定网页元素获得焦点的快捷键,该属性的值必须是单个的可打印字符。只要按下快捷键,该元素就会得到焦点。

  1. <button accesskey="s">提交</button>

上面代码中,<button>的快捷键是s,按下快捷键,该元素就得到了焦点。

accesskey属性的字符键,必须配合功能键,一起按下才会生效。也就是说,快捷键是“功能键 + 字符键”的组合。不同的浏览器与不同的操作系统,功能键都不一样。比如,Chrome 浏览器在 Windows 系统和 Linux 系统的快捷键是Alt + 字符键,在 Mac 系统的快捷键是Ctrl + Alt + 字符键

注意,accesskey如果跟操作系统或浏览器级别的快捷键有冲突,这时不会生效。

style

style属性用来指定当前元素的 CSS 样式。

  1. <p style="color: red;">hello</p>

上面代码指定文字颜色为红色。

hidden

hidden是一个布尔属性,表示当前的网页元素不再跟页面相关,因此浏览器不会渲染这个元素,所以就不会在网页中看到它。

  1. <p hidden>本句不会显示在页面上。</p>

上面代码中,这个p元素不会出现在网页上。

注意,CSS 的可见性设置,高于hidden属性。如果 CSS 设为该元素可见,hidden属性将无效。

lang,dir

lang属性指定网页元素使用的语言。

  1. <p lang="en">hello</p>
  2. <p lang="zh">你好</p>

上面代码中,第一个<p>lang属性,表示使用英语,第二个<p>lang属性,表示使用中文。

lang属性的值,必须符合 BCP47 的标准。下面是一些常见的语言代码。

  • zh:中文
  • zh-Hans:简体中文
  • zh-Hant:繁体中文
  • en:英语
  • en-US:美国英语
  • en-GB:英国英语
  • es:西班牙语
  • fr:法语

dir属性表示文字的阅读方向,有三个可能的值。

  • ltr:从左到右阅读,比如英语。
  • rtl:从右到左阅读,阿拉伯语、波斯语、希伯来语都属于这一类。
  • auto:浏览器根据内容的解析结果,自行决定。

contenteditable

HTML 网页的内容默认是用户不能编辑,contenteditable属性允许用户修改内容。它有两个可能的值。

  • true或空字符串:内容可以编辑
  • false:不可以编辑
  1. <p contenteditable="true">
  2. 鼠标点击,本句内容可修改。
  3. </p>

上面代码中,鼠标单击句子,就可以进入编辑状态,用户可以改变句子的内容。当然,除非提交到服务器,否则刷新页面还是显示原来的内容。

该属性是枚举属性,不是布尔属性,规范的写法是最好带上属性值。

data-* 属性

data-属性用于放置自定义数据。如果没有其他属性或元素合适放置数据,就可以放在data-属性。

  1. <a href="#" class="tooltip" data-tip="this is the tip!">链接</a>

上面代码中,data-tip用于放置链接的提示文字。

由于data-属性只能通过 CSS 或 JavaScript 利用,
css用data-tip:

  1. test:after {
  2. content: attr(data-tip);
  3. }
0

Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3