HTML5中的全局属性

最新推荐文章于 2023-03-20 22:52:17 发布

进击的博仔

最新推荐文章于 2023-03-20 22:52:17 发布

阅读量980

点赞数 4

分类专栏：前端html5 文章标签： html5 html 前端

本文链接：https://blog.youkuaiyun.com/weixin_45773137/article/details/125786980

版权

前端html5 专栏收录该内容

1 篇文章

订阅专栏

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

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>