利用js和css，页面如何实现禁止复制与禁止调试等限制操作

我们开发系统的时候，可能会接到这样的需求：不要让用户复制页面上的文字或者图片，不要让用户调试我们的页面，更甚至也不要让用户进行打印操作等等。

听起来是不是让人很头大，这咋实现啊？这有必要吗？这能禁住么？

如果你没做过这些，或者没接到过这样的需求，那你也应该看到过某个网站做了一些这样的措施。

既然要做，我们就得想方案，先来看看禁止复制都有哪些方法。

禁止复制

假设我们有这样一段代码：

<div style="padding-left: 56px;">
  <textarea rows="5" cols="33"></textarea>
</div>
<pre>
  海客谈瀛洲，烟涛微茫信难求，

  越人语天姥，云霞明灭或可睹。

  天姥连天向天横，势拔五岳掩赤城。

  天台四万八千丈，对此欲倒东南倾。

  我欲因之梦吴越，一夜飞度镜湖月。

  湖月照我影，送我至剡溪。
  </pre>

接下来就通过这个例子来论述我们的方案：

x效果

通过user-select:none

这是一个css属性，标识了元素及其子元素的文本不可被选中，因此设定之后，文本将不能够被选中，因此也就不能复制：

<pre style="user-select: none;">
  海客谈瀛洲，烟涛微茫信难求，

  越人语天姥，云霞明灭或可睹。

  天姥连天向天横，势拔五岳掩赤城。

  天台四万八千丈，对此欲倒东南倾。

  我欲因之梦吴越，一夜飞度镜湖月。

  湖月照我影，送我至剡溪。
  </pre>

我们在这段文本上，加上这个样式。

效果

可以看到，文字压根就不能选择，从鼠标形状也能看出来。

通过拦截copy操作

由于用在进行复制操作的时候，会触发copy事件，我们可以通过监听它来做一些处理，使得复制的行为发生改变：

<div>
  <div style="padding-left: 56px;">
    <textarea rows="5" cols="33"></textarea>
  </div>
  <pre id="content">
    海客谈瀛洲，烟涛微茫信难求，

    越人语天姥，云霞明灭或可睹。

    天姥连天向天横，势拔五岳掩赤城。

    天台四万八千丈，对此欲倒东南倾。

    我欲因之梦吴越，一夜飞度镜湖月。

    湖月照我影，送我至剡溪。
  </pre>
</div>
<script>
  let c = document.getElementById('content')
  c.removeEventListener("copy", copyFilter)
  c.addEventListener("copy", copyFilter)
  function copyFilter(e) {
    let cp = e.clipboardData || window.clipboardData
    if(!cp) {
      return
    }
    let text = window.getSelection().toString()
    if(text) {
      e.preventDefault()
      cp.setData("text/plain", "你复制了一段魔法")
    }
  }
</script>

先获取到我们要禁止复制的元素，然后给它添加一个copy的事件监听，在添加监听之前，要先移除一下，这样是为了避免局部刷新的时候重复添加，然后我们通过copyFilter函数来对这次操作进行处理。

先获取剪贴板对象，如果当前事件对象里不存在，那就从window里面取，然后我们通过getSelection再拿到选取的内容，因为我们对剪贴板对象进行修改，所以要阻止默认行为，然后把剪贴板的内容重新赋值，可以是示例中那样的一段文字，也可以设置为空，甚至是任意其他内容，然后我们就可以看到产生的效果了：

效果

虽然能复制文本，但是由于我们拦截了复制操作，更改了它的行为，因此再粘贴的时候就变成了我们更改的样子，也做到了禁止复制的功能。

这种方式对于使用快捷键或者右键的方式都是有效的。

通过拦截cut操作

这种情况主要是在可编辑区域，比如文本框、文本域、设置为contenteditable的元素等，用户可以对文字进行剪切操作，虽然上面禁止了复制，但是剪切是另一个操作，不拦截的话还是相当于能复制出来。

copy和cut只是触发的事件不同而已，但是它们都是执行相同的逻辑处理：

