您现在的位置是：网站首页> 编程资料编程资料
整理HTML5中支持的URL编码与字符编码Html5无刷新修改browser Url的方法HTML5 input元素类型：email及url介绍将HTML5 Canvas的内容保存为图片借助toDataURL实现HTML5无刷新改变当前url的代码
2021-08-31
948人已围观
简介 这篇文章主要介绍了整理HTML5中支持的URL编码与字符编码,URL方面对HTML5用到无刷新修改URL等功能的实现时可以借鉴,字符编码则要注意BOM问题,需要的朋友可以参考下
URL 编码
URL 编码就是将 URLs 中不宜打印的字符或者具有特殊意义的字符转换为 Web 浏览器和服务器明白且普遍接受的表示法。 这些字符包括：
ASCII 控制字符 - 不宜打印的字符通常用于输出控制。字符范围是十六进制的 00-1F（十进制的 0-31）和 7F（十进制的 127）。下面提供了完整的编码表。
非 ASCII 控制字符 - 这些字符超出了 128 个 ASCII 字符集的范围。这个范围是 ISO-拉丁字符集的一部分以及包含整个十六进制的 ISO-拉丁字符集 00-FF （十进制的 128-255）的“前半部分”。下面提供了完整的编码表。
保留字符 - 诸如美元符号，和号，加号，通用符号，正斜杠，冒号，分好，等号，问号以及 “at”这类符号。所有这些符号在 URL 内都有不同的意义，因此需要编码。下面提供了完整的编码表。
不安全字符 - 包括空格，问号，小于符号，大于符号，磅字符，百分比符号，大括号左边部分，大括号右边部分，管道符，反斜杠，插入符号，波浪线。左方括号，右方括号，沉音符。出于某些原因，这些字符出现在 URLs 中存在被误解的可能性。这些字符也应该始终被编码。下面提供了完整的编码表。
编码表示法需要三个字符替换期望的字符：一个百分号，两个在 ASCII 字符集中表示字符位置的十六进制数字、
示例
最常见的特殊字符之一便是空格。我们不能在 URL 中直接输入一个空格。空格在字符集中就是十六进制的 20。因此请求服务器时可以使用 %20 表示空格。
这个 URL 实际上是从 www.example.com 检索一个名为 new pricing.html 的文档。
ASCII 控制字符编码
包括十六进制的 00-1F（十进制的 0-31）和 7F（十进制的 127）字符码。
| 十进制格式 | 十六进制值 | 字符 | URL 编码 |
|---|---|---|---|
| 0 | 00 | %00 | |
| 1 | 01 | %01 | |
| 2 | 02 | %02 | |
| 3 | 03 | %03 | |
| 4 | 04 | %04 | |
| 5 | 05 | %05 | |
| 6 | 06 | %06 | |
| 7 | 07 | %07 | |
| 8 | 08 | 退格符 | %08 |
| 9 | 09 | tab | %09 |
| 10 | 0a | 换行符 | %0a |
| 11 | 0b | %0b | |
| 12 | 0c | %0c | |
| 13 | 0d | 回车符 | %0d |
| 14 | 0e | %0e | |
| 15 | 0f | %0f | |
| 16 | 10 | %10 | |
| 17 | 11 | %11 | |
| 18 | 12 | %12 | |
| 19 | 13 | %13 | |
| 20 | 14 | %14 | |
| 21 | 15 | %15 | |
| 22 | 16 | %16 | |
| 23 | 17 | %17 | |
| 24 | 18 | %18 | |
| 25 | 19 | %19 | |
| 26 | 1a | %1a | |
| 27 | 1b | %1b | |
| 28 | 1c | %1c | |
| 29 | 1d | %1d | |
| 30 | 1e | %1e | |
| 31 | 1f | %1f | |
| 127 | 7f | %7f |
非 ASCII 控制字符编码
包括整个十六进制的 ISO-拉丁字符集 80-FF（十进制的 128-255）编码的“前半部分”。
| 十进制格式 | 十六进制值 | 字符 | URL 编码 |
|---|---|---|---|
| 128 | 80 | € | %80 |
| 129 | 81 | ? | %81 |
| 130 | 82 | ? | %82 |
| 131 | 83 | ? | %83 |
| 132 | 84 | ? | %84 |
| 133 | 85 | … | %85 |
| 134 | 86 | ? | %86 |
| 135 | 87 | ? | %87 |
| 136 | 88 | ? | %88 |
| 137 | 89 | ‰ | %89 |
| 138 | 8a | ? | %8a |
| 139 | 8b | ? | %8b |
| 140 | 8c | ? | %8c |
| 141 | 8d | ? | %8d |
| 142 | 8e | ? | %8e |
| 143 | 8f | ? | %8f |
| 144 | 90 | ? | %90 |
| 145 | 91 | ‘ | %91 |
| 146 | 92 | ’ | %92 |
| 147 | 93 | “ | %93 |
| 148 | 94 | ” | %94 |
| 149 | 95 | ? | %95 |
| 150 | 96 | – | %96 |
| 151 | 97 | — | %97 |
| 152 | 98 | ? | %98 |
| 153 | 99 | ? | %99 |
| 154 | 9a | ? | %9a |
| 155 | 9b | ? | %9b |
| 156 | 9c | ? | %9c |
| 157 | 9d | ? | %9d |
| 158 | 9e | ? | %9e |
| 159 | 9f | ? | %9f |
| 160 | a0 | %a0 | |
| 161 | a1 | ? | %a1 |
| 162 | a2 | ￠ | %a2 |
| 163 | a3 | ￡ | %a3 |
| 164 | a4 | ¤ | %a4 |
| 165 | a5 | ￥ | %a5 |
| 166 | a6 | | | %a6 |
| 167 | a7 | § | %a7 |
| 168 | a8 | ¨ | %a8 |
| 169 | a9 | ? | %a9 |
| 170 | aa | a | %aa |
| 171 | ab | ? | %ab |
| 172 | ac | ? | %ac |
| 173 | ad | - | %ad |
| 174 | ae | ? | %ae |
| 175 | af | ˉ | %af |
| 176 | b0 | ° | %b0 |
| 177 | b1 | ± | %b1 |
| 178 | b2 | 2 | %b2 |
| 179 | b3 | 3 | %b3 |
| 180 | b4 | ′ | %b4 |
| 181 | b5 | μ | %b5 |
| 182 | b6 | ? | %b6 |
| 183 | b7 | · | %b7 |
| 184 | b8 | ? | %b8 |
| 185 | b9 | 1 | %b9 |
| 186 | ba | o | %ba |
| 187 | bb | ? | %bb |
| 188 | bc | ? | %bc |
| 189 | bd | ? | %bd |
| 190 | be | ? | %be |
| 191 | bf | ? | %bf |
| 192 | c0 | à | %c0 |
| 193 | c1 | á | %c1 |
| 194 | c2 | ? | %c2 |
| 195 | c3 | ? | %c3 |
| 196 | c4 | ? | %c4 |
| 197 | c5 | ? | %c5 |
| 198 | c6 | ? | %v6 |
| 199 | c7 | ? | %c7 |
| 200 | c8 | è | %c8 |
| 201 | c9 | é | %c9 |
| 202 | ca | ê | %ca |
| 203 | cb | ? | %cb |
| 204 | cc | ì | %cc |
| 205 | cd | í | %cd |
| 206 | ce | ? | %ce |
| 207 | cf | ? | %cf |
| 208 | d0 | D | %d0 |
| 209 | d1 | ? | %d1 |
| 210 | d2 | ò | %d2 |
| 211 | d3 | ó | %d3 |
| 212 | d4 | ? | %d4 |
| 213 | d5 | ? | %d5 |
| 214 | d6 | ? | %d6 |
| 215 | d7 | × | %d7 |
| 216 | d8 | ? | %d8 |
| 217 | d9 | ù | %d9 |
| 218 | da | ú | %da |
| 219 | db | ? | %db |
| 220 | dc | ü | %dc |
| 221 | dd | Y | %dd |
| 222 | de | T | %de |
| 223 | df | ? | %df |
| 224 | e0 | à | %e0 |
| 225 | e1 | á | %e1 |
| 226 | e2 | a | %e2 |
| 227 | e3 | ? | %e3 |
| 228 | e4 | ? | %e4 |
| 229 | e5 | ? | %e5 |
| 230 | e6 | ? | %e6 |
| 231 | e7 | ? | %e7 |
| 232 | e8 | è | %e8 |
| 233 | e9 | é | %e9 |
| 234 | ea | ê | %ea |
| 235 | eb | ? | %eb |
| 236 | ec | ì | %ec |
| 237 | ed | í | %ed |
| 238 | ee | ? | %ee |
| 239 | ef | ? | %ef |
| 240 | f0 | e | %f0 |
| 241 | f1 | ? | %f1 |
| 242 | f2 | ò | %f2 |
| 243 | f3 | ó | %f3 |
| 244 | f4 | ? | %f4 |
| 245 | f5 | ? | %f5 |
| 246 | f6 | ? | %f6 |
| 247 | f7 | ÷ | %f7 |
| 248 | f8 | ? | %f8 |
| 249 | f9 | ù | %f9 |
| 250 | fa | ú | %fa |
| 251 | fb | ? | %fb |
| 252 | fc | ü | %fc |
| 253 | fd | y | %fd |
| 254 | fe | t | %fe |
| 255 | ff | ? | %ff |
保留字符编码
下表用于编码保留字符。
| 十进制格式 | 十六进制值 | 字符 | URL 编码 |
|---|---|---|---|
| 36 | 24 | $ | %24 |
| 38 | 26 | & | %26 |
| 43 | 2b | + | %2b |
| 44 | 2c | , | %2c |
| 47 | 2f | / | %2f |
| 58 | 3a | : | %3a |
| 59 | 3b | ; | %3b |
| 61 | 3d | = | %3d |
| 63 | 3f | ? | %3f |
| 64 | 40 | @ | %40 |
不安全字符编码
下表用于编码不安全字符。
| 十进制格式 | 十六进制值 | 字符 | URL 编码 |
|---|---|---|---|
| 32 | 20 | space | %20 |
| 34 | 22 | " | %22 |
| 60 | 3c | < | %3c |
| 62 | 3e | > | %3e |
| 35 | 23 | # | %23 |
| 37 | 25 | % | %25 |
| 123 | 7b | { | %7b |
| 125 | 7d | } | %7d |
| 124 | 7c | | | %7c |
| 92 | 5c | \ | %5c |
| 94 | 5e | ^ | %5e |
| 126 | 7e | ~ | %7e |
| 91 | 5b | [ | %5b |
| 93 | 5d | ] | %5d |
| 96 | 60 | ` | %60 |
字符编码
字符编码就是将字节转换为字符的一种方法。要验证或者显示一个 HTML 文档，程序必须选择一个字符编码。HTML5 作者有三种方式设置字符编码：
HTTP Content-Type 头：
如果你在编写 cgi 程序或者类似的程序，那么可以使用 HTTP Content-Type 头设置任意字符编码：
下面是一个简单的例子：
- print "Content-Type: text/html; charset=utf-8\r\n";
元素：
可以使用带有 charset 属性的 元素指定 HTML5 文档前 512 个字节的编码：
下面是简化的例子：
- <meta charset="UTF-8">
尽管这种语法是被允许的，但上述语法需要使用 替换。
Unicode 字节顺序标记（BOM）
一个字节顺序标记（BOM）由数据流开头的 U+FEFF 字符码组成，它可以用作定义字节顺序和编码形式的签名，主要是未标记的明文文件。
许多 Windows 程序（包括 Windows 记事本）都会在保存为 UTF-8 的任意文档开头添加 0xEF, 0xBB, 0xBF。这就是 Unicode 字节顺序标记（BOM）的 UTF-8 编码，通常被称为 UTF-8 BOM，尽管它和字节顺序没有关系。
对于 HTML5 文档，我们可以在文件的开头使用 Unicode 字节顺序标记（BOM）字符。这个字符为使用的编码提供了签名。
相关内容
- 浅析HTML5的WebSocket与服务器推送事件HTML5+WebSocket实现多文件同时上传的实例HTML5-WebSocket实现聊天室示例HTML5实现WebSocket协议原理浅析html5的websockets全双工通信详解学习示例利用html5的websocket实现websocket聊天室html5-websocket基于远程方法调用的数据交互实现基于HTML5的WebSocket的实例代码
- 在HTML5中使用MathML数学公式的简单讲解基于HTML5的数学函数图形绘制插件XCalc源码用HTML5中的Canvas结合公式绘制粒子运动的教程
- 全面解析HTML5中的标准属性与自定义属性详解HTML5 data-* 自定义属性HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)html5的自定义data-*属性与jquery的data()方法的使用HTML5的自定义属性data-*详细介绍和JS操作实例HTML5自定义data-* data(obj)属性和jquery的data()方法的使用HTML5自定义属性的问题分析
- 简单整理HTML5的基本特性和语法HTML学习笔记--HTML的语法详解(必看)详解HTML&CSS&JavaScript语法辞典-(专业版) (半场方人) PDF扫描版 93.1Html5 语法与规则简要概述HTML5的语法变化介绍HTML5 新旧语法标记对我们有什么好处HTML语法大全_html语言语法大全(必看)
- HTML5实现预览本地图片 HTML5本地存储之IndexedDBhtml5中localStorage本地存储的简单使用HTML5 LocalStorage 本地存储刷新值还在详解HTML5 LocalStorage 本地存储 html5本地存储 localStorage操作使用详解Html5 web本地存储实例详解深入剖析webstorage[html5的本地数据处理]HTML5本地存储之Web Storage详解HTML5 本地存储 LocalStorage详解HTML5本地数据库基础操作详解
- HTML5新特性之用SVG绘制微信logo HTML5新特性之type=file文件上传功能HTML5新特性之语义化标签整理HTML5的一些新特性与Canvas的常用属性基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作HTML5 history新特性pushState、replaceState及两者的区别 HTML5有哪些新特征Html5新特性用canvas标签画多条直线附效果截图html5声频audio和视频video等新特性详细说明html5新特性与用法大全
- HTML5 Canvas入门学习教程HTML5中的nav标签学习笔记HTML5学习笔记之html5与传统html区别 HTML 5零距离接触:学习快速入门 中文pdf扫描版[1MB]HTML5学习心得总结(推荐)
- HTML5 canvas实现移动端上传头像拖拽裁剪效果html5拖拽排序多图片上传插件特效源码HTML5 拖拽批量上传文件的示例代码html5实现多图片预览上传及点击可拖拽控件html5使用Drag事件编辑器拖拽上传图片的示例代码HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量）结合html5+nodejs+express实现拖拽上传的功能HTML5拖拽文件到浏览器并实现文件上传下载功能代码html5 拖拽上传图片实例演示HTML5拖拽文件上传的示例代码
- html5 canvas移动浏览器上实现图片压缩上传使用canvas压缩图片上传的方法示例浅析图片上传及canvas压缩的流程
- html5+css3进度条倒计时动画特效代码【推荐】html5带音乐背景的圣诞节倒计时页面代码基于HTML5 time元素的倒计时jquery插件HTML5 Canvas 3D倒计时爆炸特效源码基于Html5+Canvas实现2016年七夕情人节倒计时特效源码基于HTML5 canvas圆形倒计时器jQuery插件源码 多款效果基于HTML5实现2021雪花飘新年倒计时源码
