HTML5全局属性

来源：互联网发布：复杂网络模型编辑：程序博客网时间：2024/05/16 06:52

HTML5全局属性

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="Login" accesskey="s" />        </form>    </body></html>

此例三个input元素都添加了accesskey属性，用来触发accesskey机制的按键组合因平台而异，不同的浏览器触发机制的按键组合不同。
IE：Alt+accesskey，焦点移动到链接，按回车键。
FireFox：Alt+Shift+accesskey
Chrome：Alt+accesskey
Opera：Shify+esc，出现本页定义的accesskey快捷键列表
Safari：Alt+accesskey

class属性

class属性有两个作用，一是为某一类元素应用CSS样式，一种是为了找出文档中的某一类元素。

<!DOCTYPE HTML><html>    <head>        <title>Example</title>```html    </head>    <body>        <a class="class1 class2" href="http://cn.bing.com">必应搜索</a>        <p/>        <a class="class2 otherclass" href="http://www.baidu.com">百度搜索</a>    </body></html>

一个元素可被归入多个类别，因此在class属性值中可提供多个用空格分隔的类名。类名是随意的，但是一般在起类名时应该考虑该元素的实际意义。class属性本身没有任何作为。
* class属性定义样式 *

<html>    <head>        <title>Example</title>    </head>    <style type="text/css">        .class2{            background-color:red;            color:white;            padding:5px;            margin:2px;        }        .class1{            font-size:x-large;        }    </style>    <body>        <a class="class1 class2" href="http://cn.bing.com">必应搜索</a>        <p/>        <a class="class2 otherclass" href="http://www.baidu.com">百度搜索</a>    </body></html>

* 在脚本中使用class属性 *

<html>    <head>        <title>Example</title>    </head>    <body>        <a class="class1 class2" href="http://cn.bing.com">必应搜索</a>        <p/>        <a class="class2 otherclass" href="http://www.baidu.com">百度搜索</a>        <script type="text/javascript">            var elems = document.getElementsByClassName("otherclass");            for(i = 0; i < elems.length; i++){                var x = elems[i];                x.style.border = "thin solid black";                x.style.backgroundColor = "white";                x.style.color = "black";            }        </script>    </body></html>

getElementsByClassName方法在IE8及以下版本中不能使用

contenteditable属性

contenteditable属性是HTML5中新增加的属性，其用途是让用户能够修改页面上的内容。

<!DOCTYPE HTML><html>    <head>        <title>Example</title>    </head>    <body>        <p contenteditable="true">It is raining right now.</p>    </body></html>

修改前
修改后

contentmenu属性

contentmenu属性用来为元素设定快捷菜单，这种菜单会在收到出发的时候弹出来，目前尚无浏览器支持这个属性。

dir属性

dir顺序性用来规定元素中文字的方向，其有效值有两个：ltr，用于从左到右的文字，rtl，用户从右到左的文字。

<!DOCTYPE HTML><html>    <head>        <title>Example</title>    </head>    <body>        <p dir="rtl">This is right-to-left.</p>        <p dir="ltr">This is left-to-tight.</p>    </body></html>

这里写图片描述

draggable属性

draggable属性是HTML5支持拖放操作的方式之一，用来表示元素是否可被拖放。

dragzone属性

dragzone属性是HTML5支持拖放操作的方式之一，与draggable属性搭配使用。
draggable属性的值有三个：true，false，和auto。
HTML5的拖动操作将在以后讲到。

hidden属性

hidden属性是个布尔属性，用来表示相关元素当前无需关注，浏览器对它的处理方式是隐藏相关元素。

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

点击前
这里写图片描述

id属性

id属性用来给元素分配一个唯一的标识符，这种标识符通常用来将样式应用到元素上或在Javascript程序中用来选择元素。

lang属性

lang属性用于说明元素内容使用的语言，其属性值必须使用有效的ISO语言代码。使用lang属性的目的是让浏览器调整其表达元素内容的方式，比如改变使用的引号，在使用了文字朗读器的情况下正确发音。

spellcheck属性

spellcheck属性用来表明浏览器是否应该对元素内容进行拼写检查，这个属性用在用户可以编辑的元素上时才有意义。

<!DOCTYPE HTML><html>    <head>        <title>Example</title>    </head>    <body>        <textarea spellcheck="true">This is some mispelled text.</textarea>    </body></html>

这里写图片描述

style属性

style属性用来直接在元素身上定义CSS样式。

tabindex属性

HTML页面上的键盘焦点可以通过按Tab键在各元素之间切换，用tabindex属性可以改变默认的转移顺序。tabindex为1的元素会被第一个选中，用户按下Tab键后，tabindex值为2的那个元素会被选中，以此类推，tabindex设置为-1的元素则不会在用户按下tab键后被选中。

title属性

title属性提供元素的额外信息，浏览器通常用这些东西显示提示。

0 0