Quickly master 10 HTML5 essential skills

HTML5 is very attractive for beginners and even non-programmers. In fact, whenever you visit a website, you will deal with HTML. If you are familiar with some key programming skills, you can save a lot of time (or even money) when you make some detailed adjustments to the website or optimize basic Web elements. Therefore, this article has selected 10 HTML programming skills that are very useful for Web developers, and they can be easily mastered without spending too much time and energy.

1. Can interact with local cached media resources

The HTML5 FileSystem API was initially considered as an alternative to AppCache to implement dynamic caching of assets. But did you know that you can actually use it to interact with files stored on the user's local device?

For example, you can add the following functions to your application:

  • Breakpoint uploader: Copy files to a local sandbox and upload them in batches. The upload operation can be restarted after the connection is interrupted or the browser crashes.
  • Enable local caching for media-intensive applications such as games, music players, and photo editors.
  • Create offline modes for content viewing, such as offline videos, email attachments, and text.

Note : The FileSystem API is only supported by Chrome.

If you want to try the offline storage function, you can also refer to the following resources and code tutorials:

  • Eric Bidelman: How to use HTML5 FileSystem API[1].
  • Manage HTML5 offline storage [2].
  • Offline files in HTML5: FileSystem API[3].

2. Perform automatic form validation

For website security and smooth user experience, form validation is very important. So we should make it easier for users to enter various correct types of values ​​on your website.

There are several new input types available in HTML5, these types have been packaged into predefined validation functions:

  • 'email'
  • 'url'
  • 'tel'

But when you need the user to provide some data that is not specified by the standard input (such as a user name that contains special characters), problems often occur. This is when the "pattern" attribute comes in handy.

Pattern allows you to define custom rules and then use regular expressions (RegEx) to validate form input. RegEx specifies the expression to be checked for the value of the <input> element.

The following is an example of adding a new rule. For example, you want to specify that the password should not exceed 15 characters and can only contain lowercase letters:

<form action="/action_page.php">
Password: <input type="password" name="pw" pattern="[a-z].{1,15,}">
<input type="submit">

To better illustrate the rules, you can also add a custom message to tell users why the password they entered does not meet the requirements. Just add another line to customize the pop-up message:

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

3. Create abbreviations for HTML5 code elements

Emmet[4] is a very useful text editor plugin that can simplify your HTML/CSS coding process. This tool uses a syntax similar to CSS selectors, allowing you to create various abbreviations for standard HTML code elements.

Below is an example. If you enter:


Will receive:

<div id="header"><h1 class="logo"><a href="">website</a></h1></div>

You can use a variety of existing combinations in cheat sheet[5], or you can create a custom combination for any HTML tag, and then press Tab or Ctrl + E to add it to the text editor.

4. Realize better video transmission

Using the video tag, you can seamlessly embed media players that support video playback into web pages.

you can choose:

  • Use getUserMedia() or WebRTC to enable real-time streaming from the camera.
  • Use the src attribute to play locally hosted videos: <video src="file.avi"/>.

In addition, you must specify "controls" for the video (such as play, pause, and volume adjustment), otherwise the user will not have any controls available. The sample code here is as follows:

<video width="768" height="432" autoplay><source src="video.mp4" type="video/mp4"></video>

To further improve the viewing experience, you can also try the following attributes:

  • disablePictureInPicture [6]: Disable the browser to display the context menu of picture-in-picture or automatically request picture-in-picture.
  • loop : prompt the browser to automatically replay the video after the end of the playback.
  • muted : Automatically mute the audio in the video.
  • poster:将自定义图像显示为视频缩略图。否则,浏览器将显示视频的第一帧作为缩略图。
  • preload:向浏览器指示哪些参数将带来最佳的用户体验。你可以将它设置为 none(无预加载要求);metadata:仅会预取视频元数据;auto:即使用户不希望观看整个视频,也要下载全部视频数据。注意:autoplay 属性的优先级高于此属性。

你可以在这个 HTML 速查表 [7] 中找到更多使用方便的多媒体文件标签。

5. 改善图像的显示方式



  • 样式:指定在各种条件下应如何显示媒体(例如,为较小的屏幕加载图像的较小版本)。这是创建响应式设计的关键一环。
  • 提升速度:根据用户的屏幕规格指定应加载的图像尺寸。
  • 浏览器支持:在各种类型的浏览器中提供不同的图像格式,以显示正确的内容。


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


  • <source>:指定媒体元素的媒体资源。
  • <img>:定义一个图像。


  • srcset(必需):使用它来定义图像的目标 URL。
  • media(类似于媒体查询):是一个条件,用户代理为每个<source>元素评估这个条件。
  • sizes:指定宽度描述符。
  • type:提供 MIME 类型定义。


6. 提升首屏页面的加载速度


但是,要在 Google Page Insights 中拿到高分并不是那么容易。虽然这一工具的确会标出你的网站上应该修复的内容,但是对于从头开始对网站进行编码的人们并没有提供明确的优化指导。

谷歌对于首屏设计的官方建议 [8] 有些含糊不清:

  • 调整你的 HTML 结构,以首先加载关键的首屏内容。
  • 减少你的资源使用的数据量。


  • 确保你的 CSS 是内联的。
  • 尽量减少、合并和消除不必要的外部 CSS 文件。
  • 自动减少阻碍渲染的 CSS 数据。
  • 使用 CSS 媒体类型和媒体查询,将某些 CSS 资源指定为非渲染阻碍类型 [9]。
  • 将<content>部分放在<sidebar>之前。
  • 推迟加载 JavaScript。
  • 生成可嵌入的字体数据以加快字体加载速度,并选择 web 安全的字体 [10]。


7. 网站加速

只要将 .zip 文件而不是 index.html 文件发送给浏览器,就可以节省大量带宽和下载时间。

快速掌握 10 个 HTML5 必备技巧

图片来自 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. 编写有编号项目的降序列表



<ol reversed><li>Ready</li><li>Set</li><li>Go!</li></ol>



现在你应该掌握了这 10 个新的 HTML5 技巧和窍门,它们应该可以帮助你构建更快、更人性化和更有吸引力的网站。不过千万要记得,在开始实验之前先对你的网站进行备份!

Guess you like

Origin blog.51cto.com/15128443/2676908