프런트엔드 코딩 습관 - HTML 기사
- 高洛峰원래의
- 2017-02-14 16:05:441081검색
머리말
프론트엔드 엔지니어로서 우리는 매일 HTML, CSS, JavaScript를 작성해야 할 수도 있습니다. 모든 사람이 작성하는 코드에는 자신만의 스타일이 있고 코딩 습관과 지침이 있습니다. 다음은 나의 습관과 규칙을 여러분과 공유하겠습니다.
html
우선 문서를 표준화해야 하므로 문서를 표준화하려면 8b05045a5be5764f313ed5b9168a17e6을 추가해야 합니다. 8b05045a5be5764f313ed5b9168a17e6에 대한 해당 지침이 있습니다.
인코딩은 균일하게 utf-8, 09477266eebbc8a01f42387ae29e71dd이어야 하며
페이지에서 CSS 스타일이나 js를 인용할 때는 추가할 필요가 없습니다. 유형 선언. 예:
<link rel="stylesheet" href="..."> <style>...</style> <script src="..."></script> <script></script>
파일을 두 프로토콜 모두에서 사용할 수 없는 경우를 제외하고 이미지, 스타일, 스크립트 및 기타 미디어 파일의 URL에서 프로토콜 부분(http:, https:)을 생략하세요. 이 체계를 프로토콜 상대 URL, 상대 프로토콜 URL이라고 합니다. 장점은 HTTPS를 사용하여 페이지에 액세스하든 HTTP를 사용하든 브라우저는 일부 바이트를 절약하면서 동일한 프로토콜을 사용하여 페이지의 리소스를 요청한다는 것입니다. 브라우저가 상대 URL을 발견하면 현재 웹 페이지 프로토콜에 따라 // 앞에 동일한 프로토콜을 자동으로 추가합니다. 현재 웹 페이지가 http를 통해 액세스되면 모든 상대 참조는 // http://가 됩니다. https도 마찬가지입니다. 로컬로 보면 프로토콜이 file://이 됩니다. 이 사용법은 거의 모든 브라우저에서 지원됩니다. IE7/8에서는 작은 문제만 있습니다. 즉, 상대 URL(2cdf5bf648cf2f33323966d7f58a7f3f 또는 @import에 관계없이)을 통해 참조되는 CSS 파일이 두 번 다운로드됩니다. 따라서 성능에 약간의 영향을 미칩니다.
<!-- 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의 하위 레벨에 중첩될 수 없습니다. 5c69336ffbc20d23018e48b396cdd57a의 하위 레벨에는 표시할 수 없습니다. div와 같은 태그는 f5d188ed2c074f8b944552db028f98a1의 하위 레벨에만 배치할 수 있습니다. 06669983c3badb677f993a8c29d18845, 92cee25da80fac49f6fb6eec5fd2c22a 및 a34de1251f0d9fe1e645927f19a896e8 태그, a34de1251f0d9fe1e645927f19a896e8의 하위 수준은 b6c5a531a458a2e790c1fd6421739d1c, b4d429308760b6c2d20d6300079ed38e 태그 안에만 존재할 수 있습니다. td> 예를 들어, 다음 상황은 잘못되었습니다.
<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로 래핑되어야 합니다. dl> 패키지, ae20bdd317918ca68efdc799512a9b39, 92cee25da80fac49f6fb6eec5fd2c22a와 같은 유사한 테이블 태그는 단독으로 표시될 수 없습니다.
d5fd7aea971a85678ba271703566ebfd 및 bb9345e55eb71822850ff156dfde57c8은 기본 유형을 지정해야 하며, ff9c23ada1bcecdd1a0fb5d5a0f18437에는 기본 방법이 있어야 합니다. 이를 통해 브라우저마다 동작이 달라지는 것을 방지할 수 있습니다.
편의를 위해 ff9c23ada1bcecdd1a0fb5d5a0f18437에 action 속성을 추가하고, d5fd7aea971a85678ba271703566ebfd에 name 및 id 속성을 추가하는 것이 좋습니다. label, 5a07473c87748fb1bf73f23d45547ab8에는 속성 값을 추가해야 하고, a 태그에는 href 속성을 추가해야 합니다.
의미를 강화하려면 3b1c0bd85be58b211a2424d5fc9c2ab0 대신 b367242f19a18128711072e7b7cdbd4c을 사용하세요.
레이아웃에 테이블을 사용하지 말고 테이블이 있어야 하는 곳에 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中文网！