• [09]HTML基础之全局属性


    1. id 属性

    当前元素的唯一身份,应避免在多个元素中使用相同id值,多在javascript中用于引用该元素。

    <div id="content">绝弹博客</div>
    //在css中,用#+id值对该元素进行选择
    <style>
        #id { color: red; }
    </style>
    //在js中,会自动为该元素生成,以该元素id值为名的全局变量
    <script>
        content.onclick = function() { this.innerHTML = '欢迎关注绝弹'; }
    </script>
    

    2. class 属性

    当前元素的类别,可在多个元素中使用相同的值,多用在css中进行样式赋值。

    <p class="orange"> 我多想再见你,哪怕匆匆一眼就别离; </p>
    <p class="orange">路灯下昏黄的剪影,越走越漫长的林径. </p>
    <style> //在css中,用.+class值对该元素引用
        .orange { color: #ff6600; }
    </style>
    

    3. style 属性

    当前元素的行内样式,里面的样式仅对该元素有效,且优先级更高。

    //多个样式属性以分号分隔
    <p style="background: #eaeaea; color: #ff6600;">不过游戏一场</p>
    

    4. title 属性

    当前元素的标题,鼠标悬浮在其上面会显示该标题。

    //多用于解释或提示
    <button title="点击按钮即可退出当前账户">退出</button>
    

    5. dir 属性

    文本方向,不过也适用于行内元素,效果相当于镜像后排列。

    //从左往右(默认)
    <p dir="ltr">香山碧云寺云碧山香</p>
    //从右往左
    <p dir="rtl">黄山落叶松叶落山黄</p>
    

    6. lang 属性

    当前元素所用的语言,常用于html元素上,表示整个文档所用的语言。

    //英文en,简体中文zh_CN
    <html lang="zh_CN">
        <head> ... </head>
        <body> ... </body>
    </html>
    

    7. tabindex 属性

    当前元素的tab顺序,数值越小,优先级越高。

    //按3次TAB键,光标会依次聚焦于第1个输入框,第2个输入框,第3个输入框
    <input tabindex="1">
    <input tabindex="3">
    <input tabindex="2">
    

    8. accesskey属性

    当前元素的访问快捷键,按ALT+字母即可快速触发当前元素的点击动作。

    //同时按下ALT+J键,会马上跳转到链接页面
    <a href="http://www.juetan.cn" accesskey="j">绝弹博客</a>
    

    9. data-***属性

    当前元素的私有数据,与设置元素属性不一样的是,数据属性含相关API。

    <p id="title" data-title="绝弹博客,记录前端学习的个人不可">绝弹博客</p>
    <script>
        console.log(title.dataset.title);
    </script>
    

    10. contentEditabled属性

    当前元素是否可编辑,默认false,非常有用的一个属性。

    //因为contentEditabled属性可继承,所以调试的时候非常有用。
    <body contentEditabled>
        ...
    </body>
    

    11. draggable属性

    当前元素是否可拖动,默认false,部分元素如img标签自带该属性。

    //可配合相关API做成可拖动的弹窗
    <button draggable>拖动</button>
    

    12. dropzone属性

    元素被拖动时的行为(复制,移动或链接),当前尚无浏览器支持。

    //可选属性如下所示 
    <button draggable dropzone="copy/move/link">拖动</button>
    

    13. hidden属性

    是否隐藏当前元素,默认false,与CSS样式“display: none”效果一致。

    <p hidden="hidden">观看悲欢离分,摇首笑出红尘</p>
    

    14. contextmenu属性

    点击当前元素的右键菜单,目前尚无浏览器支持。

    15. translate属性

    是否翻译当前元素,目前尚无浏览器支持。

    16. spellcheck属性

    是否对当前元素的输入进行语法检查,错误则显示下划红色波浪线。

    //该属性多用于表单元素
    <input type="text" spellcheck>
    

    单词记录

    id:身份(identity)
    class:类别
    style:样式
    title:标题
    data:数据
    content:内容
    editable:可编辑
    draggable:可拖动
    drop:滴
    zone:区域
    hidden:隐藏
    context:上下文
    menu:目录
    translate:翻译
    spell:拼写
    check:检查
    lang:语言(language)
    access:访问
    key:键
    tab:踏板
    index:索引
    
  • 相关阅读:
    angular
    客户端存储cookie ---(优缺点及定义及用途)
    cookie的设置和获取
    和谐敏感字
    移动端上滑下滑换图片
    移动端适配方式
    Viewport及判断移动端上下滑动
    HTML5拖放&地理定位
    用canvas 做一个钟表
    用canvas上传图片
  • 原文地址:https://www.cnblogs.com/juetan/p/13033275.html
Copyright © 2020-2023  润新知