Code
2023-01-09 09:53:43

为什么HTML认为“裸体”是一种颜色?

在 HTML 中作为背景颜色输入时, 为什么某些随机字符串会产生颜色 ?

例如,bgcolor="chucknorris"a 生产量a红色背景红背景:

<body bgcolor="chucknorris"> test </body>

相反,bgcolor="chucknorr"a 生产量a黄色背景:

<body bgcolor="chucknorr"> test </body>

各种浏览器和平台都存在这种情况。

大多数浏览器将简单地忽略任何未缴- 颜色字符串中的十六进制值,以零取代非十六进制数字。

ChuCknorris翻译为c00c0000000。在此点,浏览器将把字符串分为三个相等的区块,显示红红, 绿绿色和蓝蓝色值 :c00c 0000 0000。每一部分中的额外位数将被忽略,从而得出最终结果#c00000这是红色的颜色。

注注,这样可以:否应用到 CSS 颜色解析, 该颜色解析遵循 CSS 标准 。

<p><font color='chucknorris'>Redish</font></p>
<p><font color='#c00000'>Same as above</font></p>
<p><span style="color: chucknorris">Black</span></p>

2011-11-29 23:01:05

与Twitter网站的延迟网网景天数 :

缺失的数字被作为 0[...] 处理。 不正确的数字被简单地解释为 0。 例如, 数值 # F0F0F0F0、 F0F0F0F0、 F0F0F、 # FxFxFxx和 FxFxFx都是相同的 。

是博客文章上写到的微软 Internet Explorer 的颜色解析包括不同颜色的长度等等。

如果我们在博客文章中适用规则,

  1. 将所有非合法的十六进制字符替换为 0 :

    chucknorris becomes c00c0000000

  2. 切换为下个字符总数, 3 下个字符总数( 11 & 12) :

    c00c 0000 0000

  3. 分成三个等式组,每个部分代表 RGB 颜色的相应颜色组成部分:

    RGB (c00c, 0000, 0000)

  4. 将每个参数从右下移到两个字符。

最后,得出以下结果:

RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0)

以下是一个例子,bgcolor在动作属性中,要生成此“ 映射” 颜色表 :

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

这也回答了问题的另一部分:为什么bgcolor="chucknorr"产生黄色颜色 ? 那么, 如果我们执行规则, 字符串是:

c00c00000 => c00 c00 000 => c0 c0 00 [RGB(192, 192, 0)]

这给出了浅黄色的金色。 当字符串以9个字符开始时, 我们保留了第二个“ C” 这一次, 因此它最终成了最后的颜色值 。

我最初遇到这个时 有人指出你可以做到color="crap"然后,它从棕色出来。

2011-11-30 21:53:38

缩略WHEWG HTML 规格有精确的算法用于解析遗留颜色值。

用于分析颜色字符串的 Netscape 经典代码是开源 :网外/流出/外派/外派/外派。 c.

例如,注意每个字符都以十六进制数字进行剖析,然后转换为32位整数未检查溢出溢出量。只有8个十六位数数字适合32位整数,这就是为什么只考虑最后8个字符的原因。在将六位数数字切换为32位整数之后,它们会通过将其除以16而将其切换为8位整数,直到将其切换为8位整数,这就是为什么忽略前位零的原因。

此代码不完全匹配规格中所定义的代码, 但唯一的区别是几行代码。 我想是的这些线条添加(在网景4中):

if (bytes_per_val > 4)
{
    bytes_per_val = 4;
}
2012-09-27 22:01:58

很抱歉我不同意 但根据传统颜色的分解规则由Yuhong Bao张贴, chucknorris 无等于等于#CC0000,而是#C00000,一个非常相似但稍稍不同的红色色调。火狐 颜色Zilla 添加来核实这一点。

规则规定:

  • 将字符串设置为乘以 3 的乘以 0 的长度:chucknorris0
  • 将字符串分隔为三等长字符串:chuc knor ris0
  • 将每个字符串短短到两个字符 :ch kn ri
  • 保留十六进制值,必要时加上 0:C0 00 00

