Web Front-end development Summary (unfinished) and web Front-end development Summary

Web Front-end development Summary (unfinished) and web Front-end development Summary

Because I am not familiar with front-end development, I will do some homework myself. So I have summarized the knowledge that the front-end can use, but the summary is not comprehensive, it will be improved in the future!

Mobile front-end development BASICS (conclusion-to be improved)
1. Mobile front-end development: in short, it refers to applications developed by mobile devices. Android and iPhone are mainstream systems in the current era. Since the release of these two mobile phone operating systems, webapps (applications running in the form of WEB, and mobile terminal devices running on high end) are becoming popular.
1> we all know that there are two types of applications in the high-end smartphone system: one is an APP running based on the local operating system, that is, nativeapp, the other is an APP running on a high-end browser, that is, webapp. First, let's take a look at the differences between webapp and nativeapp:
@, Nativeapp (based on locally running apps)
01. The development cost is very high (it generally uses java, c ++, and other large development software ).
02. The update experience is poor, and it is also troublesome (packaging is required when a new version is released, which wastes a lot of time and effort and requires manual updates, this is one of the reasons for poor user experience)
03. Apart from its shortcomings, nativeapp has some advantages, such as: It is very cool (because nativeapp can call the UI control method in IOS, so as to achieve some cool interaction effects that some webapps cannot achieve)
04. nativeapp is recognized by apple (nativeapp is a trusted independent software recognized by apple and can be sold on the Apple Store, but webapp is not)
@, Webapp (an app running on a browser based on a high-end server)
01. Low development costs (web development technology can be used to easily develop web apps)
02. The upgrade is relatively simple (users do not need to be notified about the upgrade. You can update the file on the server port)
03. Easy Maintenance (just like the general web, maintenance is simple. It is actually a site ,)
To put it bluntly, webapp is a web site optimized for Android and Iphone systems. It uses html5, css3, javascript, server-side JAVA, PHP, and ASP technologies.

2> after learning about nativeapp and webapp, HTML5 and css3 are the key to our learning. First, let's take a look at html5!
@. For front-end developers, it is recommended to use html5 to compile webapps, so as to discard html4 or other earlier versions, because html5 can implement some web applications that cannot be implemented by html4, it can reduce the workload of developers and the need for external plug-ins (such as Flash ); before that, you must be familiar with some new tag applications in html5;
New label: canvas label used for painting
Video and audio tags used for media playback
New special content elements, such as article, footer, header, nav, section
New Form controls, such as calendar, date, time, email, and search
For example, define the content area of some articles. We recommend that you use the section label;
You can use the nav label when defining some navigation bars and tabs;
You can use the footer label when defining the bottom navigation and bottom sections;
When defining the Content header, you can use the header label;

@. In the use of css3, there are many attributes worth learning, so I will list several common attributes;
For example, in the compilation of css3, we try to discard the float attribute and directly use the display: block (block elements are converted to intra-row elements );
In css3, we also applied the animation attribute;
Animation-name ------ animation name;
Animation-duration ----- the time (in seconds or milliseconds) the animation takes to complete a cycle. The default value is 0 );
The text-shadow attribute adds a shadow to beautify the text;
Because some rounded corner buttons have high-gloss and inner-glow effects, such effects cannot be written in css3, however, we can use-webkit-border-image to define its style.
Some pages require that we use an Adaptive Layout to arrange the layout. Therefore, we generally recommend that you do not define the width of the page to die. You can arrange the layout by percentage, alternatively, you can use em instead of px to adapt to ipad, iPod, iphone, Android, web safarik, and chorme. In this way, you do not need to consider screen resolutions.

3> as a front-end developer and wants to develop their own applications on the mobile terminal, you must have a certain understanding of the WebKit kernel browser, therefore, it has its own skills. I also summarized the following points, which are common at ordinary times:
A. viewport
Definition: compared with the browser, it is literally defined as a visual window, visible area, but for general browsers we should know what it is? That is, the area of the webpage that we can see except all the toolbar, Status Bar, and scroll bar;
Compared with mobile devices, because the screen width of a mobile device is different from that of a traditional web device, we must change the viewport to implement it. Therefore, the viewport operation has the following attributes:
@, Width ------ the width of viewport (its screen range is between 220px-20.px, and the default width is 980px ).
@, Heigth ------ viewport height (its screen range is between 223px-10000 ).
@, Minium-scale ----- This refers to the minimum scale allowed by the user to scale the screen.
@, Maxium-scale ----- This refers to the maximum scale allowed by the user to the screen.
@, User-scalable ------ indicates whether the user can manually scale the screen (it usually has two values: yes/on ).
B. when learning and understanding mobile terminals, event learning is essential and plays a major role in APP implementation; it contains many events, so I will list some of our common and used events for understanding and learning.
A gesture event (literally, it refers to the event that occurs when your fingers touch the screen) includes the following events:
@, Touchstart ------ events that start when your fingers touch the screen
@, Touchmove ----- the event that begins to move when the finger touches the screen
@, Touchend ------- events triggered when the finger leaves the screen
B. Touch events (that is, literally, they are similar to gesture events, and are also triggered by the touch of fingers to the screen)
@, Gestureshart ---- events triggered when two fingers reach the screen
@, Gesturechange ---- events triggered when two fingers touch the screen and start to move
@, Gestureend ----- events triggered when two fingers exit the screen
C. Screen rotation events (literally, the events triggered when the screen is rotated, whether its status has changed, I .e. left-handed, right-handed, or unrotated. First, we must first make a judgment: During the judgment process, we applied the switch loop statement; finally, remember to add the listening event (addEventListener ).
D. touch events: When you understand the above events, touch events are relatively easy to understand. They are generally targeted at the width and height of the view, this includes the following attributes:
@, ClientX, and clientY are the X/Y coordinates of the current window.
@, ScreenX, and screenY correspond to the X/Y coordinates of the current screen.
@, The X/Y coordinates of pageX and pageY relative to the parent Element
There are still a lot of skills and attributes worth learning and understanding about webapp. What I have summarized is only a small part of webapp.

The summary may not be detailed, but I will continue to cheer up! Hey!