HTML全局属性是可以应用于几乎所有(部分属性有一定的应用范围限制)的HTML标签的属性,现在已知的属性有16个,其中有一半左右是HTML5标准后出现的,很多属性在我们之前的学习中都已经接触过了的,能熟练地记识这些属性能够给我们之后的Web开发带来很多便利,减少开发中所犯的一些低级错误。作为一个Web前端工程师,能够准确地区分全局属性和特殊属性也是一项重要的基本功。接下来我们就来看看在HTML中哪些属性能够作为并为大部分主流浏览器所兼容的全局属性。
该属性能用于所有的HTML元素,为HTML元素指定一个唯一的标识符,用于CSS设置,JavaScript进行操作或其它脚本语言及服务器端语言进行设置操作。如:
该属性可以用于所有HTML元素,为元素添加一个或多个类名。通常是用于CSS设置或配合JavaScript进行操作设置,多个类名以空格符进行分隔。如:
该属性可以用于所有HTML元素,通过它的值可以给HTML元素设置CSS样式,语法和标准的CSS语法一致。如:
虽然通过该属性来设置CSS属性看似方便,但这样会让CSS的可复用性和可维护性都变得相当的糟糕,所以,除非对非常特殊的元素使用该属性,否则还是建议将样式写进独立的CSS文件当中对元素的样式进行设置。
该属性可以用于所有HTML元素,通过设置它的值,可以让用户鼠标悬浮在该元素上显示出“title”属性中所设置的值.
部分样式已用CSS进行设置,HTML部分代码如下:
该属性在现在PC端中的Web开发非常常用,由于现在Web设计的趋势是简洁化、扁平化设计,页面上的元素也需要极力地简洁,很多常用的按钮甚至都没有文字,而是采用一个图标进行替代。但这样的设计会让有些用户不清楚按钮的实际用途,这个时候“title”就能起到一个补充说明的作用。
该属性用于设置元素的语言类型,不支持的标签有<base>,<br>,<frame>,<frameset>,<hr>,<iframe>,<param> 及 <script>,但通常的使用方式是直接给<html>标签设置该属性,如:<html lang="zh-cn">、<html lang="zh">、<html lang="en">这样的形式,分别表示将语言类型设置为“简体中文”、“中文”、“英文”。
现在很多IDE(代码编辑器)都有HTML基本文档的生成功能,有些国外的IDE会在默认生成的HTML文档结构中将<html>标签的“lang”属性的值设置为“en”,这样在有些中文版的现代浏览器(如中文版的“Google Chrome”)启动该网页时就会询问用户“是否翻译该网站”,这对于国内网站来说,显然是有损用户体验的。所以,我们在自动生成文档结构后都需要习惯性地检查一下<html>中的“lang”属性值是否是我们需要的“zh-cn”。当然,如果是进入跨国、外资企业,很多时候开发的并不是中文网站,这个时候就需要将“lang”设置为指定的国家语言了。
下面是一些其它国家,及对应的语言类型简写:
该属性用于激活元素,通常作用是让表单元素获得焦点,实现方式是通过键盘上的“Alt”键加上该属性设置的属性值,属性值是用户键盘上指定的任意一个字母或一个常用符号。
部分样式已用CSS进行设置,HTML部分代码如下:
该属性用于设定当用户按下键盘上的“Tab”键后,页面内可以获得焦点的元素获得焦点的次序(默认是基于文档流“从左到右,从上到下”的次序)。切换次序的先后遵循以下规则:
部分样式已用CSS进行设置,HTML部分代码如下:
该属性可以设置元素内文本的方向,它包含两个值:
在实际操作中,单独把某段文字设为“从右往左”的时候并不多,而是在进行一些文字书写习惯是从右往左的国家的网站开发会用到,这个时候用CSS去控制会更加的明智,用CSS设置文本方向的属性可以参看本课件“CSS”课程分类中“CSS文本设置”的章节内容“设置文本方向‘direction’”。
该属性是HTML5标准后写出现的一个比较有“革命意义”的属性,它可以让一个普通的布局标签元素(如<div>、<p>、<span>、<section>、<article>、<header>、<main>、<footer>、<nav>、<aside>等等)可以像一个文本框(域)一样编辑文本内容。之所以说它具有革命意义的原因在于,传统的表单输入元素的编辑只限于文本,而“contenteditable”属性只是让一个元素可以进行编辑,而并不会对其类型进行转化,也就是说网页中任何可以通过HTML+CSS实现的元素,都是可以进行编辑的。
该属性允许设置两种值,值的类型为一个布尔值:
部分样式已用CSS进行设置,HTML部分代码如下:
首先需要明白的是该属性本身并不会对元素及相关联的元素造成任何影响,也就是说该属性会被浏览器用户代理忽略。属性“data-*”后面的“*”号可以是用户自定义的英文单词、数字、横线“-”和下划线“_”等字符串。如:“data-username”、“data-photo_1”、“data-list-item_01”等。
该属性可以有属性值,也可以没有属性值,而属性值也完全是用户自定义的字符串。
该属性的作用和“class”属性的作用比较相似(但该属性不被较老版本的浏览器支持),同样可以通过它去进行CSS样式的设置,也可以被JavaScript代码进行DOM操作,数据获取、设置等,但很多时候“class”中的值是用于CSS样式设置的,如果对其操作修改会造成自身样式或后代元素的样式错乱,这个时候通过去操作开发者自定义“data-*”属性更为稳妥,也更为规范。
HTML代码如下:
CSS部分代码如下:
JavaScript部分代码如下:
该属性用于设定元素是否可以拖动,它允许设置三种值:
部分样式已用CSS进行设置,HTML部分代码如下:
该属性实质上是HTML5提供为JavaScript提供的一个API,也就是说需要和编程语言进行配合使用,在这里我们通常是和JavaScript中的“ondragstart(作用于被拖拽元素开始被拖动时)”、“ondragenter(作用于被拖拽元素进入拖动目标元素后)”、“ondragover(作用于被拖拽元素被拖动的过程中)”、“ondrop(作用于被拖拽元素被拖动后放开鼠标左键时)”和“ondragend(作用于被拖拽元素拖动结束后)”事件配合使用。由于课程次序安排的原因,这里就暂时不提供JavaScript相关内容的演示了。
该属性无需属性值(所有属性值都无效),在“严格模式”的HTML文档中需要写成“hidden="hidden"”,但凡设置了该属性的元素都会在页面中隐藏,并且不再占用“文档流”中的位置,相当于将元素CSS的显示类型“display”属性的值设置为“none”(但通过这种方式隐藏元素,它的优先级的权重为0,只要在CSS中显示地将“display”属性设置为“inline-block”或“block”等可以显示元素的类型即可显示出元素)。
部分样式已用CSS进行设置,HTML部分代码如下:
该属性用于检查元素内容中英文语法拼写的检查,若元素中英文字母内容不是已知的英文单词浏览器会在单词下方划上一条红色的波浪线用于提示错误(出于用户体验和不同国家语言的发展考虑,现在的主流浏览器已经在废弃该属性,所以在2020年3月后的很多浏览器已经不再有效果)。
该属性允许设置两种值,值的类型为一个布尔值:
部分样式已用CSS进行设置,HTML部分代码如下:
上面我们已经提到了13个HTML中的全局属性,这些属性都能被目前大部分或全部的浏览器所支持,而HTML5标准中出现的部分全局属性却不能完全地被目前的浏览器支持。下面列出了不能完全被现今主流浏览器所支持的剩余3个HTML全局属性,有兴趣的同学可以自行进行实践。
HTML部分代码如下(若浏览器不支持,在右键后出现的不是<menu>中所设置的命令项):