Front-End-Codierungsgewohnheiten – HTML-Artikel

Vorwort

Als Front-End-Ingenieur müssen wir möglicherweise jeden Tag HTML, CSS und JavaScript schreiben. Der von jedem geschriebene Code enthält seinen eigenen persönlichen Stil und hat seine eigenen Codierungsgewohnheiten und Richtlinien. Im Folgenden möchte ich Ihnen meine Gewohnheiten und Regeln mitteilen.

html

Zuerst müssen wir das Dokument standardisieren, also müssen wir 8b05045a5be5764f313ed5b9168a17e6 hinzufügen, um das Dokument zu standardisieren. Es gibt entsprechende Anweisungen zu 8b05045a5be5764f313ed5b9168a17e6

Die Kodierung sollte einheitlich utf-8 sein, 09477266eebbc8a01f42387ae29e71dd dann

Beim Zitieren von CSS-Stil oder JS auf der Seite ist kein Hinzufügen erforderlich eine Typdeklaration. Beispiel:

<link rel="stylesheet" href="..."> 
<style>...</style> 
<script src="..."></script>     
<script></script>

Lassen Sie den Protokollteil (http:, https:) der URL von Bildern, Stilen, Skripten und anderen Mediendateien weg, es sei denn, die Datei ist nicht unter beiden Protokollen verfügbar. Dieses Schema wird als protokollrelative URL, relative Protokoll-URL, bezeichnet. Der Vorteil besteht darin, dass der Browser unabhängig davon, ob Sie über HTTPS oder HTTP auf die Seite zugreifen, die Ressourcen auf der Seite mit demselben Protokoll anfordert und dabei einige Bytes spart. Wenn der Browser auf eine relative URL stößt, fügt er entsprechend dem aktuellen Webseitenprotokoll automatisch dasselbe Protokoll vor // hinzu. Wenn über http auf die aktuelle Webseite zugegriffen wird, werden alle relativen Verweise // zu http://. Das Gleiche gilt für https. Wenn Sie es lokal anzeigen, wird das Protokoll zu file://. Diese Verwendung wird von fast allen Browsern unterstützt. Unter IE7/8 gibt es nur ein kleines Problem, nämlich dass CSS-Dateien, auf die über relative URLs verwiesen wird (unabhängig von 2cdf5bf648cf2f33323966d7f58a7f3f oder @import), zweimal heruntergeladen werden. Es hat also einen kleinen Einfluss auf die Leistung.

<!-- Not recommended -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* Not recommended */
.example {
  background: url("https://www.google.com/images/example");
}
/* Recommended */
.example {
  background: url("//www.google.com/images/example");
}

Alle Tags, Attribute und Attributnamen sind in Kleinbuchstaben geschrieben und die Attributwerte sind in „“ (doppelte Anführungszeichen) eingeschlossen. Jedes Doppel-Tag muss ein entsprechendes End-Tag haben (Einzel-Tags schon). folgt diesem Standard nicht und muss dennoch gemäß dem ursprünglichen HTML-Standard nicht mit „/>“ enden. Zur Erinnerung: Viele Seitenverformungen im IE hängen mit nicht geschlossenen Tags oder verschachtelten Fehlern zusammen.

-Tags sollten in einer angemessenen Reihenfolge verschachtelt sein. Beispiel:

<p><b></p></b>
需修改为：
<p><b></b></p>

dc6dce4a544fdca2df29d5ac0ea9906b⾥ kann e388a4556c0f65e1904146cc1a846bee enthalten, aber e388a4556c0f65e1904146cc1a846bee⾥ darf nicht enthalten dc6dce4a544fdca2df29d5ac0ea9906b und andere Unterebenen von ff6d136ddc5fdfeffaf53ff6ee95f185 dürfen keine anderen Tags als 5c69336ffbc20d23018e48b396cdd57a verschachteln andere Tags als 67bc4f89d416b0b8236eaa5f43dee742 dürfen nur in den Unterebenen von ae20bdd317918ca68efdc799512a9b39 platziert werden. , 06669983c3badb677f993a8c29d18845-, 92cee25da80fac49f6fb6eec5fd2c22a-Tags, die Unterebenen von a34de1251f0d9fe1e645927f19a896e8 dürfen nur b6c5a531a458a2e790c1fd6421739d1c- und b4d429308760b6c2d20d6300079ed38e-Tags enthalten ;td>-Tag. Beispielsweise sind die folgenden Situationen falsch:

<table> 
    <input type="hidden"> 
    <tr>
        <td></td>
        <p></p>
    </tr> 
</table>
<ul> 
    <li></li> 
    <div></div> 
</ul>

需改为：
<table>         
    <tr>
        <td><input type="hidden"> </td>
        <p></p>
    </tr> 
</table>
<ul> 
    <li><div></div></li>          
</ul>

25edfb22a4f469ecb59f1190150159c6-Tag muss von ff6d136ddc5fdfeffaf53ff6ee95f185 umschlossen werden, 73de882deff7a050a357292d0a1fca94 5c69336ffbc20d23018e48b396cdd57a-Paket, ae20bdd317918ca68efdc799512a9b39 und andere Tabellen-Tags dürfen nicht alleine erscheinen.

