HTML全局属性列表大全

栏目: IT技术 · 发布时间: 4年前

内容简介:byzhangxinxu from本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9235

本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。

HTML全局属性列表大全

一、什么是HTML全局属性?

所谓HTML全局属性,指的是在所有html元素上都能使用的属性。

常见的如 idclass

有些HTML属性只能用在特定的元素上,比方说 href 属性,多出现在 <a> 元素、 <link> 元素上,普通元素设置 href 属性是没有任何效果的。

本文将完整展示HTML中所有的全局属性,并会做相应的点评,由于内容较多,如果你没有足够多的时间深入每一个属性,可以选择你感兴趣的HTML属性进行了解。

二、HTML全局属性汇总

索引

accesskey

指定访问当前元素的快捷键。

例如脸书页面源代码这里:

HTML全局属性列表大全

此时我们按下 / 键,就可以快速访问搜索。

关于 accesskey 属性与无障碍访问,我之前有专门研究过,有兴趣可以访问这篇文章了解更多:“ HTML accesskey属性与web自定义键盘快捷访问

autocapitalize

autocapitalize 属性用来控制文本在用户输入/编辑时的大小写,这个属性更适合英文场景,中文场景无效。支持以下值:

off | none
表示没有自动大写,全部都是小写。
on | sentences
表示每个句子的第一个字母默认为大写字母;所有其他字母默认为小写字母。
words
每个单词的第一个字母默认为大写字母;所有其他字母默认为小写字母。
characters
所有字母都需要大写。

眼见为实,您可以狠狠地点击这里: autocapitalize控制大小写测试demo

结果一通测试,无论是Chrome浏览器还是Firefox浏览器,通通不支持,没有任何变化。

HTML全局属性列表大全

我看了下Caniuse上的兼容性,貌似Chrome浏览器支持 <textarea> 元素的有这个属性的API:

HTML全局属性列表大全

于是想要Textarea元素试一试,结果屁来,没有任何效果,看来HTML autocapitalize 属性和元素的 autocapitalize 的API属性是有区别的:

HTML全局属性列表大全

class

元素类名,这个CSS样式控制使用非常多,不展开。

contenteditable

可以让元素处于内容可编辑状态。

其中属性值 truefalse 是所有浏览器都支持的,而 plaintext-only 等属性值IE浏览器并不支持。

语法示意:

contenteditable="true"
contenteditable="false"
contenteditable="events"
contenteditable="caret"
contenteditable="plaintext-only"

这个属性的在实际开发的时候相当常用,延伸应用也很多,之前有多篇文章有过介绍。

contextmenu [废弃]

contextmenu 属性值就是对应 <menu> 元素的 id 。有点类似于 <input> 元素的 list 属性, <label> 元素的 for 属性,都是和某个元素的 id 属性值相关联。

只是 <menu> 元素时运不济,目前已经被舍弃掉了,因此, contextmenu 属性也就跟着被废弃了。

data-*

指开发人员自己设置的各种自定义属性,方便开发的时候获取。

例如:

<div data-id="9235" data-author="zhangxinxu"></div>

除了使用 HTMLElement.getAttribute() 方法,还可以使用 HTMLElement.dataset 访问这些自定义属性值,具体可以参见我之前这篇文章:“ HTML5自定义属性对象Dataset简介 ”。

dir

dir 属性是可以改变文档流的水平流动方向,设计的初衷是用在多语言处理中。

例如英文和中文的阅读是从左往右,阿拉伯语则是从右往左。

支持下面几个属性值:

ltr
文档呈现从左往右。
rtl
文档呈现从右往左。
auto
由浏览器自己决定决定。它使用一个基本算法来解析元素中的字符,直到找到一个具有强方向性的字符,然后将该方向性应用于整个元素。

虽然 dir 属性设计初衷是语言相关,但是实际开发,我们可以利用其改变文档流的特性进行布局。

例如,类似微信对话这样的对称布局,可以使用逻辑CSS属性,配合 dir 属性实现,即自己的对话布局和他人的对话布局使用完全一样的HTML和CSS代码,唯一区别就是自己的对话的容器元素设置一个 dir="rtl" 就可以了,非常简洁,非常利于维护,具体不展开。

HTML全局属性列表大全

draggable

draggable 属性在拖拽交互中非常有用。支持属性值如下:

true
元素可以被拖拽。
false
元素不能被拖拽。

