Page 95-H5 Tutorial Programming Tutorials: Learn H5 Tutorial Online-php.cn

Article Tags

H5 Tutorial

Home

Technical articles

Web Front-end

H5 Tutorial

HTML5 practice-code sharing for flexible video using CSS

When I was coding the Elemin Theme (a responsive site I recently designed), one of the frame skipping problems I encountered was how to make the embedded video more flexible with size changes. Using max-width:100% and height:auto can make the HTML5 video tag work well, but this solution does not work for iframe or object tag inline code. After hours of searching and experimenting, I finally found the solution. This css trick comes in handy when you are doing responsive design. You can visit the final demo address and zoom your browser to see the effect.

Mar 23, 2017 pm 03:26 PM

HTML5，CSS，弹性视频

HTML5 practice-detailed introduction to three-step implementation of responsive design

Responsive web design is not a difficult task now. If you are not familiar with it yet, and if you are a beginner, responsive design may be a bit complicated for you, but in fact it is much simpler than you think. In order to help you learn responsive design faster, I specially wrote this tutorial. In three simple steps, you can master the basic logic and media queries of responsive design (assuming you have knowledge of CSS).

Mar 23, 2017 pm 03:12 PM

HTML5，响应式设计

HTML5 practice-detailed explanation of how to complete Google graffiti animation using css3

One thing that needs to be emphasized here is that IE does not support the animation properties of CSS3. I once again complain about the evil IE. But we cannot use this as a reason not to embrace css3.

Mar 22, 2017 pm 04:22 PM

HTML5，css3，google涂鸦

HTML5 practice-detailed code explanation of using css to create triangles and using CSS3 to create 3d tetrahedrons

The first thing I want to share with you is how to use div+css to create a triangle. Here I will paste the relevant code first, and then explain the principle to you.

Mar 22, 2017 pm 04:19 PM

HTML5，css，CSS3

HTML5 practice - sample code for using css3 to enrich image styles

In CSS3, if box-shadow and border-radius are used directly on images, the browser cannot render them well. But if you use the image as a background-image, the added style browser can render it well. I will introduce how to use box-shadow, border-radius and transition to create different image style effects.

Mar 22, 2017 pm 04:15 PM

HTML5，css3，图片样式

HTML5 Guide (4) - Detailed explanation of using Geolocation

What we are going to learn today is to use Geolocation to implement positioning functions. We can obtain the Geolocation object through navigator.geolocation, which provides the following methods:

Mar 22, 2017 pm 04:09 PM

html5，Geolocation

HTML5 Guide (3)-Implementing drag-and-drop function

The content of this article is about how to implement the drag and drop function of html elements in html5. Before html5, to implement drag and drop, you needed to use js. Now html5 supports the drag and drop function internally, but to implement slightly more complex functions, the help of js is still indispensable. Let's look at a few examples below.

Mar 22, 2017 pm 04:05 PM

html5，拖拽功能

HTML5 Guide (2) - Detailed introduction to operating Document metadata

The compatMode attribute tells you how the browser handles the current document. There is so much non-standard HTML out there that browsers will try to display these pages even though they don't conform to the HTML specification. Some content relies on unique features that existed during the early days of the browser wars, and these properties are not spec-compliant. compatMode will return one or two values, as follows:

Mar 22, 2017 pm 04:01 PM

html5，Document ，metadata

HTML5 Canvas implements code sharing for the backgammon game (pictures and text)

Because I have used GDI+ in WinForm in C# and the Java graphics package to make backgammon before, I am familiar with this logical idea. However, recently I wanted to review the canvas drawing function of HTML5 (companies generally do not use these), so I made a backgammon. Of course, I didn’t Referring to the previous client code, we only use the previous winning and losing judgment algorithm and computer AI (network borrowing) algorithm. Of course, there are a lot of backgammon made by html5 and Baidu, but it is always a good thing to implement one side by yourself. Okay, no nonsense. Without further ado, let’s get to the point. ^_^

Mar 22, 2017 pm 03:43 PM

HTML5 ，Canvas，五子棋游戏

Detailed explanation of sample code sharing using HTML5+css3 to achieve running hearts and dynamic water drop effects

When I write this blog, I don’t want to talk about the difference between html5 and html4. I think many people have already done this work. I just demo it here based on my own hobbies and project needs.

Mar 22, 2017 pm 03:33 PM

html5，css3，动态水滴

Detailed analysis of the use of HTML5 FormData object

XMLHttpRequest Level 2 adds a new interface - FormData. Using the FormData object, we can use some key-value pairs to simulate a series of form controls through JavaScript. We can also use the send() method of XMLHttpRequest to submit the form asynchronously. Compared with ordinary Ajax, the biggest advantage of using FormData is that we can upload binary files asynchronously.

Mar 22, 2017 pm 03:29 PM

HTML5 ，FormData

Implement a simple particle engine code example using HTML5 canvas

Well, calling it a "particle engine" is just a big boast and a bit of a title, and it's still a bit far from a real particle engine. Without further ado, let’s watch the demo first. This article will teach you how to make a simple canvas particle maker (hereinafter referred to as the engine).

Mar 22, 2017 pm 03:26 PM

HTML5 ，canvas，粒子引擎

Sample code sharing for HTML5+NodeJs to implement WebSocket instant messaging

I have been learning HTML5 recently and making canvas games. I found that in addition to canvas, a powerful tool in HTML5, there is also WebSocket, which is also worth noting. It can be used to make dual-screen interactive games. What is a dual-screen interactive game? It is to control PC web games through mobile devices. In this case, real-time communication will be used, and WebSocket is undoubtedly the most suitable. WebSocket has many advantages over HTTP. The main reason is that WebSocket only establishes a TCP connection and can actively push data to the client. It also has lighter protocol headers to reduce the amount of data transmission. Therefore, WebSocket is the best solution for real-time communication for the time being.

Mar 22, 2017 pm 03:23 PM

HTML5，NodeJs，WebSocket