吴声子夜歌的博客

1、SVG语言简介2、SVG SMIL动画详解2.1、SVG SMIL动画元素介绍2.1.1、`<set>`元素2.1.2、`<animate>`元素2.1.3、`<animateColor>`元素2.1.4、`<animateTransform>`元素2.1.5、`<animateMotion>`元素2.1.6、自由组合2.2、SVG SMIL动画属性详解2.2.3、from、to、by和values2.2.4、begin和end2.2.5、dur。

1、按类别分类的MathML表现元素1.1、顶级元素1.2、记号元素1.3、总体布局1.4、脚本和限制元素1.5、表格数学2、语义注释相关的MathML元素MathML是指“数学标记语言”​，是XML的一个子集，用来在Web网页甚至部分软件中显示数学公式。简言之，MathML就是使用特殊的类似HTML的标记在网页中显示数学公式，因为有些数学公式很复杂，普通HTML根本无法驾驭，例如下面所示的这个公式。其都有哪些MathML标记呢？可以看下面的定义说明。

1、词汇表2、itemid、itemscope、itemtype等属性简介2.1、和id属性完全不同的itemid属性2.2、快速了解itemscope属性2.3、快速了解itemtype属性2.4、快速了解itemprop属性2.5、有别于href的itemhref属性2.5.1、itemhref属性的作用2.5.2、一句话总结众所周知，语义化的HTML标签对SEO很有帮助，可以让搜索引擎识别内容的性质。可很多时候，只知道内容的性质还不够，最好可以让搜索引擎识别具体的数据结构。

在HTML中，元素共分为三类：原生元素、自定义元素和未知元素。其中，原生元素指前文提到的<div>、<span>等诸多元素，自定义元素稍后介绍，这里讲一下未知元素。未知元素有专门的Web API接口名称，名为HTMLUnknownElement。在网页中，随便写一个标签，例如：这里的<username>就是一个HTMLUnknownElement元素。

在移动设备上，虚拟键盘的确认按钮文案是可以自定义的，这个自定义的设置就是通过enterkeyhint属性实现的，其值有很多个，具体见下表。下面通过一个简单的案例了解一下enterkeyhint属性是如何工作的。测试HTML代码如下所示：此时，在手机等移动设备上通过在浏览器中输入https://www.htmlapi.cn/9/1-1.html访问对应的演示页面，就可以看到下图所示的三个输入框效果。

除原生的HTML元素和属性外，我们还可以用ARIA规范定义的HTML属性增强Web产品的无障碍访问能力。从功能上区分，这些属性可以分为三类：ARIA role属性、ARIA常规属性和ARIA状态属性，下面逐一进行介绍。

caption>元素还有一个特性也非常稀缺，那就是可以改变渲染的位置。在默认情况下，<caption>元素是在表格的上面显示的，如果希望表格标题出现在表格的下面，则可以使用CSS的caption-side属性，相关CSS代码如下所示：此时的渲染效果如图所示。在Flex布局流行之前，这是为数不多的在垂直方向上可以让视觉位置和DOM位置不一致的特性。由于目前在Flex布局中通过order属性设置元素的位置非常方便，因此，caption-side属性没有过去那么实用了。

想要全部学通透，需要巨大的学习成本，不建议花大量的时间和精力学习，至少要等到往专家级别发展的时候才细致深入，因为它并不实用，有两个限制。其二，它无法覆盖所有的验证场景，例如，密码重复输入时，前后输入的值如果不同，后面的输入框是无法匹配：invalid伪类的，最终的验证提示效果也需要使用JavaScript代码进行判断并调用提示方法才行。表单外有两个单选按钮元素，表单内有一个单选按钮元素，这三个单选按钮元素的name属性值是一样的，但它们并不是一组，而是两组，表单外的是一组，表单内的是一组。

file类型的<input>输入框的样式自定义有下面两个方法。其一，使用<label>元素模拟按钮效果，例如：其二，使用CSS::file-selector-button伪元素，例如：此时的效果如图所示。另外，如果大家希望隐藏按钮后面的“未选择任何文件”的文字，可以对当前<input>元素设置font-size：0，如图所示。体验较好的颜色选择框一定会有自定义颜色值的功能，因为用户常用的颜色往往是固定的几个，具体如何实现呢？出乎很多人的意料，其实是用<datalist>元素。

其中，MPEG1视频&MP2音频解码可以使用JSmpeg，H.264视频解码可以使用Broadway或者使用mp4box.js，当然，如果不考虑兼容性，音视频最好的编解码解决方案一定是Webcodecs API，这又是一块成体系的知识，为了不让读者望而生畏，我做了个演示页面，你可以通过在浏览器中输入https://www.htmlapi.cn/6/2-3.html访问来体验，感兴趣的读者可以了解一下，这里就不继续展开详述了。但是，根据我的测试，不定义srclang也没有任何异常，大家可以注意一下。

