", et il est recommandé d'utiliser "" ", et il est recommandé d'utiliser ""
Maison > Article > interface Web > Apprentissage des spécifications liées au HTML
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
[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>
est accessible favicon
<link rel="shortcut icon" href="path/to/favicon.ico">
et CSS
Il n'est pas nécessaire de spécifier l'attribut JavaScript
type
vous devez spécifier CSS
rel="stylesheet"
<link rel="stylesheet" href="page.css?1.1.11">
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>
<ul><li>first</li><li>second</li></ul>
<!-- good --><div class="sidebar"></div><!-- bad --><div class="left"></div>
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。
, l'omission des balises de fermeture n'est pas autorisée HTML5
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>
<!-- 头部 --><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><!-- /头部 -->
comme préfixe, il est recommandé d'utiliser xxx-
data-
<!-- good --><table cellspacing="0">...</table><!-- bad --><table cellSpacing="0">...</table><!-- good --><script src="esl.js?1.1.11"></script><!-- bad --><script src='esl.js'></script><script src=esl.js></script>
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!