suchen

Heim >Web-Frontend >HTML-Tutorial >30 Tipps zum Schreiben von HTML-Code

30 Tipps zum Schreiben von HTML-Code

PHPz
PHPzOriginal
2016-05-16 16:42:281539Durchsuche

30 Tipps zum Schreiben von HTML-Code

1. Stellen Sie sicher, dass Sie den HTML-Tag schließen

Im Quellcode der vorherigen Seiten haben wir oft solche Aussagen gesehen: 

<li>Some text here.
<li>Some new text here.
<li>You get the idea.

Vielleicht konnten wir solche nicht-schließenden HTML-Tags früher tolerieren, aber nach heutigen Maßstäben ist dies höchst unerwünscht und muss zu 100 % vermieden werden. Achten Sie darauf, Ihre HTML-Tags zu schließen, da sonst die Validierung fehlschlägt und es zu unvorhergesehenen Problemen kommen kann.

Am besten verwenden Sie dieses Formular: 

<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>

2. Deklarieren Sie den richtigen Dokumenttyp (DocType)

Der Autor hat viele hinzugefügt CSS-Forum: Wenn ein Benutzer auf ein Problem stößt, raten wir ihm, zunächst zwei Dinge zu tun:

  • 1. Überprüfen Sie die CSS-Datei und beheben Sie alle sichtbaren Fehler
  • 2 .Hinzufügen Der Dokumenttyp Doctype

DOCTYPE wird vor dem Erscheinen des HTML-Tags definiert. Er teilt dem Browser mit, ob die Seite HTML, XHTML oder eine Mischung aus beiden enthält, damit der Browser die Seite korrekt analysieren kann Etikett.

Normalerweise stehen vier Dokumenttypen zur Auswahl : 

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">

Es gab unterschiedliche Meinungen darüber, welche Dokumenttypdeklaration verwendet werden sollte. Es wird allgemein davon ausgegangen, dass die Verwendung der strengsten Deklaration die beste Wahl ist. Untersuchungen zeigen jedoch, dass die meisten Browser die normale Methode zum Parsen dieser Deklaration verwenden. Daher entscheiden sich viele Menschen für die Verwendung des HTML4.01-Standards. Entscheidend bei der Auswahl einer Aussage ist, ob sie wirklich für Sie geeignet ist. Daher müssen Sie sie umfassend berücksichtigen, um eine Aussage auszuwählen, die für Ihr Projekt geeignet ist.

3. Verwenden Sie keine eingebetteten CSS-Stile.

Wenn Sie mit dem Schreiben von Code beschäftigt sind, können Sie häufig bequem oder nachlässig ein wenig eingebetteten CSS-Code hinzufügen : 

<p style="color: red;">脚本之家</p>

Dies mag bequem und problemlos erscheinen, kann aber zu Problemen in Ihrem Code führen.

Wenn Sie mit dem Schreiben von Code beginnen, ist es am besten, mit dem Hinzufügen von Stilcode zu beginnen, nachdem die Inhaltsstruktur vollständig ist.

Diese Codierungsmethode ähnelt einem Guerillakrieg, ein sehr nachahmender Ansatz. ——Chris Coyier

Ein besserer Ansatz besteht darin, den Stil dieses P in der Stylesheet-Datei zu definieren: 

someElement > p {
color: red;
}

4. Im Seitenkopf-Tag einführen alle Stylesheet-Dateien

Theoretisch können Sie CSS-Stylesheets überall einführen, die HTML-Spezifikation empfiehlt jedoch, sie im Head-Tag der Webseite einzuführen, was die Darstellung der Seite beschleunigen kann.

Während des Entwicklungsprozesses von Yahoo haben wir festgestellt, dass die Einführung von Stylesheets im Head-Tag das Laden von Webseiten beschleunigt,
da die Seite dadurch schrittweise gerendert werden kann. —— 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. Fügen Sie am Ende der Seite JavaScript-Dateien ein