浏览器默认行为是内容可以拖拽,布局不能。

但是,有时候我们希望某些内容不能拖拽,但是布局可以拖拽,则就需要用到 draggable 属性,可以这么说,只要你是使用Drag & Drop API(可参见我之前“ HTML5 drag & drop 拖拽与拖放简介 ”这篇文章)进行拖拽行为的开发,就一定会用到 draggable 属性。

眼见为实,我们来看一个对比demo,您可以狠狠地点击这里: HTML draggable属性与元素拖拽demo

其中 <img> 元素天然可以被拖拽,因此,设置 draggable="true" 的效果和默认效果一样,如下截图所示:

HTML全局属性列表大全 HTML全局属性列表大全

<p> 元素天然不能被拖拽,因此,设置 draggable="false" 的效果和默认效果一样,而设置了 draggable="true" 之后,则同样也可以被拖拽了。

如下截图所示,图片是作为 background-image 设置的:

HTML全局属性列表大全

可以看到, <p> 元素拖拽时候,预览浮层比例和原始元素是1:1的,有别于 <img> 元素。

最后,提醒一点, draggable 单词拼写中间是两个 g ,千万不要记成

dragable

dropzone [实验]

dropzone 也是一个和Drag & Drop API有关的属性,可以用来指示哪种类型的内容可以拖放到当前元素上。

支持以下属性值:

copy
表示拖放后会创建一个拖拽元素的拷贝。
move
表示拖放后会移动拖拽元素。
link
表示会根据拖拽数据创建一个链接。

目前没有任何浏览器支持这一个属性,准确说Chrome曾经支持过,后来放弃了。

HTML全局属性列表大全

part

part 属性是跟着Shadow DOM开发走的,Shadow DOM树中的元素通常我们是无法在外部使用CSS选择器匹配的。

但是这样的需求又是存在的,怎么办呢,就设计了一个 part 属性,可以在外部借助CSS ::part 伪元素进行匹配。

例如:

<style>
c-e::part(active) { 
    color: deepskyblue; 
}
c-e::part(textspan) { 
    font-size: 20px; 
}</style>

<template id="c-e-template">
  <p part="textspan active">文字颜色是深天空蓝!</p>
  <p part="textspan">文字颜色是麻瓜黑!</p>
</template>
<c-e></c-e>

<script>
// 使用模板元素创建自定义元素c-e
let template = document.getElementById('c-e-template');
globalThis.customElements.define('c-e', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content);
  }
});
</script>

最后的效果如下图所示:

HTML全局属性列表大全

CSS样式匹配截图:

HTML全局属性列表大全

眼见为实,您可以狠狠的点击这里: HTML part属性和::part伪元素demo

exportparts

exportparts 属性也是跟着Shadow DOM树走的,可以设置在任意的Shadow DOM元素上,作用是指定 part 属性的暴露规则。

支持1~2个值,使用空格分隔,每个值都对应某一个元素的 part 属性值。在解析的时候,会装换成冒号分隔的射关系,具体规则如下(源自 规范文档 ):

innerIdent : outerIdent

添加后面所示的 «[ outerIdent → innerIdent ]» part名称映射关系。

ident

后面形式的简写 ident : ident .

其他任意

忽略错误,或者以后可能兼容。

具体什么意思,抱歉,我研究了好久也没搞清楚,此属性太新了,相关资料极少,规范文档提供的案例也不知道怎么玩,自己测试下来结果和预期并不符合,不知道是哪里打开的方式不对。

这个属性大致意思是,可以让嵌套的Shadow树中的部分Shadow转移暴露到一个更轻的树上。

以后这个属性成熟了再补上。

目前兼容性:

HTML全局属性列表大全

hidden

hidden 属性可以让元素隐藏,表现为 display:none ,相比类名或者style设置 display:none 的优点在于优先级极低,可以轻松reset。

IE11+以及其他现代浏览器都支持。

HTML全局属性列表大全

如果条件允许,强烈建议在项目中使用。

或者在reset.css中添加这么一句:

[hidden] { display: none; }

这样,所有项目都可以放心使用了。

inputmode

inputmode 的作用是告知虚拟键盘应该显示何种类型的键盘,例如是显示数字键盘呢,还是显示网址键盘还是显示邮箱键盘?

对于 <input> 元素,这个属性是个鸡肋,请使用原生的兼容性更好的 type 属性,例如:

