튼튼한 생활은 설명이 필요없고, 튼튼한 코드는 주석이 필요하지 않습니다! 프로그래머로서 우리는 모두 팀과 함께 작업을합니다. 팀워크의 효율성을 높이기 위해 코드를 작성할 때 주석, HTML 코드 포함 규칙, 클래스 이름 지정 사양 등과 같은 사양에주의를 기울여야합니다. 아름다운 코드는시, 다채롭고 잘 구성된 프로그래밍 언어와 같으며 주석이 생략 될 수도 있습니다 (물론 나중에 유지 관리 편의를 위해 주석을 추가해야 함).
프런트 엔드 정적 페이지를 개발할 때 html 구조를 신중하게 계획해야합니다. 좋은 html 코드는 브라우저의 유지 관리 및 올바른 렌더링에 도움이 될뿐만 아니라 검색 엔진 포함에도 도움이됩니다. SEO 사고는 html 페이지 구조를 잘 설계하고 아름답고 깔끔하며 의미있는 프론트 엔드 페이지를 작성합니다. 다음 측면에서 코드 사양에 대해 이야기 해 보겠습니다.
1. html 태그의 중첩 규칙
많은 XHTML 태그가 있습니다 : div, ul, li, dl, dt, dd, h1 ~ h6, p, a, addressa, span, strong ... 이러한 태그를 사용하여 페이지 구조를 만들 때 무한 중첩되지만 중첩에는 일정한 규칙이 필요합니다. 자신의 개인 습관이 무차별 적으로 중첩되도록 할 수 없습니다. 그렇다면 HTML 태그의 중첩 규칙은 무엇입니까?
(1) HTML 태그에는 블록 수준 요소 (블록) 및 인라인 요소 (인라인)가 포함됩니다.
1. 블록 수준 요소
일반적으로 웹 사이트 구조, 레이아웃, 호스팅 콘텐츠 구축에 사용됩니다. 여기에는 다음 태그가 포함됩니다.
address 、 blockquote 、 center 、 dir 、 div 、 dl 、 dt 、 dd 、 fieldset 、 form 、 h1 ~ h6 、 hr 、 isindex 、 menu 、 noframes 、 noscript 、 ol 、 p 、 pre 、 table 、 ul
2. 임베디드 요소
일반적으로 "강조, 스타일, 위 첨자, 아래 첨자, 앵커"등을 강조하기 위해 웹 사이트 콘텐츠의 특정 세부 정보 또는 일부에 사용되는 다음 태그는 모두 삽입 된 요소입니다.
a 、 abbr 、 약어 、 b 、 bdo 、 big 、 br 、 cite 、 code 、 dfn 、 em 、 font 、 i 、 img 、 input 、 kbd 、 label 、 q 、 s 、 samp 、 select 、 small 、 span 、 strike 、 strong 、 sub 、 sup 、 textarea 、 tt 、 u 、 var
(2) HTML 태그의 중첩 규칙
1. 블록 요소는 인라인 요소 또는 일부 블록 요소를 포함 할 수 있지만 인라인 요소는 블록 요소를 포함 할 수 없으며 다른 인라인 요소 만 포함 할 수 있습니다.
<div> <h1> </ h1> <p> </ p> </ div> —— 对
<a href=”#”> <span> </ span> </a> —— 对
<span> <div> </ div> </ span> —— 错
2. 블록 수준 요소는 <p> 안에 배치 할 수 없습니다.
<p> <ol> <li> </ li> </ ol> </ p> —— 错
<p> <div> </ div> </ p> —— 错
3. 포함 된 요소 만 포함 할 수 있고 더 이상 블록 수준 요소를 포함 할 수없는 몇 가지 특수 블록 수준 요소가 있습니다. 이러한 특수 태그는 다음과 같습니다.
h1 、 h2 、 h3 、 h4 、 h5 、 h6 、 p 、 dt
4. li는 div 태그를 포함 할 수 있습니다. 이것은 실제로 별도로 나열 할 필요가 없지만 인터넷의 많은 사람들이 이것에 대해 약간의 의구심을 가지고 있으므로 여기에서 설명하겠습니다.
li 및 div 태그는 모두 콘텐츠를로드하기위한 컨테이너입니다. 상태가 동일하고 계층 구조가 없습니다 (예 : h1, h2, 이러한 엄격한 계층 ^ _ ^). li 태그는 상위 ul 또는 ol 일 수도 있습니다. 수용, 왜 일부 사람들은 li이 div를 보유 할 수 없다고 생각합니까? Li를 너무 인색하지 마십시오. Li는 매우 얇은 것을 보지 마십시오. 사실 Li는 큰 마음을 가지고 있습니다.
5. 블록 수준 요소와 블록 수준 요소는 병치되고 포함 된 요소는 포함 된 요소와 병치됩니다.
<div><h2></h2><p></p></div> —— 对
<div><a href=”#”></a><span></span></div> —— 对
<div><h2></h2><span></span></div> —— 错
二、html编码规范
1.HTML doctype
首先，我们应该为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
2.字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。
3.引入 CSS 和 JavaScript 文件
根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。
例如：
<link rel="stylesheet" href="code-guide.css">
<script src="code-guide.js"></script>
4.减少标签的数量
任何时候我们都应该尽量使用最少的标签并保持最小的复杂度，编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。
5.属性顺序
在编写HTML 属性时我们应当按照以下给出的顺序依次排列，确保代码的易读性，提高团队合作开发效率。
-
class -
id,name -
data-* -
src,for,type,href -
title,alt -
aria-*,role
클래스를 정의 할 수있는 거의 모든 html 태그, 클래스는 재사용 가능한 구성 요소를 식별하는 데 사용되므로 우선 순위를 지정해야합니다. id는 특정 구성 요소를 식별하는 데 사용되며주의해서 사용해야하므로 (예 : 페이지 내의 책갈피) 2 위를 차지합니다.
6. SEO 최적화 된 사고로 쓰기
웹 사이트를 만들기 위해 우리는 확실히 쉽게 홍보 할 수 있어야합니다. html 코드를 작성할 때는 검색 엔진 색인 생성에 도움이되는 코드를 작성해야합니다. 예를 들어 각 태그와 각 img 태그에 title 속성을 추가해야합니다. Alt 속성 등