HTML5中的全局属性

全局属性用来配置所有元素的共有的行为，能作用在所有元素身上。

1. accesskey属性

accesskey可以设定选择页面上元素的快捷键。
示例代码：

<!DOCTYPE HTML>
<html><head>    <title>Example</title></head><body><form>Name: <input type="text" name="name" accesskey="n"/><p/>Password: <input type="password" name="password" accesskey="p"/><p/><input type="submit" value="Log In" accesskey="s"/></form></body>
</html>

按住 alt + n 会选中 Name 元素：

按住 alt + p 会选中 Password 元素：

按住 alt + s 就相当于点击 Log in 按钮，提交表单。

2. class 属性

这个大家应该都比较熟悉，通常与 CSS 结合来设计网页的样式。

3. contenteditable 属性

能让用户修改页面上的代码。

<!DOCTYPE HTML>
<html><head>    <title>Example</title></head><body><p contenteditable="true">It's sunny right now</p></body>
</html>

点击文本即可修改：

4. dir 属性

规定元素中文字的方向：ltr（从左到右）、lrt（从右到左）。

<!DOCTYPE HTML>
<html><head>    <title>Example</title></head><body><p dir="ltr">从左到右</p><p dir="rtl">从右到左</p></body>
</html>

5. hidden 属性

可以隐藏元素。

<!DOCTYPE HTML>
<html><head>    <title>Example</title><script>var toggleHidden = function() {var elem = document.getElementById("toggle");if (elem.hasAttribute("hidden")) {elem.removeAttribute("hidden");} else {elem.setAttribute("hidden", "hidden");}}</script></head><body><button onclick="toggleHidden()">Toggle</button><table><tr><th>Name</th><th>City</th></tr><tr><td>Adam Freeman</td><td>London</td></tr><tr id="toggle" hidden><td>Joe Smith</td><td>New York</td></tr><tr><td>Anne Jones</td><td>Paris</td></tr></table></body>
</html>

点击按钮会调用 toggleHidden 函数，如果该元素有 hidden 属性，那么就删除 hidden 属性，就是显示元素；如果没有，则添加。

初始状态：

点击 toggle 按钮：

再次点击按钮：

6. id 属性

用于唯一标示一个元素。

7. spellcheck 属性
spellcheck 用来表明浏览器是否对元素的内容进行拼写检查，只有用于可编辑元素上才有意义。

<!DOCTYPE HTML>
<html><head>    <title>Example</title></head><body><p contenteditable="true" spellcheck="true">It's sunny right now</p></body>
</html>

出现错误拼写时会有红色下划线：

8. lang 属性

用于说明元素内容使用的语言。

<!DOCTYPE HTML>
<html><head>    <title>Example</title></head><body><p lang="en">Hello - how are you?</p></body>
</html>

p 元素使用的是 english。

9. style 属性

用来直接定义元素的 CSS 样式。

10. tabindex 属性

用于通过 Tab 键切换键盘焦点，用 tabindex 可以改变默认的转移顺序。

<!DOCTYPE HTML>
<html><head>    <title>Example</title></head><body><form><label>Name: <input type="text" name="name" tabindex="1"/></label><p/><label>City: <input type="text" name="city" tabindex="-1"/></label><p/><label>Country: <input type="text" name="country" tabindex="2"/></label><p/><input type="submit" tabindex="3"/></form></body>
</html>

按一次 Tab：

按两次 Tab：

按三次 Tab：

tabindex值为1的元素会被第一个选中，2的第二个选中，3的第三个选中。-1的不会选中。

11. title 属性

提供元素的额外信息。

<!DOCTYPE HTML>
<html><head>    <title>Example</title></head><body><a title="Apress Publishing" href="http://apress.com">Visit the Apress site</a></body>
</html>

HTML5中的全局属性相关推荐

HTML中的全局属性
一.全局属性和局部属性每种元素都有自己规定的属性,这种属性成为局部属性.还有另外一种属性,他可以用来配置所有元素的共有行为,这种属性成为称为全局属性.全局属性可以用在任何一个元素身上,但是不一定会带 ...
html5 lang作用,HTML5中的lang属性，zh
先提供资源.如果我弄错了什么,请以这些文档为准: W3C文档.IANA已登记的子标签.BCP 47.RFC 5646. 二.格式简介先上一张图片: 一个Language Tags,由①到⑦一共四个子 ...
html5中没有align属性,HTML标签align属性的用法问题
HTML中表格.文字.图像等元素都有使用到align属性,align属性主要是影响设置元素的水平对齐方式,给表格.文字.及图像等元素设置align属性,其表现形式是不一致的. 给表格元素设置align ...
html5中defer的属性,HTML5中defer和async的比较
在网站页面中,通常需要引入外部js资源,然而外部的js资源可能导致DOM阻塞,影响页面加载速度.通过异步或者延迟执行js,可以做到引用外部js资源而不阻塞DOM的目的.用法是直接在script标签中使 ...
html5中的pattern属性（表单验证input）
pattern用于验证表单输入的内容,通常HTML5的type属性,比如email.tel.number.data类.url等,已经自带了简单的数据格式验证功能了,加上pattern后,前端部分的验证 ...
html5中的target属性,HTML中target属性是什么意思
我来讲讲,希望对你有用: 其实并不用一一进行讲解,给你举几个实例你自然就明白其中的微妙所在: 1. _blank 这个家伙的汉语译文是:空白的,引申一下,就好像你写笔记一样,写完了一页翻过去,在一个新 ...
HTML5中input常用属性,input 有哪些属性
Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=text 输入类型是text,这是我们见的 ...
HTML5中canvas画布属性,html5 Canvas之画布合成的属性总结
首先解释一下合成的含义,合成是指如何精细控制画布上面的对象的透明度和分层效果.其中控制Canvas画布合成的操作的两个属性分别是:globalAlpha和globalCompositeOperatio ...
php 定义title,HTML5中对title属性的定义与规定
注意,这里说的不是title标签( ),而是title属性(如总结: 元素的title属性的值就是该元素的咨询信息,并有可能适当的以提示框的形式显示出来. title属性是纯文本形式的. 例如:超级 ...

HTML5中的全局属性

HTML5中的全局属性相关推荐

最新文章

热门文章