HTML hat eine fast 20-jährige Entwicklungszeit hinter sich. Von HTML4 über XHTML bis hin zum kürzlich sehr beliebten HTML5 hat es fast die Entwicklung des gesamten Internets miterlebt. Allerdings gibt es auch heute noch viele grundlegende Konzepte und Prinzipien, denen Entwickler besondere Aufmerksamkeit schenken müssen. Im Folgenden werde ich Ihnen die Entwicklungsprinzipien vorstellen, die befolgt werden sollten.

1. Nutzen Sie DIVs sinnvoll für das Layout

Bei der Entwicklung einer Webseite ist zunächst zu berücksichtigen, den Schwerpunkt der Seite festzulegen. Durch die Einbindung dieser Inhalte in DIV-Tags wird der Code auf der Seite ordentlich und gut eingerückt angezeigt.

<div id="header"></div> 
<div id="body-container"> 
        <div id="content"> <!-- Content -- > </div>   
        <div id="right-side-bar"> <!-- Right Side Bar Content Area -- ></div> 
</div>   
<div id="footer"></div>

2. Trennen Sie HTML-Tags und CSS-Stylesheets

Eine gute Seite sollte HTML-Tags und CSS-Stylesheets trennen. Dies ist ein Grundsatz, den jeder Webentwickler kennen sollte, wenn er zum ersten Mal mit der Webentwicklung in Berührung kommt. Allerdings gibt es bis heute noch viele Entwickler, die sich nicht strikt an diesen Grundsatz halten.

Betten Sie keinen Stylesheet-Code in HTML-Tags ein. Entwickler sollten sich angewöhnen, separate Dateien zum Speichern von CSS-Stylesheets zu erstellen. Dadurch wird es auch anderen Entwicklern erleichtert, ihre Arbeit bei der Änderung Ihres Codes schneller abzuschließen.

<p style="color: #CCC; font-size:16px; font-family: arial">
　　　　An example to illustrate inline style in html</p>

3. CSS-Code optimieren

Heutzutage ist es üblich, einer Website mehrere CSS-Dateien hinzuzufügen. Wenn eine Website jedoch zu viele CSS-Dateien enthält, verlangsamt dies die Reaktionsgeschwindigkeit der Website. Die Lösung besteht darin, den Code zu rationalisieren, mehrere CSS-Dateien zu optimieren und sie in einer Datei zusammenzuführen. Diese Methode kann die Ladegeschwindigkeit der Website deutlich verbessern. Darüber hinaus gibt es viele Tools, die zur Optimierung von CSS-Dateien verwendet werden können, wie zum Beispiel CSS Optimizer, Clean CSS usw.

Für CSS haben wir auch 9 hervorragende CSS-Frameworks empfohlen, die Sie kennen sollten. Sie können sich über die Typen und die damit verbundene Verwendung von CSS-Frameworks informieren.

4. Javascript-Dateien optimieren und am Ende der Seite platzieren

Wie bei CSS ist es auch üblich, der Seite mehrere Javascript-Dateien hinzuzufügen. Dies verringert jedoch auch die Reaktionsgeschwindigkeit der Website. Aus diesem Grund sollten Entwickler diese Javascript-Dateien rationalisieren und optimieren.

Aber eines ist anders als bei CSS: Browser unterstützen in der Regel kein paralleles Laden. Das heißt, wenn der Browser eine Javascript-Datei lädt, lädt er gleichzeitig keine anderen Inhalte mehr. Dies führt dazu, dass die Ladegeschwindigkeit von Webseiten scheinbar langsamer wird.

Eine gute Lösung besteht darin, die Ladereihenfolge der Javascript-Dateien an die letzte Stelle zu setzen. Um dies zu erreichen, können Entwickler Javascript-Code am Ende des HTML-Dokuments platzieren. Die beste Position ist in der Nähe des -Tags.

5. Nutzen Sie die Titelelemente

Dies hilft Benutzern, sich mehr auf die wichtigen Teile der Seite zu konzentrieren. Für Blogs empfehle ich (in Anlehnung an den Autor dieses Artikels) die Verwendung des

-Tags, um den Blogtitel hervorzuheben. Denn der Blogtitel ist fast der wichtigste Teil der Seite.

