Fünfzehn Best Practices für die Erstellung von HTML-Anfängern_HTML/Xhtml_Webseiten

Im Folgenden sind dreißig Best Practices für HTML-Anfänger aufgeführt, die als Referenz für alle freigegeben sind. Der spezifische Inhalt lautet wie folgt

1. Halten Sie das Etikett geschlossen

In der Vergangenheit habe ich oft Code gesehen, der wie folgt aussieht (Anmerkung: Wie lange ist das her...):

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <li>Hier etwas Text.
2. <li>Hier gibt es einen neuen Text. <
3. li>Sie haben die Idee. Beachten Sie, dass das UL/OL-Etikett auf der Außenverpackung fehlt (wer weiß, ob das beabsichtigt oder unbeabsichtigt ist) und auch das LI-Etikett vergessen wurde, geschlossen zu sein. Nach heutigen Maßstäben ist dies eindeutig eine schlechte Praxis und sollte zu 100 % vermieden werden. Halten Sie das Etikett auf jeden Fall geschlossen. Andernfalls kann es bei der Validierung von HTML-Tags zu Problemen kommen.

Ein besserer Weg

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

<

ul
1. >  <
2. li>Einige Texte hier li>  <
3. li>Einige neue Texte hier li>  <
4. li>Sie haben die Idee li> 
5. ul>  2. Deklarieren Sie den richtigen Dokumenttyp

Der Autor ist schon vielen CSS-Foren beigetreten, wenn ein Benutzer auf ein Problem stößt, raten wir ihm, zuerst zwei Dinge zu tun:

1. Überprüfen Sie die CSS-Datei, um sicherzustellen, dass keine Fehler vorliegen.

2. Bestätigen Sie, dass der richtige Dokumenttyp hinzugefügt wurde

DOCTYPE erscheint vor dem HTML-Tag. Es teilt dem Browser mit, ob die Seite HTML, XHTML oder eine Mischung aus beiden enthält, damit der Browser sie korrekt analysieren kann.

Im Allgemeinen stehen vier Dokumenttypen zur Auswahl:

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

1. >  
2.   
3.   
4. >  
5.   
6.   
7. >  
8.   
9.   
10. >  
11.   

关于该使用什么样的文档类型声明,一直有不同的说法.通常认为使用最严格的声明是最佳选择,但研究表明,大部分浏览器会使用普通的方式解析这种声明,所以很多人选择使用HTML4.01标准.选择声明的底线是, 它是不是真的适合你, 所以你要综合考虑来选择适合你得项目的声明.

3.永远不要使用内联样式

当你在埋头写代码时，可能会经常顺手或偷懒的加上一点行内css代码，就像这样:

XML/HTML-Code复制内容到剪贴板

1. <p Stil="Farbe: rot;" >Ich werde diesen Text rot machen, damit er wirklich hervorsticht und die Aufmerksamkeit der Leute auf sich zieht! p>     

这样看起来即方便又没有问题.然而，这在你的编码实践中是个错误.

在你写代码时，在内容结构完成之前最好不要加入样式代码.

这样的编码方式就像打游击,是一种很山寨的做法.——Chris Coyier

更好的做法是,完成标签部分后,再把这个P的样式定义在外部样式表文件里.

建议

XML/HTML-Code复制内容到剪贴板

1. #someElement > p {     
2.  Farbe: rot;     
3. }  

4.将所有外部css文件放入head标签内

理论上讲,你可以在任何位置引入CSS样式表,但HTML规范建议在网页的head标记中引入,这样可以加快页面的渲染速度.

雅虎的开发过程中, 我们发现, 在head标签中引入样式表, 会加快网页加载速度, 因为这样可以使页面逐步渲染。 —— ySlow团队

XML/HTML-Code复制内容到剪贴板

1. <Kopf>     
2. <Titel>Meine LieblingsmaissortenTitel>     
3. <link rel="stylesheet"  Typ="text/css" Medien ="screen" href="path/to/file.css" />     
4. <link rel="stylesheet"  Typ="text/css" Medien ="screen" href="path/to/anotherFile.css" />     
5. Kopf>    

5.javascript文件放在底部

要记住一个原则停加载,直到脚本完全载入并执行完成.因此会浪费用户更多的时间。

