总结一波有用但用处不多的html的属性

前情提要

html的属性，瀚若星河，有些是平时经常用到的，有些是平时不常用的，还有一些基本用不到。

今天就总结一般不怎么用，但是有用，用处又不多的属性。

Geolocation（地理位置）

我实操这个API之前，觉得应该挺简单的，研究研究有哪些方法，都怎么用，然后再思考一下实际可用场景。

但是，我想法太傻白甜，终究会被现实搁点盐。我先把它的知识点讲一讲，再说有什么坑，以及这个坑能不能跳过去。

介绍

地理位置可以在用户允许之后，获取到用户的地理位置。

通过调用 navigator.geolocation ，发生浏览器请求，获取用户位置数据相关的权限。如果用户进行了授权，浏览器将使用设备上可用的最佳方式来获取地理位置。

方法

getCurrentPosition

该方法可以确定用户设备的位置并返回一个携带改位置信息的 Position 对象。

注：PositionOptions没有详细介绍，但是我通过360百科找到了可选参数的介绍

enableHighAccuracy：指示浏览器获取高精度的位置，默认为false。当开启后，可能没有任何影响，也可能使浏览器花费更长的时间获取更精确的位置数据。

timeout：指定获取地理位置的超时时间，默认不限时。单位为毫秒。

maximumAge：最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。默认为0，表示浏览器需要立刻重新计算位置。

watchPosition

该方法用于监听地理信息的变化，当用户设备的地理位置发生改变的时候自动被调用。

clearWatch

该方法会移除watchPosition方法注册的监听器。

适用场景

我一般研究了一个知识点之后，都会想想实际的开发场景如果运用它。但是我在使用navigator.geolocation.getCurrentPosition获取地理位置的时候，尽管做了允许操作，但是还是只得到了错误提示：

我查了一下错误原因 ，果然从《navigator.geolocation.getCurrentPosition timeout expired》这篇博文里找到了看上去靠谱的答案。

小结

对Geolocation的研究因为无法实操而告一段落。之前页面嵌入地图的需求，直接使用的百度地图。

目前因为业务开发中，没有地图开发的需求，所以暂时不做深入的研究。

MathML

这个元素，第一次见。很好，新知识点增加了。

介绍

MathML 是数学标记语言，是一种基于XML的标准，用来在网页上书写数学符号和公式的置标语言。

也就是说，我们可以在页面上直接展示数学相关的符号或者公式了？什么平方、根号、分数、矩阵，想想就好兴奋。

等等，MathML不会像Geolocation一样有兼容性的问题吧，我先实验一把。

小试牛刀

先来个分数试试

<math display='block'>
  <mfrac>
    <mrow>
      <mn>2</mn>
    </mrow>
    <mrow>
      <mn>3</mn>
    </mrow>
  </mfrac>
</math>

Chrome

咔嚓，我的刀被掰断了。等等，我看下浏览器兼容性，Firefox和Safari支持，其他基本不支持。

Firefox

只要它能正常展示，我就可以探索一片天地。

所有有效的 MathML 实例必须被包括在 是MathML 的顶级元素。（总结就是它很重要，有它才有后面的各式各样的元素。）

注：

• 元素。
• 元素中可以嵌套任意多的子元素 。

属性

完整代码

<math class='text' mathbackground='#ffd800' overflow='scroll' display='block'>
  <mfrac>
    <mrow>
      <mi>a</mi>
      <mo>+</mo>
      <mn>2</mn>
    </mrow>
    <mrow>
      <mn>b</mn>
      <mo>−</mo>
      <mi>3</mi>
    </mrow>
  </mfrac>
</math>

这个也比较有趣，因为使用它可以帮助实现一下展现效果。

元素可以将内容封闭在指定的符号中。

它目前只有一个notation，但是notation的值有很多，帮助实现不同的封闭效果，且可以使用逗号分割添加多个属性值到达叠加效果。

元素值

完整代码

<math>
  <menclose notation='phasorangle'>
    <mi>x</mi>
    <mo>+</mo>
    <mi>y</mi>
  </menclose>
</math>

引申

原本平方根符号可以用为notation='radical'的方式实现，后来它单飞了，有个新元素，外层加上该元素，直接展示为平方根的公式样式。

完整代码

<math>
  <msqrt>
    <mi>x</mi>
    <mo>+</mo>
    <mi>y</mi>
  </msqrt>
</math>

元素用于显示分数。它还可用于标记类似分数的对象，例如 二项式系数 和勒让德符号。

属性

完整代码

<math class='text'>
  <mfrac linethickness='1px'>
    <mrow>
      <mi>a</mi>
    </mrow>
    <mrow>
      <mi>b</mi>
    </mrow>
  </mfrac>
</math>

推荐文章

MathML的元素太多了，官网很多都没有翻译，还好张鑫旭大神有详细介绍，指路☞数学标记语言MathML简介、

工具及兼容。

tabindex

这个属性可以帮助规定元素是否可以聚焦，以及当使用 "tab" 键进行导航时，规定了元素的顺序。

属性

注：

1、值为正值的元素会先于值为 0 的元素被键盘导航访问。

• 可以把值为0、负值、或者没有设置 tabindex 的元素放在 tabindex 值为正值的元素后面。
• 可以把tabindex 值为正值的元素，tabindex值数值大的放在数值小的后面。因为相对顺序按照tabindex 的数值的递增而滞后的。

<div tabindex="1">tabindex 1-1</div>
<div tabindex="1">tabindex 1-2</div>
<div tabindex="2">tabindex 2</div>
<div tabindex="0">tabindex 0</div>
<div tabindex="-1">tabindex -1</div>

2、HTML 4.01 与 HTML5的差异（来自菜鸟教程）

• 在 HTML5 中, tabindex 属性可用于任何的 HTML 元素 (它会验证任何HTML元素。但不一定是有用)。
• 在 HTML 4.01中, tabindex 属性可用于:

<a>, <area>, <button>, <input>, <object>, <select>, 和 <textarea>。

3、tabindex 的最大值不应超过 32767。如果没有指定，它的默认值为 0。

总结

我逛MDN的时候，发现好多元素好陌生，逛了一圈，比逛淘宝刺激。逛淘宝只会消耗我的钱，逛MDN会占用我的脑容量，脑容量哪是钱能买到的。

不过，挺好，果然技术之路没有天花板，越学越开心。