<div>
  <div style="padding-left: 56px;">
    <textarea rows="5" cols="33"></textarea>
  </div>
  <pre id="content" contenteditable>
    海客谈瀛洲，烟涛微茫信难求，

    越人语天姥，云霞明灭或可睹。

    天姥连天向天横，势拔五岳掩赤城。

    天台四万八千丈，对此欲倒东南倾。

    我欲因之梦吴越，一夜飞度镜湖月。

    湖月照我影，送我至剡溪。
  </pre>
</div>
<script>
  let c = document.getElementById('content')
  c.removeEventListener("cut", copyFilter)
  c.addEventListener("cut", copyFilter)
  function copyFilter(e) {
    let cp = e.clipboardData || window.clipboardData
    if(!cp) {
      return
    }
    let text = window.getSelection().toString()
    if(text) {
      e.preventDefault()
      cp.setData("text/plain", "你复制了一段魔法")
    }
  }
</script>

这里我为了方便，给元素添加了contenteditable属性，让它变成可编辑的，copyFilter函数没有变化，我们只是添加了一个剪切事件的监听，然后它们的处理函数都是copyFilter。看下效果：

效果

可以看到，首先我们对文字进行剪切，没有出现预期的效果，这时因为我们在代码里面对剪切进行了拦截，并阻止了它的默认行为，然后我们在粘贴的时候，文字也改变成我们设置的了。

通过媒体查询控制打印

虽然我们可以通过上面的几种方法禁止在页面上复制，但是用户也可能开启打印预览模式，在这种情况下，也是可以进行复制的，我们要想对打印页面进行一些控制，那么就要用到媒体查询，先看下打印的样子：

效果

虽然我们做了限制，但是在打印页面没有生效，现在我们针对这个场景更改一下代码：

@media print {
  html {
    display: none;
  }
}

通过添加上面这个样式规则，我们能够使页面在打印的时候，内容隐藏起来，这样就无法进行复制了：

效果

能够看到，点击打印的时候，预览页面一片空白，，这样就禁止了在打印页面进行复制的操作。当然了，你其实也可以设置其他的样式属性来做些控制，但要记住写在打印的媒体查询里面，只有这样才会在打印页面生效。

通过伪元素覆盖内容

还有一种方式就是，通过设定一个伪元素，让它全面覆盖文本内容，这样鼠标就不能选到实际的文本，改造一下代码：

.content {
  position: relative;
}
.content::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
<pre id="content" class="content">
  海客谈瀛洲，烟涛微茫信难求，

  越人语天姥，云霞明灭或可睹。

  天姥连天向天横，势拔五岳掩赤城。

  天台四万八千丈，对此欲倒东南倾。

  我欲因之梦吴越，一夜飞度镜湖月。

  湖月照我影，送我至剡溪。
</pre>

现在就不能在元素上面选中文字了，不过用户也可能还有一些操作，比如在内容区域外面ctrl+a全选，或者在外面拖动鼠标来全选，如果是这种情形，那么我们可以通过监听键盘和鼠标事件来禁止全选等操作。

通过监听鼠标和键盘事件

由于用户有很多种操作的方式，键盘全选、鼠标全选、键盘右键、鼠标右键等等，我们如果穷举的话，情况太多了，因此我们只监听鼠标按下和抬起事件，以及键盘的按下事件：

document.removeEventListener("mousedown", haveSelect)
document.addEventListener("mousedown", haveSelect)
document.removeEventListener("mouseup", haveSelect)
document.addEventListener("mouseup", haveSelect)
document.removeEventListener("keydown", haveSelect)
document.addEventListener("keydown", haveSelect)
function haveSelect() {
  window.getSelection().removeAllRanges()
}

主要就是在removeAllRanges方法上面，能够在触发上面事件的时候，将所选区域清空，也就是不管你选没选，咋选的，反正就是你只要进行了操作，那我就那可能选择的区域给你清空，这样你就啥也干不了了。

效果

