HTML5 Technology Learning Summary

HTML5 Technology Learning Summary

Background:

HTML5 (H5) technology was "in full swing" as early as N years ago. Of course, its popularity is still not diminished. Today, especially when the mobile market is booming, many websites use H5 technology. In fact, H5 technology is used more or less in actual development. Especially for non-professional front-end developers like me who are "Half the road out of the house", many of the page effects are from duniang and google, and the compatibility will be used after the online dang simple test. I think this is what H5 team wants to achieve. "cultural penetration" and "gradual erosion" can avoid large-scale "rebound "!

In the past two days, I took the time to read "HTML5 + CSS3 from entry to mastery" (technical books, basically from entry to mastery, are really creative! Success !!), I don't know if I'm proficient or not, but I finally sorted out the knowledge chain systematically.

 

Let's talk about your feelings:

To learn H5, we don't need to pay too much attention to the details. Mr. Wu Liu's "No need to understand" attitude is very good. When we can think of it, we need to understand the source and do not need to expand our knowledge.

Secondly, the design starting point of H5 is from the practical perspective, that is to say, how convenient many features are. Therefore, we can focus on the technologies we are interested in, but we should not specifically use H5 during development. It can be used if it is useful and has good compatibility. If it is not used, we should not "draw a picture ", for example, the 163 mailbox can be used with the nav tag, but if you are not very proficient in H5 or do not need to refactor, do not change some things to H5, for example, WebWorker is specially used when writing JS, which is not good! Unless we clearly know that this is a function that basically supports H5 Browser design and development for mobile terminals.

Finally, H5 technology is not complex. It is never a new technology, but a continuation of HTML. I think H5 includes the following three points:

(1) improve and enhance the HTML attributes, which can be used on new pages.

(2) Enhanced JS interaction interfaces: WebWorker, WebStorage, Web DB, Offline Application, Geolocation, and Canvas. We can say that H5 and JS are upgraded to the previous layer, but be careful when using them!

(3) CSS3: improve and enhance the CSS function to make the page more effective and easier to develop, in particular, the modern Internet Web Design Concept of "mobile first" makes "responsive design" more simple and popular, and even introduces many frameworks, such as bootstrap.

 

Learning Method:

To learn Markup languages such as HTML, we need to start from four aspects:

(1) Syntax: that is, the format of writing is accepted and supported by Browser. The syntax of HTML technology is very simple. You only need to pay attention to some differences in the Case sensitivity in HTML, XHTML, and H5.

(2) element: that is, tag. This depends on experience and memory. It is good to use it without great solution. However, the difference between system learning and messy memory is that system learning classifies elements. This makes it easier to remember, compare, and use, so that we can minimize unnecessary error nesting. HTML tags are generally divided into document structure tags, text format tags, character format tags, list tags, link tags, table tags, and form tags, some labels are useless.

(3) attributes: Know what attributes are available for each type of tags. Generally, the learning method is to know what attributes are available and which labels do not support these attributes. In fact, many element attributes except name, id, class, and style are rarely used. CSS is used to replace the format attributes. This is also recommended by H5. Those attributes are discarded in H5, such as the background attribute.

(4) Others: learn more about the background, associated technologies, and in-depth technologies, such as XML and DTD, even Browser's page parsing and rendering processes, DOM Tree building, and Render Tree building processes help us learn and develop efficient pages. With more "out-of-class knowledge", we can naturally achieve the realm of "he is strong by him, and the breeze blows the hills.