Maison > Article > interface Web > Apprentissage des spécifications liées au HTML

Apprentissage des spécifications liées au HTML

巴扎黑original: 2017-07-19 16:43:571190parcourir

Mots précédents

HTML est un langage de balisage hypertexte qui décrit la structure des pages Web. Les spécifications HTML peuvent rendre les styles de code HTML cohérents, rendant le HTML plus facile à comprendre et à maintenir. Cet article présentera la spécification HTML en détail

Structure globale

[En-tête de page]

1. Le fichier doit se terminer par "" commence par la ligne supérieure de la première ligne, il est recommandé d'utiliser "<!DOCTYPE html>"

<!DOCTYPE html>

　2. Le jeu de caractères d'encodage du document doit être déclaré, et il doit être encodé avec le fichier lui-même. Pour être cohérent, le meta spécifiant l'encodage des caractères doit être le premier enfant direct de head . Il est recommandé d'utiliser l'encodage UTF-8<meta charset="utf-8">

<meta charset="utf-8">

　3. Remplissez les mots-clés et la description appropriés en fonction du contenu de la page et besoins

<meta name="description" content="不超过150个字符"><meta name="keywords" content="">

4. Le titre de la page est un élément indispensable title doit être utilisé comme élément enfant direct de head et immédiatement après la déclaration charset <.>

<head><meta charset="UTF-8"><title>页面标题</title></head>

【Introduction à la ressource】

1. Assurez-vous que

est accessible favicon

<link rel="shortcut icon" href="path/to/favicon.ico">

2. Introduisez

et CSS Il n'est pas nécessaire de spécifier l'attribut JavaScript type

3. Lors de l'introduction de

vous devez spécifier CSSrel="stylesheet"

<link rel="stylesheet" href="page.css?1.1.11">

4. Utilisez le lien pour introduire le fichier css et placez-le dans l'en-tête ; utilisez le script pour introduire le fichier js et placez-le en bas du corps

5. Pour les environnements mobiles ou les applications Web. conçu uniquement pour les navigateurs modernes, si la partie protocole

de la ressource externe est référencée et que les pages sont les mêmes, il est recommandé d'omettre le préfixe du protocole. En effet, en utilisant URL pour introduire CSS, sous protocol-relative URL, deux requêtes seront envoyées. L'utilisation de IE7/8 doit pleinement tenir compte de l'environnement auquel la page est destinée protocol-relative URL

<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js?1.1.11"></script>

[Optimisation structurelle]

　1. Essayez de suivre les normes HTML et sémantique, mais ne sacrifiez pas au détriment de l'aspect pratique. Essayez d'utiliser le moins de balises et de maintenir le minimum de complexité à tout moment

2. L'ordre structurel et l'ordre visuel doivent être fondamentalement cohérents, et la structure HTML doit être écrite dans l'ordre visuel de haut en bas et de de gauche à droite. Parfois, afin de faciliter l'exploration des moteurs de recherche, le contenu important sera déplacé à l'avance dans l'ordre de la structure HTML

3. Séparez la structure, les performances et le comportement et évitez l'inline

4. Chaque élément de niveau de bloc commence sur une nouvelle ligne et chaque ligne est alignée à l'aide de l'indentation de tabulation (les éléments enfants de head et body n'ont pas besoin d'être indentés). Supprimez les espaces de fin de ligne redondants

5. Pour les tableaux au contenu relativement simple, il est recommandé d'écrire tr sur une seule ligne

6. Vous pouvez utiliser des lignes vides pour séparer les grands modules pour que les modules soient plus clairs

Format du code

[Indentation]

Utiliser 4 espaces au lieu d'1 tabulation (peut être défini dans la plupart des éditeurs)

<ul><li>first</li><li>second</li></ul>

【Nom】

1. La classe doit être en lettres minuscules, séparées par - entre les mots

2. La classe doit représenter le module correspondant Ou le contenu ou la fonction du composant ne doit pas être nommé avec des informations de style

<!-- good --><div class="sidebar"></div><!-- bad --><div class="left"></div>