好，这样就可以啦，无论怎么选，即使出现了选区，但是只要你再按了鼠标或者键盘，那么选区就会直接消失，就能达到不能复制的效果，因为你发现啥都做不了。

这里额外说明一下，对于事件的监听，一定要用addEventListener来实现，因为它会将多个绑定的事件都添加上去，当触发的时候就会按照绑定的顺序进行执行，如果是用赋值的方式，那么后面的会覆盖前面的，而且赋值的方式很容易被篡改，可以很轻松的让你的绑定函数不能执行从而失效，而使用addEventListener就不会被人为覆盖，只能通过绑定的函数句柄来手动移除，也就是说要移除的时候，必须使用跟绑定时使用同一个函数才行。

通过CSS的方式禁止复制，可以很容易的被用户解除，只能是设置的稍微复杂一点，增加难度。而通过JS的方式禁止复制，也可以通过禁用页面JavaScript代码来解除，因此我们可以将内容通过js来渲染，这样如果页面禁用了js，那么内容也不会渲染。

禁止调试

对于禁止调试，主要是指用户打开控制台，控制台也就是开发者工具，我为了方便称之为控制台，想要对页面进行调试时，我们做一些处理，阻止这种行为，最大可能的拦截通过控制台对系统的调试。
主要的方法有几种，由于打开控制台是浏览器提供的调试功能，因此我们没法拦截打开操作，即使通过事件监听不允许快捷键这样做，但是也可以通过其他方式进行打开，因此我们的主要关注点就在于打开控制台之后，我们能做哪些事情来限制用户行为。

禁用快捷键

打开控制台的快捷键主要有F12和ctrl+shift+i，我们先把这俩给禁用了：

document.removeEventListener("keydown", disableDevShortcut)
document.addEventListener("keydown", disableDevShortcut)
function disableDevShortcut(e) {
  console.log(e)
  if(e.keyCode === 123) {
    e.preventDefault()
  }else if(e.keyCode === 73 && e.ctrlKey && e.shiftKey) {
    e.preventDefault()
  }
}

这样在使用这两个快捷键的时候，页面没有任何反应，控制台也不会唤起，因为我们阻止了它们的默认行为。

禁用右键的检查功能

除了通过快捷键，还可以使用右键的方式，并点击检查也会调出控制台。

效果

这种情景，我们可以通过禁止在页面上使用右键的方式，来阻止打开控制台：

document.removeEventListener("contextmenu", cancelContextmenu)
document.addEventListener("contextmenu", cancelContextmenu)
function cancelContextmenu(e) {
  e.preventDefault()
}

现在就不能通过右键打开控制台了，但是相应的整个右键功能也都不能使用了。

设置无限断点

如果用户最终打开了控制台，比如通过在浏览器的更多功能中来打开的话，那么我就需要采取其他的措施，其中之一就是给代码设置无限断点，因为断点只在控制台打开的时候才会发生作用，从而不必担心非调试模式下的程序正常运行。

无限断点的主要思路就是利用定时器等手段，频繁的触发断点效果，使得不能轻松的调试程序，先看下代码：

;(() => {
  function breakDebugger() {
    if(new checkDebugger().check) {
      breakDebugger()
    }
  }
  function checkDebugger() {
    const now = new Date();
    eval('(function () {debugger;false;})()')
    const dur = Date.now() - now
    if(dur < 5) {
      return {check: false}
    }else {
      return {check: true}
    }
  }
  setInterval(() => {
    eval('(function () {debugger;true;})()')
    breakDebugger()
  }, 500)
})()

我们利用一个立即执行的自执行函数，来使我们的代码被封装在一个固定块内，不与其他部分有任何影响。

这里主要做了两步：

第一步设置一个重复执行的定时器，其中包括了一个断点和一个函数调用。

第二步通过函数来递归调用断点，主要使用了实例化对象的方式和时间差的判断。

这样做的主要作用就是在设置无限断点的同时，也能够让每次的断点都是被重新生成的，看下效果，一目了然：

效果

