30 advanced skills of DIV CSS_html/css_WEB-ITnose

30 Advanced Skills of DIV CSS. Many novices on web pages are hovering on the threshold of professional coding, and the tutorials on the Internet are uneven and mixed, which can easily make novices confused. Here is a summary of 30 "secret techniques" for web page coding. As long as you keep them in mind during the coding process and use them flexibly, you will definitely write beautiful code and enter the ranks of professional developers as soon as possible.

1. Be sure to close the tag. In previous page source codes, we often saw statements like this:

Some text here.

Some new text here.

You get the idea.

Perhaps we could tolerate such unclosed tags in the past, but by today's standards, this is highly undesirable and must be avoided 100%. Be sure to close your tags, otherwise they will fail verification and be prone to some unforeseen problems.

It is best to use this form:

• Some text here.
• You get the idea.

2. Declare the correct document type (DocType)

The author has joined many CSS forums earlier, There, if any user encounters a problem, we will recommend him to do two things first:

1. Verify the CSS file and resolve all visible errors

2. Add the document type Doctype

DOCTYPE is defined before the HTML tag appears. It tells the browser whether the page contains HTML, XHTML,

or a mixture of both, so that the browser can correctly parse the tag.

There are generally four document types to choose from:

There have been different opinions on what document type declaration to use. It is generally considered that using the strictest declaration is the best choice, but research shows that most browsers will use ordinary methods to parse this declaration, so many people choose to use the HTML4.01 standard. The bottom line when choosing a statement is whether it is really suitable for you, so you have to consider it comprehensively to choose a statement that is suitable for your project.

3. Do not use embedded CSS styles. When you are immersed in writing code, you may often add a little embedded CSS code casually or lazily, like this:

Oncoding Coding Camp

This may seem convenient and problem-free, 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 complete.

This coding method is like guerrilla warfare, a very copycat approach. ??Chris Coyier

A better approach is to define the style of this P in the style sheet file:

#someElement > p { color: red; }

4. Introduce all style sheet files in the head tag of the page. Theoretically, you can introduce CSS style sheets anywhere, but the HTML specification recommends introducing them in the head tag of the web page, which can speed up the rendering speed of the page.

During the development process of Yahoo, we found that introducing style sheets in the head tag will speed up the loading of web pages,

because this allows the page to be rendered gradually. ?? ySlow Team

5. Introduce JavaScript files at the bottom of the page

One principle to remember is to make the page appear in front of the user as quickly as possible. When loading a script, the page will pause loading until the script is fully loaded. So it will waste more time of users.

If your JS file only needs to implement certain functions (such as button click events), then feel free to introduce it at the bottom of the body. This is definitely the best way.

Example:

And now you know my favorite kinds of corn.

             

6. 不要使用嵌入式JavaScript，这都21世纪了！ 许多年以前，还存在一种这样的方式，就是直接将JS代码加入到标签中。尤其是在简单的图片相册中非常常见。本质上讲，一个“onclick”事件是附加在 标签上的，其效果等同于一些JS代码。不需要讨论太多，非常不应该使用这样的方式，应该把代码转移到一个外部JS文件中，然后使用“ addEventListener / attachEvent ”加入时间侦听器。或者使用jQuery等框架，之需要使用其“clock”方法。