3. Sur la même page, évitez d'utiliser les mêmes

et name car le navigateur IE7 confond les attributs id et name de l'élément, et document.getElementById peut obtenir des éléments inattendus. Par conséquent, vous devez être très prudent lorsque vous nommez les attributs id et name de l'élément id。

[Label]

1. Le nom de l'étiquette doit utiliser des lettres minuscules

2. Pour les éléments qui n'ont pas besoin d'être à fermeture automatique, les balises n'ont pas besoin d'être à fermeture automatique

3. Pour les balises de fermeture dont l'omission est autorisée dans

, l'omission des balises de fermeture n'est pas autorisée HTML5

4. L'utilisation des balises

doit suivre la sémantique des balises, et doit respecter les règles d'imbrication des balises HTML

Hello StyleGuide!
Hello StyleGuide!
<ul><li>first</li><li>second</li></ul>first
second

[Commentaire]

Utilisez une méthode d'écriture similaire à la fermeture des balises et ayez le même format que le HTML ; laissez des espaces aux deux extrémités de la copie du commentaire, et les commentaires CSS ont un format unifié

Démarrer le commentaire : (espaces aux deux extrémités de la copie)

Fin du commentaire : à la fermeture d'une étiquette)

Seuls les commentaires d'ouverture sont autorisés

<!-- 头部 --><div class="g-hd"><!-- LOGO --><h1 class="m-logo"><a href="#">LOGO</a></h1><!-- /LOGO --><!-- 导航 --><ul class="m-nav"><li><a href="#">NAV1</a></li><li><a href="#">NAV2</a></li><!-- 更多导航项 --></ul><!-- /导航 --></div><!-- /头部 -->

[Attributs]

1. Les attributs et les valeurs doivent être entièrement en minuscules

2. Les valeurs d'attribut doivent être entourées de guillemets doubles

3. Pour les attributs de type booléen, il est recommandé de ne pas ajouter de valeurs d'attribut

4. Recommandations d'attributs personnalisés Avec

comme préfixe, il est recommandé d'utiliser xxx-data-

5. Vous pouvez omettre l'attribut type de la balise de style et de la balise de script

<!-- good --><table cellspacing="0">...</table><!-- bad --><table cellSpacing="0">...</table><!-- good --><script src="esl.js?1.1.11"></script><!-- bad --><script src=&#39;esl.js&#39;></script><script src=esl.js></script>

[Ordre des attributs]

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

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

特殊元素

【图片】

　　1、禁止 img 的 src 取值为空，否则会导致部分浏览器重新加载一次当前页面

　　2、为图片添加 alt 属性，提高图片加载失败时的用户体验

　　3、避免为 img 添加不必要的 title 属性，多余的 title 影响看图体验，并且增加了页面尺寸

　　4、为图片添加 width 和 height 属性，以避免页面抖动

<img src="#" alt="#" width="#" height="#">

　　5、有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现

　　产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载

　　无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现

【表单】

　　1、有文本标题的控件使用 label 标签将其与其标题相关联。最好将控件置于 label 内，以减少不必要的 id

<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>

　　2、使用 button 元素时必须指明 type 属性值。因为button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交

<button type="submit">提交</button><button type="button">取消</button>

　　3、在针对移动设备开发的页面时，根据内容类型指定输入框的 type 属性，能获得友好的输入体验

<input type="date">

【多媒体】

　　1、在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素，并使用退化到插件的方式来对多浏览器进行支持

<audio controls><source src="audio.mp3" type="audio/mpeg"><source src="audio.ogg" type="audio/ogg"><object width="100" height="50" data="audio.mp3"><embed width="100" height="50" src="audio.swf"></object></audio><video width="100" height="50" controls><source src="video.mp4" type="video/mp4"><source src="video.ogg" type="video/ogg"><object width="100" height="50" data="video.mp4"><embed width="100" height="50" src="video.swf"></object></video>

　　2、只在必要的时候开启音视频的自动播放

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：3 exemples de téléchargement d'imagesArticle suivant：3 exemples de téléchargement d'images

Articles Liés

Voir plus