发现没有，我们通过这种方式，只要打开了控制台，那么就会进入到无限断点的循环中，使得不能做任何其他事情，而且每个断点的生成都会开辟一个新的虚拟运行环境，这种情况下，只有关闭控制台，才能结束断点。

即使使用右键选择Never parse here，也毫无作用，虽然可以通过Deactive breakpoints按钮来彻底禁用断点，就是下面这个按钮：

按钮

但是，如果这样做的话，那么用户也就同时失去了调试其他代码的能力。

况且，我们接下来还会介绍其他的控制手段，可以配合着使用。

监测控制台开启

我们如果能有一种手段，可以知道用户开启了控制台，换句话说只要控制台被打开，就通知我们或者被我们监测到，那么我们就可以执行一些控制手段，这种效果肯定是很理想的，遗憾的是还没有这种api暴露给我们去让我们能够这样做。

不过我们可以通过其他的方式，利用既有的一些能力来实现这一点，这里我还是使用循环定时器，来不断的去嗅探用户是否开启了控制台，直接看代码：

;(() => {
  setInterval(function() {
    let foo = document.createElement('a')
    let a1 = +new Date()
    console.table(foo)
    let a2 = +new Date()
    if(a2 - a1 > 1) {
      location.href = 'about:blank'
    }
    console.clear()
  }, 500)
})()

同样，通过一个自执行函数，我们开启了一个循环定时器，然后在回调方法里面，我们就去实现上面的目标，也是分为了两步：

第一步创建一个a元素，然后通过表格的形式将它打印出来，并记录下消耗的时间。

第二步判断耗时的长短来控制是否跳转到空白页，然后清空控制台。

这种方式主要是利用了console.table的特性，它会将元素以表格的形式输出到控制台，大概就像下面的样子：

效果

由于太多了，我就没有全部截下来，如果没有打开控制台的话，使用console.table输出我们创建的a标签是很快的，有多快呢，就是js执行一条语句的速度，所以打印a1和a2的时间间隔非常短，几乎为0，因为他们快到差不多是同时执行的，给大家打印看一下：

效果

我们先不打开控制台，等输出完毕再打开，很清楚的发现，我们没打开控制台的时候，输出的a就是它标签，而且时间间隔是0毫秒。

现在我们打开控制台的时候刷新一下页面，看看控制台的输出：

效果

这次就变成了以table的形式输出a元素，而且它的耗时明显增多，不再是0毫秒，而是耗费了10毫秒，虽然打开控制台的时候多次刷新页面，每次输出的毫秒数是不同的，但是跟关闭控制台的时候输出的耗时差距非常明显，因此我们就可以在这个上面做文章。

我在上面的代码中假定了，只要是大于1毫秒的耗时，那就表示用户打开了控制台，然后我们就把页面给跳转到空白页，当然了你也可以做一些任何你想做的操作，比如弹出一个提示，或者把body内容置空等等等等。

回到我们上面的代码，看一下它实际发生的作用和带给我们的效果：

效果

哈哈，古德古德，平时浏览一切正常，只要刚一打开控制台，瞬间页面就被跳转走了，什么都干不了。这样我们就通过这种方式，达到了限制打开控制台的目的，也就是在当前页没法调试，一打开就跳转。

这种办法由于是绕路实现的，那么你可能会有疑问，它稳定吗？会不会误判，我可以对它绝对放心吗？

理论上来说，通过输出的执行时间是不太能精确掌握的，但是我们可以再做一些其他的措施来逼近真相：

;(() => {
  setInterval(function() {
    let foo = document.createElement('a')
    let a1 = +new Date()
    console.table(foo)
    let a2 = +new Date()
    if(a2 - a1 > 1) {
      let time = 0
      for(let i = 0; i < 10; i++) {
        let a1 = +new Date()
        console.table(foo)
        let a2 = +new Date()
        time += a2 - a1
      }
      if(time > 20) {
        location.href = 'about:blank'
      }
    }
    console.clear()
  }, 500)
})()

