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

  • How to use header tags on mobile
    How to use header tags on mobile
    1.meta tag http-equiv attribute syntax format: ​ <meta http-equiv="expires" content="wed,20 Jun 2007 22:33:00 GMT"/> <!--expires period, which can be used for the expiration time of web pages. Once the web page expires, it must be retransmitted to the server--> 2.content-type (display character set settings) settings page
    H5 Tutorial 2161 2017-06-20 14:02:06
  • How to draw a path - line segments
    How to draw a path - line segments
    Some drawing methods in the Canvas drawing environment are immediate drawing methods, and some drawing methods are path-based. There are only two methods for drawing graphics immediately: strokeRect() and fillRect(). Although the strokezText() and fillText() methods are also drawn immediately, text is not considered a graphic. Path-based drawing system Most drawing systems, such as: SVG (Scalable Verctor Graphics, scalable vector graphics), Adobe Illustrator, etc.
    H5 Tutorial 2789 2017-06-20 14:00:45
  • Music player production example (html5)
    Music player production example (html5)
    related skill HTML5+CSS3 (to achieve page layout and dynamic effects) Iconfont (use vector icon library to add player related icons) LESS (dynamic CSS writing) jQuery (quickly write js scripts) gulp+webpack (automated build tool to compile and compress LESS, CSS, JS, etc. code) Implemented functions Playback is paused (click to switch playback status) Next song (switch to next song) Random play (automatically play the next song after the current song is played) Single loop (click
    H5 Tutorial 3729 2017-06-20 14:00:00
  • Some interesting new features in HTML5
    Some interesting new features in HTML5
    HTML5 is the biggest leap forward in web development standards in the past decade. HTML5 is not just used to represent Web content. It brings the Web into a mature application platform. On the HTML5 platform, video, audio, images, animations, and interactions with computers are standardized. This tutorial will teach you the new features in HTML5 and the use of each tag Some interesting new features in HTML5: canvas element for painting video and audio elements for media playback away from local
    H5 Tutorial 2135 2017-06-20 13:58:16
  • WeChat development practical sharing function
    WeChat development practical sharing function
    By understanding the requirements, it can be broken down into: (1) WeChat mobile phone users can use WeChat’s JSSDK. (2) Select the image and use "chooseImage" of JSSDK. Since the local address cannot be shared when sharing the image, "uploadImage" of JSSDK is also required. (3) Sharing to Moments requires "onMenuShareTimeline" of JSSDK. Taken together, business logic
    H5 Tutorial 2933 2017-06-20 13:57:28
  • Web storage--detailed introduction to webstorage
    Web storage--detailed introduction to webstorage
    web storage classification Client and server Understanding web storage With the development of web applications, client-side storage has more and more uses, but the ways to implement client-side storage are also becoming more and more diverse. The simplest and most compatible way is cookies, but there are still many disadvantages to storing cookies as a real client. At the same time, various browsers also have their own storage methods. For example, userData Behavior can be used in IE6 and above. In F
    H5 Tutorial 2143 2017-06-20 13:55:49
  • How to operate mobile page layout
    How to operate mobile page layout
    Things about mobile page layout http://www.xiaoxiangzi.com/Programme/CSS/4298.html 1. viewport what is viewport To put it simply, the viewport is the part of the browser that is used to display the web page. In other words, the actual width of the browser is different from the width of our mobile phone, whether the width of your mobile phone is 320px or 640px , the width inside the mobile browser will always be the vi of the browser itself
    H5 Tutorial 3136 2017-06-20 13:50:26
  • Introduction to HTML5 text style examples
    Introduction to HTML5 text style examples
    Text style <b>Bold</b> <i>Tilt</i> <u>Underline</u> <s>Strikethrough</s> <sub>Subscript</sub> <sup>Superscript</sup> <p>Paragraph element</p> <br/>Forced replacement
    H5 Tutorial 2104 2017-06-20 13:49:22
  • Example of canvas--clock animation
    Example of canvas--clock animation
    Usually when the company is not busy, I like to write about some small effects and so on. Firstly, I can review and review, and secondly, I can find some problems. ​ Today I saw a picture of a watch posted by someone else in the group. Damn it... I have been working properly for many years. Then I thought about doing my own thing. I didn’t think I would do more, so I drew a watch. .... ​ Go directly to the code: ​ html ​ <!DOCTYPE HTML> <html> <head&
    H5 Tutorial 1405 2017-06-20 13:43:20
  • How to use cookies
    How to use cookies
    Cookies are data stored on the user's local terminal. When we log in to the website, there are passwords recorded, and there are also time limits, such as 7 days, 5 days, etc. These are all written by us using cookies. This is the session cycle that uses cookies, but cookies are not secure at the same time. We can Open the web page and see the password entered by the user, and it depends on the server environment. When writing the cookie, you need to set the storage path, and the value we get is a string, and it is very small, only 4kb. Next we will encapsulate a
    H5 Tutorial 2700 2017-06-20 13:42:33
  • Examples of web responsive design (without media queries)
    Examples of web responsive design (without media queries)
    ​ (0)Written before: Telling about a case in an article I read on Zhihu, it opened my mind and admired me so much that I deliberately found the original article the next day to praise it. 5 yuan, original address https://zhuanlan.zhihu.com/p/27258076, the case uses a lot of CSS3 attributes. (1) Effect demonstration (2)Knowledge points and effects <div class="trunc-list-wrapper" id="mylist"> <
    H5 Tutorial 1490 2017-06-20 13:39:50
  • What is HTML5? Detailed explanation of HTML5 usage
    What is HTML5? Detailed explanation of HTML5 usage
    What is HTML5? HTML5 is a hypertext language, not a programming language. HTML5 is the latest version of the HTML language. You need to pay attention to browser compatibility issues. HTML5 technology generally refers to the combination of HTML5, CSS3, and JavaScript technologies. HTML5 is primarily responsible for the structure and meaning of document content. CSS3 is mainly responsible for describing the content style of the document. JavaScript is primarily responsible for the behavior of document content. The basic structure of HTML5. <!doctype html&
    H5 Tutorial 2477 2017-06-20 13:38:36
  • Implementation method of Html5 drag and drop
    Implementation method of Html5 drag and drop
    Today I will write about the drag and drop problem of html5. Setting elements can be dragged and dropped Set the draggable attribute of the element and set it to true. The element can then be dragged and dropped. (Note: Firefox does not support this) Drag element event ondragstart: triggered before dragging ondrag: triggered continuously during dragging &
    H5 Tutorial 1592 2017-06-20 13:33:58
  • Project practice: Medicine box APP
    Project practice: Medicine box APP
    It took me 10 days to write a small static project of the medical kit APP purely by hand, which has effects such as pull-up loading, left and right sliding, and pop-up layer fade-in and fade-out. It was mainly for practice. The following is part of the page rendering: I am using the mobile emulator of Google's developer tools. If you are interested, you can download it from the file item on my blog. There are still many areas that need to be optimized. Corrections are welcome!
    H5 Tutorial 1740 2017-06-20 11:05:09
  • How to use the HTML5 box model
    How to use the HTML5 box model
    Box model. The box consists of four parts: margin, border, padding, and content. margin: outer margin border: border padding: inner margin (distance between content and border) content: content <!DOCTYPE html><html> <head> <meta
    H5 Tutorial 7997 2017-06-20 10:46:27

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