Un guide pour écrire du code HTML

Conventions générales

Balises

Balises à fermeture automatique, aucune fermeture requise (par exemple : img input br hr, etc.);
Balise de fermeture facultative, qui doit être fermée (par exemple : bed06894275b65c1ab86501b08a632eb ou 36cc49f0c466276486e50c850b7e4956
Essayez de réduire le nombre de balises

) ;

<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="...">

Classe et ID

la classe doit être nommée d'après une fonction ou un contenu, et non une expression
la classe et l'identifiant doivent être nommés en minuscules ; lettres, Lorsqu'il est composé de plusieurs mots, utilisez la séparation par tirets
Utilisez des identifiants uniques comme hooks Javascript et évitez de créer des classes sans informations de style

<!-- Not recommended -->
<p class="j-hook left contentWrapper"></p>

<!-- Recommended -->
<p id="j-hook" class="sidebar content-wrapper"></p>

Ordre des attributs

Les attributs HTML doivent apparaître dans un ordre spécifique pour garantir la lisibilité.

id

class
nom
data-xxx
src, pour, type, href
titre, alt
aria-xxx, rôle

<a id="..." class="..." data-modal="toggle" href="###"></a>

<input class="form-control" type="text">

<img src="..." alt="...">

Guillemets

Utilisez uniformément des guillemets doubles pour la définition des attributs.

<!-- Not recommended -->
<span id=&#39;j-hook&#39; class=text>Google</span>

<!-- Recommended -->
<span id="j-hook" class="text">Google</span>

b Nesting

a Nesting p n'est pas autorisé Cette contrainte est une contrainte d'imbrication sémantique et est différente des autres contraintes. Il existe également des contraintes d'imbrication strictes, par exemple, a n'est pas autorisé à imbriquer a.

Les contraintes d'imbrication strictes ne sont pas autorisées dans tous les navigateurs ; comme pour les contraintes d'imbrication sémantique, la plupart des navigateurs gèrent la tolérance aux pannes et les arborescences de documents générées peuvent être différentes les unes des autres.

Contraintes d'imbrication sémantique

25edfb22a4f469ecb59f1190150159c6 , 73de882deff7a050a357292d0a1fca94 sont utilisés sous 5c69336ffbc20d23018e48b396cdd57a ;

Contraintes d'imbrication strictes

les éléments de niveau en ligne ne peuvent contenir que du texte ou d'autres éléments de niveau en ligne. 3499910bf9dac5ae3c52d5ede7383485 ne peut pas être utilisé. Les éléments interactifs 3499910bf9dac5ae3c52d5ede7383485, bb9345e55eb71822850ff156dfde57c8, 221f08282418e2996498697df914ce4e, etc. peuvent être imbriqués au niveau du bloc ; h6> ne peut pas être imbriqué dans

e388a4556c0f65e1904146cc1a846bee ;, e388a4556c0f65e1904146cc1a846bee, ff6d136ddc5fdfeffaf53ff6ee95f185/c34106e0b4e09414b63b2ea253ff83d6/25edfb22a4f469ecb59f1190150159c6, 5c69336ffbc20d23018e48b396cdd57a/73de882deff7a050a357292d0a1fca94/67bc4f89d416b0b8236eaa5f43dee742 fd5a51800b4ead4bd9183750380848b5, etc.

Attributs booléens

Dans les spécifications HTML5, les attributs tels que désactivé, vérifié et sélectionné n'ont pas besoin de définir de valeurs.

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

Sémantique

HTML sans CSS est un système sémantique plutôt qu'un système d'interface utilisateur.
Normalement, chaque balise a une sémantique. La soi-disant sémantique signifie que vos vêtements sont divisés en vestes, pantalons, jupes, sous-vêtements, etc., chacun avec des fonctions et des significations correspondantes. Vous ne pouvez donc pas mettre de sous-vêtements autour du cou. -- Un indice de

De plus, la structure sémantique HTML aide les machines (moteurs de recherche) à comprendre. Par contre, lorsque plusieurs personnes collaborent, elles peuvent rapidement comprendre les intentions du développeur.

Sémantique commune des balises

Sémantique

Tag

标签	语义
e388a4556c0f65e1904146cc1a846bee	段落
4a249f0d628e2318394fd9b75b4636b1c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355...	标题
ff6d136ddc5fdfeffaf53ff6ee95f185	无序列表
c34106e0b4e09414b63b2ea253ff83d6	有序列表
b8a712a75cab9a5aded02f74998372b4	大段引用
f3a85e1241a187c5ac462d886e9a968b	一般引用
a4b561c25d9afb9ac8dc4d70affff419	为样式加粗而加粗
beafbc2b8a3a352ee5f41c5a0c884975	为强调内容而加粗
5a8028ccc7a7e27417bff9f05adf5932	为样式倾斜而倾斜
907fae80ddef53131f3292ee4f81644b	为强调内容而倾斜
code	代码标识
abbr	缩写

e388a4556c0f65e1904146cc1a846bee Paragraphe < ;h1>c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355... Titre ff6d136ddc5fdfeffaf53ff6ee95f185 Liste non ordonnée c34106e0b4e09414b63b2ea253ff83d6 Liste ordonnée b8a712a75cab9a5aded02f74998372b4 Citation large f3a85e1241a187c5ac462d886e9a968b Citation générale Gras pour des raisons de style beafbc2b8a3a352ee5f41c5a0c884975 Gras pour mettre l'accent 5a8028ccc7a7e27417bff9f05adf5932 Inclinaison pour l'inclinaison du style 907fae80ddef53131f3292ee4f81644b Inclinaison pour mettre en valeur le contenu code Code d'identification abbrAbréviation

示例

将你构建的页面当作一本书，将标签的语义对应的其功能和含义；

书的名称：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">
    
    
    
    
    

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">
    
    
    
    

    
    <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中文网！