我又改造了一下判断的逻辑，当发现输出耗时为2毫秒甚至更多的时候，我立马再进行一次真伪判断，也就是说，万一由于其他的影响，导致我第7行的代码误判了，那么我再同步执行一个循环，连续输出10次，把他们的耗时总和计算出来，然后判断是否大于20毫秒，如果还是耗时过高的话，那么就可以非常肯定的知道用户是打开了控制台，这个时候就可以放心的做一些处理了。

最后

其实限制用户行为的方法有很多很多，上面列出了一些主要的，多种方法还是要结合着使用。你也可以自由发挥，多使用一些其他的手段，也会增加用户复制或者调试的难度，比如防止用户重写console的方法，或者清除所有定时器等。

甚至也可以将你的内容绘制到canvas上面来防止复制，多加一些js的处理工作，防止禁用js的时候，我们的代码不生效，只有在js可用的时候再去渲染内容等。也可以在综合考虑的情况下加上代码混淆、代码加密等措施。

话说回来，大家都是同路人，何必相互为难，哈哈哈，不过提这个需求的人也着实会为难我们，既然提了那就尽力去做，能做到什么程度，只能说是尽量做到极致。

希望上面的内容能够帮助到你，也希望能够对你有所启发。

谢谢

这篇文章中，描述并演示了一些有趣的 HTML 属性，您可能听说过也可能没有听说过，并且可能会发现它们非常有用，可以在您的项目中亲自使用。

有次和公司大佬闲余时间进行讨论时，说到了一个问题：

今年你很高兴学习或更深入地学习哪些语言/技术？

我的：typescript、next.js、react、graphql、solidity、node

他的答案很简单：HTML。而且我一点也没有讽刺或嘲弄。当然，我非常清楚在哪些情况下使用哪些标签，以及如何使我的 HTML 大部分具有语义性和可访问性。

但是我确信我已经忘记了一大堆较少使用的属性，并且可能有一大堆我甚至不知道存在的属性。这篇文章是我学习的结果，我希望你会发现其中的一些对你有用，因为大部分初学者在接下来的几个月里正在构建 HTML 页面。

enterkeyhint虚拟键盘的属性

iOS 13.7+，以及Chrome77+新支持了一个HTML属性enterkeyhint，可以修改软键盘中的enter键，也就是回车键的文案或者UI。

该HTML属性的兼容性如下图所示：

enterkeyhint接受七个可能值之一，这些值将确定用户在他的“输入”键上看到的内容：

enter	表示回车，多出现在<textarea>文本域等需要多行输入的场景中。
go	表示前往，, 意思是把用户带到他们输入的文本的目标处。
next	表示下一项，通常会移动到下一个输入项那里。
previous	‘previous’表示上一个，通常会移动到上一个输入项那里。
search	‘search’表示搜索，通常用在搜索行为中。
send	‘send’表示发，通常用在文本信息的发送上。
done	‘done’表示完成，表示没有更多内容输入，输入结束。

只是强调一下，这个属性不接受自定义值；该值需要是上面显示的七个之一。无法识别的值将默认为输入键的设备默认文本。

<link>标签的title属性

这对我来说是全新的，可能是此列表中最有趣的一个。作为一些背景知识，如果您不知道，Firefox 有一个选项可让您选择查看页面时要使用的样式表。通常，此功能显示两个选项：“基本页面样式”和“无样式”，如下图所示。

这使您可以快速测试禁用样式时页面的外观，还允许您使用任何备用样式表查看页面。

备用样式表功能通过两个属性启用：title属性和rel=alternate应用于<link>元素，如下面的代码所示：

<link href="main.css" rel="stylesheet" title="Default">
<link href="contrast.css" rel="alternate stylesheet" title="High Contrast">
<link href="readable.css" rel="alternate stylesheet" title="Readable">

在这种情况下，我的“默认”样式将自动应用，但仅当我使用 Firefox 的“页面样式”选项选择它们时，备用样式表才会应用。

<blockquote>标签定义及用法

<blockquote>标签定义块引用。

<blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

<blockquote></blockquote>这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两单位，依此类推。