$(‘a#moreCornInfoLink’).click(function() {     alert(‘Want to learn more about corn?’);   }); 

7. 开发中随时进行标准验证

很多人并不真正理解标准验证的意义和价值，笔者在一篇 博客中详细分析了这个问题。一句话，标准验证是为你服务的，不是给你找麻烦的。

如果你刚开始从事网页制作，那强烈建议你下载这个 网页开发工具条 ，并在编码过程中随时使用”HTML标准验证”和“CSS标准验证”。如果你认为CSS是一种非常好学的语言，那么它会把你整的死去活来。你的不严谨的代码会让你的页面漏洞百出，问题不断，一个好的方法就是?? 验证，验证，再验证。

8. 下载Firebug

Firebug是当之无愧的网页开发最佳插件，它不但可以调试JavaScript，还可以直观的让你了解页面标记的属性和位置。不用多说， 下载它！ 9. 使用Firebug！

据笔者观察，大部分的使用者仅仅使用了Firebug 20%的功能，那真是太浪费了，你不妨花几个小时的时间来系统学习这个工具，相信会让你事半功倍。

Firebug教程： Overview of Firebug Debug Javascript With Firebug - video tutorial   10. 使用小写的标记 理论上讲，你可以像这样随性的书写标记：

  

Here’s an interesting fact about corn.

  

 

  最好不要这样写，费力气输入大些字母没有任何用处，并且会让代码很难看，这样子就很好：

  

Here’s an interesting fact about corn.

  

 

11.使用H1 - H6标签 笔者建议你在网页中使用其中全部六种标记，虽然大部分人只会用到前四个，但使用最多的H会有很多好处，比如设备友好、搜索引擎友好等，不妨把你的P标签都替换成H6。

12. 如果是博客，那把H1留给文章标题

今天笔者在Twitter上发起一次讨论：是该把H1定义到LOGO上还是定义到文章标题上，有80%的人选择了后者。

当然具体如何使用要看你的需求，但我建议你在建立博客的时候，将文章题目定为H1，这对搜索引擎优化(SEO)是非常有好处的。

13. 下载ySlow

在过去几年里，雅虎的团队在前端开发领域做了许多伟大的工作。前不久，它们发布了一个叫ySlow的Firebug扩展，它会分析你的网页，并返回 一个“成绩单”，上面细致分析了这个网页的方方面面，提出需要改进的地方，虽然它有点苛刻，但它绝对会对你有所帮助，强烈推荐?? ySlow！

  14. 使用UL列表布局导航菜单

通常网站都会有导航菜单，你可以用这样的方式定义：

    Home      About      Contact   

If you want to write beautiful code, it is best not to use this method.

Why use UL layout navigation menu?

?? Because UL was born for definition lists

It is best to define it like this:

• < a href=“#”>Home
• About
• Contact

15. Learn how to deal with IE IE has always been a nightmare for front-end developers!

If your CSS style sheet is basically finalized, you can create a separate style sheet for IE, and then it will only take effect on IE:

                                                                 The meaning of these codes is: This code will only take effect if the user's browser is IE6 and below. If you want to include IE7, change "[if lt IE 7]" to "[if lte IE 7]".

16. Use a good code editor

Whether you are a Windows or Mac user, there are many excellent editors for you to choose from: Mac users Coda Espresso TextMate Aptana DreamWeaver CS4 PC UserInType E-Text Editor Notepad Aptana Dreamweaver CS4 17. Compress front-end code!

By compressing CSS and JavaScript code, you can usually reduce the file size by more than 25%. In some cases, this will greatly reduce your bandwidth pressure and increase loading speed.

Javascript Compressor JS Compressor JS code online compression (Chinese) CSS Compression Services CSS Optimiser CSS Compressor Clean CSS CSS code online compression (Chinese)

18. Reduce, reduce, reduce back Most of us will definitely find serious "DIV addiction" (divitis) when writing the first page. Usually the instinct of beginners is to wrap a paragraph with DIV, and then add more DIVs to control the positioning. . ??In fact, this is an inefficient and harmful approach.

After writing the web page, be sure to go back and check it multiple times to reduce the number of elements as much as possible.

Don’t use DIVs to layout lists that can be laid out using UL.

Just as the key to writing an article is "reduce, reduce, reduce", writing pages should also follow this standard.

19. Add Alt attributes to all images

The benefits of adding alt attributes to images are self-evident?? This allows users who have disabled images or use special devices to The obstacle is knowing your prince's information and being image search engine friendly.

Firefox does not support displaying the Alt attribute of images. You can add the title attribute:

20. Learn to stay up late

I often study and work until early in the morning without realizing it. I think this is a good situation.

My "AH-HA" moments usually happen late at night. For example, I thoroughly understand the concept of "closure" in JavaScript. In such a situation. If you haven’t experienced this magical moment yet, try it now!

21. View source code

Nothing will help you learn HTML faster than imitating your idols. At first, we all had to be willing to be photocopiers, and then slowly we had to develop our own style. Study the code of your favorite website pages and see how they are implemented. This is the only way for masters, you must try it. Note: Just learn and imitate their coding style, not plagiarize and copy!

Pay attention to the various cool JavaScript effects on the Internet. If it looks like a plug-in is used, you can find the name of the plug-in based on the file name in the head tag in its source code, and then you can learn how to use it. For your own use.

22. Define styles for all elements

This is especially necessary when you are making other company websites. Don't you use blockquote tags yourself? Then users may use it, but you don’t use OL yourself? Users may too. Take the time to make a page that displays the styles of ul, ol, p, h1-h6, blockquotes, etc. elements and check to see if anything is missing.

23. Use third-party services Translator's Note: The original English title is "Using Twitter"

There are many APIs popular on the Internet that can be added to web pages for free. These tools are very powerful. It can help you implement many clever functions, and more importantly, it can help you promote your website.

24. Learn Photoshop 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.

There are many English jewelry tutorials on Psdtuts: Videos section Lynda.com also has a lot of tutorials, but you have to pay $25 for the "You Suck at Photoshop" series of tutorials and spend a few hours learning the shortcut key operations of Photoshop 25. Learn every An HTML tag Although some HTML tags are rarely used, you should still know about them. For example, "abbr", "cite", etc., you must learn them in case you need them.

By the way, the above two tags:

abbr:

represents an abbreviation, such as "Inc.", "etc.". By tagging abbreviated words, you provide useful information to browsers, spell checkers, translation systems, and search engine indexers. url: http://www.w3school.com.cn/tags/tag_abbr.asp cite:

usually indicates that the text it contains refers to a reference, such as the title of a book or magazine. By convention, quoted text will appear in italics. url: http://www.w3school.com.cn/tags/tag_cite.asp

26. Participate in community discussions. There are many excellent resources on the Internet, and there are many masters hidden in the community. Here You can either teach yourself or ask experienced developers for help.

27. Use CSS Reset Css Reset, also known as Reset Css, is to reset some label styles, or default styles.

There is also a fierce debate on the Internet about whether CSS Reset should be used, but the author recommends its use. You can choose some mature CSS Reset first, and then slowly evolve it into one that suits you. Here are some useful CSS Reset (Chinese).

28. Align elements

Simply put, you should align your web elements as much as possible. You can observe your favorite websites. Their logos, titles, charts, and paragraphs must be very neat. Otherwise it will look confusing and unprofessional.

29. About PSD slicing

Now that you have mastered the knowledge of HTML, CSS, and Photoshop, you still need to learn how to convert PSD into images and backgrounds on web pages. Here are two Good tutorial:

Slice and Dice that PSD From PSD to HTML/CSS

30. Don’t use frameworks randomly 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 yet proficient in CSS, using frameworks will confuse your knowledge system.

CSS framework is designed for skilled developers, which will save them a lot of time.

Note: This article is reproduced from Baidu Wenku.