I have been doing front-end development for almost 3 years. Today I would like to talk to you about some of my personal experiences in WEB front-end development (of course it is all my personal understanding. Please include and correct me if there is anything I say that is inappropriate or incorrect). Here Let me start with WEB standards.
What are WEB standards?
Haha, it is said to be a WEB standard, but here I mainly summarize some experiences of XHTML1.1 and CSS2.1. Because WEB covers so much content, "WEB standards" is the general name for a series of standards, including HTML4.0, XHTML1.1, CSS2.1, XML1.0, RSS2.0, ECMAScript1.1, and DOM1. 0 and so on. So here I want to point out to you that the WEB standard is not what we call DIV+CSS.
Just mentioned above - DIV+CSS, haha, let me explain here, this is actually incorrect. The accurate term of DIV+CSS (personal understanding) should be: using XHTML1.1 in the WEB standard recommended by W3C combined with CSS2.0 style sheet to create a page. DIV should refer to the XHTML tag, while CSS display refers to CSS style sheet.
Benefits of developing using WEB standards
So why does W3C recommend such a page production method? Let's briefly take a look at the advantages of using WEB standard development (personal understanding) compared to the previous TABLE layout?
1. Save operating costs and save money!
Haha, would you be interested in something that can help you save money? Of course I am very interested. See how our WEB standard production method is achieved?
Using WEB standards to produce, we can achieve a very formal separation of expressions. We use XHTML to express (data) and CSS to control the form (presentation of page elements). In a well-written page, the XHTML code basically contains the data that users want to see, as well as other decorative things, all controlled by our CSS. In this way, the size of our (XHTML) page will be greatly reduced, so that your bandwidth costs will be reduced. How to reduce this? You can imagine that YAHOO's homepage is 1K small, and 1,000,000 people visit it together. , so how much bandwidth is saved? And the bandwidth can be more fully utilized.
Our CSS controls the styles of all page elements. Now if you want to change the overall style of the website, you only need to spend a few minutes modifying a CSS file, and you can easily do it. Maintenance costs have also come down, saving a lot of money, right? Also, you will open this page much faster. A page that makes you wait for half a minute. Unless the information inside is very useful to you, we basically don’t have much time to wait.
2. It is more user-friendly and has the opportunity to gain more users.
Now let’s talk about user-friendliness. First I want to classify our users into categories.
Category 1: Ordinary users (everyone who visits our website);
Category 2: Search engines;
Pages developed using WEB standards have clear structure, small page size, and good browser compatibility. When ordinary users access it, the page opens quickly, and no matter which browser the user uses, they can access (display) the page normally, and the page structure is clear, and the data they are looking for can be easily browsed.
For search engines, a good page developed using WEB standards has been SEO optimized. It is very friendly to visit and it is easy to understand where the title (H1~H6 tags) is in your page and where is the title. Paragraph (p tag), where is the content to be emphasized in the paragraph (strong tag), etc., it can be easily analyzed. As we all know, a site with good SEO has more chances to be indexed by search engines. This also means that your website will be visited by more ordinary users, bringing more users to your site.
One can help us save a lot of money and improve work efficiency. At the same time, it can improve page browsing speed, be user-friendly, and can even bring you more users without spending money on publicity. Do you think you would use it? Haha, this is also the reason why our W3C recommends using WEB standards for open websites. This technology has also been recognized by our users, so you now need to learn WEB standards. ^-^!
Haha, I have finished reviewing the basic courses, and now I am officially starting to talk about XHTML and CSS skills.
Reasonable layout
Some friends will start to ask, why do we start talking about reasonable layout from the beginning? Haha, we mentioned some knowledge points earlier - "clear structure, SEO optimization, small page size, and XHTML code basically contains all the user requirements Look at the data”. These things are the result of our reasonable layout. And I personally feel that everything we produce using WEB standards starts from this knowledge point, so I will talk about this topic first.
Then everyone will start to ask, what kind of page is considered a reasonable layout? Well, this is a good question. It is also one of the most frequently asked questions when we first start to learn to use WEB standards. I have often been troubled by this question. Here I will talk about some of my understanding of reasonable layout.
Before we start talking about the elements that a properly laid out page should achieve, it would be more intuitive for us to use an example to explain it. Let’s take a look at this picture first:
http://www.yaohaixiao.com/samples/myblog/index.htm
Yes, this is an article detail page, there is no left and right column layout, but what I want to focus on here is reasonable layout. I will introduce floating elements in detail in a later article. Okay, back to the topic just now, everyone has seen this page.