In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
How to build a more clear HTML5 structure, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.
Preface
Like a revolution, HTML 5 is going on vigorously in the post-Web2.0 era.
There is no need for me to repeat what HTML 5 is. As far as I understand it, the innovation of HTML 5 can be summarized as clear semantic label system, rich media support that simplifies complexity, magical local data storage technology, rich animation (canvas) without plug-ins, and powerful API support. In short, HTML 5 makes human-computer interaction and human-network interaction more comfortable and user-friendly. The lack of support for rich media applications and this storage in the past is no longer a real pain for browsers. The original intention of the HTML 5 revolution is to push Web from a content platform to a standardized application platform and unify the standards of each platform camp.
In this article, I will elaborate on one of the innovations of HTML 5: a more clear and concise semantic structure.
Start with "head"
A standard XHTML header code would look like this:
The code is as follows:
Can you remember that? Will you learn by rote? Of course not! We just need to copy and paste mechanically.
Let's take a look at what a standard HTML 5 header looks like:
The code is as follows:
There is no need for me to say whether it is complicated or simple. Yes, the head of HTML 5 can be so simple and easy to remember! Also, you can ignore case, quotation marks, and the backslash before the last angle bracket.
Why can it be so loose? In fact, if you send XHTML as text/html, the browser can parse very well, and the browser doesn't care about the syntax of the code. Therefore, HTML 5 is metaphysical and may break some of the original standards, but it still performs well in browsers.
Of course, for the convenience of team assistance and follow-up maintenance, we should unify a style that you like, such as:
The code is as follows:
...
...
In addition, HTML 5 is not currently supported by all browsers, but this header that can save more than 100 bytes (for sites with a daily PV level of more than 1 million, it can save a lot of traffic) is perfectly compatible. If you have any research on browser parsing mode, you should know that pages trigger weird patterns without defining doctype, and as long as you define a browser, you can parse pages in standard mode without specifying a certain type of DTD.
A new semantic labeling system
Semantic coding is a necessary skill for a qualified front-end Developer, but with the increasing enrichment of web pages, it is obviously not enough to use the original xhtml tags to de-semantic. God said, "Let there be light!" Then there is light. As a result, HTML 5 provides a series of new tags and corresponding attributes to reflect the typical semantics of modern websites. Truth comes from practice. Let's write an example:
The code is as follows:
Website title
Subtitle of the website
HTML 5
CSS
JavaScript
This is an article about the new structural tags in HTML 5.
This is also an article about the new structural tags in HTML 5.
A brief introduction to the author
Mr.Think, an ordinary person who specializes in Web front-end technology.
The bottom of the page
Above is a simple blog page part HTML, which consists of the header, the article display area, the right column, and the bottom. It is neatly coded and conforms to the semantics of XHTML, which works well even in HTML 5. But for the browser, this is a piece of code that does not distinguish between weights, rather than a tag that allows the machine to read semantics to define the corresponding block. For example, standard browsers (such as Firefox, Chroome, and even the new version of IE) have a shortcut to direct customers to the navigation of the page, but the problem is that all blocks are defined in DIV, and the ID value of DIV is set with the developer, so the browser does not know which block should be the navigation link. The emergence of the new HTML 5 tag makes up for this deficiency. So, the above code, replaced by HTML 5, can be written like this:
The code is as follows:
Website title
Subtitle of the website
HTML 5
CSS
JavaScript
This is an article about the new structural tags in HTML 5.
This is also an article about the new structural tags in HTML 5.
A brief introduction to the author
Mr.Think, an ordinary person who specializes in Web front-end technology.
Bottom of the page
It turns out that the page structure of HTML can be so beautiful that it can be understood at a glance without comments. For browsers, finding the corresponding block is no longer at a loss.
How to use HTML 5 new tags for structured elements
From the above example, we learned about the structural innovation of HTML 5's new tags, but how to use them appropriately when switching to practical use? I think this is also a question that many HTML 5 learners want to ask. Like XHTML semantics, the use of HTML 5 semantic tags should be followed: each tag has its own specific meaning, and semantics allows us to use the right tag in the right place to better make people and machines clear at a glance (machines can be understood as browsers as search engines). For example, the header tag is generally the first block element of the page (the header tag can also be used in the header element of the type, such as the title of the article block), which contains the subject information of the page; the nav tag is generally used to wrap navigation information; footer is generally used to wrap information at the bottom of the page; and so on.
The following are the semantic explanations and guidelines for the new tags commonly used in structural classes listed in the HTML 5 manual:
Label
Manual interpretation: defines the header for section or document.
Instructions: generally used to include page headers, and can also be used for other regional headers, such as article headers:
The code is as follows:
Website title
Subtitle of the website
Label
Manual interpretation: used to combine the titles of a web page or section (section).
Usage guidelines: for combinations of title classes, such as the title and subtitle of an article:
The code is as follows:
This is an article that introduces HTML 5 structural tags.
Innovation of HTML 5
Label
Manual interpretation: the section that defines navigation links.
Guidelines: used to define the navigation section of the page:
The code is as follows:
HTML 5
CSS
JavaScript
Label
Define something other than article. The content of aside should be related to the content of article.
Guidelines: for section content, a new section is started in the document stream, which is generally used in the sidebar related to the content of the article:
The code is as follows:
A brief introduction to the author
Mr.Think, an ordinary person who specializes in Web front-end technology.
Label
Manual interpretation: define sections in the document (section). Such as chapters, headers, footers, or other parts of the document.
Guidelines: for section content, a new section will be started in the document stream:
The code is as follows:
What is section?
A new chapter
About section
Introduction of section
...
Label
Manual interpretation: define the footer of section or document. Typically, it contains the name of the creator, the date the document was created, and / or contact information.
Instructions: it is generally used to wrap the general bottom of the entire page, and can also be used at the bottom of other areas, such as the bottom of article:
The code is as follows:
COPYRIGHT@Mr.Think
Label
Manual interpretation: define external content. For example, a new article from an external news provider, or text from blog, or an article from a forum
Ben. Or from other external sources.
Usage guidelines: as the name implies, it is generally used in the article block:
The code is as follows:
This is an article that introduces HTML 5 structural tags.
Innovation of HTML 5
2011.03.20
Details of the article
Label
Manual interpretation: used to combine elements.
Usage guidelines: mostly used for the combination of pictures and picture descriptions:
The code is as follows:
Here is the description of the picture.
Label
Manual interpretation: define a menu list. Use this label when you want to list form controls.
Usage guidelines: used in menu blocks to define menu lists or menu options:
The code is as follows:
HTML 5
CSS
JavaScript
Other new tags of HTML 5 will not be explained one by one. Please check the manual yourself.
In fact, these things, like XHTML's div, H2, inpu and other tags, are easy to use as long as they are put into practice.
About compatibility
If you are a person who likes to study and focus on the front end, you should know that the new HTML 5 tags have been widely used in Taobao's page structure. So, what I want to say is that as long as you dare to try, compatibility is not a problem, there are many compatible methods on the Internet (this article is about structure, ha).
Later words
Any new technology needs a process of adaptation. If you're ready to be a good Web front-end developer, you have to keep trying and accepting the latest front-end technologies.
Sun Wen once said that if you want to experience the happiness of civilization, you have to go through the pain of civilization. This is true of the human revolution, and so is the revolution of HTML 5. With the decline of IE, the major browser manufacturers have entered the warring States era. For developers, we only expect major browser makers to follow the same standard as much as possible, rather than falling apart after competing with each other. Because, efficient and perfect presentation to all kinds of users of the same application is our ultimate goal.
Start with the doctype of the page, to use the new HTML 5 tags to build a more semantic structure of the page, and then explain the new tags related to the page structure. I believe you have a new understanding of the new structural tags of HTML 5. If you are interested, open your IDE, write a piece of code built by the new tags of HTML 5, and then use CSS to draw your grand blueprint.
After reading the above, have you mastered how to build a more specific HTML5 structure? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.