FED
/
oyweb-fe


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
							<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>HTML Guide | 偶游前端</title>
    <meta name="generator" content="VuePress 1.5.0">
    
    <meta name="description" content="">
    <link rel="preload" href="/docs/assets/css/0.styles.fa04140f.css" as="style"><link rel="preload" href="/docs/assets/js/app.6eb096df.js" as="script"><link rel="preload" href="/docs/assets/js/2.eb3dc6dc.js" as="script"><link rel="preload" href="/docs/assets/js/15.5a659b8b.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.121c4396.js"><link rel="prefetch" href="/docs/assets/js/11.4152d57d.js"><link rel="prefetch" href="/docs/assets/js/12.6f3f98e4.js"><link rel="prefetch" href="/docs/assets/js/13.121cf2d2.js"><link rel="prefetch" href="/docs/assets/js/14.15bdf673.js"><link rel="prefetch" href="/docs/assets/js/16.6c83c4bd.js"><link rel="prefetch" href="/docs/assets/js/17.a200da04.js"><link rel="prefetch" href="/docs/assets/js/18.bac57b7c.js"><link rel="prefetch" href="/docs/assets/js/19.6246c10b.js"><link rel="prefetch" href="/docs/assets/js/3.34e7d28d.js"><link rel="prefetch" href="/docs/assets/js/4.c124f7a5.js"><link rel="prefetch" href="/docs/assets/js/5.36672b5d.js"><link rel="prefetch" href="/docs/assets/js/6.2072c2b2.js"><link rel="prefetch" href="/docs/assets/js/7.c034f81f.js"><link rel="prefetch" href="/docs/assets/js/8.8ed5f3ae.js"><link rel="prefetch" href="/docs/assets/js/9.39b37f48.js">
    <link rel="stylesheet" href="/docs/assets/css/0.styles.fa04140f.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><!----> <span class="site-name">偶游前端</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!---->  <ul class="sidebar-links"><li><a href="/docs/" aria-current="page" class="sidebar-link">偶游前端(原多玩前端)</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>项目</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/currentProgram/tank.html" class="sidebar-link">坦克专题</a></li><li><a href="/docs/currentProgram/hiydMini.html" class="sidebar-link">hi运动教练小程序</a></li><li><a href="/docs/currentProgram/hiydShop.html" class="sidebar-link">hi运动商城</a></li><li><a href="/docs/currentProgram/webGame.html" class="sidebar-link">多玩游戏大厅</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>开发规范</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/standard/html-guide.html" aria-current="page" class="active sidebar-link">HTML规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#文档目录" class="sidebar-link">文档目录</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_1-代码风格" class="sidebar-link">1 代码风格</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_1-1-缩进" class="sidebar-link">1.1 缩进</a></li></ul></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_2-属性" class="sidebar-link">2 属性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_2-1-属性引号" class="sidebar-link">2.1 属性引号</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_2-2-属性大小写" class="sidebar-link">2.2 属性大小写</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_2-3-属性布尔值" class="sidebar-link">2.3 属性布尔值</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_2-4-属性声明顺序" class="sidebar-link">2.4 属性声明顺序</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_2-5-自定义属性" class="sidebar-link">2.5 自定义属性</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_2-6-链接属性" class="sidebar-link">2.6 链接属性</a></li></ul></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_3-标签" class="sidebar-link">3 标签</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_3-1-标签大小写" class="sidebar-link">3.1 标签大小写</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_3-2-标签自闭合" class="sidebar-link">3.2 标签自闭合</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_3-3-标签嵌套" class="sidebar-link">3.3 标签嵌套</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_3-4-避免过时标签" class="sidebar-link">3.4 避免过时标签</a></li></ul></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_4-head设定" class="sidebar-link">4 head设定</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_4-1-doctype" class="sidebar-link">4.1 doctype</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_4-2-页面编码" class="sidebar-link">4.2 页面编码</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_4-3-兼容模式" class="sidebar-link">4.3 兼容模式</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_4-4-引入css" class="sidebar-link">4.4 引入CSS</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_4-5-引入javascript" class="sidebar-link">4.5 引入JavaScript</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_4-6-favicon" class="sidebar-link">4.6 favicon</a></li></ul></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_5-图片" class="sidebar-link">5 图片</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_6-表单" class="sidebar-link">6 表单</a></li><li class="sidebar-sub-header"><a href="/docs/standard/html-guide.html#_7-注释" class="sidebar-link">7 注释</a></li></ul></li><li><a href="/docs/standard/css-guide.html" class="sidebar-link">css规范</a></li><li><a href="/docs/standard/javascript-guide.html" class="sidebar-link">JavaScript规范</a></li><li><a href="/docs/standard/directory-guide.html" class="sidebar-link">目录规范</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具类</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/utils/fetch.html" class="sidebar-link">Fetch</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>博客</span> <!----></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="html-guide"><a href="#html-guide" class="header-anchor">#</a> HTML Guide</h1> <hr> <p>HTML规范指南。</p> <hr> <h2 id="文档目录"><a href="#文档目录" class="header-anchor">#</a> 文档目录</h2> <ol><li><a href="#1-%E4%BB%A3%E7%A0%81%E9%A3%8E%E6%A0%BC">代码风格</a></li> <li><a href="#2-%E5%B1%9E%E6%80%A7">属性</a></li> <li><a href="#3-%E6%A0%87%E7%AD%BE">标签</a></li> <li><a href="#4-head%E8%AE%BE%E5%AE%9A">head设定</a></li> <li><a href="#5-%E5%9B%BE%E7%89%87">图片</a></li> <li><a href="#6-%E8%A1%A8%E5%8D%95">表单</a></li> <li><a href="#7-%E6%B3%A8%E9%87%8A">注释</a></li></ol> <h2 id="_1-代码风格"><a href="#_1-代码风格" class="header-anchor">#</a> 1 代码风格</h2> <h3 id="_1-1-缩进"><a href="#_1-1-缩进" class="header-anchor">#</a> 1.1 缩进</h3> <p>**【强制】**使用 <em>4</em> 个空格作为一个缩进层级，不允许使用 <em>2</em> 个空格或 <em>tab</em> 字符；</p> <h2 id="_2-属性"><a href="#_2-属性" class="header-anchor">#</a> 2 属性</h2> <h3 id="_2-1-属性引号"><a href="#_2-1-属性引号" class="header-anchor">#</a> 2.1 属性引号</h3> <p>**【强制】**对于属性的定义使用双引号，不允许使用单引号，不允许不使用引号；</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- Not so great --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>avatar<span class="token punctuation">'</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>./img/avatar.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>avatar<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- Better --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>avatar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>./img/avatar.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>avatar<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_2-2-属性大小写"><a href="#_2-2-属性大小写" class="header-anchor">#</a> 2.2 属性大小写</h3> <p>**【强制】**属性名应该小写，不允许大写或大小写混合；</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- Not so great --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">cellSpacing</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- Better --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">cellspacing</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_2-3-属性布尔值"><a href="#_2-3-属性布尔值" class="header-anchor">#</a> 2.3 属性布尔值</h3> <p>**【建议】**布尔类型的属性，建议不添加属性值，至少同一项目要保持一致；</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_2-4-属性声明顺序"><a href="#_2-4-属性声明顺序" class="header-anchor">#</a> 2.4 属性声明顺序</h3> <p>**【建议】**HTML 属性建议尽量按照以下给出的顺序依次排列，确保代码的易读性。</p> <ul><li><code>class</code></li> <li><code>id</code>, <code>name</code></li> <li><code>data-*</code></li> <li><code>src</code>, <code>for</code>, <code>type</code>, <code>href</code></li> <li><code>title</code>, <code>alt</code></li> <li><code>aria-*</code>, <code>role</code></li></ul> <p>class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），建议预留更多的id命名给技术，因此排在第二位。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>...<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>...<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-modal</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>toggle<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Example link<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>form-control<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>...<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>...<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_2-5-自定义属性"><a href="#_2-5-自定义属性" class="header-anchor">#</a> 2.5 自定义属性</h3> <p>**【建议】**使用自定义属性作为JS的hook，建议以<code>data-</code>为前缀；</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">data-role</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>getPic<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_2-6-链接属性"><a href="#_2-6-链接属性" class="header-anchor">#</a> 2.6 链接属性</h3> <p>**【强制】**禁止 <code>a</code> 标签的 <code>href</code> 取值为空或不写 <code>href</code> 属性，重构时默认可用 <code>#</code> 代替；</p> <p>如果不需要使用链接功能，请不要使用不带 <code>href</code> 的 <code>a</code> 标签，既不符合标签的语义，也可能会产生未知的兼容性问题；</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- Not so great --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>欢聚时代<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>xxx<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>欢聚时代<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- Better --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>欢聚时代<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><strong><a href="#">[⬆]</a></strong></p> <h2 id="_3-标签"><a href="#_3-标签" class="header-anchor">#</a> 3 标签</h2> <h3 id="_3-1-标签大小写"><a href="#_3-1-标签大小写" class="header-anchor">#</a> 3.1 标签大小写</h3> <p>**【强制】**标签名应该小写，不允许大写或大小写混合；</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- Not so great --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>DIV</span> <span class="token attr-name">clsss</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>xxx<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>DIV</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- Better --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">clsss</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>xxx<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_3-2-标签自闭合"><a href="#_3-2-标签自闭合" class="header-anchor">#</a> 3.2 标签自闭合</h3> <p>**【建议】**对于无需自闭合的标签，建议不自闭合，至少同一项目要保持一致；</p> <p>常见无需自闭合标签有<code>input</code>、<code>img</code>、<code>br</code>、<code>hr</code>等</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_3-3-标签嵌套"><a href="#_3-3-标签嵌套" class="header-anchor">#</a> 3.3 标签嵌套</h3> <p>**【强制】**标签使用必须符合标签嵌套规则；</p> <p>例如：内联元素不能嵌套块元素，<code>&lt;p&gt;</code>元素和<code>&lt;h1~6&gt;</code>元素不能嵌套块元素等，详见 <a href="http://www.cs.tut.fi/~jkorpela/html/strict.html" target="_blank" rel="noopener noreferrer">Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict) <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 与 <a href="http://www.w3.org/TR/2011/WD-html5-20110525/content-models.html" target="_blank" rel="noopener noreferrer">HTML5 Content models<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>;</p> <p>**【建议】**实用为王，尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- Not so great --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>avatar<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>...<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- Better --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>avatar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>...<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_3-4-避免过时标签"><a href="#_3-4-避免过时标签" class="header-anchor">#</a> 3.4 避免过时标签</h3> <p>**【强制】**不允许使用过时的旧标签，请使用新标签或者CSS代替：</p> <ul><li><del><code>acronym</code></del> → <ins><code>abbr</code></ins></li> <li><del><code>applet</code></del> → <ins><code>object</code></ins></li> <li><del><code>b</code></del> → <ins><code>strong</code></ins></li> <li><del><code>dir</code></del> → <ins><code>ul</code></ins></li> <li><del><code>strike</code></del> → <ins><code>del</code></ins></li> <li><del><code>basefont</code></del></li> <li><del><code>big</code></del></li> <li><del><code>center</code></del></li> <li><del><code>font</code></del></li> <li><del><code>isindex</code></del></li> <li><del><code>tt</code></del></li> <li><del><code>u</code></del></li></ul> <p>请参详：http://www.w3schools.com/tags/</p> <p><strong><a href="#">[⬆]</a></strong></p> <h2 id="_4-head设定"><a href="#_4-head设定" class="header-anchor">#</a> 4 head设定</h2> <h3 id="_4-1-doctype"><a href="#_4-1-doctype" class="header-anchor">#</a> 4.1 doctype</h3> <p>**【强制】**doctype使用 HTML5 的 doctype 来启用标准模式。</p> <p>其中 <code>doctype</code> 建议使用大写的 DOCTYPE； <a href="http://stackoverflow.com/questions/7020961/uppercase-or-lowercase-doctype" target="_blank" rel="noopener noreferrer">关于doctype该使用大写还是小写的讨论<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype">&lt;!DOCTYPE html&gt;</span>