现在我们来看看长文本的引用，还有和p标签的对比，效果如图：

自定义有序列表的属性<ol>

<ol>经常使用使用该元素的有序列表。一些鲜为人知的功能允许您自定义出现在此类列表中的编号行为：

属性，以相反的顺序对reversed项目进行编号（从高到低，而不是默认的从低到高）；
属性，定义从start哪个数字开始；
属性，定义是type使用数字、字母还是罗马数字；
属性，用于在value特定列表项上指定自定义编号。

如您所见，使用纯 HTML 的有序列表比您通常习惯的要灵活得多。

该reversed属性是一个有趣的属性，因为它实际上并没有反转列表本身的内容；它只会反转每个列表项旁边的数字。

<ol reversed>
    <li>List item...</li>
    <li>List item...</li>
    <li>List item...</li>
</ol>

结果是这样的排序

上面，我还提到了其他三个属性。让我们将它们合并到列表中，看看如何使用它们：

<ol reversed start="20" type="1">
    <li>Typee: A Peep at Polynesian Life (1846)</li>
    <li>Omoo: A Narrative of Adventures in the South Seas (1847)</li>
    <li>Mardi: and a Voyage Thither (1849)</li>
    <li>Redburn: His First Voyage (1849)</li>
    <li value="100">White-Jacket; or, The World in a Man-of-War (1850)</li>
    <li>Moby-Dick; or, The Whale (1851)</li>
    <li>Pierre; or, The Ambiguities (1852)</li>
    <li>Isle of the Cross (1853 unpublished, and now lost)</li>
</ol>

请注意，已添加的type和属性以及单个列表项上的属性。该属性接受表示编号类型的五个单字符值（、、、、）之一，效果如图：

结果展示

<a>标签的download属性

<a href="/example.pdf" download>Download File</a>

如果没有值，该download属性会强制下载链接页面。或者，您可以提供一个值，浏览器将其用作下载资源的建议文件名。

<img>标签的decoding属性

在研究这个标签时，这对我来说是另一篇全新的文章——而且在规范中似乎相当新。将decoding属性添加到图像元素可为浏览器提供图像解码提示。

<img src="/images/example.png" alt="Example" decoding="async">

此属性类似于async在脚本上使用该属性。加载图像所需的时间不会改变，但其“解码”的方式（因此其内容在视口中变得可见）由decoding属性决定。

值为：

sync 同步解码图像，一般浏览器都是这样做的。
async 异步解码图像以避免延迟其他内容的呈现。
auto 默认允许浏览器使用自己的内置解码方法。

<iframe>标签的loading属性

您可能已经知道，图像元素现在可以包含一个loading属性，该属性将延迟加载作为一项功能放入浏览器，这是我们多年来使用 JavaScript 解决方案所做的事情。但不要忘记该loading属性也可以用于<iframe>元素：

<iframe src="/page.html" width="300" height="250" loading="lazy">

与图像一样，该loading属性接受eager（默认浏览器行为）或的值lazy，这会延迟 iframe 内容的加载，直到 iframe 即将进入视口。此属性的唯一缺点是 Firefox 不支持在 iframe 上使用它（尽管 Firefox 确实支持loading图像）。

删除/插入的citeAnddatetime属性

我在处理块引用时已经提到cite过，但是这个属性也可以用于用<del>and<ins>元素标记的删除和插入。此外，两个元素都可以包含一个datetime属性。

<del
  cite="https://bugzilla.mozilla.org/show_bug.cgi?id=1620467"
  datetime="2020-07-23"
>Firefox doesn't support CSS's standard <code>appearance</code> property, so you can only use it prefixed.</del>

<ins          
  cite="https://bugzilla.mozilla.org/show_bug.cgi?id=1620467"
  datetime="2020-07-23"
>The <code>appearance</code> property, previously only available prefixed in Firefox, can now be used in all modern browers unprefixed.</ins>

对于每个元素，这两个属性代表的内容如下：

cite 指向资源的 URL，该资源解释了删除或插入内容的原因。
datetime 删除或插入的日期。

