ホームページ >ウェブフロントエンド >htmlチュートリアル >フロントエンドのコーディング習慣 - HTML 記事
フロントエンドのコーディング習慣 - HTML 記事
- 高洛峰オリジナル
- 2017-02-14 16:05:441100ブラウズ
前書き
フロントエンド エンジニアとして、私たちは毎日 HTML、CSS、JavaScript を記述する必要があるかもしれません。誰もが独自のスタイルを持ち、独自のコーディング習慣とガイドラインを持っています。 . 習慣と規範。
html
まず、ドキュメントを標準化する必要があるため、ドキュメントを標準化するために 8b05045a5be5764f313ed5b9168a17e6 を追加する必要があります。 w3c については、対応する手順があります。
エンコーディングは一律utf-8、1cfe7ac94e4c061505c2a61e8ebacb0e または @import に関係なく) を介して参照される CSS ファイルが 2 回ダウンロードされるという小さな問題だけがあります。したがって、パフォーマンスへの影響はわずかです。
<!-- 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");
}タグ、属性、属性名はすべて小文字で、属性値は「」（二重引用符）で囲みます。それぞれの二重タグは対応する終了タグで追加する必要があります（単一タグはこの標準に従いません）。元の HTML 標準に従っています (つまり、「/>」で終わる必要はありません)。注意: IE でのページ変形の多くは、閉じられていないタグまたはネストされたエラーに関連しています。
タグは適切な順序でネストする必要があります。例:
<p><b></p></b> 需修改为： <p><b></b></p>
dc6dce4a544fdca2df29d5ac0ea9906b⾥には e388a4556c0f65e1904146cc1a846bee を含めることができますが、e388a4556c0f65e1904146cc1a846bee⾥には dc6dce4a544fdca2df29d5ac0ea9906b などのブロックレベルの要素を含めることはできません。 ff6d136ddc5fdfeffaf53ff6ee95f185 および c34106e0b4e09414b63b2ea253ff83d6 のサブレベルには 25edfb22a4f469ecb59f1190150159c6 以外のタグを含めることはできません。 div のような 67bc4f89d416b0b8236eaa5f43dee742 タグは、f5d188ed2c074f8b944552db028f98a1、06669983c3badb677f993a8c29d18845、d4466171bcf76f2c491761ebc2d601e4 タグ、および a34de1251f0d9fe1e645927f19a896e8 のサブレベル
<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 タグは ff6d136ddc5fdfeffaf53ff6ee95f185 または 73de882deff7a050a357292d0a1fca94 で囲む必要があります。 、ae20bdd317918ca68efdc799512a9b39、92cee25da80fac49f6fb6eec5fd2c22a およびその他のテーブル タグを単独で使用することはできません。
d5fd7aea971a85678ba271703566ebfd と bb9345e55eb71822850ff156dfde57c8 はデフォルトのタイプを指定し、ブラウザごとの動作の違いを避けるために ff9c23ada1bcecdd1a0fb5d5a0f18437 にはデフォルトのメソッドを指定する必要があります。
便宜上、ff9c23ada1bcecdd1a0fb5d5a0f18437 には action 属性を追加し、d5fd7aea971a85678ba271703566ebfd には name 属性と id 属性を追加する必要があり、対応する 2e1cf0710519d5598b1f0f14c36ba674 タグを追加することをお勧めします。 ; value 属性、ラベル href 属性を追加する必要があります。
セマンティクスを強化するために、ボタンは d5fd7aea971a85678ba271703566ebfd の代わりに bb9345e55eb71822850ff156dfde57c8 を使用します。
table をページ レイアウトに使用しないでください。table の目的は表形式のデータを表示することであるため、ff6d136ddc5fdfeffaf53ff6ee95f185 タグを使用しないでください。 (a) 一般的なインライン要素 (
<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 コードは、さまざまなエディターで一貫した表示を維持するために、タブではなく 4 つのスペースでインデントする必要があります。 (c) 複数の連続するスペースの場合は、コード行末のスペースを削除するために使用してください。
コードをきれいにするために、改行、インデント、スペースを適切に使用してください。
html この機能ブロックの機能説明またはネストされたプロンプトを説明できるように、機能ブロック間にコメントを記述します。コメントは正確である必要がありますが、過剰ではありません。
<!-- START header --> <div id="header"> ... </div> <!-- END header -->
必要に応じてリンクにタイトルを追加し、画像に alt とタイトルを追加します。
把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's code }
</script>不在html中混合JS及event事件。
明确指定图⽚的width和 height。不仅对seo有⽤，对因各种原因⽆法显⽰图⽚的情况下，也能保持布局样式基本不变。
通过给元素设置⾃定义属性来存放与JS交互的数据，属性名格式为 data-xx(-xx)，中间⽤中 划线连接，例如：data-lazyload-url。
禁⽌单独⽤ dc6dce4a544fdca2df29d5ac0ea9906b 标签做容器，使⽤ dc6dce4a544fdca2df29d5ac0ea9906b 时必须⾄少带有⼀个类名。更不要它代替e388a4556c0f65e1904146cc1a846bee标签，因为 dc6dce4a544fdca2df29d5ac0ea9906b 标签没有明确的含义，应该根据各标签的语义，做到该⽤什么标签就⽤什么标签。
更多前端编码习惯 —— html篇相关文章请关注PHP中文网！