Ein Grundsatz, den Sie beachten sollten, besteht darin, die Seite so zu gestalten, dass sie so ausgeführt wird schnellstmöglich dem Benutzer präsentiert. Beim Laden eines Skripts wird der Ladevorgang der Seite angehalten, bis das Skript vollständig geladen ist. Es wird also mehr Zeit für die Benutzer verschwenden.

Wenn Ihre JS-Datei nur bestimmte Funktionen implementieren muss (z. B. Schaltflächenklickereignisse), können Sie diese gerne am Ende des Hauptteils einführen. Dies ist definitiv der beste Weg.

Beispiel:

<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. Verwenden Sie kein eingebettetes JavaScript, dies ist das 21. Jahrhundert!

Vor vielen Jahren gab es eine Möglichkeit, JS-Code direkt zu HTML-Tags hinzuzufügen. Dies kommt vor allem bei einfachen Fotoalben häufig vor. Im Wesentlichen ein „ Auf dem Etikett entspricht seine Wirkung einem JS-Code. Es besteht kein Grund, zu viel zu diskutieren. Sie sollten diese Methode nicht verwenden. Sie sollten den Code in eine externe JS-Datei übertragen und dann „ verwenden. addEventListener / attachmentEvent“, um einen Zeit-Listener hinzuzufügen. Oder verwenden Sie ein Framework wie jQuery, das seine „clock“-Methode verwenden muss. 

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

7. Standardisieren bei Jederzeit während der Entwicklungsüberprüfung

Viele Menschen verstehen die Bedeutung und den Wert der Standardüberprüfung nicht wirklich. Der Autor hat dieses Problem in einem Blog ausführlich analysiert. Kurz gesagt, die Standardüberprüfung ist nichts für Sie Für Sie problematisch.

Wenn Sie gerade erst mit der Erstellung von Webseiten beginnen, wird dringend empfohlen, diese Web Development Toolbar herunterzuladen und den „HTML-Standard“ zu verwenden „Zu jedem Zeitpunkt während des Codierungsprozesses. Validierung“ und „CSS-Standardvalidierung“. Eine gute Methode ist – überprüfen, überprüfen, erneut überprüfen

Firebug ist zweifellos das beste Plug-in für die Webentwicklung Nicht nur JavaScript debuggen, sondern auch die Attribute und Positionen von Seiten-Tags intuitiv verstehen.

Offizielle Firebug-Website:

https://getfirebug.com/


Hinweis:

Die offizielle Website von Firebug gab bekannt, dass die Weiterentwicklung, Aktualisierung und Wartung von Firebug eingestellt wurde, und lädt alle ein, das in Firefox integrierte Tool DevTools zu verwenden.

相关推荐：a28ffeb20272f5d60ee6786dc3f80397(Firebug替代品:10个最好的JavaScript调试工具)

9. 使用 Firefox 内置工具 DevTools！

DevTools下载地址：https://developer.mozilla.org/en-US/docs/Tools

10. 使用小写的标记

理论上讲，你可以像这样随性的书写标记：

<DIV>
<P>Here&#39;s an interesting fact about corn. </P>
</DIV>

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

<DIV>
<P>Here&#39;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. 查看源代码

Nichts hilft Ihnen schneller, HTML zu lernen, als Ihre Idole nachzuahmen. Zuerst mussten wir alle bereit sein, Fotokopierer zu sein, und dann mussten wir langsam unseren eigenen Stil entwickeln. Studieren Sie den Code Ihrer bevorzugten Website-Seiten und sehen Sie, wie er implementiert wird. Dies ist der einzige Weg für Meister, Sie müssen es versuchen. Hinweis: Lernen Sie einfach ihren Codierungsstil und imitieren Sie ihn, plagiieren und kopieren Sie nicht!

Achten Sie auf die verschiedenen coolen JavaScript-Effekte im Internet. Wenn es so aussieht, als ob ein Plug-in verwendet wird, können Sie den Namen des Plug-ins anhand des Dateinamens im Head-Tag finden Quellcode, und dann können Sie lernen, wie Sie ihn für Ihren eigenen Gebrauch verwenden.

22. Definieren Sie Stile für alle Elemente