我利用这些规则正确解释了以下条件:

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

最初的回答者说颜色是#CC0000其后编辑了答复,以列入更正。

2012-10-17 17:55:48

浏览器正在试图转换chucknorris十六进制颜色代码,因为它不是一个有效的值。

  1. 内chucknorris,除c不是一个有效的十六进制值。
  2. 因此,它被转换为c00c00000000.
  3. 这分为3组,R G B(结尾处为0,如果不是3的倍数的话)
  4. 每个组中只选取两个字符,因为这是允许的。
  5. 终于变成# 千千万万 #红色的阴影

这似乎主要是与Internet 探索器和歌剧院(12) 因为铬(31)和Firefox(26)都忽略了这一点。

P.S. 括号中的数字是我测试过的浏览器版本。

同样,拉伊尼坎特(印度恰克·诺里斯) 和黑色的阴影相反:

000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

在较轻的音符上

Chuck Norris不符合网络标准。 网络标准符合他的要求。 #BADA55

2013-11-30 14:05:38
  • 浏览器将尝试转换巧克力诺瑞斯chucknorris十六进制值。
  • 自c中唯一有效的十六ex 字符巧克力诺瑞斯chucknorris,值转换为:c00c00000000(无效的所有值为 0).
  • 浏览器然后将结果分为三类:Red = c00c, Green = 0000, Blue = 0000.
  • 由于 HTML 背景的有效十六进制值仅包含每个颜色类型的两位数字( ) 。r, g, b)))后的两位数从每组中截短,留下的RGB值为c00000是一个砖灰色的灰色灰色色。
2016-05-24 05:18:14

原因是浏览器可以不理解并试图将它转化为能理解的东西,

chucknorris开始于c在十六进进制中被识别的字符, 也正在将所有未识别的字符转换成0!

苏chucknorris六进制格式改为:c00c00000000,所有其他字符成为0和c仍然在他们所在的地方...

现在他们被除以3RGB(红色、绿色、蓝色)...R: c00c, G: 0000, B:0000...

但是我们知道对RGB来说 有效的十六进制是两个字符 意思是R: c0, G: 00, B:00

因此,真正的结果是:

bgcolor="#c00000";

我还添加了图像中的步骤,作为你们快速参考:

Why does HTML think “chucknorris” is a colour?

2017-07-01 04:08:59

chucknorris开始于c,浏览器将它读取为十六进制值。

因为A、B、C、D、E和F是十六进制字符.

浏览器转换chucknorris至十六进制值,C00C00000000.

然后C00C00000000十六进制值转换为RGB 英国GB格式( 由 3 组成 ) :

C00C00000000 ⇒ R:C00C, G:0000, B:0000

浏览器只需两位数来表示颜色 :

R:C00C, G:0000, B:0000 ⇒ R:C0, G:00, B:00 ⇒ C00000

最后,表演bgcolor = C00000在 Web 浏览器中。

以下是一个例子:

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

2018-04-17 19:16:30

缩略在遗留属性上解析颜色的规则除现有答复中提到的步骤外,还需要采取其他步骤。

  1. 除上一个 8 个之外, 丢弃所有字符
  2. 丢弃前零 零 逐 1 丢弃只要所有组成部分都有一个前零
  3. 除前两个字符外, 丢弃所有字符

一些例子:

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

下面是算法的部分实施。 它不处理错误或用户输入有效颜色的情况 。

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);

    var color1 = $cells.eq(0).css("background-color");
    var color2 = $cells.eq(1).css("background-color");
    $cells.eq(2).empty().append("bgcolor: " + input, "<br>", "getComputedStyle: " + color1);
    $cells.eq(3).empty().append("bgcolor: " + color, "<br>", "getComputedStyle: " + color2);
  });
});
body { font: medium monospace; }
input { width: 20em; }
table { table-layout: fixed; width: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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

2018-10-17 14:53:02

推荐文章

aliyun

最新文章

标签

2024 code 京ICP备15047053号-1