HTML中16个全局属性介绍

HTML原有属性

accesskey

作用:浏览器用来创建激活或聚焦元素的快捷键

值:一个键盘字符如 O

范围:支持该属性的元素有<a><area><button><input><label><legend><textarea>

注意:使用该属性可能在新窗口打开链接时可能会被浏览器屏蔽

<div>
    <a href="https://www.baidu.com" accesskey="b">百度</a>
    <a href="https://www.taobao.com" accesskey="a">阿里</a>
    <a href="https://www.qq.com" accesskey="t">腾讯</a>    
    <p>快捷键(alt+b)可以跳转到百度;快捷键(alt+a)可以跳转到阿里;快捷键(alt+t)可以跳转到腾讯</p>
</div>

1.jpg

class

作用:规定元素的一个或多个类名

值:多个类名用空格分隔

注意:类名不能以数字开头

dir

作用:文字的方向

值:ltr/rtl/auto

2.jpg

id

作用:规定元素的唯一标识

注意:若浏览器中出现多个id名的情况,CSS样式对所以该id名的元素都生效,但javascript脚本仅对第一个出现该id名的元素生效

3.jpg

lang

作用:规定元素内容的语言

en:英文
zh:中文
zh-CN:简体中文

zh 是中文,代表的是宏语言(Macrolanguage),zh 单独用表示中文整体,可以是方言、文言文、简繁体等混合内容。理论上 zh-CN 表示的是中国大陆中文,包含方言和简繁体,但默认指简体普通话。

为了精准性,应该用独立语种替换,包括但不仅限于普通话和七大方言:

cmn 普通话(官话、国语)

wuu 吴语(江浙话、上海话)、czh 徽语(徽州话、严州话、吴语-徽严片)

hak 客家语

yue 粤语(广东话)

nan 闽南语(福建话、台语)、cpx 莆仙话(莆田话、兴化语)、cdo 闽东语、mnp 闽北语、zco 闽中语

gan 赣语(江西话)

hsn 湘语(湖南话)

cjy 晋语(山西话、陕北话)

以下所有 zh 开头写法已于 2009 年废弃,因为在语言学的分类上,中国语言学者多认为吴语、粤语、闽语等是汉语的方言,而西方学者多认为这些语言是一门和汉语同级关系的单独语种。

以下两种写法均正确,后者描述更精准,但目前浏览器和操作系统都只支持前者,使用新标准可能会造成无法匹配浏览器用户定义字体、网页翻译、程序语言自动切换等功能,为了兼容性推荐使用前者。

zh-CN 中文 (简体, 中国大陆) 对应 cmn-Hans-CN 普通话 (简体, 中国大陆)

zh-SG 中文 (简体, 新加坡) 对应 cmn-Hans-SG 普通话 (简体, 新加坡)

zh-HK 中文 (繁体, 香港) 对应 cmn-Hant-HK 普通话 (繁体, 香港)

zh-MO 中文 (繁体, 澳门) 对应 cmn-Hant-MO 普通话 (繁体, 澳门)

zh-TW 中文 (繁体, 台湾) 对应 cmn-Hant-TW 普通话 (繁体, 台湾)

style

作用:设置元素的行间样式

tabindex

作用:规定元素的tab键次序

值:<number>(1是第一个)

<div>
    <a href="https://www.baidu.com" tabindex="3">百度</a>
    <a href="https://www.taobao.com" tabindex="2">阿里</a>
    <a href="https://www.qq.com" tabindex="1">腾讯</a>    
</div>

4.jpg

title

作用:规定关于元素的额外信息,鼠标移到元素上时显示一段提示文本 

5.jpg

HTML5新增属性

contenteditable

作用:指定是否可以在浏览器里编辑内容

值:true/false

注意:设置document.designMode ='on'时,页面的任意位置都可以编辑;使用contenteditable ='true'则只对具体元素和其包含的元素起作用。

移动端:移动端ios5以及android3之后才支持该属性

6.JPG

contextmenu(没有浏览器支持)

作用:跟元素关联的右键菜单

值:<menu>元素中唯一ID

data-*

作用:用于存储页面或应用程序的私有定制数据

注意:属性名不应包含任何大写字母,且在前缀"data-"之后必须有至少一个字符;属性值可以是任意字符串

使用:可以在所有浏览器中使用getAttribute方法来获取data-*属性的值,也可以使用javascript中dataset属性访问data-*属性的值,不过IE10-浏览器不支持dataset。

draggable(IE8-不支持)

作用:用户是否可以拖动元素

值:true/false/auto

注意:链接和图像默认是可拖动的

dropzone(所有浏览器都不支持)

作用:规定在拖动被拖动数据时是否进行复制、移动或链接

值:copy拷贝/move移动/link指向原始数据链接

hidden(IE7-不支持)

作用:显示或隐藏该元素(与display:none的作用一样)

值:hidden="" || hidden= "hidden"

spellcheck(IE9-不支持) 

作用:规定是否对元素进行拼写和语法检查,对拼写错误的单词会在其下方出现红线

范围:可编辑区域(表单或contenteditable元素)

值:true/false

注意:移动端支持不好

7.jpg

translate(所有浏览器都不支持)

作用:规定是否应该翻译元素内容

值:yes/no

Image placeholder
前端答疑
未设置
  99人点赞

没有讨论,发表一下自己的看法吧

推荐文章
innerHTML与jquery里的html()区别?

innerHTML与jquery里的html()区别?●html()可以设置tbody、tr这些只读标签,而innerHTML在低版本IE下不行;jQuery的html()做了些容错处理,原生的Dom

使用html-webpack-plugin对HTML文件进行预处理

