HTML5全局属性汇总

站长手记作者： 2024-08-28 14:30:01

HTML5全局属性：可以用来配置所有元素共有的行为，这种属性称为全局属性，可以用在任何一个元素身上。包括：accesskey属性、class属性、contenteditable属性、dir属性、draggable属性、dropzone属性、hidden属性等

局部属性和全局属性

1、accesskey属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>HTML全局属性测试</title>
</head>
<body>
   <form action="">
       <p>
           Name: <input type="text" name="name" id="" accesskey="n">                
       </p>
       <p>
           Password: <input type="password" name="password" id="" accesskey="p">                
       </p>
       <p>
           Name: <input type="submit" name="" id="" value="Log In" accesskey="s">                
       </p>
   </form>
</body>
</html>

浏览器/平台	Window	Linux	Mac
Firefox	Alt + Shift + key	Alt + Shift + key	Control + Alt + key
Internet Explorer	Alt + key	N/A	N/A
Google Chrome	Alt + key	Alt + key	Control + Alt + key
Safari	Alt + key	N/A	Control + Alt + key
Opera	同Google Chrome	同Google Chrome	同Google Chrome

2、class属性

3、contenteditable属性

<body>
    <!-- contenteditable属性应用 -->
    <p contenteditable="true">设置为 true 是可编辑的</p>
</body>

4、dir属性

    <!-- dir属性应用 -->
    <p dir="ltr">从左到右</p>
    <p dir="rtl">从右到左</p>

5、draggable属性

6、dropzone属性

7、id属性

8、hidden属性

    <!-- hidden属性应用 -->
    <div hidden>这个元素将会被隐藏</div>

9、lang属性

    <!-- lang属性应用 -->
    <p lang="en">Hello - how are you?</p>

10、spellcheck属性

<!-- spellcheck属性应用 -->
    <textarea name="" id="" cols="30" rows="10" spellcheck="true">This is some lalalala text</textarea>

11、style属性

12、tabindex属性

    <!-- tabindex属性应用 -->
    <form action="">
        <label>Name: <input type="text" name="" id="" tabindex="2"></label>
        <label>City: <input type="text" name="" id="" tabindex="-1"></label>
        <label>Country: <input type="text" name="" id="" tabindex="1"></label>
        <input type="submit" value="" tabindex="3">
    </form>