HTML5 é muito atraente para iniciantes e até mesmo não programadores. Na verdade, sempre que você visita um site, você lida com HTML. Se você estiver familiarizado com algumas habilidades-chave de programação, poderá economizar muito tempo (ou até dinheiro) ao fazer alguns ajustes detalhados no site ou otimizar elementos básicos da Web. Portanto, este artigo selecionou 10 habilidades de programação HTML que são muito úteis para desenvolvedores da Web e podem ser facilmente dominadas sem gastar muito tempo e energia.
1. Pode interagir com recursos de mídia local em cache
A API HTML5 FileSystem foi inicialmente considerada como uma alternativa ao AppCache para implementar o cache dinâmico de ativos. Mas você sabia que pode realmente usá-lo para interagir com arquivos armazenados no dispositivo local do usuário?
Por exemplo, você pode adicionar as seguintes funções ao seu aplicativo:
- Carregador de ponto de interrupção: copie arquivos para uma sandbox local e carregue-os em lotes. A operação de upload pode ser reiniciada depois que a conexão for interrompida ou o navegador travar.
- Habilite o cache local para aplicativos com uso intensivo de mídia, como jogos, reprodutores de música e editores de fotos.
- Crie modos offline para visualização de conteúdo, como vídeos offline, anexos de e-mail e texto.
Nota : A API FileSystem só é compatível com o Chrome.
Se quiser experimentar a função de armazenamento offline, você também pode consultar os seguintes recursos e tutoriais de código:
- Eric Bidelman: Como usar a API HTML5 FileSystem [1].
- Gerenciar armazenamento offline HTML5 [2].
- Arquivos offline em HTML5: API FileSystem [3].
2. Execute a validação automática do formulário
Para a segurança do site e a experiência do usuário sem problemas, a validação do formulário é muito importante. Portanto, devemos tornar mais fácil para os usuários inserirem vários tipos corretos de valores em seu site.
Existem vários novos tipos de entrada disponíveis em HTML5, esses tipos foram agrupados em funções de validação predefinidas:
- 'o email'
- 'url'
- 'tel'
Porém, quando você precisa que o usuário forneça alguns dados que não são especificados pela entrada padrão (como um nome de usuário que contém caracteres especiais), geralmente ocorrem problemas. É quando o atributo "pattern" se torna útil.
Padrão permite definir regras personalizadas e usar expressões regulares (RegEx) para validar a entrada do formulário. RegEx especifica a expressão a ser verificada para o valor do elemento <input>.
A seguir está um exemplo de adição de uma nova regra. Por exemplo, você deseja especificar que a senha não deve exceder 15 caracteres e pode conter apenas letras minúsculas:
<form action = "/ action_page.php">
Senha: <input type = "password" name = "pw" pattern = "[az]. {1,15,}">
<input type = "submit">
</ formulário>
Para ilustrar melhor as regras, você também pode adicionar uma mensagem personalizada para informar aos usuários por que a senha que eles inseriram não atende aos requisitos. Basta adicionar outra linha para personalizar a mensagem pop-up:
<form action = "/ action_page.php">
Senha: <input type = "password" name = "pw" pattern = "[az]. {1,15,}" title = "Um a quinze caracteres, somente minúsculas" . >>
<input type = "submit">
</form>
3. Crie abreviações para elementos de código HTML5
Emmet [4] é um plugin de edição de texto muito útil que pode simplificar seu processo de codificação HTML / CSS. Essa ferramenta usa uma sintaxe semelhante aos seletores CSS, permitindo criar várias abreviações para elementos de código HTML padrão.
Abaixo está um exemplo. Se você inserir:
div # header> h1.logo> a {website}
Irá receber:
<div id = "header"> <h1 class = "logo"> <a href=""> site </a> </h1> </div>
Você pode usar uma variedade de combinações existentes na folha de dicas [5] ou pode criar uma combinação personalizada para qualquer tag HTML e, em seguida, pressionar Tab ou Ctrl + E para adicioná-la ao editor de texto.
4. Obtenha uma melhor transmissão de vídeo
Usando a tag de vídeo, você pode incorporar perfeitamente reprodutores de mídia que oferecem suporte à reprodução de vídeo em páginas da web.
você pode escolher:
- Use getUserMedia () ou WebRTC para habilitar o streaming em tempo real da câmera.
- Use o atributo src para reproduzir vídeos hospedados localmente: <video src = "file.avi" />.
Além disso, você deve especificar "controles" para o vídeo (como reproduzir, pausar e ajuste de volume), caso contrário, o usuário não terá nenhum controle disponível. O código de amostra aqui é o seguinte:
<video width = "768" height = "432" autoplay> <source src = "video.mp4" type = "video / mp4"> </video>
Para melhorar ainda mais a experiência de visualização, você também pode tentar os seguintes atributos:
- disablePictureInPicture [6]: Desativa o navegador para exibir o menu de contexto de imagem na imagem ou solicita automaticamente a imagem na imagem.
- loop : solicita ao navegador para reproduzir automaticamente o vídeo após o final da reprodução.
- mudo : silencia automaticamente o áudio do vídeo.
- 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 Yesmod_gzip_dechunk Yesmod_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#enable
- Litespeed：https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:config:gzip-compression
- NGINX：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 技巧和窍门，它们应该可以帮助你构建更快、更人性化和更有吸引力的网站。不过千万要记得，在开始实验之前先对你的网站进行备份！