HTML5 对新手即使亦然开发人员而言都有着极富的诱惑力。实际上，只要你出访中文网站，就会和 HTML 关系密切。假如能够熟识许多关键的程式设计基本功，当你对中文网站做许多技术细节调整或强化基本的 Web 原素时就能节省大量的天数（即使是钱财）。因此，责任编辑优选了 10 个对 Web 开发人员而言十分新颖的 HTML 程式设计基本功，而且它们不须要浪费天数天数心力就能随心所欲掌控。
1. 可与邻近地区内存新闻媒体天然资源可视化
HTML5 FileSystem API 一开始被认为是 AppCache 的代替方案，用以同时实现资产的静态内存。但是你知道吗，其实你还能用它来同时实现与使用者邻近地区设备上储存文档的可视化。
比如，你能在应用领域中加进下列机能：
断点上载器：将文档导入到一个邻近地区沙盒中，然后先期上载。出现相连受阻、应用程序崩盘机械故障后能再启动上载操作。为游戏、音乐MP3，相片GUI等新闻媒体专门化应用领域投入使用邻近地区内存。为内容查阅建立app模式，比如app音频、邮件附带和文档等。注意：FileSystem API 仅被 Chrome 支持。
假如你想试著app储存机能，还能参照下列天然资源和标识符讲义：
Eric Bidelman：如何使用 HTML5 FileSystem API[1]。管理 HTML5 app储存 [2]。HTML5 中的控制标识符文档：FileSystem API[3]。2. 进行手动配置文档校正
对中文网站可靠性和简洁的使用者新体验而言，配置文档校正十分重要。所以我们应该让使用者更随心所欲地在你的中文网站上输出各种恰当类别的值。
在 HTML5 中有三种捷伊输出类别需用，这些类别已经装箱进了原订义的校正机能：
emailurltel但当你须要使用者提供某些标准输出隐脉的数据时（比如一个包涵转义的使用者名），往往就会出问题了。这就是“pattern”特性办到的时候。
Pattern 可让你定义自定义规则，然后使用正则表达式（RegEx）校正配置文档输出。RegEx 指定了<input>原素值将要检查的表达式。
下面是一个加进新规则的示例。比如，你要指定密码不应超过 15 个字符，并且只能包涵小写字母：
<form action=”/action_page.php”> Password: <input type=”password” name=”pw” pattern=”[a-z].{1,15,}”> <input type=”submit”> </form>为了更好地说明规则，你还能加进一条自定义消息，告诉使用者为什么他们输出的密码不符合要求。只需再加上一行来自定义弹出消息即可：
<form action=”/action_page.php”> Password: <input type=”password” name=”pw” pattern=”[a-z].{1,15,}” title=”One to fifteen characters, lowercase only”.>> <input type=”submit”> </form>3. 为 HTML5 标识符原素建立缩写
Emmet[4] 是一个很好用的文档GUI插件，能简化你的 HTML/CSS 编码流程。这个工具使用的语法类似于 CSS 的选择器，可让你为标准 HTML 标识符原素建立各种缩写。
下面是一个例子。假如你输出：
div#header>h1.logo>a{website}则会收到：
<div id=”header”> <h1 class=”logo”><a href=””>website</a></h1> </div>你能使用 cheat sheet[5] 中的多种已有组合，也能为任意 HTML 标签建立自定义组合，然后按 Tab 或 Ctrl + E 将其加进到文档GUI中。我自己是一名从事了多年开发的web
4. 同时实现更优的音频传输
使用 video 标签，能将支持音频播放的新闻媒体MP3无缝嵌入到网页中。
你能选择：
使用 getUserMedia() 或 WebRTC 投入使用以自摄像头的实时流。使用 src 特性播放邻近地区托管的音频：<video src=”file.avi”/>。此外，你必须为音频指定“控件”（比如播放、暂停和音量调节），否则使用者将没有任何控件需用。这里的示例代码如下：
<video width=”768″ height=”432″ autoplay> <source src=”video.mp4″ type=”video/mp4″> </video>为了进一步改善观看新体验，你还能试著使用下列特性：
disablePictureInPicture[6]：禁止应用程序显示画中画上下文菜单或手动请求画中画。loop：提示应用程序在结束播放后手动重播音频。muted：手动使音频中的音频静音。poster：将自定义图像显示为音频缩略图。否则，应用程序将显示音频的第一帧作为缩略图。preload：向应用程序指示哪些参数将带来最佳的使用者新体验。你能将它设置为 none（无预加载要求）；metadata：仅会预取音频元数据；auto：即使使用者不希望观看整个音频，也要下载全部音频数据。注意：autoplay 特性的优先级高于此特性。你能在这个 HTML 速查表 [7] 中找到更多使用方便的多新闻媒体文档标签。
5. 改善图像的显示方式
<picture>标签有助于强化图像的显示方式。
它通常用于：
样式：指定在各种条件下应如何显示新闻媒体（比如，为较小的屏幕加载图像的较小版本）。这是建立响应式设计的关键一环。提升速度：根据使用者的屏幕规格指定应加载的图像尺寸。应用程序支持：在各种类别的应用程序中提供不同的图像格式，以显示恰当的内容。示例：
<picture> <source media=”(min-width: 846px)” srcset=”img_1.jpg”> <source media=”(min-width: 300 px)” srcset=”img_2.jpg”> <img src=”img_3.jpg” alt=”logo”> </picture><picture>标签包涵两个附加子原素：
<source>：指定新闻媒体元素的新闻媒体天然资源。<img>：定义一个图像。要投入使用其他样式选项，请将下列特性加进到<source>原素：
srcset（必需）：使用它来定义图像的目标 URL。media（类似于新闻媒体查询）：是一个条件，使用者代理为每个<source>原素评估这个条件。sizes：指定宽度描述符。type：提供 MIME 类别定义。<img>原素需用以确保在不支持<picture>原素的应用程序中恰当显示图像。
6. 提升首屏页面的加载速度
但是，要在 Google Page Insights 中拿到高分并不是那么容易。虽然这一工具的确会标出你的中文网站上应该修复的内容，但是对从头开始对中文网站进行编码的人们并没有提供明确的强化指导。
谷歌对首屏设计的官方建议 [8] 有些含糊不清：
调整你的 HTML 结构，以首先加载关键的首屏内容。减少你的天然资源使用的数据量。所以我们来将其分解为更可操作的几个步骤：
确保你的 CSS 是内联的。尽量减少、合并和消除不必要的外部 CSS 文档。手动减少阻碍渲染的 CSS 数据。使用 CSS 媒体类别和新闻媒体查询，将某些 CSS 天然资源指定为非渲染阻碍类别 [9]。将<content>部分放在<sidebar>之前。推迟加载 JavaScript。生成可嵌入的字体数据以加快字体加载速度，并选择 web 安全的字体 [10]。然后再次运行检查任务，看看是否还有须要修复的内容。
7. 中文网站加速
只要将 .zip 文档而不是 index.html 文档发送给应用程序，就能节约大量带宽和下载天数。
图片来自 betterexplained[11]
要设置 .gzip 压缩，你须要在 web 主机 / 服务器上找到 htaccess 文档，并使用下列标识符对其进行修改：
<ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </ifModule>假如这样做不起作用，请参照下面这些针对不同 web 服务器类别的讲义：
Apache：https://httpd.apache.org/docs/current/mod/mod_deflate.html#enableLitespeed：https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:config:gzip-compressionNGINX：https://docs.nginx.com/nginx/admin-guide/web-server/compression/8. 利用 Microdata 进行 SEO
你能使用 microdata 将额外的上下文编入网页。然后，网络爬虫就能从你的页面中渲染微数据，并为使用者提供更好的浏览新体验，以更高的精确性对你的中文网站建立索引并为其提供更准确的搜索结果排名。
简而言之，Microdata 由名称 / 值（name/value）对组成，每一个项目（item）定义一组命名的特性（property）。
项目具有项目类别、全局标识符和一个特性列表。要建立一个新项目，请使用 itemscope attribute。特性具有一个或多个值。要将特性分配给项目，请使用 itemprop attribute。9. 使用 HTML5 邻近地区储存代替 Cookie
Local Storage（也称为 DOM 储存）使你能在邻近地区储存使用者数据，这样就无需通过 HTTP 网络请求发送数据了。它能节约带宽并提升数据储存能力。看起来不错吧？
但是有一个重要的警告：邻近地区储存仅能保存在客户端，而 cookie 既能保存在服务器端也能在客户端。因此，假如你的中文网站使用了服务器端的 Cookie 来基于已知的使用者首选项自定义内容，则迁移到邻近地区储存可能就须要重大的架构更改工作了。
但在比较简单的情况下（比如你使用 Cookie 来储存许多基本设置），邻近地区储存可能是一个很好的代替品，尤其是在网络相连质量较差的区域。另外请记住，邻近地区储存对高敏感数据（比如财务信息）可能不是理想的选择，并且建议你对邻近地区储存的所有数据都进行额外的加密。
Jenkov 详细介绍了如何设置和配置 HTML5 邻近地区储存 [13]。
10. 编写有编号项目的降序列表
文章最后介绍一个十分简单的基本功：你能使用<reversed>特性加进降序列表代替升序列表。
下面是一个示例标识符片段：
<ol reversed> <li>Ready</li> <li>Set</li> <li>Go!</li> </ol>听起来可能没有多大意义，但是当你想在页面中加进许多时髦的样式时，它可能就会办到了。
小结
现在你应该掌控了这 10 个捷伊 HTML5 基本功和窍门，它们应该能帮助你构建更快、更人性化和更有诱惑力的中文网站。不过千万要记得，在开始实验之前先对你的中文网站进行备份！
原文链接：https://mp.weixin.qq.com/s/qtQZUvsnIn0nsFbG51lQQw
作者：前端工匠
