• HTML5 mobile web adaptation (JS + REM)


    Business scenario: because the requirement is to adapt to the screens at both ends, the CSS I just wanted to write in rem, but there will still be cases where the font and layout will not be scaled in equal proportion. Later, I found a JS code to do scaling configuration for the root element. […]

  • HTML5 using window. PostMessage to achieve cross domain data interaction


    background In the H5 embedded in an app, the product hopes to set an area under the page to display the teaching page generated by the operation students through the activity building platform. The page is built and replaced by the operation students themselves. The product students hope that the content of the teaching page […]

  • HTML5 drag file upload example code


    Upload file HTML5 adds a new file API, which provides the possibility of local operation of files We can select file by file form or drag and drop operation, and read file name, size, type and modification time by JavaScript The input form of file type adds the files attribute to save the information of […]

  • Several ways to realize the bottom navigation bar by fixing the div of HTML5 mobile terminal to the bottom


    Demand: Need to fix the navigation at the bottom? You can only slide the contents, and the navigation menu is fixed. The results are as follows This article mainly explains three implementation schemes, including fixed, absolute, and CSS3 flex layout. The HTML structure is as follows: <div class=”box”> < div class = “roll” > scroll […]

  • HTML5 general interface


    1. Let’s talk about several basic types DOMString, boolean, long, unsigned long, double, NaN(Not-a-Number)。 Domstring is actually a string in other commonly used languages. In HTML5, it is used to represent URLs, DOM content, and so on. I don’t think I need to elaborate on other Boolean, long, unsigned long, and double numbers. You can […]

  • Summary of the latest HTML standard HTML5 (must see)


    HTML5 has been out for a long time. However, since I am not a front-end person, I only know that there is this thing. The specific concept is a bit vague (in fact, it is a series of standards and specifications); So last year, I made a brief summary of HTML5. Today, I just saw […]

  • HTML5 new tags all in one (recommended)


    The < article > tag defines external content (such as blog, news).      After use, it feels similar to P, semantic label. The < aside > tag defines content other than article (which can be used as the sidebar of an article)       Semantic tags. The < audio > tag defines music.                      Support three formats, Ogg, MP3, wav. Safari […]

  • On HTML 5 enhanced page elements


    On HTML 5 enhanced page elements XML/HTML CodeCopy content to clipboard <!DOCTYPE html>   <html>       <head>           <meta charset=“UTF-8”>           <title>On HTML 5 enhanced page elements</title>       </head>       <body>           <!– Figure and figcaptation: element combination with optional title — >           <figure>               <img src=“Img / QQ screenshot 20160103144626. PNG”  alt=“Picture”/>               <img src=“img/webp.jpg” alt=“Picture” width=“211” height=“191”/>               <figcaption>My picture portfolio</figcaption>           </figure><br />           <!– Detail and summary elements: used to indicate the […]

  • HTML5 canvas drawing rectangle and circle instance code


    HTML5 canvas drawing rectangle and circle instance code JavaScript CodeCopy content to clipboard <!DOCTYPE html>    <html>        <head>            <meta charset=“UTF-8”>            <title></title>        </head>        <body onload=“draw(),drawarc()”>    <! — drawing steps: get canvas element, get context, fill and draw border, set drawing style <! — to draw other complex graphics, you need to use paths: […]

  • A quick guide to drawing graphics by calling canvas API of HTML5


    1. Canvas elementThe following HTML code defines a canvas element. XML/HTML CodeCopy content to clipboard <!DOCTYPE html>   <html>   <head>       <title>Get started with canvas</title>       <meta charset=“utf-8”/>   </head>   <body>   <div>       <canvas id=“mainCanvas” width=“640” height=“480”></canvas>   </div>   </body>   </html>   Access the canvas element through the following JavaScript statement: JavaScript CodeCopy content to clipboard //DOM writing   window.onload = function () {        var canvas = document.getElementById(“mainCanvas”);        var context = canvas.getContext(“2d”);    };    //JQuery […]

  • Implementation of face recognition in vivo authentication based on HTML5


    In recent years, face recognition technology has been widely applied in the field of identity authentication, such as Alipay, China Merchants Bank’s withdrawal and pension collection, but it is still a problem that needs further solution in eliminating counterfeiting and authentication security, especially in mobile authentication technology. In this paper, we introduce the application of […]

  • Using PostMessage to transfer data between two web pages in HTML5


    It is estimated that few people know that there is one in HTML5 APIs window.postMessage API。 window.postMessage The function of is to allow programmers to send data information between two windows / frames across domains. Basically, it’s like cross domain Ajax, but instead of interacting between the browser and the server, it communicates between two […]