Ich habe zufällig eine solche Datei in meinem Ordner gefunden, ich kann mich nicht erinnern, woher sie kommt, und habe festgestellt, dass die Zusammenfassung ganz gut ist.
Ob aus technischer Sicht oder aus Entwicklungsperspektive, es gibt bestimmte Standards für Spezifikationsdokumente für die Web-Frontend-Entwicklung. Dieser Artikel fasst eine Reihe von Web-Entwicklungsdokumenten zu den Entwicklungsaussichten zusammen von CSS3 und HTML5, nur als Referenz.
Zweck der Spezifikation:
Um die Effizienz der Teamzusammenarbeit zu verbessern und das Back-End-Personal zu erleichtern Fügen Sie Funktionen und Front-End-Wartung nach der Optimierung hinzu und geben Sie hochwertige Dokumente aus. Dieses Dokument ist speziell formuliert. Sobald dieses Spezifikationsdokument bestätigt ist, müssen Front-End-Entwickler die Front-End-Seite gemäß den Spezifikationen dieses Dokuments entwickeln. Wenn in diesem Dokument etwas falsch oder unangemessen ist, melden Sie es bitte rechtzeitig, und es kann nach Diskussion und Entscheidung geändert werden.
Grundlegende Richtlinien:
Konformität mit Webstandards, semantischem HTML, Trennung von Struktur, Leistung und Verhalten, hervorragende Kompatibilität. Im Hinblick auf die Seitenleistung muss der Code prägnant, klar und geordnet sein, um ihn zu reduzieren die Serverlast so hoch wie möglich und stellen Sie die schnellste Parsing-Geschwindigkeit sicher
Dateispezifikationen
1. CSS-, JS- und Bilddateien werden alle in dem in den
html-Dateien vereinbarten Verzeichnis archiviert. Benennung: Englischer Name, Suffix .htm Platzieren Sie gleichzeitig den entsprechenden Schnittstellenentwurf im selben Verzeichnis. Wenn der Schnittstellenentwurf auf Chinesisch heißt, benennen Sie ihn bitte mit demselben Namen wie die HTML-Datei um, um das Auffinden der entsprechenden Seite beim Hinzufügen von Funktionen zum Backend zu erleichtern 🎜>
3. Benennung der CSS-Datei: Gemeinsame Base.css, Homepage index.css, andere Seiten werden entsprechend den tatsächlichen Modulanforderungen benannt.; >4. Js-Dateibenennung: Englische Benennung, Suffix .js wird geteilt, andere Namen basieren auf tatsächlichen Modulanforderungen.
HTML-Schreibstandards
1. Dokumenttyp-Deklaration und -Kodierung: Einheitlich für den HTML5-Deklarationstyp ; ;, wird beim Schreiben verwendet. Die IDE implementiert Einrückungen auf klarer Ebene
2. Außer unter besonderen Umständen muss die Stildatei extern mit
… verknüpft werden. ; Unter besonderen Umständen muss die Datei am Ende der Seite verlinkt werden.3 Bei der Einführung von Stildateien oder JavaScript-Dateien muss die Standardtypdeklaration weggelassen werden folgt:
<link rel=”stylesheet” href=”…” /> <style>…</style> <script src=”…”></script>
4. Der Dateiname muss den Bibliotheksnamen und die Version enthalten Nummer und ob es sich um eine komprimierte Version handelt, z. B. jquery-1.4.1.min .js; das Dateinamenformat ist Bibliotheksname + Plug-in-Name, z. B. jQuery.cookie.js; >
6 Keine Kompatibilitätsprobleme wie span, em, strong, optgroup, label usw.; wenn Sie benutzerdefinierte Attribute zu HTML-Elementen hinzufügen müssen, müssen Sie zunächst Folgendes berücksichtigen: Es gibt kein standardmäßig vorhandenes geeignetes Tag, das festgelegt werden kann kann „data-“ als Präfix verwenden, um die Verwendung von „data:“ und anderen Benennungsmethoden zu vermeiden.
7 auf Wichtigkeit (die gleiche Seite kann nur ein h1 haben), p für Absatz-Tags und ul für Listenelemente können nicht in Inline-Elementen verschachtelt werden Verschachtelung so weit wie möglich, wie zum Beispiel
Willkommen bei XXX, Ihr Benutzername ist
Benutzername
kann vollständig durch den folgenden Code ersetzt werden:Willkommen bei XXX, Ihr Benutzername ist Benutzername
;9. Beim Schreiben von Linkadressen müssen Sie Weiterleitungen vermeiden, zum Beispiel: href="http://itaolun.com/" , das heißt, „/“ muss nach der URL-Adresse hinzugefügt werden;
10. 在页面中尽量避免使用style属性,即style=”…”;
11. 必须为含有描述性表单元素(input, textarea)添加label, 如
<p>姓名: <input type=”text” id=”name” name=”name” /></p>须写成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>
12. 能以背景形式呈现的图片, 尽量写入css样式中;
13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;
14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;
15. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(>) & 空格( ) & ?(?) 等等;
16. 书写页面过程中, 请考虑向后扩展性;
17. class & id 参见 css书写规范.
css书写规范
1. 编码统一为utf-8;
2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;
3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外;
4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;
5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由 小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.
6. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):
a, 通过从属写法规避, 示例见d;
b, 取父级元素id/class命名部分命名, 示例见d;
c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;
d, a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码中加入新的p元素,
按a命名法则: …
样式写法: #mainnav .firstnav{…….}
按b命名法则: …
样式写法: .main_firstnav{…….}
7. css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin ＆ padding ＆ float（包括clear） ＆ position（相应的 top,right,bottom,left） ＆ display ＆ visibility ＆ overflow等； 自身属性主要包括: width & height & background & border; 文本属性主要包括： font ＆ color ＆ text-align ＆ text-decoration ＆ text-indent等；其他属性包括: list-style(列表样式) ＆ vertical-vlign ＆ cursor ＆ z-index(层叠顺序) ＆ zoom等. 我所列出的这些属性只是最常用到的, 并不代表全部;
8. 书写代码前, 考虑并提高样式重复使用率;
9. 充分利用html自身属性及样式继承原理减少代码量, 比如:
定义
ul.list li{position:relative} ul.list li span{position:absolute; right:0}即可实现日期居右显示
10. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;
11. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;
12. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现, 如
thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法:
table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css文件中我会初始化表格样式)
13. 杜绝使用 兼容ie8;
14. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:
_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
15. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;
16. 减少使用影响性能的属性, 比如position:absolute || float ;
17. 必须为大区块样式添加注释, 小区块适量注释;
18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;
JavaScript书写规范
1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);
2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;
3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;
jQuery变量要求首字符为’_’, 其他与原生JavaScript 规则相同, 如: _iTaoLun;
另, 要求变量集中声明, 避免全局变量.
4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;
5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();
6. 命名语义化, 尽可能利用英文单词或其缩写;
7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;
8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;
9. 代码结构明了, 加适量注释. 提高函数重用率;
10. 注重与html分离, 减小reflow, 注重性能.
图片规范
1. 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;
2. 图片格式仅限于gif || png || jpg;
3. Benennen Sie alles mit einer Kombination aus englischen Kleinbuchstaben ||, die keine Leerzeichen enthalten dürfen von anderen Teammitgliedern; außerdem ist der Name in zwei Teile unterteilt, den ersten und den letzten Teil, getrennt durch Unterstriche, wie zum Beispiel ad_left01.gif || . Wählen Sie das kleinste Bildformat und die kleinste Bildqualität, um die Ladezeit zu verkürzen (falls verwendet). relevante Anweisungen der CSS-Spezifikation);
6. Verwenden Sie die CSS-Sprite-Technologie, um sich auf kleine Hintergrundbilder oder Symbole zu konzentrieren, um die HTTP-Anfragen zu reduzieren entsprechendes Sprite-PSD-Quellbild und speichern Sie es im IMG-Verzeichnis.
Kommentarspezifikation
1. HTML-Kommentar: Kommentarformat , „–“ kann nur am Anfang und Ende des Kommentars platziert werden und kann nicht im Kommentartextbereich platziert werden;
2. CSS-Kommentare: Kommentarformat/*Kommentar hier */;
3. JavaScript-Kommentare, einzeilige Kommentare verwenden /Einzeilige Kommentare hier‘, mehrzeilige Kommentare verwenden /* Mehrzeilige Kommentare hier*/;
Konventionen für Entwicklungs- und Testtools
Es wird empfohlen, Dw | zu verwenden. Sie können auch nach Ihren eigenen Vorlieben wählen, aber Sie müssen die folgenden Grundsätze befolgen :
1. Verwenden Sie den Ansichtsmodus der IDE nicht zum „Zeichnen“ von Code.
2 Codes, wie z. B. einige in Dw integrierte funktionale JS; Testen Sie FireFox & IE6 & IE7 & IE8 in der frühen Entwicklung und fügen Sie Opera & Chrome & Safari während der späteren Optimierung hinzu
Empfohlene Testreihenfolge: FireFox–> ;IE7–>IE8–; >IE6–>Opera–>Chrome–>Safari, es wird empfohlen, Firebug- und IE Tab Plus-Plug-Ins zu installieren
Andere Spezifikationen
1. Vervollständigen Sie die Seite streng nach der Arbeitsteilung, um die CSS-Wiederverwendungsrate zu verbessern und wiederholte Entwicklungen zu vermeiden.
2 Code schreiben, den jeder verstehen kann, ist eine Tugend. Denken Sie an Benutzer und an Server
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Frontend-Namenskonventionen für HTML, CSS und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
