current location：Home > Technical Articles > Web Front-end > H5 Tutorial
- Direction：
- All web3.0 Backend Development Web Front-end Database Operation and Maintenance Development Tools PHP Framework Daily Programming WeChat Applet Common Problem Other Tech CMS Tutorial Java System Tutorial Computer Tutorials Hardware Tutorial Mobile Tutorial Software Tutorial Mobile Game Tutorial
- Classify：
-
- Recommended articles about swinging
- This is another 3D animation masterpiece based on HTML5 Canvas. It is a 3D clothes swing animation special effect that can flutter in the wind, which is very realistic. When we slide the mouse over the clothes, the clothes will have a swinging animation. When we click the mouse, the clothes will swing more violently. Online demo source code download HTML code<p style="width:500px;margin:10px auto"> <canvas id=&q...
- H5 Tutorial 1450 2017-06-15 10:46:00
-
- 4 recommended courses on change
- In the previous section, we talked about color and pixels. In fact, in most cases, we do not need pixel-level operations. We only need to set the overall color. 1. Basic colors Learn while playing in HTML5 (2) - In basic drawing, we mentioned that there are two contextual attributes that can be used to set colors: strokeStyle determines the color of the line you currently want to draw, and fillStyle determines the color you currently want to draw. The color value of the filled area can be a valid string that conforms to the CSS3 color value standard. Down...
- H5 Tutorial 1636 2017-06-15 10:45:18
-
- Recommended content related to native drag and drop
- Dragable attribute Before, we have introduced several relevant knowledge about native drag and drop in HTML5. Today I will introduce to you some other small things in HTML5 drag and drop. Without further ado, let’s take a look together. By default, links, text, and images are draggable, so you don’t need to write code to drag them. If you want other element tags to be draggable, then only HTML5 can do it. HTML5 specifies the dragable attribute for all HTML elements, indicating whether the element can be dragged. In tags for links and images...
- H5 Tutorial 1403 2017-06-15 10:33:35
-
- Recommended 10 cross-document special effects (collection)
- HTML5 supports cross-document messaging (Cross-Document Messaging). Since message communication is used, events must occur. According to the generation and consumption of events, we can find the sender and receiver, that is, Sender and Listener. Litener needs to do the following work: write a message processing function; register the message processing function: addEventListener('message', function, fal...
- H5 Tutorial 1493 2017-06-15 10:30:56
-
- DOM object introductory tutorial: 10 recommended zero-based introductory tutorials on DOM objects
- <canvas></canvas> is just a container for drawing graphics. In addition to attributes such as id, class, and style, it also has height and width attributes. There are three main steps for drawing on the <canvas>> element: 1. Get the DOM object corresponding to the <canvas> element, which is a Canvas object; 2. Call the getContext() method of the Canvas object to get a CanvasRenderingC...
- H5 Tutorial 5381 2017-06-15 10:15:36
-
- 10 recommended courses on definition lists
- There are many basic tags in HTML5. Today we will introduce list tags. List tags can arrange text elements in the form of a list in a web page. There are three types of list tags: ordered list, unordered list, and custom list like: <ul type =a>
- H5 Tutorial 1416 2017-06-15 10:14:37
-
- 10 recommended articles about local preview
- This article mainly introduces JS+HTML5 to realize the preview effect of uploaded images. It analyzes the specific operation steps and related implementation techniques of local preview of javascript uploaded images in the form of a complete example. Friends in need can refer to the following examples of this article to describe the implementation of uploading with JS+HTML5. Picture preview effect. I share it with you for your reference. The details are as follows: In the project, I encountered a file upload with the input tag file type, and I wanted to preview the image before uploading. A previous solution was to upload the file first and then return the address. Displayed on the page,...
- H5 Tutorial 2190 2017-06-15 10:05:00
-
- An example tutorial on media elements
- The video tag in HTML5 and its effect of imitating a video player are widely used in some mobile phones. Because the mobile version has basically abolished the dictatorship of flash and allowed HTML5 to be the master, it has better support for videos. So today I will give you a small example of HTML5 video tag simulating a video player, so that you can better understand HTML5 and its effective application in projects. HTML code<!--Put the local ogv audio in src --><video&nb...
- H5 Tutorial 1507 2017-06-15 09:48:28
-
- 10 recommended articles about page access speed
- Original title: Google's AMP - Accelerating Mobile Pages. The author Zac gave a speech at the 6th SEO Ranking last week and shared some of the latest developments in the international SEO industry. One of the contents is Google’s AMP project, which I will also talk about here. AMP, Accelerated Mobile Pages, roughly translates to "accelerated mobile pages". It is a technology launched by Google in October last year to improve the access speed of mobile pages. The specific technical details can be seen on the official website of the project. There is a simple Chinese...
- H5 Tutorial 1448 2017-06-15 09:34:56
-
- 8 recommended articles about header definitions
- 1. Define the global header. This header is the default header for all panels. You need to add a header tag inside <p id="afui">, that is, at the same level as <p id="content"> , and the id must be header. For example: <!DOCTYPE html> <html>&
- H5 Tutorial 1634 2017-06-15 09:16:35
-
- Recommend 5 Canvas.toDataURL special effects (collection)
- Problem background: I encountered a requirement to take screenshots of the played video. The video is played using the video tag, and then the real-time frame picture is captured when the video playback area is clicked. The code is very simple as follows: var video = document.getElementById('video'); var canvas = doc..
- H5 Tutorial 1539 2017-06-15 09:16:00
-
- 10 recommended articles about home appliances
- HTML5 has subverted the pattern of PC Internet and optimized the mobile Internet experience. In the next few years, HTML5 will subvert the native App world. Cross-platform: In the multi-screen era, the pain index of developers is very high, and everyone hopes that HTML5 can play the role of savior. Multiple sets of codes, different technical types of work, and business logic synchronization are a torturous process. It's a bit similar to the early world of personal computers. At that time, each computer had its own operating system and programming language, and developers were tired of making different versions. In fact, the popularity of DOS was largely due to the fact that developers really didn't have the energy...
- H5 Tutorial 1944 2017-06-14 17:10:44
-
- 10 recommended articles on cross-domain communication
- HTML5 provides the function of receiving and sending information between web documents. Using this function, as long as the instance of the window object where the web page is located is obtained, not only web web pages of the same origin (domain + port number) can communicate with each other, but even cross-domain communication can be achieved. Browser support: IE8+, firefox4+, chrome8+ opera10+1. First of all, if you want to receive messages from other windows, you must monitor the message event of the window object, as follows: window.addEv...
- H5 Tutorial 1629 2017-06-14 17:06:05
-
- 6 recommended articles about window.postMessage
- This article mainly introduces the detailed explanation of HTML5 window.postMessage and cross-domain, which is of great practical value. Friends who need it can refer to it. In the previous article, we talked about the browser same-origin policy, which prevents pages from different domains from accessing each other. methods and attributes, and elaborates on the solutions proposed to solve the cross-domain problem of the same-origin policy: subdomain proxy, JSONP, CORS. This article will elaborate on HTML5 window.postMessage. With the help of postMessage API, documents can be connected in a safe and controllable way...
- H5 Tutorial 1549 2017-06-14 15:56:46
-
- 6 recommended articles about game development
- In the first two articles, the development of RPG has realized adding maps and adding game characters. This article will realize the scroll scrolling of the map and the realization of character dialogue. The effect is as follows. Regarding the scrolling principle of the map, you can refer to the figure below and follow the instructions in the figure above. , to achieve map scrolling, you only need to draw the upcoming map (the yellow part in the picture) first, and then scroll the map. After the map is scrolled, remove the part outside the screen (the green part in the picture). First, add a Variables to control whether the map scrolls//Map scrolling var mapmove = ...
- H5 Tutorial 1945 2017-06-14 14:20:07
Recommended Articles
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.
Player special effects
2024-02-29
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