<h1>This is the topmost heading</h1>
<h2>This is a sub-heading underneath the topmost heading.</h2>
<h3>This is a sub-heading underneath the h2 heading.</h3>

Nach dem Login kopieren

6. Verwenden Sie geeignete HTML-Tags an den richtigen Stellen

HTML-Tags sind der Schlüssel zum Aufbau einer standardisierten Inhaltsstruktur. Beispielsweise wird das Tag verwendet, um wichtige Inhalte hervorzuheben. Der

-Tag eignet sich zum Hervorheben von Artikelabsätzen. Wenn Sie zwischen Absätzen Leerzeilen einfügen möchten, verwenden Sie nicht das Tag

<em>emphasized text</em>
<strong>strongly emphasized text</strong>

Nach dem Login kopieren

7、避免滥用

标签

并不是所有块元素都应该用

标签来创建。例如，可以在内联元素的属性里添加display:block，将其以块元素的方式显示。

8、使用列表创建导航

使用

列表标签，再配以相应的CSS样式，可以创建美观的导航菜单。

9、别忘了封闭标签

现在，每当我回忆起在大学里学到的关于Web开发的第一堂课时，教授提到的HTML结构的重要性总是浮现在我的脑海。根据W3C标准，标签应该被封闭。那是因为，在一些浏览器下，如果没有按照标准来将标签封闭，会出现显示不正常的问题。而这一情况在IE6、7和8里尤为明显。

10、标签小写语法

标签采用小写语法是一项行业标准。虽然大写语法并不影响页面的显示效果，但是，代码的可读性很差。下面这段代码可读性就非常差：

<DIV>
<IMG SRC="images/demo_image.jpg" alt="demo image"/>
<A HREF="#" TITLE="click here">Click Here</A>
<P>some sample text</P>
</DIV>

Nach dem Login kopieren

11、为图片标签添加alt属性

在标签里，alt属性通常非常有用。因为搜索引擎通常无法直接抓取图片文件。但是，如果开发者在alt属性里添加了图片的描述内容，将会方便搜索引擎的抓取。

<!-- has an alt attribute, which will validate, but alt value is meaningless -- >
<img id="logo" src="images/bgr_logo.png" alt="brg_logo.png" />
 
<!-- The correct way -- >
<img id="logo" src="images/bgr_logo.png" alt="Anson Cheung - Web Development" />

Nach dem Login kopieren

12、在表格里使用 和

为了提高代码质量，并让用户容易理解表格内容，我们应该用 和

标签创建表格元素。

<fieldset>
    <legend>Personal Particular</legend>
    <label for="name">Name</label><input type="text" id="name" name="name" />
    <label for="email">E-mail</label><input type="text" id="email" name="email" />
    <label for="subject">Subject</label><input type="text" id="subject" name="subject" />
    <label for="message" >Message Body</label>
　　<textarea rows="10" cols="20" id="message" name="message" ></textarea>
</fieldset>

Nach dem Login kopieren

13、将浏览器兼容代码标明信息并相互分开

对一名Web开发者来说，跨浏览器兼容是一个被重点关注的问题。通常，开发者会针对不同的浏览器来编码，也即是CSS hack。但是，如果开发者在编码时，能注明代码为哪一个版本的浏览器所写，会为以后的维护工作带来极大方便。下面就是一个很好的示例：

<!--[if IE 7]>
<link rel="stylesheet" href="css/ie-7.css" media="all">
<![endif]-->

Nach dem Login kopieren