接下来，所有Canvas绘制的数值和坐标都是基于1600px×1200px这个尺寸来的，需要注意的是，在Web网页中，<canvas>画布的尺寸是有限制的，并不是无穷大的，例如Chrome浏览器的最大Canvas尺寸是16384px×16384px，Safari浏览器在桌面端的最大Canvas尺寸也是16384px×16384px，但是在移动端最大Canvas尺寸是4096px×4096px。除影响渲染规则以外，还有一个作用，那就是在同时使用不同类型的XML文档的时候，可以对它们加以区分，减少互相的干扰。

使用<data>元素表示动态数据，不仅对开发者友好，对机器也友好，其支持一个原生的value属性值，用来设置让机器识别的信息，例如<data value=“002358”>，这里的’002358’就是员工唯一的工号，例如在我们需要对内容进行编辑或删除的时候，所需要的并不是肉眼可见的姓名（姓名可能重复）​，而是这里的ID编号（唯一标识）​。在偏工具、偏应用类型的Web产品中，一定会有大量的来自数据库的数据字段，在过去，这些数据往往使用<span>元素加以呈现，现在，时代变了，请使用<data>元素代替。

blockquote>元素和<q>元素的语义本质上是一样的（标签q其实就是单词“quote”的缩写）​，区别在于引用内容的数量，数量的多寡自然也会对布局产生影响，因此，默认情况下，<blockquote>是块级元素，单词“blockquote”就是块级引用的意思，所以表现为块级元素理所当然，同时在上下左右都会有默认的margin距离，如图所示。在过去，<em>和<strong>元素都表示强调，而现在，<strong>元素的语义已经不是强调，而是重要了，用来表示内容具有很强的重要性、严肃性或紧迫性。

内联的<script>元素有一个特性，就是如果定义的type类型不标准，那么此时<script>元素里面的文本内容就会按照普通的文本字符串进行渲染，而不再是JavaScript代码。例如：又例如：此特性特别适合在页面环境中临时存储大段信息。

当前页面的抓取策略也可以使用元素进行定义，例如：其中robots的意思是“机器人”​，指的就是搜索引擎的爬虫程序，上面的代码就是告诉搜索引擎，当前页面不需要抓取，不需要展示在搜索结果列表页。除noindex外，content的值还可以是下面这些。index：允许抓取。follow：允许跟踪页面链接。nofollow：不允许抓取页面中的链接。noarchive：阻止此页面的缓存副本在搜索结果中可用。nosnippet：防止描述出现在搜索结果中的页面下方，并防止缓存页面。

由于默认的<progress>元素样式往往不是业务需要的，因此我们需要进行额外的样式自定义，此时参考下面的代码进行设置就可以了。上述代码的效果如图所示。如果同时希望对不确定态的进度条元素进行样式自定义，则可以使用：indeterminate及背景图像动画来模拟原生的水平来回移动效果，参考CSS代码如下（在上述自定义CSS代码的基础上新增）​：上述代码的效果如图所示。

此时，当用户触摸（移动端交互方式）两个单选按钮的时候，听到的仅仅是<label>元素中的“有”和“没有”两个词，至于对应的问题是什么，不得而知，或者是触摸到了问题，但是并不知道对应的选项是什么，这时用户体验就不好。不过很难想象会有什么场景需要让<output>元素变成可输入的，因此，对于这三个元素，<label>元素使用与否，意义不大，我们不用在意，不妨把注意力放在单选按钮和复选框这两个元素上，和<label>元素配合使用，可以迸发出强大的生命力。​（注意，随着软件的升级迭代，朗读的文本内容会有所变化。

浏览器默认的黑色小三角图形略显粗糙，在对视觉要求较高的产品中，往往需要对这个小图标做样式自定义。1.颜色的改变首先，我们可以轻松改变小三角的颜色，例如，下面的CSS代码可以将小三角图标的颜色变为红色。效果如图所示。2.位置的改变其次，我们还可以将小三角图标的位置调整到右侧。效果如图所示。3.三角字符替换再者，我们还可以将小三角图标替换为其他字符，甚至是emoji字符，例如：此时，详情信息展开和收起的效果如图所示。

在HTML中，提到定义列表，通常指的就是<dl>、<dt>和<dd>这三个元素。其中的首字母’d’是按照definition来理解的，表示定义；'l’是list的首字母，表示列表；'t’是term的首字母，表示术语；'d’是description的首字母，表示描述。相比于无序列表和有序列表，定义列表有个非常显著的特点—自由。自由在于<dl>元素可以包含任意数量的<dt>和<dd>元素，可以和几乎任意的块级元素相邻或嵌套。先看数量任意的案例。(1)一个术语对应一个描述(2)一个术语对应多个描述。

移动端的点击都是使用手指完成的，属于不精确的点击，因此我们常常将整个列表都做成可点击的，但是有时候，列表中还会有其他外链的信息，此时链接嵌套的情况就出现了，比如图所示的这个例子，外部列表是个人详情链接，简介信息中的是书籍链接，瞧，这是典型的链接嵌套场景。再次，如果你的产品是社交媒体类的，例如微博、知乎等，那么可以不设置rel=“noreferrer”，因为这些产品本身是开放的，以社交为主，更看重信息的传播，暴露referrer信息反而有助于第三方网站溯源，可以间接增加访问量和热度。