Home >Web Front-end >HTML Tutorial >30 tips for writing HTML code
30 tips for writing HTML code
- PHPzOriginal
- 2016-05-16 16:42:281539browse
1. Be sure to close the HTML tag
In the source code of previous pages, we often saw such statements:
<li>Some text here. <li>Some new text here. <li>You get the idea.
Perhaps we could tolerate such non-closing HTML tags in the past, but according to today's standards, this is highly undesirable and must be 100% avoided. Be sure to close your HTML tags, otherwise validation will fail and unforeseen problems may occur.
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>
2. Declare the correct document type (DocType)
The author has added many CSS Forum, where if any user encounters a problem, we will advise 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 parsing tag.
There are usually four document types to choose from :
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 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 the ordinary way 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. Don’t use embedded CSS styles
When you are immersed in writing code, you may often add a little embedded css code conveniently or lazily. Like this:
<p style="color: red;">脚本之家</p>
This may seem convenient and problem-free, but it can 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. In the page head tag Introduce all style sheet files
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 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
<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>
5. Introduce JavaScript files at the bottom of the page
One principle to remember is to make the page run as quickly as possible presented to the user. 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:
<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>
6. Don’t use embedded JavaScript, this is the 21st century!
Many years ago, there was a way to directly add JS code to HTML tags. This is especially common in simple picture albums. Essentially, a " On the label, its effect is equivalent to some JS code. There is no need to discuss too much. You should not use this method. You should transfer the code to an external JS file and then use " addEventListener / attachEvent" to add a time listener. Or use a framework such as jQuery, which needs to use its "clock" method.
$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
});7. Standardize at any time during development Verification
Many people do not really understand the meaning 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. Troublesome.
If you are just starting to make web pages, it is strongly recommended that you download this Web Development Toolbar and use the "HTML standard" at any time during the coding process. Validation" and "CSS Standard Validation". If you think CSS is a very easy to learn language, then it will kill you. Your lax code will make your page full of loopholes and problems. A good The method is - verify, verify, verify again.
8. Download Firebug
Firebug is undoubtedly the best plug-in for web development. It can not only debug JavaScript, but also It allows you to intuitively understand the attributes and positions of page tags.
Firebug official website: https://getfirebug.com/
Note: Firebug official website announced that it has stopped continuing to develop, update and maintain Firebug, and invites everyone to use Firefox’s built-in tool DevTools.
相关推荐：a28ffeb20272f5d60ee6786dc3f80397(Firebug替代品:10个最好的JavaScript调试工具)
9. 使用 Firefox 内置工具 DevTools！
DevTools下载地址：https://developer.mozilla.org/en-US/docs/Tools
10. 使用小写的标记
理论上讲，你可以像这样随性的书写标记：
<DIV> <P>Here's an interesting fact about corn. </P> </DIV>
最好不要这样写，费力气输入大些字母没有任何用处，并且会让代码很难看，这样子就很好：
<DIV> <P>Here's an interesting fact about corn. </P> </DIV>
11.使用H1-H6标签
笔者建议你在网页中使用其中全部六种标记，虽然大部分人只会用到前四个，但使用最多的H会有很多好处，比如设备友好、搜索引擎友好等，不妨把你的P标签都替换成H6。
12. 如果是博客，那把H1留给文章标题
今天笔者在Twitter上发起一次讨论：是该把H1定义到LOGO上还是定义到文章标题上，有80%的人选择了后者。
当然具体如何使用要看你的需求，但我建议你在建立博客的时候，将文章题目定为H1，这对搜索引擎优化(SEO)是非常有好处的。
13. 下载ySlow
在过去几年里，雅虎的团队在前端开发领域做了许多伟大的工作。前不久，它们发布了一个叫ySlow的Firebug扩展，它会分析你的<网页，并返回 一个“成绩单”，上面细致分析了这个网页的方方面面，提出需要改进的地方，虽然它有点苛刻，但它绝对会对你有所帮助，强烈推荐 ySlow！
14. 使用UL列表布局导航菜单
通常网站都会有导航菜单，你可以用这样的方式定义：
<div id="nav"> <a href="#">Home </a> <a href="#">About </a> <a href="#">Contact </a> </div>
如果你想书写优美的代码，那最好不要用这种方式，
为什么要用UL布局导航菜单？
——因为UL生来就是为定义列表准备的
最好这样定义：
<ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
15. 学会怎样对付IE
IE一直以来都是前端开发人员的噩梦！
如果你的CSS样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效：
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" /> <![endif]-->
这些代码的意思是：如果用户浏览器是IE6及以下，那这段代码才会生效。如果你想把IE7也包含进来，那么就把“[if lt IE 7]”改为“[if lte IE 7]”。
16. 使用一个好的代码编辑器
不论你是Windows还是Mac用户，这里都有很多优秀的编辑器供你选择：
Mac 用户
- Coda
- Espresso
- TextMate
- Aptana
- DreamWeaver CS4
PC 用户
- InType
- E-Text Editor
- Notepad++
- Aptana
- Dreamweaver CS4
17. 压缩前端代码！
Javascript 压缩服务
- Javascript Compressor
- JS Compressor
CSS Compression Services
- CSS Optimiser
- CSS Compressor
- Clean CSS
18. 缩减，缩减，缩减
回望我们大多数人写的第一个页面，一定会发现严重的 “DIV癖”( divitis )，通常初学者的本能就是把一个段落用DIV包起来，然后为了控制定位而套上更多的DIV。—— 其实这是一种低效而有害的做法。
网页写完后，一定要多次回头检查，尽量的减少元素的数量。
能用UL布局的列表就不要用一个个的DIV去布局。
正如写文章的关键是“缩减，缩减，缩减”一样，写页面也要遵循这个标准。
19. 为所有的图片加上Alt属性
为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息，并且对图像搜索引擎友好。
Firefox不支持显示图像Alt属性，可以加入title属性：
<img src="cornImage.jpg" alt="脚本之家" title="脚本之家" />
20. 学会熬夜
我经常不知不觉的学习工作到凌晨，我认为这是个很好的状况。
我的“啊～哈！”时间（ “AH-HA” moments，指柳暗花明或豁然开朗的时刻）通常都发生在深夜，比如我彻底理解JavaScript的“闭包”概念，就是在这样一种情况下。如果你还没有感受过这种奇妙的时刻，那就马上试试吧！
21. 查看源代码
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 popular services on the Internet that can be used for free APIs added to web pages, 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 Photshop.
There are many English jewelry tutorials on Psdtuts: Videos section
-
Lynda.com also has a lot of tutorials, but you have to pay $25 USD
You Suck at Photoshop tutorial series
Spend a few hours learning Photoshop shortcut key operations
25. Learn every HTML tag
Although some HTML tags are rarely used, you should still know them. For example, "abbr", "cite", etc., you must learn them in case you need them.
26. Participate in community discussions
There are many excellent resources on the Internet, and there are also many masters hidden in the community. Here you can either self-study or Ask an experienced developer for advice.
27. Use CSS Reset
Css Reset is also Reset Css, which is to reset some HTML tag 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.
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 pictures and images on the web page. For background, there are two good tutorials below:
- Slice and Dice that PSD
- From PSD to HTML/CSS
30. Don’t use frameworks randomly
There are many excellent frameworks for both 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.
The CSS framework is designed for skilled developers, which will save them a lot of time.