03 # 网页元素的属性

简介: 03 # 网页元素的属性

说明

网道HTML 教程学习笔记



1、简介


网页元素的属性(attribute)可以定制元素的行为,不同的属性会导致元素有不同的行为。


注意


1、属性名与标签名一样,不区分大小写。


2、属性名与属性值之间,通过等号=连接。


3、有些属性是布尔属性,属性值可以省略,表示打开该属性。





2、全局属性


全局属性(global attributes)是所有元素都可以使用的属性。


2.1、id

id 属性是元素在网页内的唯一标识符。


2.2、class

class 属性用来对网页元素进行分类。


2.3、title

title 属性用来为元素添加附加说明。


2.4、tabindex

浏览器允许使用 Tab 键,遍历网页元素。


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


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


不同的属性值有不同的含义:


   负整数:该元素可以获得焦点(比如focus()方法),但不参与 Tab 键对网页元素的遍历。这个值通常是-1。


   0:该元素参与 Tab 键的遍历,顺序由浏览器指定,通常是按照其在网页里面出现的位置。


   正整数:网页元素按照从小到大的顺序(1、2、3、……),参与 Tab 键的遍历。如果多个元素的tabindex属性相同,则按照在网页源码里面出现的顺序遍历。



2.5、accesskey

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

2.6、style

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


2.7、hidden

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

<div hidden>本句不会显示在页面上。</div>


注意:

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



2.8、lang,dir


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


   zh:中文

   zh-Hans:简体中文

   zh-Hant:繁体中文

   en:英语

   en-US:美国英语

   en-GB:英国英语

   es:西班牙语

   fr:法语



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


   ltr:从左到右阅读,比如英语。

   rtl:从右到左阅读,阿拉伯语、波斯语、希伯来语都属于这一类。

   auto:浏览器根据内容的解析结果,自行决定。



2.9、contenteditable

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


  • true 或 空字符串:内容可以编辑
  • false:不可以编辑



注意

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



2.10、spellcheck

spellcheck 属性表示:是否打开拼写检查。


浏览器一般会自带拼写检查功能,编辑内容时,拼错的单词下面会显示红色的波浪线。

注意

  • 该属性是枚举属性,最好带上属性值。
  • 如果没有指定这个属性,浏览器将自行决定是否打开拼写检查。



2.11、data-属性

data-属性用于放置自定义数据。

css样式使用

/* 例子1
<div data-role="mobile">
    Mobile only content
</div>
*/
div[data-role="mobile"] {
  display:none;
}
/* 例子2
<div class="test" data-content="This is the div content">test</div>​
*/
.test:after {
  content: attr(data-content);
}



2.12、事件处理属性


全局属性还包括事件处理属性(event handler),用来响应用户的动作。

属性的名单:

onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting



目录
相关文章
|
JavaScript
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
1323 0
|
JSON API 数据格式
5分钟构建API接口服务 | python小知识
Flask是python中轻量的web框架,Flask的两个核心模块除了模板渲染之外就是请求响应处理,其中请求响应处理是由 Werkzeug(WSGI 工具库)完成,而模板渲染是由Jinja(模板渲染库)完成。 Flask因为轻量灵活,用来构建API接口十分合适
10968 10
5分钟构建API接口服务 | python小知识
|
Linux C语言
LINUX error: Building GCC requires GMP 4.2+, MPFR 3.1.0+ and MPC 0.8.0+.
LINUX error: Building GCC requires GMP 4.2+, MPFR 3.1.0+ and MPC 0.8.0+.
1360 0
LINUX error: Building GCC requires GMP 4.2+, MPFR 3.1.0+ and MPC 0.8.0+.
|
10月前
|
人工智能 自然语言处理 测试技术
DeepSeek V3:DeepSeek 开源的最新多模态 AI 模型,编程能力超越Claude,生成速度提升至 60 TPS
DeepSeek V3 是深度求索公司开源的最新 AI 模型,采用混合专家架构,具备强大的编程和多语言处理能力,性能超越多个竞争对手。
1642 5
DeepSeek V3:DeepSeek 开源的最新多模态 AI 模型,编程能力超越Claude,生成速度提升至 60 TPS
|
机器学习/深度学习 人工智能 自然语言处理
HuggingGPT解析:使用 ChatGPT及HuggingFace上的族系解决AI问题
HuggingGPT是一个框架,它使用大型语言模型(如ChatGPT)作为控制器来管理和协调Hugging Face上的AI模型,以语言作为通用接口解决多模态和领域的复杂AI任务。
360 0
HuggingGPT解析:使用 ChatGPT及HuggingFace上的族系解决AI问题
|
SQL
Mybatis-plus 自定义SQL注入器查询@TableLogic 逻辑删除后的数据
Mybatis-plus使用@TableLogic注解进行逻辑删除数据后,在某些场景下,又需要查询该数据时,又不想写SQL。 自定义Mybatis-plus的SQL注入器一劳永逸的解决该问题
1137 0
|
数据采集 数据处理
Data Is All You Need! 生成式图文对数据最佳实践,数据集魔搭开源!
23年10月底,OpenAI发布了 DALL-E 3 的技术报告《 Improving Image Generation with Better Captions 》,这篇技术报告的重点放在了 DALL-E 3 通过高质量的、详细的、生成式图像 caption(文本描述)进行训练后,提升 prompt following 能力。
|
Python
python的for循环range包头不包尾
python的for循环range包头不包尾
639 6
|
移动开发 前端开发 Java
Flowable 任务监听器与执行监听器的介绍
Flowable 任务监听器与执行监听器的介绍
2642 1
|
搜索推荐 开发工具 决策智能
Agent调研--19类Agent框架对比(中)
Agent调研--19类Agent框架对比(中)
3820 0