Dies ist insbesondere dann erforderlich, wenn Sie andere Unternehmenswebsites erstellen. Benutzen Sie nicht selbst Blockquote-Tags? Dann können Benutzer es verwenden, aber Sie verwenden OL selbst nicht? Benutzer können das auch. Nehmen Sie sich die Zeit, eine Seite zu erstellen, die die Stile der Elemente ul, ol, p, h1-h6, Blockquotes usw. anzeigt, und prüfen Sie, ob etwas fehlt.

23. Nutzen Sie Dienste von Drittanbietern

Anmerkung des Übersetzers: Der englische Originaltitel lautet „Using Twitter“

Es gibt viele beliebte Dienste auf der Das Internet kann für kostenlose APIs verwendet werden, die zu Webseiten hinzugefügt werden. Diese Tools sind sehr leistungsstark. Es kann Ihnen dabei helfen, viele clevere Funktionen zu implementieren, und was noch wichtiger ist, es kann Ihnen dabei helfen, Ihre Website zu bewerben.

24. Photoshop lernen

Photoshop ist ein wichtiges Tool für Front-End-Ingenieure. Wenn Sie bereits über Kenntnisse in HTML und CSS verfügen, können Sie auch mehr darüber erfahren Photoshop.

  • Es gibt viele englische Schmuck-Tutorials auf Psdtuts: Abschnitt „Videos“

  • Lynda.com hat auch viele Tutorials, aber Sie müssen bezahlen 25 USD

  • Die Photoshop-Tutorialserie ist einfach scheiße

  • Verbringen Sie ein paar Stunden damit, Photoshop-Tastenkombinationen zu erlernen

25. Lernen Sie jedes HTML-Tag

Auch wenn einige HTML-Tags selten verwendet werden, sollten Sie sie dennoch kennen. Zum Beispiel „abbr“, „cite“ usw. müssen Sie lernen, falls Sie sie benötigen.

26. Beteiligen Sie sich an Community-Diskussionen

Es gibt viele hervorragende Ressourcen im Internet, und in der Community sind auch viele Meister versteckt. Studieren Sie oder fragen Sie einen erfahrenen Entwickler um Rat.

27. CSS-Reset verwenden

CSS-Reset ist auch „CSS zurücksetzen“, mit dem einige HTML-Tag-Stile oder Standardstile zurückgesetzt werden.

Im Internet gibt es auch eine heftige Debatte darüber, ob CSS Reset verwendet werden sollte, der Autor empfiehlt jedoch die Verwendung. Sie können zunächst ein ausgereiftes CSS-Reset auswählen und es dann langsam zu einem weiterentwickeln, das zu Ihnen passt.

28. Elemente ausrichten

Einfach ausgedrückt: Sie sollten Ihre Webelemente so weit wie möglich ausrichten. Sie können Ihre Lieblingswebsites sehen. Ihre Logos, Titel, Diagramme und Absätze müssen sehr ordentlich sein. Sonst wirkt es verwirrend und unprofessionell.

29. Informationen zum PSD-Slicing

Da Sie nun die Kenntnisse in HTML, CSS und Photoshop beherrschen, müssen Sie noch lernen, wie Sie PSD in Bilder umwandeln Bilder auf der Webseite. Als Hintergrund gibt es unten zwei gute Tutorials:

  • Slice and Dice that PSD
  • Von PSD zu HTML/CSS

30. Verwenden Sie Frameworks nicht wahllos

Es gibt viele hervorragende Frameworks sowohl für Javascript als auch für CSS, aber wenn Sie ein Anfänger sind, sollten Sie sich nicht beeilen, sie zu verwenden. Wenn Sie CSS noch nicht beherrschen, wird die Verwendung von Frameworks Ihr Wissenssystem durcheinander bringen.

Das CSS-Framework ist für erfahrene Entwickler konzipiert, was ihnen viel Zeit spart.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ist es notwendig, dem img-Bild tag_HTML/Xhtml_Webpage Production das alt-Attribut zuzuweisen?Nächster Artikel：Ist es notwendig, dem img-Bild tag_HTML/Xhtml_Webpage Production das alt-Attribut zuzuweisen?

In Verbindung stehende Artikel

Mehr sehen