Heim > Artikel > Web-Frontend > Eine Anleitung zum Schreiben von HTML-Code
Eine Anleitung zum Schreiben von HTML-Code
- 高洛峰Original
- 2017-02-24 10:12:311085Durchsuche
Allgemeine Konventionen
Tags
Selbstschließende Tags, kein Abschluss erforderlich (zum Beispiel: img input br hr, usw.);
Optionales schließendes Tag, das geschlossen werden muss (zum Beispiel: bed06894275b65c1ab86501b08a632eb oder 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="...">
Klasse und ID
Klasse sollte nach Funktion oder Inhalt benannt werden, nicht AusdruckKlasse und ID sollten in Kleinbuchstaben benannt werden Buchstaben, wenn sie aus mehreren Wörtern bestehen, verwenden Sie die Trennung durch Bindestriche.
Verwenden Sie eindeutige IDs als Javascript-Hooks und vermeiden Sie das Erstellen von Klassen ohne Stilinformationen.
<!-- Not recommended --> <p class="j-hook left contentWrapper"></p> <!-- Recommended --> <p id="j-hook" class="sidebar content-wrapper"></p>Attributreihenfolge
HTML-Attribute sollten in einer bestimmten Reihenfolge erscheinen, um die Lesbarkeit zu gewährleisten.
id
classname
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="...">Anführungszeichen
Verwenden Sie für die Definition von Attributen einheitlich doppelte Anführungszeichen.
<!-- Not recommended --> <span id='j-hook' class=text>Google</span> <!-- Recommended --> <span id="j-hook" class="text">Google</span>b Verschachtelung
a Verschachtelung p ist nicht zulässig und unterscheidet sich von anderen Einschränkungen. Es gibt auch strenge Verschachtelungsbeschränkungen, zum Beispiel darf a nicht verschachtelt werden.
Strikte Verschachtelungsbeschränkungen sind nicht in allen Browsern zulässig, da die meisten Browser Fehlertoleranz berücksichtigen und die generierten Dokumentbäume möglicherweise voneinander abweichen.
Semantische Verschachtelungsbeschränkungen
25edfb22a4f469ecb59f1190150159c6 verwendet unter c34106e0b4e09414b63b2ea253ff83d6; , 73de882deff7a050a357292d0a1fca94 werden unter
Strikte Verschachtelungsbeschränkungen
Inline-Level-Elemente können nur Text oder andere Inline-Level-Elemente enthalten Elemente; 3499910bf9dac5ae3c52d5ede7383485 Die interaktiven Elemente 3499910bf9dac5ae3c52d5ede7383485, 221f08282418e2996498697df914ce4e usw. können nicht auf Blockebene verschachtelt werden. h6> kann nicht in e388a4556c0f65e1904146cc1a846bee, ff6d136ddc5fdfeffaf53ff6ee95f185/c34106e0b4e09414b63b2ea253ff83d6/25edfb22a4f469ecb59f1190150159c6, 5c69336ffbc20d23018e48b396cdd57a/73de882deff7a050a357292d0a1fca94 verschachtelt werden. ff9c23ada1bcecdd1a0fb5d5a0f18437 usw.
Boolesche Attribute
In der HTML5-Spezifikation müssen Attribute wie „disabled“, „checked“ und „selected“ keine Werte festlegen.
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>Semantik HTML ohne CSS ist eher ein semantisches System als ein UI-System.
Normalerweise hat jedes Tag eine Semantik. Die sogenannte Semantik bedeutet, dass Ihre Kleidung in Jacken, Hosen, Röcke, Unterwäsche usw. unterteilt ist, jeweils mit entsprechenden Funktionen und Bedeutungen. Sie können also keine Unterwäsche um den Hals tragen. -- Ein Hinweis auf
Darüber hinaus hilft die semantische HTML-Struktur Maschinen (Suchmaschinen), die Absichten des Entwicklers schnell zu verstehen, wenn mehrere Personen zusammenarbeiten.
| Tag | Semantik|
| e388a4556c0f65e1904146cc1a846bee | Absatz |
| < ;h1>c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355... | Titel |
| ff6d136ddc5fdfeffaf53ff6ee95f185 | Ungeordnete Liste |
| c34106e0b4e09414b63b2ea253ff83d6 | Geordnete Liste |
| b8a712a75cab9a5aded02f74998372b4 | Allgemeines Zitat |
| f3a85e1241a187c5ac462d886e9a968b | Allgemeines Zitat |
| 8a1b89026f4aeca09725716234d4b659 | Fett zur Hervorhebung |
| 5a8028ccc7a7e27417bff9f05adf5932 | Neigung für Stilneigung |
| 907fae80ddef53131f3292ee4f81644b | Neigung, um Inhalte hervorzuheben |
| Code | Code-Identifikation |
| Abbr | Abkürzung
示例
将你构建的页面当作一本书，将标签的语义对应的其功能和含义；
书的名称：4a249f0d628e2318394fd9b75b4636b1
书的每个章节标题: c1a436a314ed609750bd7c7d319db4da
章节内的文章标题: 684271ed9684bde649abda8831d4d355
小标题 / 副标题: 3f7b3decd2dcafb07b84d2d3985d9f40 39318b6f72ed39310530dfd69d0078e1 4e9ee319e0fa4abc21ff286eeb145ecc
章节的段落: e388a4556c0f65e1904146cc1a846bee
HEAD
文档类型
为每个 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中文网！