HTML扩展知识

1.全局属性

几乎所有元素都具有的属性

• 1.1 accesskey & tabindex

   



  
    Press Ctrl+Alt+E
  

• 1.2 id，class & style

  • id保证唯一性
  • class多用在CSS
  • style指定内联样式

• 1.3 contenteditable & spellcheck

        
可读性和易读性
        
this is a paragrap

• 1.4 语言lang & dir

        
你好啊小朋友 Hello这是希腊语
            Γεια σας, μικρά σκουπίδια
        
        
مرحبا ، القليل من القمامة

• 1.5 title属性

• 1.6 hidden属性

一般css中display:none ,再次显示时无法知道是block还是inline-block
hidden属性控制避免上述情况

• 提升无障碍性

  • 为img提供alt属性
  • noscript
  • input和label对应
  • 图形验证码与语音验证码
  • 文字和背景有足够的对比度
  • 键盘可操作

• 语义化

  • HTML中的元素，属性以及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML

• 为什么语义化很重要

  • 提升代码的可读性，可维护性
  • 搜索引擎优化
  • 提升无障碍性

2. 扩展HTML

• 2.1 meta标签

  
  
  meta标签.png

• 2.2 data-*

        
apple
        
banana
        
mango

• 2.3 microdata
  • HTML5中的一个规范
  • 在HTML中通过属性嵌入格式化数据
  • 提供给搜索引擎，浏览器（插件）使用

通过itemscope进行分组, 格式化数据, 对搜索引擎聚合起作用，从全网搜索

itemscope.png

• 2.3 JSON-LD

为了不打乱HTML结构，用JSON-LD提取microdata的格式化信息

JSON-LD.png