</code></pre></div><h3 id="_4-2-页面编码"><a href="#_4-2-页面编码" class="header-anchor">#</a> 4.2 页面编码</h3> <p>**【强制】**页面必须明确指定字符编码，让浏览器快速确定适合网页内容的渲染方式。指定字符编码的 meta 必须是 head 的第一个直接子元素。建议使用无 BOM 的 UTF-8 编码；</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_4-3-兼容模式"><a href="#_4-3-兼容模式" class="header-anchor">#</a> 4.3 兼容模式</h3> <p>**【建议】**PC端启用 IE Edge 模式，并针对360浏览器启用webkit渲染模式；</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>IE=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>renderer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>webkit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_4-4-引入css"><a href="#_4-4-引入css" class="header-anchor">#</a> 4.4 引入CSS</h3> <p>**【强制】**引入 CSS 时必须指明 rel=&quot;stylesheet&quot;；</p> <p>建议在 head 中引入页面需要的所有 CSS 资源，因为在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁；</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>global.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_4-5-引入javascript"><a href="#_4-5-引入javascript" class="header-anchor">#</a> 4.5 引入JavaScript</h3> <p>**【建议】**JavaScript应当放在页面尾部；出于性能方面的考虑，如非必要，请遵守此条建议；</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- a lot of elements --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>main.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="_4-6-favicon"><a href="#_4-6-favicon" class="header-anchor">#</a> 4.6 favicon</h3> <p>**【强制】**保证 <code>favicon</code> 可访问；</p> <p>在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：</p> <ol><li>在 Web Server 根目录放置 favicon.ico 文件;</li> <li>使用 link 指定 favicon;</li></ol> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>image/x-icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>shortcut icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>path/to/favicon.ico<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="附：工作流中默认的pc端head设定"><a href="#附：工作流中默认的pc端head设定" class="header-anchor">#</a> 附：工作流中默认的PC端head设定</h4> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype">&lt;!DOCTYPE html&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>IE=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>renderer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>webkit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>Keywords<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>多玩游戏<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>description<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>多玩游戏<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- a lot of elements --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- a lot of elements --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="附：工作流中默认的移动端head设定"><a href="#附：工作流中默认的移动端head设定" class="header-anchor">#</a> 附：工作流中默认的移动端head设定</h4> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype">&lt;!DOCTYPE html&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>format-detection<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>telephone=no,address=no,email=no<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>apple-itunes-app<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>keywords<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>多玩游戏<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>description<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>多玩游戏<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- a lot of elements --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- a lot of elements --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>注意：当该项目有相关的app在app store中，设置meta<code>apple-itunes-app</code>，如上面最后一条，并填上对应的<code>app-id</code>。详细请看：<a href="https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html" target="_blank" rel="noopener noreferrer">Promoting Apps with Smart App Banners<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>更详细的meta属性设置可以参详：https://github.com/hzlzh/cool-head</p> <p><strong><a href="#">[⬆]</a></strong></p> <h2 id="_5-图片"><a href="#_5-图片" class="header-anchor">#</a> 5 图片</h2> <p>**【强制】**禁止 <code>img</code> 的 <code>src</code> 取值为空；延迟加载的图片也要增加默认的 <code>src</code>；</p> <p><code>src</code> 取值为空，会导致部分浏览器重新加载一次当前页面，参考 <a href="https://developer.yahoo.com/performance/rules.html#emptysrc" target="_blank" rel="noopener noreferrer">Yahoo performance rules<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>**【建议】**为重要图片添加 <code>alt</code> 属性；</p> <p>可以提高图片加载失败时的用户体验。</p> <p>**【建议】**添加 <code>width</code> 和 <code>height</code> 属性，以避免页面抖动；</p> <p>**【建议】**有下载需求或者预期会灵活变动的图片采用 <code>img</code> 标签实现，无下载需求的图片采用 CSS 背景图实现；</p> <ul><li>用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载；</li> <li>无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现。</li></ul> <p><strong><a href="#">[⬆]</a></strong></p> <h2 id="_6-表单"><a href="#_6-表单" class="header-anchor">#</a> 6 表单</h2> <p>**【强制】**有文本标题的控件必须使用 <code>label</code> 标签将其与其标题相关联；</p> <p>有两种方式：</p> <ol><li>将控件置于 label 内;</li> <li>label 的 for 属性指向控件的 id。</li></ol> <p>推荐使用第一种，减少不必要的 id。如果 DOM 结构不允许直接嵌套，则应使用第二种。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>confirm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> 我已确认上述条款<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>用户名：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>**【建议】**尽量不要使用按钮类元素的 name 属性；</p> <p>由于浏览器兼容性问题，使用按钮的 name 属性会带来许多难以发现的问题。具体情况可参考 <a href="http://w3help.org/zh-cn/causes/CM2001" target="_blank" rel="noopener noreferrer">此文<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>；</p> <p>**【建议】**在针对移动设备开发的页面时，根据内容类型指定输入框的 <code>type</code> 属性；</p> <p>根据内容类型指定输入框类型，能获得能友好的输入体验。</p> <p>示例：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>number<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><strong><a href="#">[⬆]</a></strong></p> <h2 id="_7-注释"><a href="#_7-注释" class="header-anchor">#</a> 7 注释</h2> <p><strong>【建议】<strong>对</strong>超过10行</strong>的页面模块进行注释, 以降低开发人员的嵌套成本和后期的维护成本。建议使用结尾注释方式，例如：</p> <p>当模块代码量较少时，可以省略 <code>start</code>。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- 文章内容 start --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>post<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
   do some things...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 文章内容 end --&gt;</span>
</code></pre></div><p>或者标注模块的class或者id：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- #post start --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>post<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    do some things...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- #post end --&gt;</span>
</code></pre></div><p><strong><a href="#">[⬆]</a></strong></p> <p>参考资料：</p> <ol><li><a href="http://codeguide.bootcss.com/" target="_blank" rel="noopener noreferrer">bootcss编码规范<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml" target="_blank" rel="noopener noreferrer">Google HTML编码规范<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/ecomfe/spec/blob/master/css-style-guide.md" target="_blank" rel="noopener noreferrer">spec HTML编码规范<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ol></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/docs/currentProgram/webGame.html" class="prev">
        多玩游戏大厅
      </a></span> <span class="next"><a href="/docs/standard/css-guide.html">
        css规范
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/docs/assets/js/app.6eb096df.js" defer></script><script src="/docs/assets/js/2.eb3dc6dc.js" defer></script><script src="/docs/assets/js/15.5a659b8b.js" defer></script>
  </body>
</html>