• HTML5 preview local pictures


    Problem descriptionSuppose we have a picture upload control in HTML: Copy code The code is as follows: <input type=”file” name=”image” accept=”image/*” /> Note that this accept = “image / *” is very important. It specifies that the uploaded image will be related to the pop-up window selection type of the system at the mobile terminal. […]

  • Simply sort out the basic features and syntax of HTML5


    HTML5 overviewHTML5 is the next important version of HTML standard, which is used to replace HTML 4.01, XHTML 1.0 and XHTML 1.1. HTML5 is also a standard for building and presenting content on the world wide web. HTML5 is a collaboration between the World Wide Web Consortium (W3C) and the web Hypertext Technology Working Group […]

  • Comprehensive analysis of standard attributes and custom attributes in HTML5


    As explained in the HTML5 syntax, an element can contain attributes and set various properties for an element. Some attributes are defined as global and can be used on any element, while others are defined as element specific. All properties have a name and a value, which looks like the following example. The following is […]

  • HTML5 digital input accepts only integer implementation code


    I have seen many articles and posts about this in the past two years, which is really a very convenient thing. However, too many implementations still have loopholes, incomplete implementations, and so on. The overall concept is reasonable: use HTML 5 attributes to limit the content that can be sent to the server, and then […]

  • HTML + CSS to realize the special effects of image scanner


    This article mainly introduces the HTML CSS image scanner and shares it with you as follows: effect: In this way, there are jitters: Jitter free: realization: 1. Define a box: <body> <div class=”tu”></div> </body> 2. Basic style, length and width background drawing, etc~ .tu{ width: 500px; height: 300px; background-image: url(8.jpg); background-size: 100% auto; background-repeat: no-repeat; […]

  • HTML5 implementation of drag and drop mobile floating icon example code


    There are often such requirements on H5: You need to add a floating icon on the page, which is roughly the final implementation as shown in the figure below But often according to the design draft, it will not cover the main area, but in fact, sometimes it will cover the main area, but in […]

  • Sample code of how to share screenshots in front-end HTML5


    preface This article mainly introduces how to share screenshots using canvas,At first, I thought it was not difficult to share pictures through canvas painting, but in fact, I still encountered a lot of holes during developmentFor example:① The background of the picture is transparent② Share pictures only text, no pictures③ Picture cross domain problemHere is […]

  • Use canvas to achieve snowflake floating effect example code


    Today we use canvas to achieve the effect of snowflakes falling ❄️ 1、 What is canvas? HTML5 < canvas > elements are used for drawing graphics and are completed by scripts (usually JavaScript) The < canvas > tag is just a graphics container, and you must use a script to draw graphics. You can use […]

  • Using HTML + CSS to realize the slow drop-down effect of menu bar


    Objective: use HTML + CSS to realize the effect that the menu bar will appear slowly when the mouse moves to the menu bar We can solve this problem in two ways Method 1: Transition Turn on forum-1Absolute positioning(absolute), let the insideliBreak away from its parent element, otherwise it will squeeze the subsequent content to […]

  • Play m4a audio file on HTML5 page


    Business scenario: The recording is recorded on the app side of the mobile phone, and then uploaded to the background server. The front end obtains the recording from the background server and plays it on the web page of the PC side. Practical problems: First of all, the app recording file defaults to m4a format. […]

  • Sample code of 3D navigation bar using HTML + CSS + transform


    3D is the abbreviation of three-dimensional, which is three-dimensional graphics. Display 3D graphics in the computer, that is, display 3D graphics in the plane. Unlike the real world, the real three-dimensional space has a real distance space. The computer just looks like the real world, so the 3D graphics displayed on the computer look like […]

  • Implementation example of adding watermark mask layer to native HTML


    design sketch code <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> < title > watermark mask < / Title > </head> <style> .watermark_mask { position: fixed; top: 10px; } .hello { width: 500px; height: 2048px; margin: 0 auto; background-color: pink; } </style> <body> <div class=”hello”> Hello World <div style=”margin-top: […]