HTML 코드 작성 가이드
- 高洛峰원래의
- 2017-02-24 10:12:311048검색
일반 규칙
태그
자동 닫는 태그, 닫을 필요 없음(예: img input br hr, 등);
닫아야 하는 선택적 닫는 태그(예: bed06894275b65c1ab86501b08a632eb 또는 36cc49f0c466276486e50c850b7e4956)
태그 수를 줄여보세요.
<img src="images/google.png" alt="Google"> <input type="text" name="title"> <ul> <li>Style</li> <li>Guide</li> </ul> <!-- Not recommended --> <span class="avatar"> <img src="..."> </span> <!-- Recommended --> <img class="avatar" src="...">
클래스 및 ID
클래스 이름은 표현식이 아닌 함수 또는 내용의 이름을 따서 지정해야 합니다.
클래스 및 ID는 소문자로 지정해야 합니다. multiple 단어를 구성할 때 대시 구분을 사용하세요.
고유 ID를 Javascript 후크로 사용하고 스타일 정보 없이 클래스를 생성하지 마세요.
<!-- Not recommended --> <p class="j-hook left contentWrapper"></p> <!-- Recommended --> <p id="j-hook" class="sidebar content-wrapper"></p>
속성 순서
가독성을 보장하려면 HTML 속성이 특정 순서로 표시되어야 합니다.
id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role
<a id="..." class="..." data-modal="toggle" href="###"></a> <input class="form-control" type="text"> <img src="..." alt="...">
따옴표
속성 정의에는 큰따옴표를 일률적으로 사용하세요.
<!-- Not recommended --> <span id='j-hook' class=text>Google</span> <!-- Recommended --> <span id="j-hook" class="text">Google</span>
b 중첩
a 중첩 p는 허용되지 않습니다. 이 제약 조건은 의미론적 중첩 제약 조건이며 이와 다른 다른 제약 조건이 있습니다. a와 같은 엄격한 중첩 제약 조건은 a를 중첩하는 것을 허용하지 않습니다.
모든 브라우저에서 엄격한 중첩 제약 조건이 허용되는 것은 아닙니다. 의미적 중첩 제약 조건의 경우 대부분의 브라우저가 내결함성을 처리하며 생성된 문서 트리가 서로 다를 수 있습니다.
의미적 중첩 제약 조건
25edfb22a4f469ecb59f1190150159c6
5ff6ac44ea65cb7fe9f2623dcf5a3e72는 35864a309af91d3c6f1bba5a3100a758는 상호작용 요소인 3499910bf9dac5ae3c52d5ede7383485, 221f08282418e2996498697df914ce4e 등을 블록 수준 요소인 e388a4556c0f65e1904146cc1a846bee~< h6>은
;,
,
- /
- /
- ,
- /
- /
- 에 중첩될 수 없습니다. 등
부울 속성
HTML5 사양에서는 비활성화됨, 선택됨, 선택됨 등의 속성에 값을 설정할 필요가 없습니다.<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>
의미
일반적으로 각 태그에는 의미가 있습니다. 소위 의미는 옷이 재킷, 바지, 스커트, 속옷 등으로 구분되어 각각 해당 기능과 의미를 갖는 것을 의미합니다. 그러니까 속옷을 목에 걸면 안 돼요. -- 의 힌트 또한 시맨틱한 HTML 구조는 기계(검색 엔진)가 이해하는 데 도움이 되는 반면, 여러 사람이 협업할 때는 개발자의 의도를 빠르게 이해할 수 있습니다.
CSS가 없는 HTML은 UI 시스템이라기보다는 의미 시스템입니다.공통 태그 의미
태그 의미标签 语义 e388a4556c0f65e1904146cc1a846bee 段落 4a249f0d628e2318394fd9b75b4636b1c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355... 标题 ff6d136ddc5fdfeffaf53ff6ee95f185 无序列表 c34106e0b4e09414b63b2ea253ff83d6 有序列表 b8a712a75cab9a5aded02f74998372b4 大段引用 f3a85e1241a187c5ac462d886e9a968b 一般引用 a4b561c25d9afb9ac8dc4d70affff419 为样式加粗而加粗 beafbc2b8a3a352ee5f41c5a0c884975 为强调内容而加粗 5a8028ccc7a7e27417bff9f05adf5932 为样式倾斜而倾斜 907fae80ddef53131f3292ee4f81644b 为强调内容而倾斜 code 代码标识 abbr 缩写 e388a4556c0f65e1904146cc1a846bee 단락 < ;h1>c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355... 제목 순서가 지정되지 않은 목록 c34106e0b4e09414b63b2ea253ff83d6 순서가 지정된 목록 b8a712a75cab9a5aded02f74998372b4 광범위한 인용 f3a85e1241a187c5ac462d886e9a968b 일반 인용 스타일을 위해 굵게 beafbc2b8a3a352ee5f41c5a0c884975 강조를 위해 굵게 5a8028ccc7a7e27417bff9f05adf5932 틸트하여 스타일 기울기 907fae80ddef53131f3292ee4f81644b 틸트하여 콘텐츠 강조 코드 코드 식별 abbr 약어
示例将你构建的页面当作一本书，将标签的语义对应的其功能和含义；
书的名称：4a249f0d628e2318394fd9b75b4636b1
书的每个章节标题: c1a436a314ed609750bd7c7d319db4da
章节内的文章标题: 684271ed9684bde649abda8831d4d355
小标题 / 副标题: 3f7b3decd2dcafb07b84d2d3985d9f40 39318b6f72ed39310530dfd69d0078e1 4e9ee319e0fa4abc21ff286eeb145ecc
章节的段落: e388a4556c0f65e1904146cc1a846beeHEAD
文档类型为每个 HTML 页面的第一行添加标准模式（standard mode）的声明， 这样能够确保在每个浏览器中拥有一致的表现。
<!DOCTYPE html> 语言属性 <!-- 中文 --> <html lang="zh-Hans"> <!-- 简体中文 --> <html lang="zh-cmn-Hans"> <!-- 繁体中文 --> <html lang="zh-cmn-Hant"> <!-- English --> <html lang="en">
字符编码
以无 BOM 的 utf-8 编码作为文件格式；
指定字符编码的 meta 必须是 head 的第一个直接子元素<html> <head> <meta charset="utf-8"> ...... </head> <body> ...... </body> </html>IE 兼容模式
优先使用最新版本的 IE 和 Chrome 内核。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
SEO 优化
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">Style Guide viewport
viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
width: 浏览器宽度，输出设备中的页面可见区域宽度；
device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
initial-scale: 初始缩放比例；
maximum-scale: 最大缩放比例；
为移动端设备优化，设置可见区域的宽度和初始缩放比例。<meta name="viewport" content="width=device-width, initial-scale=1.0">
iOS 图标
apple-touch-icon 图片自动处理成圆角和高光等效果；
apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图；<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> <!-- iPad，72x72 像素，可以没有，但推荐有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72"> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114"> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">
favicon
在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico。为了保证 favicon 可访问，避免 404，必须遵循以下两种方法之一：
在 Web Server 根目录放置 favicon.ico 文件；
使用 link 指定 favicon；<link rel="shortcut icon" href="path/to/favicon.ico">
HEAD 模板
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">Style Guide <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="path/to/favicon.ico">HTML 注释
模块注释
<!-- 文章列表列表模块 --> <p class="article-list"> ... </p> 区块注释 <!-- @name: Drop Down Menu @description: Style of top bar drop down menu. @author: Ashu(Aaaaaashu@gmail.com) -->
更多HTML代码书写规范指南相关文章请关注PHP中文网！