d5fd7aea971a85678ba271703566ebfd und bb9345e55eb71822850ff156dfde57c8 müssen den Standardtyp angeben und ff9c23ada1bcecdd1a0fb5d5a0f18437 muss eine Standardmethode haben, um Verhaltensunterschiede in verschiedenen Browsern zu vermeiden.

Der Einfachheit halber wird empfohlen, dass das ff9c23ada1bcecdd1a0fb5d5a0f18437 das Aktionsattribut hinzufügt, d5fd7aea971a85678ba271703566ebfd muss die Attribute name und id hinzugefügt werden, und es ist am besten, das entsprechende 2e1cf0710519d5598b1f0f14c36ba674 label, 5a07473c87748fb1bf73f23d45547ab8 muss die Wertattribute hinzufügen, das a-Tag muss das href-Attribut hinzufügen.

Um die Semantik zu verbessern, verwenden Sie bb9345e55eb71822850ff156dfde57c8 anstelle von d5fd7aea971a85678ba271703566ebfd.

Verwenden Sie keine Tabelle für das Layout und verwenden Sie nicht ff6d136ddc5fdfeffaf53ff6ee95f185 oder andere Tags, wo eine Tabelle sein sollte. Der Zweck der Tabelle besteht darin, tabellarische Daten anzuzeigen. (a) Allgemeine Inline-Elemente, einschließlich, aber nicht beschränkt auf

<a>, <abbr>, <b>, <cite>, <code>, <del>, <dfn>, <em>, <i>,<img>,<input>,<ins>,<kbd>,<label>,<mark>,<q>,　 <samp>,<span>,<strong>, <sub>, <sup> 前后⽆需换⾏; 在块元素或⼀些内联块元素，包括但不限于 <address>, <area>,<article>,<aside>,<audio>,<bdo>,<blockquote>,<body>,<button>,<canvas>, <caption>,<col>,<colgroup>,<command>,<datalist>,<dd>,<details>,<div>,<dl>, <dt>, <embed>, <filedset>, <figcaption>, <figure>, <footer>, <form>, <frame>, <frameset>,<h1>-<h6>,<head>,<header>,<hgroup>,<hr>,<html>,<iframe>,<legend>, <li>,<link>,<meta>,<meter>,<nav>,<object>,<ol>,<optgroup>,<options>,<output>, <p>, <param>, <pre class="brush:php;toolbar:false">, <progress>, <ruby>, <script>, <section>, <select>, <source>, <style>, <summary>, <table>, <tbody>, <tfoot>, <thead>, <ul>, <video>, <tr>, <th>, <td>, <textarea>, <time> 前后需换⾏，中间可以不换⾏; 在 <br>, <wbr> 前⾯不换⾏， 后⾯换⾏。

(b) HTML-Code sollte mit 4 Leerzeichen anstelle von Tabulatoren eingerückt werden, um die Anzeige in verschiedenen Editoren konsistent zu halten. (c) Bei mehreren aufeinanderfolgenden Leerzeichen entfernen Sie bitte die Leerzeichen am Ende der Codezeile.

Verwenden Sie Zeilenumbrüche, Einzüge und Leerzeichen entsprechend, um den Code sauber zu machen.

html Schreiben Sie Kommentare zwischen Funktionsblöcken, damit die Funktionsbeschreibung oder verschachtelte Eingabeaufforderungen dieses Funktionsblocks erklärt werden können. Die Kommentare sollten präzise, ​​aber nicht komplex sein.

<!-- START header --> 
<div id="header"> ... </div> 
<!-- END header -->

Fügen Sie dem Link gegebenenfalls einen Titel hinzu und fügen Sie Alt und Titel zum Bild hinzu.

把css调⽤写在head头部，不需预先执⾏的JS尽量写在页⾯尾部，不要在 html 代码中间插入script代码块，script代码块应与html之间留⼀个空⾏，script代码块开头⽆需缩进，如：

<div class="mod"> 
    <ul class="list"> 
        <li>
            <a href="">list 1</a> 
            <a href="">list 2</a> 
            <a href="">list 3</a> 
        </li> 
    </ul> 
</div>

<script> 
// all javascript code 
function abc() { // function&#39;s code } 
</script>

不在html中混合JS及event事件。

明确指定图⽚的width和 height。不仅对seo有⽤，对因各种原因⽆法显⽰图⽚的情况下，也能保持布局样式基本不变。

通过给元素设置⾃定义属性来存放与JS交互的数据，属性名格式为 data-xx(-xx)，中间⽤中 划线连接，例如：data-lazyload-url。

禁⽌单独⽤ dc6dce4a544fdca2df29d5ac0ea9906b 标签做容器，使⽤ dc6dce4a544fdca2df29d5ac0ea9906b 时必须⾄少带有⼀个类名。更不要它代替e388a4556c0f65e1904146cc1a846bee标签，因为 dc6dce4a544fdca2df29d5ac0ea9906b 标签没有明确的含义，应该根据各标签的语义，做到该⽤什么标签就⽤什么标签。

更多前端编码习惯 —— html篇相关文章请关注PHP中文网！