HTML <optgroup> 标签

通过 <optgroup> 标签把相关的选项组合在一起：

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

结果展示

optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

用于预加载响应式图像的imagesizes和imagesrcset属性

这是我在研究本文时的另一对新属性，它们在规范中也是相对较新的。

这两个属性都可以与元素一起定义rel=preload，as如下<link>所示：

<link rel="preload"
  as="image"
  imagesrcset="images/example-480.png 480w,
  images/example-800.png 800w,
    images/example.png 2000w"
  imagesizes="(max-width: 600px) 480px,
  (max-width: 1000px) 800px,
    1000px"
  src="images/example.png"
  alt="Example Image">

这里的使用rel=preload通知浏览器我们希望指定的资源优先加载，因此它们不会被脚本和样式表之类的东西阻塞。该as属性指定所请求内容的类型。

您可以使用href属性以及preload和预加载常规图像as。但最重要的是，您可以使用imagesrcsetandimagesizes属性，就像我在上面的代码中所做的那样。

这允许您预加载正确的图像，具体取决于视口的大小或您在imagesizes属性中指定的其他媒体功能。

除了我已经详细描述和演示的属性之外，您可能还想了解其他一些属性，我将在这里简要提及：

crossorigin可以应用于多个元素的属性，包括<audio>、<img>、<link>、<script>和<video>，为跨域资源共享（CORS）提供支持；
HTML属性；<dfn><abbr>
HTML的新disablepictureinpicture属性；<video>
HTML的integrity属性，帮助浏览器验证资源没有被不当操作；
HTML的disabled属性<fieldset>，轻松同时禁用多个表单元素；
电子邮件和文件输入的multiple属性。

如果您使用过本文中提到的任何属性，或者如果您知道在您的项目中使用过的另一个 HTML 属性，请随时在评论中告诉我。

TML标签规范

尽管目前浏览器都兼容HTML，但是，使网页能够符合标准，应该尽量使用XHTML规范来编写代码，需要注意以下事项：

（1）在XHTML中，标签名必须小写。在HTML中，标签名称可以大写，也可以小写。

（2）在XHTML中，属性名称必须小写。在HTML中，属性名称也必须是小写的。

（3）在XHTML中，标签必须严格嵌套；HTML对标签的嵌套没有严格的规定。

（4）在XHTML中，标签必须封闭；在HTML规范中，标签不闭合也是正确的，即标签可以不成对出现。例如，“<p>我没有结束标签”和“<p>我有开始标签和结束标签</p >”，这两条代码的显示效果，在HTML规范中是完全相同的，但是，在XHTML中，第一条语句是不允许的(不能正常显示)，必须像第二条语句那样，严格地使标签闭合。

（5）在XHTML中，即使是空元素的标签也必须封闭，这里说的空标签，就是指那些<img>、<br>、<hr>等不对称的标签，它们也必须闭合，即写作<img>、<br>、<hr/>；而在HTML.规范中，这类标签可以不封闭。例如，在HTML中书写为<img>或<img/>均是正确的，但在XHTML规范中，必须写为<img/>才正确。

（6）在XHTML中，属性值必须用双引号括起来；在HTML中，属性可以不必使用双引号。

（7）在XHTML中，属性值必须使用完整形式；在HTML中，一些属性经常使用简写方式设定属性值。例如：

而在XHTML中，必须完整地写做：

(8)在XHTML中，应该区分“内容标签”与“结构标签”。例如，<p>标签是一个内容标签，而<table>标签是结构标签，因此，不允许将<table>标签置于<p>标签内部。反之，如果将<p>标签置于<td>…</td>之间，则是完全正确的。

（9)在XHTML中，必须添加文档类型声明<！DOCTYPE>。该标签用于描述HTML的版本和文档类型声明，进行了相应的版本和文档类型声明之后，才能保证这是一个XHTML网页，从而让浏览器以相应的规范来解析网页，使网页正常显示。

在线咨询

上一篇：HTML 链接
下一篇：HTML 编辑器

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商