In the previous page source code, I often saw such statements:
<li>Some text here.<li>Some new text here.<li>You get the idea.Maybe in the past we could tolerate such non-closed HTML tags, but in today's standards, this is very undesirable and must be avoided 100%. Be sure to pay attention to closing your HTML tags, otherwise it will not pass the verification and may cause some unforeseen problems.
It is best to use this form:
<ul><li>Some text here. </li><li>Some new text here. </li><li>You get the idea. </li></ul>The author has joined many CSS forums earlier, where if a user encounters problems, we would suggest that he do two things first:
There are usually four document types to choose from :DOCTYPE defines that before the HTML tag appears, it tells the browser whether this page contains HTML, XHTML, or a mixture of the two, so that the browser can correctly parse the tag.
1. <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd>2. <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd>3. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>4. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>There have always been different opinions on what kind of document type declaration to use. It is generally believed that the strictest statement is the best choice, but research shows that most browsers will parse such statements in a normal way, so many people choose to use the HTML4.01 standard. The bottom line of choosing a statement is that it is not really suitable for you, so you have to consider comprehensively choosing a statement that suits your project.
When you are busy writing code, you may often add a little embedded css code casually or lazy, just like this:
<p style=color: red;>武林网</p>This looks convenient and has no problem, but it will cause problems in your code.
When you start writing code, it is best to start adding style code after the content structure is completed.
This encoding method is like fighting guerrilla, which is a very copycat approach. -Chris Coyier
A better approach is to define the style of this P in the stylesheet file:
someElement > p {color: red;}In theory, you can introduce CSS stylesheets anywhere, but the HTML specification recommends introducing them in the head tag of a web page, which can speed up the rendering of the page.
During Yahoo's development process, we found that introducing style sheets into the head tag will speed up the loading of web pages.
Because this allows the page to be rendered step by step. - ySlow Team
<head><title>My Favorites Kinds of Corn</title><link rel=stylesheet type=text/css media=screen href=path/to/file.css /><link rel=stylesheet type=text/css media=screen href=path/to/anotherFile.css /></head>One principle to remember is to make the page present in front of users as fast as possible. When a script is loaded, the page pauses loading until the script is fully loaded. So it will waste more time for users.
If your JS file just wants to implement certain functions (such as button click event), then you can safely introduce it at the bottom of the body, which is definitely the best way to do it.
For example : <p>And now you know my favorite kinds of corn. </p><script type=text/javascript src=path/to/file.js></script><script type=text/javascript src=path/to/anotherFile.js></script></body></html>Many years ago, there was a way to directly add JS code to HTML tags. Especially very common in simple photo albums. Essentially, an onclick event is attached to a tag, and its effect is equivalent to some JS code. There is no need to discuss too much, this method should not be used, the code should be transferred to an external JS file and then addEventListener / attachEvent to the time listener. Or use a framework such as jQuery, which requires the use of its clock method.
$('a#moreCornInfoLink').click(function() {alert('Want to learn more about corn?');});Many people do not really understand the significance and value of standard verification. The author analyzed this issue in detail in a blog. In a word, standard verification is for you, not for you to cause trouble.
If you are just starting to work in web page production, it is highly recommended that you download this web development toolbar and use HTML standard verification and CSS standard verification at any time during the encoding process. If you think CSS is a very easy-to-learn language, it will make you die. Your intricate code will make your page full of loopholes and problems constantly. A good way is to verify, verify, and then verify.
Firebug is a well-deserved best plug-in for web development. It not only debugs JavaScript, but also allows you to intuitively understand the properties and location of page tags. Needless to say, download it!
According to the author's observation, most users only use 20% of Firebug's functions, which is really a waste. You might as well spend a few hours learning this tool in the system, and I believe it will make you twice the result with half the effort.
Firebug tutorial :In theory, you can write marks casually like this:
<DIV><P>Here's an interesting fact about corn. </P></DIV>It is best not to write this way. It is useless to put in more letters and it will make the code ugly, which is good:
<div><p>Here's an interesting fact about corn. </p></div>The author recommends that you use all six of these tags on your web pages. Although most people will only use the first four, the most used H will have many benefits, such as device-friendly, search engine-friendly, etc. You might as well replace your P tag with H6.
Today, the author initiated a discussion on Twitter: Should H1 be defined on LOGO or on the title of the article, 80% of people chose the latter.
Of course, how to use it depends on your needs, but I suggest that when you set up a blog, you should set the title of the article as H1, which is very beneficial for search engine optimization (SEO).
Over the past few years, Yahoo’s team has done a lot of great work in front-end development. Not long ago, they released a Firebug extension called ySlow, which will analyze your < webpage and return a transcript, which carefully analyzes all aspects of this webpage and proposes areas that need improvement. Although it is a bit harsh, it will definitely help you. It is highly recommended - ySlow!
Usually the website has a navigation menu, you can define it in this way:
<div id=nav><a href=#>Home </a><a href=#>About </a><a href=#>Contact </a></div>If you want to write beautiful code, it is best not to use this method.
Why use UL to layout navigation menus?
-Because UL was born to prepare for the definition list
It is best to define it like this:
<ul id=nav><li><a href=#>Home</a></li><li><a href=#>About</a></li><li><a href=#>Contact</a></li></ul>IE has always been a nightmare for front-end developers!
If your CSS stylesheet is basically finalized, you can create a separate stylesheet for IE, and then this will only take effect for IE:
<!--[if lt IE 7]><link rel=stylesheet type=text/css media=screen href=path/to/ie.css /><![endif]-->The meaning of these codes is: if the user's browser is IE6 or below, then this code will take effect. If you want to include IE7, change [if lt IE 7] to [if lte IE 7].
Whether you are a Windows or Mac user, there are many excellent editors for you to choose from:
Looking back at the first page most of us write, we will definitely find serious DIV divities. Usually the instinct of beginners is to wrap a paragraph with DIV and then put more DIVs in order to control positioning. - Actually, this is an inefficient and harmful approach.
After writing the web page, you must check it back many times to minimize the number of elements.
If you can use UL layout, don’t use DIV to layout the list.
Just as the key to writing an article is to reduce, reduce, and reduce, writing a page must also follow this standard.
The benefits of adding an alt attribute to images are self-evident - this allows users who disable images or use special devices to get access to your prince information and are also friendly to image search engines.
Firefox does not support displaying image Alt attribute, you can add title attribute:
<img src=cornImage.jpg alt=武林网title=武林网/>I often study and work until the early morning without knowing it, and I think this is a good situation.
Mine~ha! Time (AH-HA moments, referring to moments when the light of the sky or the sudden enlightenment) usually happens late at night. For example, I thoroughly understand the concept of closures in JavaScript, in this case. If you haven't experienced such a wonderful moment, try it now!
Nothing can help you learn HTML faster than imitating your idol. At first, we all had to be willing to make a copier and then slowly develop our own style. Research the code of your favorite website page and see how they implement it. This is the only way for experts, you must try it. Note: Just learn and imitate their coding style, not copy and copy!
Pay attention to the various cool JavaScript effects on the Internet. If you seem to use a plug-in, you can find the plug-in name based on the file name in the head tag in its source code, and then you can learn to use it for your own use.
This is especially necessary when you create websites for other companies. Don't you use the blockquote tag yourself? Then users may use it, don’t you use OL yourself? Users may, too. Take time to make a page that displays the styles of elements such as ul, ol, p, h1-h6, blockquotes, etc., and check if there are any omissions.
Translator's note: The original English title is using Twitter
There are many APIs that can be added to web pages for free now, and these tools are very powerful. It can help you implement many clever functions, and more importantly, it can help you promote the website.
Photoshop is an important tool for front-end engineers. If you are already proficient in HTML and CSS, you might as well learn more about Photoshop.
Although some HTML tags are rarely used, you should still understand them. For example, abbr, cite, etc., you must learn them in case of emergencies.
There are many excellent resources on the Internet, and there are many experts hidden in the community. Here you can learn by yourself and ask experienced developers.
Css Reset is also Reset Css, which means resetting some HTML tag styles, or default styles.
There is also fierce debate on whether CSS Reset should be used, and the author recommends it. You can first choose some mature CSS Resets, and then slowly evolve into something that suits you.
Simply put, you should align your web elements as much as possible. You can observe the websites you like, and their logos, titles, charts, and paragraphs are definitely very neatly correct. Otherwise it will appear chaotic and unprofessional.
Now that you have mastered HTML, CSS, and Photoshop knowledge, you also need to learn how to convert PSD into pictures and backgrounds on the web page. Here are two good tutorials:
There are many excellent frameworks for Javascript and CSS, but if you are a beginner, don't rush to use them. If you are not able to master CSS skillfully, using frameworks will confuse your knowledge system.
CSS frameworks are designed for skilled developers, which will save them a lot of time.