HTML5 es muy atractivo para principiantes e incluso para no programadores. De hecho, siempre que visite un sitio web, se ocupará de HTML. Si está familiarizado con algunas habilidades clave de programación, puede ahorrar mucho tiempo (o incluso dinero) al realizar algunos ajustes detallados en el sitio web u optimizar los elementos básicos de la Web. Por lo tanto, este artículo ha seleccionado 10 habilidades de programación HTML que son muy útiles para los desarrolladores web y que pueden dominarse fácilmente sin gastar demasiado tiempo y energía.
1. Puede interactuar con recursos de medios locales almacenados en caché
La API HTML5 FileSystem se consideró inicialmente como una alternativa a AppCache para implementar el almacenamiento en caché dinámico de activos. Pero, ¿sabía que realmente puede usarlo para interactuar con archivos almacenados en el dispositivo local del usuario?
Por ejemplo, puede agregar las siguientes funciones a su aplicación:
- Cargador de punto de interrupción: copie archivos a una caja de arena local y cárguelos en lotes. La operación de carga se puede reiniciar después de que se interrumpa la conexión o se bloquee el navegador.
- Habilite el almacenamiento en caché local para aplicaciones con uso intensivo de medios, como juegos, reproductores de música y editores de fotografías.
- Cree modos sin conexión para la visualización de contenido, como videos sin conexión, archivos adjuntos de correo electrónico y texto.
Nota : La API de FileSystem solo es compatible con Chrome.
Si desea probar la función de almacenamiento sin conexión, también puede consultar los siguientes recursos y tutoriales de código:
- Eric Bidelman: Cómo utilizar HTML5 FileSystem API [1].
- Administra el almacenamiento sin conexión HTML5 [2].
- Archivos sin conexión en HTML5: API FileSystem [3].
2. Realice la validación automática del formulario
Para la seguridad del sitio web y una experiencia de usuario fluida, la validación del formulario es muy importante. Por lo tanto, deberíamos facilitar que los usuarios ingresen varios tipos correctos de valores en su sitio web.
Hay varios tipos de entrada nuevos disponibles en HTML5, estos tipos se han empaquetado en funciones de validación predefinidas:
- 'Email'
- 'url'
- 'tel'
Pero cuando necesita que el usuario proporcione algunos datos que no están especificados por la entrada estándar (como un nombre de usuario que contiene caracteres especiales), a menudo ocurren problemas. Aquí es cuando el atributo "patrón" resulta útil.
El patrón le permite definir reglas personalizadas y luego usar expresiones regulares (RegEx) para validar la entrada del formulario. RegEx especifica la expresión que se comprobará para el valor del elemento <input>.
El siguiente es un ejemplo de cómo agregar una nueva regla. Por ejemplo, desea especificar que la contraseña no debe exceder los 15 caracteres y solo puede contener letras minúsculas:
<form action = "/ action_page.php">
Contraseña: <input type = "password" name = "pw" pattern = "[az]. {1,15,}">
<input type = "submit">
</ formulario>
Para ilustrar mejor las reglas, también puede agregar un mensaje personalizado para informar a los usuarios por qué la contraseña que ingresaron no cumple con los requisitos. Simplemente agregue otra línea para personalizar el mensaje emergente:
<form action = "/ action_page.php">
Contraseña: <input type = "password" name = "pw" pattern = "[az]. {1,15,}" title = "De uno a quince caracteres, solo en minúsculas" . >>
<input type = "enviar">
</form>
3. Cree abreviaturas para elementos de código HTML5
Emmet [4] es un complemento de editor de texto muy útil que puede simplificar su proceso de codificación HTML / CSS. Esta herramienta utiliza una sintaxis similar a los selectores CSS, lo que le permite crear varias abreviaturas para elementos de código HTML estándar.
A continuación se muestra un ejemplo. Si ingresa:
div # header> h1.logo> un {sitio web}
Recibirá:
<div id = "header"> <h1 class = "logo"> <a href=""> sitio web </a> </h1> </div>
Puede usar una variedad de combinaciones existentes en la hoja de referencia [5], o puede crear una combinación personalizada para cualquier etiqueta HTML y luego presionar Tab o Ctrl + E para agregarla al editor de texto.
4. Realice una mejor transmisión de video
Con la etiqueta de video, puede incrustar sin problemas reproductores multimedia que admitan la reproducción de video en páginas web.
tu puedes elegir:
- Utilice getUserMedia () o WebRTC para habilitar la transmisión en tiempo real desde la cámara.
- Utilice el atributo src para reproducir videos alojados localmente: <video src = "file.avi" />.
Además, debe especificar "controles" para el video (como reproducción, pausa y ajuste de volumen); de lo contrario, el usuario no tendrá ningún control disponible. El código de muestra aquí es el siguiente:
<video width = "768" height = "432" reproducción automática> <source src = "video.mp4" type = "video / mp4"> </video>
Para mejorar aún más la experiencia de visualización, también puede probar los siguientes atributos:
- disablePictureInPicture [6]: desactive el navegador para mostrar el menú contextual de imagen en imagen o solicitar automáticamente imagen en imagen.
- bucle : solicita al navegador que reproduzca automáticamente el video después del final de la reproducción.
- silenciado : silencia automáticamente el audio del video.
- 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 技巧和窍门，它们应该可以帮助你构建更快、更人性化和更有吸引力的网站。不过千万要记得，在开始实验之前先对你的网站进行备份！