HTML扩展知识

1.全局属性

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

• 1.1 accesskey & tabindex

<p>
   <input accesskey="i" placeholder="Press Ctrl+Alt+I">
</p>
<!--使用组合键访问-->
<p>
  <a href="http://example.com" accesskey="e" tabindex="-1">
    Press <kbd>Ctrl+Alt+E</kbd>
  </a>
</p>
<!--tabindex设置为-1表示tab访问不到，主要用来设置顺序-->

• 1.2 id，class & style

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

• 1.3 contenteditable & spellcheck

<section contenteditable spellcheck="true">
        <h1>可读性和易读性</h1>
        <p>this is a paragrap</p>
</section>
<!--contenteditable可编辑   spellcheck拼写检查-->

• 1.4 语言lang & dir

<div lang="zh-CN">
        <p>你好啊小朋友 <span lang="en">Hello</span>这是希腊语
            <span lang="el">Γεια σας, μικρά σκουπίδια</span>
        </p>
        <p dir="rtl" lang="ar">مرحبا ، القليل من القمامة</p>
</div>
<!--lang指定语言   dir指定书写方向，rtl是从右到左 阿拉伯语-->

• 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-*

<ul>
        <li data-id="1">apple</li>
        <li data-id="2">banana</li>
        <li data-id="3">mango</li>
</ul>
<!--通过data-id获取元素-->

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

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

itemscope.png

• 2.3 JSON-LD

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

JSON-LD.png