<input type="number">
<input type="tel">
<input type="url">
<input type="email">

inputmode 属性适合设置了 contenteditable 的普通元素,例如:

<div typemode="numeric" contenteditable="plaintext-only"></div>

然而,我自己使用Android手机的Chrome浏览器(版本74)测试,没有效果,然后升级到最新的版本79,也没效果,如下图所示,显示的是普通键盘:

HTML全局属性列表大全

但是Caniuse上显示的是支持的,难道我又哪里打开的方式不对?

HTML全局属性列表大全

有对应的测试demo,大家可以帮忙看看呼起的键盘是不是数字键盘,您可以狠狠地点击这里: HTML inputmode属性与软键盘测试demo

PC访问读者可以使用手机扫下面的二维码进行体验与测试:

HTML全局属性列表大全

is

is 属性可以用来指定标准HTML元素的行为表现类似于注册过的自定义内置元素。

什么是“自定义内置元素”呢?这个问题在“ HTMLUnknownElement与HTML5自定义元素 ”这篇文章中有详细说明。

自定义元素分为两类:一类是匿名自定义元素(Autonomous custom elements),还有一类是自定义的内置元素(Customized built-in elements)。

前者extends HTMLElement,后者extends HTML内置元素,例如HTMLDivElement,HTMLSpanElement,HTMLFormElement元素等。

is 属性主要用在自定义的内置元素上的,可以让内置元素有其他自定义的交互行为。

例如,我们希望 <form> 元素原生的submit提交行为阻止。

传统做法是找到对应的 <form> 元素,然后绑定 submit 事件,然后事件对象执行 preventDefault() 方法。

这样的实现就很啰嗦,因为一个项目往往有多个表单元素。全局处理也不妥当,因为有些表单可能需要保留默认的提交行为。

怎么办呢?可以试试 is 属性,我们基于HTMLFormElement自定义一个 form-prevent 元素,通过 is 属性关联即可。

首先JavaScript代码如下,很简单:

class FormPrevent extends HTMLFormElement {
  constructor() {
    // 总是在constructor中先调用super
    const self = super();
    self.addEventListener('submit', function (event) {
        event.preventDefault();
    });    
  }
}
// 定义新的元素
customElements.define('form-prevent', FormPrevent, { 
  extends: 'form' 
});

这个时候,设置 is 属性值为 form-prevent 就天然阻止事件提交了,无需专门初始化,也不会影响默认的表单元素。

例如:

<form is="form-prevent">
    <input type="search" placeholder="请输入">
    <button type="submit">搜索</button>
</form>

此时点击搜索按钮是没有任何反应的。

眼见为实,您可以狠狠地点击这里: is属性与自定义元素与表单提交行为阻止demo

上面的小表单没有设置 is="form-prevent" ,点击“搜索”按钮会触发表单提交行为,页面刷新;而下面的小表单因为自定义的内置元素 <form-prevent> 默认阻止了submit行为,因此不会页面刷新。

HTML全局属性列表大全

item*

item* 是HTML微数据特性中的属性,包括: itemid 属性, itemprop 属性, itemref 属性, itemscope 属性和 itemtype 属性。

HTML微数据是一个独立的与搜索引擎SEO相关的领域,之前有专门详细介绍过,是国内为数不多的相关领域的介绍,具体参见这篇文章:“ HTML5扩展之微数据与丰富网页摘要 ”。

这里不再展开介绍。

lang

lang 用来定义元素的语言,不同的语言会影响文档的呈现。此HTML属性我们平常用的不多,多在 <html> 元素上全局设置一下。

至于 lang 的属性值的设置,那又是另外 的领域了,有兴趣深入研究的可以好好看看著名的 bcp47.txt 这个文档。

bcp47.txt 这个文档不仅对HTML lang 属性有用,对于CSS :lang 伪类的使用也是很有帮助的。

例如简体中文用户,lang属性值可以是: zh-Hans-CN

slot

slot 属性也是用在Shadow DOM开发中的。

slot 属性的使用离不开Shadow DOM <slot> 这个占位符元素, slot 属性值就是 <slot> 元素的 name 属性值。

我们举个简单例子示意下 slot 属性的作用。

首先模板HTML和自定义元素HTML如下,尤其关注红色部分代码:

<template id="zxx-paragraph">
  <style>
    p {
      color: white;
      background-color: deepskyblue;
      padding: 5px;
    }
  </style>
  <p><slot name="zxx-text">我是默认文字</slot></p>
</template>

<zxx-paragraph>
  <span slot="zxx-text">我会替换掉默认文字,啦啦啦啦啦~</span>
</zxx-paragraph>

其中, <zxx-paragraph> 是使用模板构建的自定义元素,相关JavaScript代码如下:

customElements.define('zxx-paragraph',
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById('zxx-paragraph');
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({
        mode: 'open'
      }).appendChild(templateContent.cloneNode(true));
    }
  }
);

此时大家应该可以看出来 slot 属性的作用了,就是找到自定义元素中提前设置好的占位用的 <slot> 元素并替换掉。

比方说上面的代码最终的效果是下面这样,文案是替换后的文案:

HTML全局属性列表大全

打开控制台看下源代码,结果是下面这样:

HTML全局属性列表大全

也就是虽然视觉上设置了 slot 属性的 <span> 元素并不是 <p> 元素的子元素,但是实际渲染的时候,按照替换占位子元素渲染了。

眼见为实,您可以狠狠地点击这里: HTML slot属性测试demo

spellcheck

spellcheck 是拼写检查属性,在英文英语体系中比较有用,对于我们中文场景作用就弱了很多。

支持下面两个值:

true
开启拼写错误检查。
false
不检查拼写是否有错误。

虽然 spellcheck 是一个全局属性,但是,并不是所有元素使用这个属性都有效果的,主要用在input/textarea这些输入元素上。

兼容性如下图所示:

HTML全局属性列表大全

看起来兼容性还是相当不错的,不过我使用本机进行测试,并没有任何反应,可能我的浏览器是中文版的,并不支持或者需要哪里开启吧。

style

style 可以用来设置元素的内联样式,人尽皆知不展开。

tabindex

tabindex 可以用来设置元素是否能够被Tab键索。

关于 tabindex 属性和键盘的无障碍访问,之前专门写过一篇名为“ HTML tabindex属性与web网页键盘无障碍访问 ”的文章介绍过,对这一块比较关注的小伙伴,可以看看。

title

title 表示元素的标题,在PC端浏览器中,鼠标hover会显示相关的提示。

translate [实验]

translate 属性表示是否允许浏览器对当前元素进行翻译。

支持下面两个属性值:

yes | ”
表示元素应当被翻译为本地语言。
no
表示这个元素不能被翻译。

兼容性如下:

HTML全局属性列表大全

移动端可以用起来。

虽然并非所有浏览器都能识别这个属性,但它受到自动翻译系统(如Google Translate)的识别,也可能受到人工翻译 工具 的识别。因此,web开发者使用此属性标记不应翻译的内容非常重要。

三、结语啊哈

昨天回上海的,开始进入学习、撸代码,写文章状态,nice,nice,难得这么多连续整片的学习时间,赛高赛高。

这篇文章嗯,将近8000字,内容还是比较多的,全部看完估计差不多半小时吧。

昨天和今天累积奋战差不多16个多小时才弄完。

就我个人而言,还是学到很多东西的,虽然大多数以前都用过,但是还有部分新特性也是第一次知道,花费的时间还是很值的。

不过现在还在假期当中,估计也没几个人看,不妨,写文章主要还是自己总结学习用的。

最后,参考文档: MDN Global attributes

新年快乐!

HTML全局属性列表大全

本文为原创文章,欢迎分享,勿全文转载,如果实在喜欢,可收藏,永不过期,且会及时更新知识点及修正错误,阅读体验也更好。

本文地址: https://www.zhangxinxu.com/wordpress/?p=9235

(本篇完)


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

实战Linux编程精髓

实战Linux编程精髓

罗宾斯 / 中国电力出版社 / 2005-7 / 59.80元

编写应用软件,特别是那些比较重要的软件,毫无疑问要涉及到系统调用。在UNIX/Linux环境下编程更是如此。要想编写优秀的软件,就必须熟悉这些系统调用的方方面面。通过阅读这本书,你能够快速地掌握这些重要技术,以构建严谨的Linux软件。全书主要分为三大部分:第一部分讨论了基本的编程问题,包括Linux编程环境、基本的文件和进程管理与操作、内存操作,还介绍了一些基本的库接口。第二部分比较深入地讨论了......一起来看看 《实战Linux编程精髓》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具