一、前言先整理一波之前和webpack相关的文章: 使用Webpack对CSS文件进行后处理 基于Webpack的CSSSprites实现方案 Stylus系列——webpack-spritesmit

html转pdf工具 --- wkhtmltopdf

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 html转pdf工具---wkhtmltopdf [https://wkhtmltopdf.org/wkhtmltopdf htt

93.7% 的程序员!竟然都不知道 Redis 为什么默认16个数据库?

▍导读在实际项目中Redis常被应用于做缓存,分布式锁、消息队列等。但是在搭建配置好Redis服务器后很多朋友应该会发现和有这样的疑问,为什么Redis默认建立了16个数据库,如下图所示。椐调查发现:

怎么在html中加入css样式

html添加css样式有三种方法,分别为行内式(使用style属性,在特定的HTML标签内使用)、内嵌式(style标签把css代码放在特定页面的head部分中)、外联式(使用link标签,将外部cs

html中空白空格怎么打?

一、键入空格在html页面中,我们可以通过键入“空格”键来插入空格。例:在p.p1中键入一个空格,在p.p2中键入5个空格。注:此时是半角状态键入“空格”测试文字|测试文字! 测试文字|测试文字!效果

css怎么写在html中?

css怎么写在html中?css样式写法可以分为:●内嵌式●内部样式表●外部样式表HTML中直接写css只能使用内嵌式和内部样式表。(相关课程推荐:css视频教程)一、内嵌式将css代码写在HTML元

HTML中行内元素与块级元素区别有什么?

HTML中行内元素与块级元素区别有什么?区别有:●行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的。●块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列。●行内元素不可

企业需要知道的 6个AI/ML关键点

由于人工智能(AI)和机器学习(ML)的迅速发展与应用落地,世界各地的公司正在积极利用AI和ML发展业务,甚至投资数百亿美元。这些技术能够对业务与产生深刻的影响,所以Gartner报告预测,未来将“进

css中1em什么意思?

css中1em什么意思?em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em为了简化font-size的

HTML5 Canvas 数据持久化存储之属性列表

属性列表想必大家都不会陌生,正常用HTML5来做的属性列表大概就是用下拉菜单之类的,而且很多情况下,下拉列表还不够好看,怎么办?我试着用HTforWeb来实现属性栏点击按钮弹出多功能选框,对传入的数据

HTML5新增了哪些input类型及其属性?

HTML5新增了哪些input类型及其属性?1、url类型、email、tel类型说明:当输入非url、email的字符串时,浏览器会自动提醒。 2、number类型。说明:只能输入数字,min表

HTML属性的附加信息

课程推荐:前端开发工程师--学习猿地精品课程 HTML属性HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。 属性总是以名称/值对的形式出现,比如:name="value"。 属性总是

制定机器学习训练数据策略的6个技巧

人工智能(AI)和机器学习(ML)如今已经十分常见。AI指的是机器模仿人类进行认知的概念,ML是一种用于构建AI的方法。如果AI是指计算机可以根据指令执行一组任务,那么ML就是机器从数据中摄取、解析和

html和css难学吗?

什么是HTML?html是HyperTextMark-upLanguage的缩写,即超文本标记语言;html是网页的结构(Structure)。html是用来定义文档内容结构的,包含了用户需要浏览的内

html怎么加载css?

有四种加载方式:行内式通过html的style属性实现,如下所示//写在body标签中 行内式嵌入式在style标签中写css样式,在body中引用//写在style标签中的css样式 p{ colo

iis部署html css无法显示怎么解决

iis部署htmlcss无法显示怎么解决如果你的网站在VS或其他软件中运行时具有CSS和JS功能,但到了IIS中就消失了,导致网站变成纯文字界面。你需要进行如下尝试。1、首先确认是否打开IIS中的“动

html找不到css文件怎么解决

html找不到css文件怎么解决如果你在引用css文件时,使用了错误的文件路径,就会导致引用失效。解决方法就是填写正确的css文件路径。下面我们学习下HTML填写路径的两种方法。(推荐学习:HTML视

HTML文字怎么插入下划线?

在HTML中想要给文字加下划线可以使用标签来实现。下划线标签的语法:我被加下划线了来看个完整代码的用法实例: 这里是HTML中文网! HTML中文网网址:www.html.

HTML乱码怎么办?

HTML乱码原因1、不同编码内容混杂:HTML乱码是因为html编码问题照成(常见gb2312与utf-8两种编码内容同一时候存在照成)2、未设置HTML编码:3、使用记事本编辑html:有时使用记事

HTML如何加脚注(注释)?

为了让别人一看就知道这段代码是做什么用的。正确的程序注释一般包括序言性注释和功能性注释。HTML脚注(注释):在HTML中,可以使用注释标签来添加脚注(注释)。注释标签用来在源文档中插入注释,注释不会

html5不常用标签应用场景

divpspanuldlollidtddstrongb现在都已经是9102年了,html5已经相当成熟标准了,为什么在布局的时候不用写html5提供的具有语义化的标签进行布局呢?我个人觉得是因为我们刚

怎么在html页面写js css代码

怎么在html页面写jscss代码一、在html中写css代码的方法:1、首先我们看CSS的内联写法,顾名思义就是写在HTML标签内的,如下所示,将css代码写到元素的style属性上。 D

html如何导入css

html如何导入css1、使用链接式(推荐学习:HTML视频教程)2、使用导入式 @import"style.css" 扩展资料:二者的区别导入式和链接式的目的都是将一个独立的css文件引入一个文件中

html怎么用css

html怎么用cssCSS样式只有应用到HTML元素中,样式才会产生效果。有三种方式可以把CSS样式应用到HTML元素。一、利用HTML元素的style属性,样式表作为style属性的值,该方式也称为