<!--[if IE 6]>
<link rel="stylesheet" href="css/ie-6.css" media="all">
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
        DD_belatedPNG.fix(&#39;#logo&#39;);
</script>
<![endif]-->

Nach dem Login kopieren

14、避免过度注释

作为一名开发者，在代码中添加注释是一个好习惯，能方便理解并易于维护。这在其它编程语言如PHP、JAVA 和 C#里很普遍。但是，HTML/XHTML是文本标记语言，非常容易理解。因此，无需为每行代码都添加注释。

15、测试代码

Entwicklern wird empfohlen, zum Testen des Codes den Text-Markup-Verifizierungsdienst des W3C zu nutzen. Es handelt sich um ein effizientes Testtool, das Ihnen dabei helfen kann, Fehler auf Ihren Seiten zu finden. Darüber hinaus kann es Ihnen helfen, den entsprechenden Code ausgehend vom Seitenfehler zu finden. Dies ist nach Abschluss der Codierung oft schwierig zu bewerkstelligen. Entwickler müssen jedoch beachten, dass Code, der die Überprüfung besteht, kein Code mit hervorragender Leistung ist.

Verwandte Etiketten：

web 开发者 编码

Quelle：php.cn

Vorheriger Artikel：5 Erfahrungen, um selbst mit dem Erlernen der Webentwicklung zu beginnen Nächster Artikel：Der Unterschied zwischen neuer Website und neuem WEB-Projekt in VS

Erklärung dieser Website

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

Neueste Artikel des Autors

• Einführung in den PHP-OB-Cache und detaillierte Erläuterung der OB-Funktion
  2023-03-07 21:36:01
• So ändern Sie das Passwort in MySQL mit dem Befehl cmd
  1970-01-01 08:00:00
• Detaillierte Erläuterung, wie Javascript Cookies verwaltet, um Beispiele für Benutzeranmeldecodes zu implementieren
  1970-01-01 08:00:00
• Was sind PHP-Klassen? Detaillierte Erläuterung der Attribute der PHP-Klasse
  2023-03-11 13:22:01
• Detaillierte Erläuterung der Verwendung der grundlegenden JavaScript-Funktionen Debounce, Poll und Once-Instanzen
  1970-01-01 08:00:00
• Einführung in neue Funktionen wie PHP7-Funktionen, Deklarationen, Rückgabewerte usw.
  2023-03-11 15:08:02
• Ausführliche Erklärung, wie man den Array-Schlüsselnamen mit PHP array_keys() erhält
  2023-03-12 07:44:02
• PHP ist mit der Verwendung der Aktualisierungspufferfunktion bestens vertraut
  2023-03-11 10:18:01
• Ausführliche Erklärung, wie Javascript Funktionen verwendet, und Beispiele für die Verwendung von Rückgabewerten
  1970-01-01 08:00:00
• Einführung verschiedener Sortierarten, wenn Django die Datenbank abfragt
  1970-01-01 08:00:00

Aktuelle Ausgaben

Starten Sie einen transparenten Browser, um das Erlebnis von Webanwendungen und PWA zu verbessern [unterstützt statisches HTML, CSS und JavaScript] [Benutzern die Anzeige von Desktop-Hintergründen in unseren Webanwendungen/PWA ermöglichen] Ich bin ein Junior-Frontend-Entwickler und Designer, der derzeit eine Webanwendung (Chat) ...

Aus 2024-04-05 13:50:12

0

1

1367

Der Bootstrap-Schalter funktioniert nicht richtig, wenn die Größe der Webseite geändert wird 这是代码:<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...

Aus 2024-04-05 08:45:39

0

1

3443

Verwenden Sie lokal installierte Bibliotheken auf Website-Seiten Ist es möglich, Bibliotheken (.dll, .ocx), die für Windows-Betriebssysteme geschrieben und...

Aus 2024-04-05 00:15:49

0

1

3563

Wie kann man auf bestimmte Klickereignisse achten, andere jedoch unterdrücken? Meine Webanwendung enthält eine HTML-Tabelle, in der jede Zeile auf eine bestimmte URL ver...

Aus 2024-04-04 16:55:27

0

1

317

Javascript – Mocha Chai-Einheitentests werden nicht ausgeführt Ich arbeite an einem Projekt mit dem Front-End-Webentwicklung-Kurs-Bootcamp und leider kan...

Aus 2024-04-02 14:52:19

0

1

356

verwandte Themen

Mehr>

• Gängige Codierungsmethoden
• Was ist der Unterschied zwischen Legacy und UEFI?
• Einführung in den Standort des Win10-Bedienfelds
• So ändern Sie den Text auf dem Bild
• So stellen Sie dauerhaft gelöschte Dateien auf dem Computer wieder her
• Suchverlauf löschen
• Welche Datei ist .exe?
• Warum verschwinden die Wörter nach der Worteingabe?