如果你的JS文件只是要实现某些功能, (比如点击按钮事件）,这绝对是最佳的方法.

建议

JavaScript-Code复制内容到剪贴板

1. Und jetzt kennst du meine Lieblingsmaissorten. 

        
2. "text/javascript" src="path/to/file.js">     
3. "text/javascript" src="path/to/anotherFile.js">     
4.      
5.     

6.永远不要使用内联javascript.现在不是1996年了！

许多年以前,还存在一种这样的方式,就是直接将JS代码加入到HTML标签中.尤其是在简单的图片相册中非常常见.本质上讲, 一个„onclick“事件是附加在 标签上的, 其效果等同于于些JS代码In der JS-Datenbank wird die Funktion „addEventListener / attachmentEvent“ verwendet jquery hilft Ihnen dabei, die Funktion „click“ zu verwenden.

JavaScript-Code复制内容到剪贴板

1. $('a#moreCornInfoLink').click(function() { 
2. alarm('Möchten Sie mehr über Mais erfahren?');
3. });

7. Überprüfen Sie während der Entwicklung

Wenn Sie gerade erst mit der Erstellung von Webseiten beginnen, wird dringend empfohlen, die Web Developer Toolbar herunterzuladen (Chrome-Benutzer suchen bitte selbst im App Store, da Benutzer sie möglicherweise nicht verwenden können). Verwenden Sie jederzeit während des Codierungsprozesses die „HTML-Standardverifizierung“ und die „CSS-Standardvalidierung“. Wenn Sie glauben, CSS sei eine sehr einfach zu erlernende Sprache, wird Sie das umbringen. Ihr laxer Code führt dazu, dass Ihre Seite voller Lücken ist und ständig Probleme verursacht. Eine gute Möglichkeit ist, zu überprüfen, zu überprüfen und erneut zu überprüfen.

8. Firebug herunterladen

Firebug ist zweifellos das beste Plug-in für die Webentwicklung. Es kann nicht nur JavaScript debuggen, sondern Sie auch intuitiv die Attribute und Positionen von Seiten-Tags verstehen lassen. Laden Sie es ohne weiteres herunter!

9. Verwenden Sie Firebug

Laut der Beobachtung des Autors nutzen die meisten Benutzer nur 20 % der Firebug-Funktionen, was wirklich eine Verschwendung ist. Sie können sich auch ein paar Stunden Zeit nehmen, um dieses Tool systematisch zu erlernen. Ich glaube, dass Sie damit mit der Hälfte das doppelte Ergebnis erzielen der Aufwand.

10. Behalten Sie Tag-Namen in Kleinbuchstaben bei

Theoretisch unterscheidet HTML nicht zwischen Groß- und Kleinschreibung, Sie können schreiben, was Sie wollen, zum Beispiel:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <DIV> 
2. <P>Hier ist eine interessante Tatsache über Mais < /P> 
3. DIV>

Aber es ist am besten, nicht so zu schreiben. Es hat keinen Sinn, größere Buchstaben einzugeben, und der Code wird dadurch hässlich.

Vorschlag

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <div> 
2. 　<p>Hier ist eine interessante Tatsache über Mais < /p> 
3. div> 

11. Verwenden Sie H1-H6-Tags

Es wird empfohlen, alle sechs Tags auf Ihrer Webseite zu verwenden. Obwohl die meisten Menschen nur die ersten vier verwenden, bietet das am häufigsten verwendete H viele Vorteile, wie z. B. Gerätefreundlichkeit, Suchmaschinenfreundlichkeit. usw. Sie können auch alle P-Tags durch H6 ersetzen.

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <h1>Das ist ein wirklich wichtiger Mais-Fakt! h1> 
2. <h6>Hier geht es um einen kleinen, aber dennoch bedeutsamen Mais-Fakt h6>

12.Verwenden Sie eine ungeordnete Liste (UL), um das Navigationsmenü einzuschließen

Normalerweise verfügen Websites über Navigationsmenüs. Sie können diese folgendermaßen definieren:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <div id="nav" > 
2. <a href="#" >Startseite a> >
3. <a href="#" >Über a> >
<
4. a href="#" >Kontakt a> >
div
5. > Wenn Sie schönen Code schreiben möchten, verwenden Sie diese Methode am besten nicht. Warum das UL-Layout-Navigationsmenü verwenden? ——Weil UL für Definitionslisten geboren wurde

Definieren Sie es am besten so:

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

<

ul

1. id="nav" >  <
li
2. ><a href="#">Home a>li>  <
li
3. ><a href="#">Über a>li>  <
li
4. ><a href="#">Kontakt a>li> 
ul
5. > 

   15. Erfahren Sie, wie Sie mit IE umgehen

   IE war schon immer ein Albtraum für Frontend-Entwickler!

   Wenn Ihr CSS-Stylesheet grundsätzlich fertiggestellt ist, können Sie ein separates Stylesheet für den IE erstellen, das dann nur im IE wirksam wird:

   CSS-CodeInhalt in die Zwischenablage kopieren

   1.  
   2. Die Bedeutung dieser Codes ist: Dieser Code wird nur wirksam, wenn der Browser des Benutzers IE6 und niedriger ist. Wenn Sie IE7 einbinden möchten, ändern Sie „[if lt IE 7]“ in „[if lte IE 7]“.

   Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

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