current location:Home > Technical Articles > Web Front-end > H5 Tutorial

  • How to use vue-cli to build vue project and webpack?
    How to use vue-cli to build vue project and webpack?
    I have been using Vue for a long time, and I have done some projects, large and small. Recently, I want to summarize the knowledge points and come up with a Vue+webpack series. Let’s start with the project construction-vue-cli. Since it is Vue+webpack, I will not discuss it here. Let’s not go into details about git, the default environment is configured. The first step is to create a folder, here is apronew; the second step is to open git bash in the folder, and then type the command line npm install --global vue-cli to install vue-cl globally.
    H5 Tutorial 3052 2017-06-22 15:30:03
  • How to draw dotted lines using Canvas
    How to draw dotted lines using Canvas
    In the previous chapter, we mentioned that the drawing of linear paths mainly uses methods such as movoTo() and lineTo(). Of course, the Canvas 2D API also provides a dotted line drawing method, CanvasRenderingContext2D.setLineDash(); let’s take a look at the dotted line. Drawing method syntax ctx.setLineDash(segments); Parameter segments: an Array array. A set of descriptions for drawing line segments alternately
    H5 Tutorial 3753 2017-06-22 15:27:56
  • Front-end implementation of Lianliankan mini-game example code
    Front-end implementation of Lianliankan mini-game example code
    The blogger has been playing Lian Lian Kan for so long, and this is the first time he discovered that Lian Lian Kan can only have 2 turns at most. orz... I searched for Lianliankan's connection algorithm judgment on the Internet, but I didn't find a very comprehensive one. After exploring on my own, I drew the following picture (the picture is a bit ugly...) 1. Two objects on the same straight line can be directly connected. (This does not need to be explained) 2. Two objects are on the same straight line, with obstacles in the middle and cannot be directly connected (2 turns) [Loop through the intersection points in the yellow line, such as points A and B, and then determine whether the blue line has no obstacles
    H5 Tutorial 5604 2017-06-22 15:15:59
  • Use Vue to load on demand to improve user experience
    Use Vue to load on demand to improve user experience
    Vue official documentation asynchronous components: In large applications, we may need to split the application into multiple small modules and download them from the server on demand. To make things easier, Vue.js allows defining a component as a factory function that dynamically resolves the component's definition. Vue.js only triggers the factory function when the component needs to be rendered, and caches the results for subsequent re-rendering. Original image and text from http://www.cnblogs.com/Kummy/p/5254754.htmlvue Loading on demand related
    H5 Tutorial 2355 2017-06-22 15:14:48
  • How to achieve the slash header effect in a table
    How to achieve the slash header effect in a table
    Table, this thing must be familiar to everyone. We often encounter it in the code, so it is sometimes necessary to add a slash header to the table, but how to achieve this effect? I have summarized the following methods: 1. The simplest way Go directly to the company's UI, ask her to make a picture, put it here as a background picture, and then fill it up. Is not it simple! ! ! 2. Quite simple method In fact, friends who know CSS3, when they see this effect, the attribute transform instantly appears in their mind.
    H5 Tutorial 2442 2017-06-21 16:19:04
  • How to make a rotating 3D box with css3+javascript?
    How to make a rotating 3D box with css3+javascript?
    ​ Today I will write some CSS3, a 3D box written with 3D attributes, and combine it with JavaScript to make the box rotate with the mouse. Today I brought the new css3 attribute 3d <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/c
    H5 Tutorial 3570 2017-06-21 16:12:43
  • Share form operations and node operations in DOM
    Share form operations and node operations in DOM
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript">window.onload = function(){ var input = docu
    H5 Tutorial 1537 2017-06-21 16:10:12
  • Example of implementation method of ScrollView carousel chart in React Native
    Example of implementation method of ScrollView carousel chart in React Native
    1.index.Android.js   import React, { Component } from 'react';   import {     AppRegistry,     StyleShee
    H5 Tutorial 2805 2017-06-21 16:07:29
  • Examples of usage of CSS+HTML5
    Examples of usage of CSS+HTML5
    1.HTML5 basics Document type <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" Transitional: transition type Strict: strict type FrameSet: frame type <!DOCTYPE html
    H5 Tutorial 2425 2017-06-21 15:54:01
  • Introduction to how to use HTML5-canvas
    Introduction to how to use HTML5-canvas
    <canvas> new element The <canvas> element is used for drawing graphics, which is done through scripts (usually JavaScript). The <canvas> tag is just a graphics container, you have to use a script to draw the graphics. You can use Canva in a variety of ways to draw paths, boxes, circles, characters, and add images. ​ Note: By default, the <canvas> element has no borders or content.
    H5 Tutorial 1743 2017-06-21 15:52:14
  • Flexible box model: Cognition and use of flex box
    Flexible box model: Cognition and use of flex box
    Flexible box model layout plan Traditional layout solutions are mostly implemented using div+css+float+position+display, but with the introduction of the flexible box model in CSS3, there is another powerful option in the front-end layout solution. And because I have been studying small programs recently, I found that using flexible box layout in the middle is more effective and more efficient, so I compiled the relevant knowledge points of learning the flexible box model before and shared them with everyone. Introduction to flex layout of flexible box model Flexbox model (flexbox) is also called flexible layout.
    H5 Tutorial 1997 2017-06-21 15:48:15
  • What are the new tags in html5?
    What are the new tags in html5?
    html5 1. Statement HTML5: The core language of the World Wide Web and the fifth major revision of the HTML specification. HTML5 is the next version of the HTML standard. HTML5 simplifies a lot of subtle syntax, such as doctype declaration, you only need to write <!doctype html> 2. Semantic tags for layout Article: Tag loading displays an independent article content, such as an article, report, or novel. Section: tag defines a section in the document (
    H5 Tutorial 2043 2017-06-21 15:47:34
  • Experience writing a website using React
    Experience writing a website using React
    The website is a graduation project. The purpose of developing this website is mainly to record some notes and aggregate some information. It can also be regarded as a quiet place in the online world, where I can practice some technical ideas. The website's front-end was initially developed using Vue. Some time ago, the development progress of the project was no longer so urgent, so I had some free time. And I was still worried about not having used React before, so I just tried it using React.
    H5 Tutorial 3595 2017-06-21 15:24:41
  • Web Storage Overview and Local Database
    Web Storage Overview and Local Database
    Previous article: HTML5 Notes 2 - Detailed explanation of HTML5 audio/video tags Web Storage Overview In HTML5, in addition to the Canvas element, another very important new feature is the Web Storage function that can save data locally on the client. Previously, Cookies could be used on the client. Simple user information such as usernames are saved, but through long-term use, people have discovered that there are several problems with using Cookies to store permanent data. Size: Cookies are limited in size
    H5 Tutorial 1393 2017-06-21 15:24:03
  • What are the advantages and disadvantages of Bootstrap?
    What are the advantages and disadvantages of Bootstrap?
    What are the advantages and disadvantages of Bootstrap? Bootstrap is a front-end framework for rapid development of web applications and websites, based on HTML, CSS, and JavaScript. The advantages are: mobile devices first, support for mainstream browsers, easy to use, responsive design. Disadvantages: not supporting IE6, heavy use of classes that are not semantic enough, and websites developed using bootstrap are seriously homogenized. Bootstrap provides a responsive, mobile-first fluid grid system that changes with the screen or viewport (view
    H5 Tutorial 6686 2018-10-13 16:02:15

Tool Recommendations

jQuery enterprise message form contact code

jQuery enterprise message form contact code is a simple and practical enterprise message form and contact us introduction page code.
form button
2024-02-29

HTML5 MP3 music box playback effects

HTML5 MP3 music box playback special effect is an mp3 music player based on HTML5 css3 to create cute music box emoticons and click the switch button.

HTML5 cool particle animation navigation menu special effects

HTML5 cool particle animation navigation menu special effect is a special effect that changes color when the navigation menu is hovered by the mouse.
Menu navigation
2024-02-29

jQuery visual form drag and drop editing code

jQuery visual form drag and drop editing code is a visual form based on jQuery and bootstrap framework.
form button
2024-02-29

Organic fruit and vegetable supplier web template Bootstrap5

An organic fruit and vegetable supplier web template-Bootstrap5
Bootstrap template
2023-02-03

Bootstrap3 multifunctional data information background management responsive web page template-Novus

Bootstrap3 multifunctional data information background management responsive web page template-Novus
backend template
2023-02-02

Real estate resource service platform web page template Bootstrap5

Real estate resource service platform web page template Bootstrap5
Bootstrap template
2023-02-02

Simple resume information web template Bootstrap4

Simple resume information web template Bootstrap4
Bootstrap template
2023-02-02

Cute summer elements vector material (EPS PNG)

This is a cute summer element vector material, including the sun, sun hat, coconut tree, bikini, airplane, watermelon, ice cream, ice cream, cold drink, swimming ring, flip-flops, pineapple, conch, shell, starfish, crab, Lemons, sunscreen, sunglasses, etc., the materials are provided in EPS and PNG formats, including JPG previews.
PNG material
2024-05-09

Four red 2023 graduation badges vector material (AI EPS PNG)

This is a red 2023 graduation badge vector material, four in total, available in AI, EPS and PNG formats, including JPG preview.
PNG material
2024-02-29

Singing bird and cart filled with flowers design spring banner vector material (AI EPS)

This is a spring banner vector material designed with singing birds and a cart full of flowers. It is available in AI and EPS formats, including JPG preview.
banner picture
2024-02-29

Golden graduation cap vector material (EPS PNG)

This is a golden graduation cap vector material, available in EPS and PNG formats, including JPG preview.
PNG material
2024-02-27

Home Decor Cleaning and Repair Service Company Website Template

Home Decoration Cleaning and Maintenance Service Company Website Template is a website template download suitable for promotional websites that provide home decoration, cleaning, maintenance and other service organizations. Tip: This template calls the Google font library, and the page may open slowly.
Front-end template
2024-05-09

Fresh color personal resume guide page template

Fresh color matching personal job application resume guide page template is a personal job search resume work display guide page web template download suitable for fresh color matching style. Tip: This template calls the Google font library, and the page may open slowly.
Front-end template
2024-02-29

Designer Creative Job Resume Web Template

Designer Creative Job Resume Web Template is a downloadable web template for personal job resume display suitable for various designer positions. Tip: This template calls the Google font library, and the page may open slowly.
Front-end template
2024-02-28

Modern engineering construction company website template

The modern engineering and construction company website template is a downloadable website template suitable for promotion of the engineering and construction service industry. Tip: This template calls the Google font library, and the page may open slowly.
Front-end template
2024-02-28