PROSAGA码农传奇-go-为什么HTML认为chucknorris是一种颜色？

0# 猫南北 | 2019-08-31 10-32

1# Minions | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    该
    <a href="https://www.w3.org/TR/html5/infrastructure.html#rules-for-parsing-a-legacy-color-value" rel="nofollow noreferrer">
      用于解析遗留属性上的颜色的规则
    </A>
     涉及现有答案中提到的其他步骤。截断组件为2位数部分描述为：
  </p>
  <OL>
    <LI>
      丢弃除最后8个之外的所有字符
    </LI>
    <LI>
      逐个丢弃前导零
      的<strong>
        只要所有组件都具有前导零
      </强>
    </LI>
    <LI>
      丢弃除前2个之外的所有字符
    </LI>
  </醇>
  <P>
    一些例子：
  </p>
   <pre class="lang-none prettyprint-override">
    <code>
      oooFoooFoooF
000F 000F 000F                <- replace, pad and chunk
0F 0F 0F                      <- leading zeros truncated
0F 0F 0F                      <- truncated to 2 characters from right

oooFooFFoFFF
000F 00FF 0FFF                <- replace, pad and chunk
00F 0FF FFF                   <- leading zeros truncated
00 0F FF                      <- truncated to 2 characters from right

ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- replace, pad and chunk
BC000000 BC000000 BC000000    <- truncated to 8 characters from left
BC BC BC                      <- truncated to 2 characters from right

AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- replace, pad and chunk
0C000000 0C000000 0C000000    <- truncated to 8 characters from left
C000000 C000000 C000000       <- leading zeros truncated
C0 C0 C0                      <- truncated to 2 characters from right

</code>
  </pre>
  <P>
    以下是该算法的部分实现。它不处理用户输入有效颜色的错误或情况。
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“true”data-console =“false”data-babel =“false”>
    <div class =“snippet-code snippet-Currently-hidden”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          function parseColor(input) {
  // todo: return error if input is ""
  input = input.trim();
  // todo: return error if input is "transparent"
  // todo: return corresponding #rrggbb if input is a named color
  // todo: return #rrggbb if input matches #rgb
  // todo: replace unicode code points greater than U+FFFF with 00
  if (input.length > 128) {
    input = input.slice(0, 128);
  }
  if (input.charAt(0) === "#") {
    input = input.slice(1);
  }
  input = input.replace(/[^0-9A-Fa-f]/g, "0");
  while (input.length === 0 || input.length % 3 > 0) {
    input += "0";
  }
  var r = input.slice(0, input.length / 3);
  var g = input.slice(input.length / 3, input.length * 2 / 3);
  var b = input.slice(input.length * 2 / 3);
  if (r.length > 8) {
    r = r.slice(-8);
    g = g.slice(-8);
    b = b.slice(-8);
  }
  while (r.length > 2 && r.charAt(0) === "0" && g.charAt(0) === "0" && b.charAt(0) === "0") {
    r = r.slice(1);
    g = g.slice(1);
    b = b.slice(1);
  }
  if (r.length > 2) {
    r = r.slice(0, 2);
    g = g.slice(0, 2);
    b = b.slice(0, 2);
  }
  return "#" + r.padStart(2, "0") + g.padStart(2, "0") + b.padStart(2, "0");
}

$(function() {
  $("#input").on("change", function() {
    var input = $(this).val();
    var color = parseColor(input);
    var $cells = $("#result tbody td");
    $cells.eq(0).attr("bgcolor", input);
    $cells.eq(1).attr("bgcolor", color);

<p><input id="input" placeholder="Enter color e.g. chucknorris"></p>
<table id="result">
  <thead>
    <tr>
      <th>Left Color</th>
      <th>Right Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>

2# v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    这是Netscape日子的延续：
  </p>
  <BLOCKQUOTE>
    <P>
      丢失的数字被视为0 [...]。不正确的数字简单地解释为0.例如，值＃F0F0F0，F0F0F0，F0F0F，＃FxFxFx和FxFxFx都是相同的。
    </p>
  </BLOCKQUOTE>
  <P>
    它来自博客文章
    <EM>
      <a href="http://scrappy-do.blogspot.com/2004/08/little-rant-about-microsoft-internet.html">
        关于Microsoft Internet Explorer的颜色解析有点咆哮
      </A>
    </EM>
     它非常详细地介绍了它，包括不同长度的颜色值等。
  </p>
  <P>
    如果我们依次从博客文章中应用规则，我们会得到以下信息：
  </p>
  <OL>
    <LI>
      <P>
        用0替换所有无效的十六进制字符
      </p>
       <pre>
        <code>
          chucknorris becomes c00c0000000

</code>
      </pre>
    </LI>
    <LI>
      <P>
        填写下一个可被3整除的字符总数（11  - > 12）
      </p>
       <pre>
        <code>
          c00c 0000 0000

</code>
      </pre>
    </LI>
    <LI>
      <P>
        分成三个相等的组，每个组件代表RGB颜色的相应颜色分量：
      </p>
       <pre>
        <code>
          RGB (c00c, 0000, 0000)

</code>
      </pre>
    </LI>
    <LI>
      <P>
        将每个参数从右向下截断为两个字符
      </p>
    </LI>
  </醇>
  <P>
    这给出了以下结果：
  </p>
   <pre>
    <code>
      RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)

</code>
  </pre>
  <P>
    这是一个展示的例子
     <code>
      bgcolor
    </code>
     在行动中的属性，以产生这个“惊人的”色样：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="8" width="100" align="center">chuck norris</td>
    <td bgcolor="mrt"         cellpadding="8" width="100" align="center" style="color:#ffffff">Mr T</td>
    <td bgcolor="ninjaturtle" cellpadding="8" width="100" align="center" style="color:#ffffff">ninjaturtle</td>
  </tr>
  <tr>
    <td bgcolor="sick"  cellpadding="8" width="100" align="center">sick</td>
    <td bgcolor="crap"  cellpadding="8" width="100" align="center">crap</td>
    <td bgcolor="grass" cellpadding="8" width="100" align="center">grass</td>
  </tr>
</table>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    这也回答了问题的其他部分;为什么
     <code>
      bgcolor="chucknorr"
    </code>
     产生黄色？好吧，如果我们应用规则，字符串是：
  </p>
   <pre>
    <code>
      c00c00000 => c00 c00 000 => c0 c0 00 [RGB(192, 192, 0)]

</code>
  </pre>
  <P>
    这给出了淡黄色的金色。当字符串以9个字符开始时，我们这次保留第二个C因此它最终成为最终颜色值。
  </p>
  <P>
    当有人指出你可以做的时候我最初遇到过这种情况
     <code>
      color="crap"
    </code>
     而且，它出来了棕色。
  </p>
</DIV>

3# 陆离 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    的<strong>
      查克·诺里斯
    </强>
     是统计数据
    的<strong>
      C
    </强>
     浏览器读入十六进制值。
  </p>
  <BLOCKQUOTE>
    <P>
      因为a，b，c，d，e，f是
      <a href="https://en.wikipedia.org/wiki/Hexadecimal" rel="noreferrer">
        十六进制的字符
      </A>
    </p>
  </BLOCKQUOTE>
  <P>
    浏览器
     <code>
      chucknorris
    </code>
     转换成
     <code>
      c00c00000000
    </code>
     十六进制值。
  </p>
  <P>
    然后
     <code>
      c00c00000000
    </code>
     十六进制值转换为
    的<strong>
      RGB
    </强>
     格式（除以3）
  </p>
  <BLOCKQUOTE>
    <P>
       <code>
        c00c00000000
      </code>
       =＆GT;
       <code>
        R:c00c,G:0000,B:0000
      </code>
    </p>
  </BLOCKQUOTE>
  <P>
    浏览器只需要2位数字即可显示颜色。
  </p>
  <BLOCKQUOTE>
    <P>
       <code>
        R:c00c,G:0000,B:0000
      </code>
       =＆GT;
       <code>
        R:c0,G:00,B:00
      </code>
       =＆GT;
       <code>
        c00000
      </code>
    </p>
  </BLOCKQUOTE>
  <P>
    最后，表明
     <code>
      bgcolor = c00000
    </code>
     在网络浏览器中。
  </p>
  <P>
    这是一个展示的例子
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <table>
  <tr>
    <td bgcolor="chucknorris" cellpadding="10" width="150" align="center">chucknorris</td>
    <td bgcolor="c00c00000000" cellpadding="10" width="150" align="center">c00c00000000</td>
    <td bgcolor="c00000" cellpadding="10" width="150" align="center">c00000</td>
  </tr>
</table>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>

4# Minions | 2019-08-31 10-32

5# Minions | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    原因是浏览器可以
    的<strong>
      不明白
    </强>
     它并尝试以某种方式将其转换为它可以理解的内容，在这种情况下转换为十六进制值！...
  </p>
  <P>
     <code>
      chucknorris
    </code>
     以。。开始
     <code>
      c
    </code>
     这是十六进制中识别的字符，也是将所有未识别的字符转换为
     <code>
      0
    </code>
    ！
  </p>
  <P>
    所以
     <code>
      chucknorris
    </code>
     以十六进制格式变为：
     <code>
      c00c00000000
    </code>
    ，所有其他角色成为
     <code>
      0
    </code>
     和
     <code>
      c
    </code>
     他们仍然在哪里......
  </p>
  <P>
    现在他们被3除以
     <code>
      RGB
    </code>
    （红色，绿色，蓝色）......
     <code>
      R: c00c, G: 0000, B:0000
    </code>
    ...
  </p>
  <P>
    但我们知道RGB的有效十六进制只有2个字符，意味着
     <code>
      R: c0, G: 00, B:00
    </code>
  </p>
  <P>
    所以真正的结果是：
  </p>
   <pre>
    <code>
      bgcolor="#c00000";

</code>
  </pre>
  <P>
    我还添加了图像中的步骤作为快速参考：
  </p>
  <P>
    <a href="https://i.stack.imgur.com/sc8bX.jpg" rel="noreferrer">
      <img src =“https://i.stack.imgur.com/sc8bX.jpg”alt =“为什么HTML认为chucknorris是一种颜色？”/>
    </A>
  </p>
</DIV>