我是浦工，点击右上方红字“关注”，每天为你分享互联网行业【网络运营】和【IT技术】干货。
SEO分为站内优化和站外优化，内优化指的是站长能控制的所有网站本身的调整，如网站结构、页面HTML代码，站外优化指的是外部链接建设及行业社群的参与互动。
站内优化侧重于HTML代码的规范，如果站内优化忽视了，那么网站爬虫无法抓取到实质性内容，就会导致网站没有收录，那么排名也将是遥不可及的梦。
SEO优化
SEO原理
页面抓取： 蜘蛛向服务器请求进入页面，获取页面内容
分析入库：对获取到的内容进行分析，对优质页面进行收录
检索排序：当用户检索关键词时，从收录的页面中按照一定的规则进行排序，并返回给用户结果
前端SEO代码规范–TKD规范
TDK是个缩写，T页面标题，K页面关键词以及D页面描述
title设置规则：
<span style="color: #000000; --tt-darkmode-color: #A3A3A3;">今日头条</span>一般不超过80个字符
词语间要用英文“-”隔开
一般是“网站名称_主关键词或一句含有主关键词的描述”，比如做“头条”这个词，“网站名称_今日头条-头条新闻-今日头条官网”
keywords设置规则：
name="keywords" content="今日头条，头条，头条网，头条新闻，今日头条官网">
词语间要用英文“,”隔开
首页keywords写法，一般是“网站名称,主要栏目名,主要关键词”，一般不超过5个
栏目页keywords写法，一般是“栏目名称,栏目关键字,栏目分类列表名称”，一般不超过3个
详情页keywords写法，一般是将详情页主要描述的这个关键词吸入即可,一般不超过3个
description设置规则：
name="description" content="今日头条是一个通用信息平台，致力于连接人与信息，让优质丰富的信息得到高效精准的分发，促使信息创造价值。">
一般是将页面的标题，关键词和一些特殊栏目的内容融合，携程简单的介绍
字数一般不超过150个字符
词语间的间隔一般使用英文符号
关键词密度
一个页面或者一篇软文的关键词密度应该在2%–8%之间
公式：这个关键词的字数 * 这个关键词出现的次数 / 文字总字数或者页面总字数 算出的这个值在2%–8%之间就符合关键词密度规则
HTML标签列表
根元素
Element Description
代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。
文档元数据
Element Description
代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。
定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。</p><p data-track="40"><base> 定义页面上相对 URL 的基准 URL。</p><p data-track="41"><link> 用于链接外部资源到该文档。</p><p data-track="42"><meta> 定义其他 HTML 元素是无法描述的元数据。</p><p data-track="43"><style> 用于内联 CSS。</p><p class="pgc-p" data-track="44"><br></p><p data-track="610"><strong>脚本</strong></p><p data-track="45">Element Description</p><p data-track="46"><script> 定义一个内联脚本或链接到外部脚本。基本语言是 JavaScript。</p><p data-track="47"><noscript> 定义当浏览器不支持脚本时显示的替代文字。</p><p class="pgc-p" data-track="48"><br></p><p data-track="611"><strong>章节</strong></p><p data-track="49">Element Description</p><p data-track="50"><body> 代表 HTML 文档的内容。文档中只能有一个 元素。</p><p data-track="51"><section> 这个元素在 HTML5 中加入 定义为文档中的一个章节。</p><p data-track="52"><nav> 这个元素在 HTML5 中加入 定义只包含导航链接的章节。</p><p data-track="53"><article> 这个元素在HTML5中加入定义可以独立于内容其余部分的完整独立内容块。</p><p data-track="54"><aside> 这个元素在 HTML5 中加入 定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。</p><p data-track="55"><h1>,<h2>,<h3>,<h4>,<h5>,<h6> 标题元素实现了六层文档标题，<h1>是最大的标题，<h6>是最小的标题。标题元素简要地描述章节的主题。</p><p data-track="56"><header> 这个元素在HTML5中加入定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。</p><p data-track="57"><footer> 这个元素在HTML5中加入定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。</p><p data-track="58"><address> 定义包含联系信息的一个章节。</p><p data-track="59"><main> 这个元素在 HTML5 重新加入定义文档中主要或重要的内容。</p><p class="pgc-p" data-track="60"><br></p><p data-track="612"><strong>组织内容</strong></p><p data-track="61">Element Description</p><p data-track="62"><p> 定义一个段落。</p><p data-track="63"><hr> 代表章节、文章或其它章节内容中段落之间的分隔符。</p><p data-track="64"><pre> 代表其内容已经预先排版过，格式应当保留 。</p><p data-track="65"><blockquote> 代表引用自其他来源的内容。</p><p data-track="66"><ol> 定义为一个有序列表。</p><p data-track="67"><ul> 定义为一个无序列表。</p><p data-track="68"><li> 定义列表中的一个列表项。</p><p data-track="69"><dl> 定义一个定义列表（一系列术语和其定义）。</p><p data-track="70"><dt> 代表一个又一个 <dd>定义的术语。</p><p data-track="71"><dd> 代表出现在它之前术语的定义。</p><p data-track="72"><figure> 这个元素在 HTML5 中加入 代表一个和文档有关的图例。</p><p data-track="73"><figcaption> 这个元素在 HTML5 中加入 代表着一个图例的说明。</p><p data-track="74"> 代表一个通用的容器，没有特殊的含义。</p><p class="pgc-p" data-track="75"><br></p><p data-track="613"><strong>文字形式</strong></p><p data-track="76">Element Description</p><p data-track="77"><a> 代表一个链接到其他资源的超链接 。</p><p data-track="78"><em> 代表强调 文字。</p><p data-track="79"><strong> 代表特别重要 文字。</p><p data-track="80"><small> 代表注释 ，如免责声明、版权声明等，对理解文档不重要。</p><p data-track="81"><s> 代表不准确或不相关 的内容。</p><p data-track="82"><cite> 代表作品标题 。</p><p data-track="83"><q> 代表内联的引用 。</p><p data-track="84"><dfn> 代表一个术语包含在其最近祖先内容中的定义 。</p><p data-track="85"><abbr> 代表省略 或缩写 ，其完整内容在 title 属性中。</p><p data-track="86"><data> 这个元素在 HTML5 中加入 关联一个内容的机器可读的等价形式 （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）。</p><p data-track="87"><time> 这个元素在 HTML5 中加入 代表日期 和时间 值；机器可读的等价形式通过 datetime 属性指定。</p><p data-track="88"><code> 代表计算机代码 。</p><p data-track="89"><var> 代表代码中的变量 。</p><p data-track="90"><samp> 代表程序或电脑的输出 。</p><p data-track="91"><kbd> 代表用户输入 ，一般从键盘输出，但也可以代表其他输入，如语音输入。</p><p data-track="92"><sub>,<sup> 分别代表下标 和上标 。</p><p data-track="93"><i> 代表一段不同性质 的文字，如技术术语、外文短语等。</p><p data-track="94"><b> 代表一段需要被关注 的文字。</p><p data-track="95"><u> 代表一段需要下划线呈现的文本注释，如标记出拼写错误的文字等。</p><p data-track="96"><mark> 这个元素在 HTML5 中加入 代表一段需要被高亮的引用 文字。</p><p data-track="97"><ruby> 这个元素在 HTML5 中加入 代表被ruby 注释 标记的文本，如中文汉字和它的拼音。</p><p data-track="98"><rt> 这个元素在 HTML5 中加入 代表ruby 注释 ，如中文拼音。</p><p data-track="99"><rp> 这个元素在 HTML5 中加入 代表 ruby 注释两边的额外插入文本 ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。</p><p data-track="100"><bdi> 这个元素在 HTML5 中加入 代表需要脱离 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。</p><p data-track="101"><bdo> 指定子元素的文本方向 ，显式地覆盖默认的文本方向。</p><p data-track="102"><span> 代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。</p><p data-track="103"><br> 代表换行 。</p><p data-track="104"><wbr> 这个元素在 HTML5 中加入 代表建议换行 (Word Break Opportunity) ，当文本太长需要换行时将会在此处添加换行符。</p><p class="pgc-p" data-track="105"><br></p><p data-track="614"><strong>编辑</strong></p><p data-track="106">Element Description</p><p data-track="107"><ins> 定义增加 到文档的内容。</p><p data-track="108"><del> 定义从文档移除 的内容。</p><p class="pgc-p" data-track="109"><br></p><p data-track="615"><strong>嵌入内容</strong></p><p data-track="110">Element Description</p><p data-track="111"><img> 代表一张图片 。</p><p data-track="112"><iframe> 代表一个内联的框架 。</p><p data-track="113"><embed> 这个元素在 HTML5 中加入 代表一个嵌入 的外部资源，如应用程序或交互内容。</p><p data-track="114"><object> 代表一个外部资源 ，如图片、HTML 子文档、插件等。</p><p data-track="115"><param> 代表 <object>元素所指定的插件的参数 。</p><p data-track="116"><video> 这个元素在 HTML5 中加入 代表一段视频 及其视频文件和字幕，并提供了播放视频的用户界面。</p><p data-track="117"><audio> 这个元素在 HTML5 中加入 代表一段声音 ，或音频流 。</p><p data-track="118"><source> 这个元素在 HTML5 中加入 为 <video>或 <audio></p><p data-track="119"><track> 这个元素在 HTML5 中加入 为 <video>或 <audio>这类媒体元素指定文本轨道（字幕） 。</p><p data-track="120"><canvas> 这个元素在 HTML5 中加入 代表位图区域 ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。</p><p data-track="121"><map> 与 <area> 元素共同定义图像映射 区域。</p><p data-track="122"><area> 与 <map> 元素共同定义图像映射 区域。</p><p data-track="123"><svg> 这个元素在 HTML5 中加入 定义一个嵌入式矢量图 。</p><p data-track="124"><math> 这个元素在 HTML5 中加入 定义一段数学公式 。</p><p class="pgc-p" data-track="125"><br></p><p data-track="616"><strong>表格</strong></p><p data-track="126">Element Description</p><p data-track="127"><table> 定义多维数据 。</p><p data-track="128"><caption> 代表表格的标题 。</p><p data-track="129"><colgroup> 代表表格中一组单列或多列 。</p><p data-track="130"><col> 代表表格中的列 。</p><p data-track="131"><tbody> 代表表格中一块具体数据 （表格主体）。</p><p data-track="132"><thead> 代表表格中一块列标签 （表头）。</p><p data-track="133"><tfoot> 代表表格中一块列摘要 （表尾）。</p><p data-track="134"><tr> 代表表格中的行 。</p><p data-track="135"><td> 代表表格中的单元格 。</p><p data-track="136"><th> 代表表格中的头部单元格 。</p><p class="pgc-p" data-track="137"><br></p><p data-track="617"><strong>表单</strong></p><p data-track="138">Element Description</p><p data-track="139"><form> 代表一个表单 ，由控件组成。</p><p data-track="140"><fieldset> 代表控件组 。</p><p data-track="141"><legend> 代表 <fieldset>控件组的标题 。</p><p data-track="142"><label> 代表表单控件的标题 。</p><p data-track="143"><input> 代表允许用户编辑数据的数据区 （文本框、单选框、复选框等）。</p><p data-track="144"><button> 代表按钮 。</p><p data-track="145"><select> 代表下拉框 。</p><p data-track="146"><datalist> 这个元素在 HTML5 中加入 代表提供给其他控件的一组预定义选项 。</p><p data-track="147"><optgroup> 代表一个选项分组 。</p><p data-track="148"><option> 代表一个 <select>元素或 <datalist>元素中的一个选项</p><p data-track="149"><textarea> 代表多行文本框 。</p><p data-track="150"><keygen> 这个元素在 HTML5 中加入 代表一个密钥对生成器 控件。</p><p data-track="151"><output> 这个元素在 HTML5 中加入 代表计算值 。</p><p data-track="152"><progress> 这个元素在 HTML5 中加入 代表进度条 。</p><p data-track="153"><meter> 这个元素在 HTML5 中加入 代表滑动条 。</p><p class="pgc-p" data-track="154"><br></p><p data-track="618"><strong>交互元素</strong></p><p data-track="155">Element Description</p><p data-track="156"><details> 这个元素在 HTML5 中加入 代表一个用户可以(点击)获取额外信息或控件的小部件 。</p><p data-track="157"><summary> 这个元素在 HTML5 中加入 代表 <details>元素的综述 或标题 。</p><p data-track="158"><menuitem> 这个元素在HTML5中加入代表一个用户可以点击的菜单项。</p><p data-track="159"><menu> 这个元素在 HTML5 中加入代表菜单。</p><p class="pgc-p" data-track="160"><br></p><h1 class="pgc-h-arrow-right">HTML标签的使用</h1><p data-track="161"><strong>h1</strong></p><p data-track="162">- 适用于网站logo、网站导航的第一个超链接、分类名称、产品标题名称</p><p data-track="163">- 里面不能包含html标签</p><p data-track="164">- 整个页面有且只有一个</p><p data-track="165">- 要注意的是，不论任何页面，h1标签只能出现一次，它是当前页面的主标题，权重最高, 所以要慎用 .</p><p data-track="166">- 一般情况下，如果有关键词的话最好是在h1里面出现</p><p data-track="167"><br></p><p data-track="172"><strong>h2</strong></p><p data-track="173">- 适用于分类页面、内容页面标题链接、列表名称，</p><p data-track="174">- 里面不包含html标签</p><p data-track="175">- 可以有多个</p><p data-track="176"><br></p><p data-track="179"><strong>h3</strong></p><p data-track="180">- 适用于细分页面标题链接、tag页面、相关产品内容；</p><p data-track="181"><br></p><p data-track="182"><strong>h4~h6</strong></p><p data-track="183">- 较少使用，建议用p代替</p><p data-track="184"><br></p><p data-track="185"><strong>ul</strong></p><p data-track="186">- 无序列表</p><p data-track="187">- 结构层次：ul-li-a-span|strong|small</p><p data-track="188"><br></p><p data-track="190"><strong>ol</strong></p><p data-track="191">- 有序列表</p><p data-track="192">- 结构层次：ol-li-a-span|strong|small</p><p data-track="193"><br></p><p data-track="195"><strong>dl</strong></p><p data-track="196">- 适用于某小区域描述</p><p data-track="197">- dl dt dd</p><p data-track="198">- dt为标题，dd为内容</p><p data-track="199">- 多行内容可以采用dd里面包含多个p，也可以并列多个dd</p><p data-track="200"><br></p><p data-track="204"><strong>a</strong></p><p data-track="205">- 必须写title，</p><p data-track="206">- href="链接"，如果不做任何操作href="javascript:;"，</p><p data-track="207">- 根据业务决定是否写target="_blank"，表示在新的标签页打开。</p><p data-track="208"> 1) 页面跳转</p><p data-track="627"><a href="URL">另一个网站</a></p><p data-track="209"> 2) 跳转到指定ID所在的位置</p><p data-track="626"><a href="#top"></a></p><p data-track="210"> 3) 下载文件:</p><p data-track="622"><a href="URL" download="xxx.pdf">下载</a></p><p data-track="211"> 4) 发邮件:</p><p data-track="623"><a href="mailto:xxxxx@toutiao.com">发邮件</a></p><p data-track="212"> 5) 打电话:</p><p data-track="624"><a href="tel: 13800000000">拨打</a></p><p data-track="213"> 6) 发短信:</p><p data-track="625"><a href="sms: 13111111111">拨打</a></p><p data-track="214"><br></p><p data-track="223"><strong>img</strong></p><p data-track="224">- 必须写alt，</p><p data-track="225">- 建议写title，</p><p data-track="226">- 要考虑onerror,onload,懒加载，</p><p data-track="227">- 如果该图片只是为了样式的话，用css的background代替img标签</p><p data-track="228"><br></p><p data-track="232"><strong>button</strong></p><p data-track="233">- 可变元素</p><p data-track="234">- 不用input type="button"，而用<button type="button">提交</button></p><p data-track="235"><br></p><p data-track="237"><strong>strong/b</strong></p><p data-track="238">- strong：表示非常重要,浏览器默认风格为粗体，搜索引擎会知道这是要强调的内容，在样式上为加粗；这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出</p><p data-track="239">- b：一样有加粗效果，但仅仅是样式</p><p data-track="240"><br></p><p data-track="242"><strong>em/i</strong></p><p data-track="243">- 表示强调,浏览器的默认风格为斜体，搜索引擎也会知道，在样式上为斜体；既可以让文档读起来更有趣,也可以被屏幕阅读器识别出来,并以不同的语调发出</p><p data-track="244">- i:一样有斜体效果，但仅仅是样式</p><p data-track="245"><br></p><p data-track="247"><strong>form</strong></p><p data-track="248">- 获取表单元素时, 多使用form代替div</p><p data-track="249"><br></p><p data-track="250"><strong>iframe</strong></p><p data-track="251">- 尽量少用iframe</p><p data-track="252">- 可以用来加载速度较慢的内容，例如广告</p><p data-track="253">- 浏览器会对iframe中的内容进行安全控制</p><p data-track="254">- 脚本可以并行下载</p><p data-track="255">- 即使iframe内容为空也消耗加载时间</p><p data-track="256">- 会阻止页面加载</p><p data-track="257">- 没有语义</p><p class="pgc-p" data-track="258"><br></p><p data-track="265"><strong>缩写abbr</strong></p><p data-track="266">- abbr 最重要的应该是应该添加一个 title 属性对缩写进行描述</p><p data-track="267">- <abbr title="Web Developer" >WD</abbr></p><p data-track="268"><br></p><p data-track="270"><strong>大段引用: <blockquote>，一般引用: <cite></strong></p><p data-track="271"><blockquote></p><p data-track="272">之前就一直想写这样的一篇文章，分享一下如何去创造一个可访问性更好的页面。今天的计划里有一条把 HTML Tag 和 WCAG标准结合起来。我推荐你这样去写你的 HTML，让某些人的生活可以更容易。</p><p data-track="273"></blockquote></p><p data-track="274"><p>某A给我印象最深刻的一句话是，<cite>“做前端要有爱。不要动不动就有朩有地对各种人使用咆哮体”</cite>。</p></p><p data-track="275"><br></p><p data-track="279"><strong>删除：<del></strong></p><p data-track="280">- 强调某些东西是被删除,那就是使用 <del> 标签</p><p data-track="281"><del>HTML上表示强调时，请使用 <b> 标签</del></p><p data-track="282">HTML上表示强调时，请使用 <strong> 标签</p><p data-track="283"><br></p><p data-track="286"><strong>表格: <table></strong></p><p data-track="287"><table summary="sofish's blog status"></p><p data-track="288"><thead></p><p data-track="289"><tr></p><p data-track="290"><th>DATE</th></p><p data-track="291"><th>IP</th></p><p data-track="292"><th>PV</th></p><p data-track="293"></tr></p><p data-track="294"></thead></p><p data-track="295"><tbody></p><p data-track="296"><tr></p><p data-track="297"><td>2011.3.11</td></p><p data-track="298"><td>3000</td></p><p data-track="299"><td>8000</td></p><p data-track="300"></tr></p><p data-track="301"></tbody></p><p data-track="302"></table></p><p data-track="303"><br></p><p data-track="319"><strong>格式化片段 <code>/<pre></strong></p><p data-track="320">- <code> 是指 computer code text, 而 <pre> 是指 preformatted text。<pre> 的范围更广，并且是块状元素，可能被使用来格式化各种文本，特别是代码。使用没有需要特别注意的，主要是语义上的正确使用，比如不要用 <pre> 来代替一般的 <p></p><p data-track="321"><code>text-align:center</code></p><p data-track="322"><pre></p><p data-track="323">{ ( 1 * 102 ) + ( 9 * 101 ) + ( 3 * 100 ) }</p><p data-track="324"></pre></p><p data-track="325"><br></p><p data-track="330"><strong>无语义标签：/<span></strong></p><p data-track="331">推荐用法是尽量使用其他来做为页面框架的容器，比如布局、添加额外的视觉效果，而不是段落等的替代品</p><p data-track="332"></p><p data-track="333"></p><p data-track="334"></p><p data-track="335"></p><p data-track="336"><ul></p><p data-track="337"><li><span>God</span>, oh my zsh</span></li></p><p data-track="338"></ul></p><p data-track="339"></p><p data-track="340"></p><p data-track="341"><br></p><p data-track="350"><strong>address</strong></p><p data-track="351">表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。可以是必要的任何一种联系方式,比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。</p><p data-track="352"><address></p><p data-track="353"><a href="mailto:jim@toutiao.com">jim@toutiao.com</a><br></p><p data-track="354"><a href="tel:+13115552368">(311) 555-2368</a></p><p data-track="355"></address></p><p data-track="356"><br></p><p data-track="360"><strong>p</strong></p><p data-track="361">- 慎用p标签和用带有content单词来命名id和class，蜘蛛会抓取p标签和content里面的内容，而如果这里面的内容不适用于蜘蛛抓取，蜘蛛会把这段文字内容作为网页的简要介绍或者正文看待</p><p data-track="362">- 什么情况下用p标签和content呢?只有希望蜘蛛抓取的内容才用这样的标签和id、class的命名单词</p><p data-track="363">- 在不是段落的地方的p标签，应该使用div代替</p><p data-track="364"><br></p><h1 class="pgc-h-arrow-right">标签</h1><p data-track="368">自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；</p><p data-track="369">可选的闭合标签（closing tag），需闭合 ( 例如：</ li>或 )；</p><p data-track="370">尽量减少标签数量；</p><p data-track="371"><img src="https://atts.w3cschool.cn/attachments/image/cimg/google.png" alt="Google"></p><p data-track="372"><input type="text" name="title"></p><p data-track="373"><ul></p><p data-track="374"><li>Style</li></p><p data-track="375"><li>Guide</li></p><p data-track="376"></ul></p><p data-track="377"><!-- Not recommended --></p><p data-track="378"><span class="avatar"></p><p data-track="379"><img src="..."></p><p data-track="380"></span></p><p data-track="381"><!-- Recommended --></p><p data-track="382"><img class="avatar" src="..."></p><p data-track="383"><br></p><p data-track="398"><strong>Class与ID</strong></p><p data-track="399">class 应以功能或内容命名，不以表现形式命名；</p><p data-track="400">class 与 id 单词字母小写，多个单词组成时，采用中划线-或者_分割；</p><p data-track="401">使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；</p><p data-track="402"><!-- Not recommended --></p><p data-track="403"></p><p data-track="404"><!-- Recommended --></p><p data-track="405"></p><p data-track="406"><br></p><p data-track="411"><strong>属性顺序</strong></p><p data-track="412">id</p><p data-track="413">class</p><p data-track="414">name</p><p data-track="415">data-xxx</p><p data-track="416">src, for, type, href</p><p data-track="417">title, alt</p><p data-track="418">aria-xxx, role</p><p class="pgc-p" data-track="607"><br></p><p data-track="419"><a id="..." class="..." data-modal="toggle" href="###"></a></p><p data-track="420"><input class="form-control" type="text"></p><p data-track="421"><img src="..." alt="..."></p><p data-track="422"><br></p><p data-track="427"><strong>引号</strong></p><p data-track="428">属性的定义，统一使用双引号。</p><p data-track="429"><!-- Not recommended --></p><p data-track="430"><span id='j-hook' class=text>Google</span></p><p data-track="431"><!-- Recommended --></p><p data-track="432"><span id="j-hook" class="text">Google</span></p><p data-track="433"><br></p><h1 class="pgc-h-arrow-right">嵌套</h1><p data-track="439">a 不允许嵌套 div这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如a 不允许嵌套 a。</p><p data-track="440">严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。</p><p data-track="441"><strong>语义嵌套约束</strong></p><p data-track="442"><li> 用于 <ul> 或 <ol> 下；</p><p data-track="443"><dd>, <dt> 用于 <dl> 下；</p><p data-track="444"><thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下；</p><p data-track="445"><br></p><p data-track="448"><strong>严格嵌套约束</strong></p><p data-track="449">inline-Level 元素，仅可以包含文本或其它 inline-Level 元素;</p><p data-track="450"><a>里不可以嵌套交互式元素<a>、<button>、<select>等;</p><p data-track="451"><p>里不可以嵌套块级元素、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。</p><p data-track="452"><br></p><p data-track="455"><strong>布尔值属性</strong></p><p data-track="456">HTML5 规范中 disabled、checked、selected 等属性不用设置值。</p><p data-track="457"><input type="text" disabled></p><p data-track="458"><input type="checkbox" value="1" checked></p><p data-track="459"><select></p><p data-track="460"><option value="1" selected>1</option></p><p data-track="461"></select></p><p data-track="462"><br></p><h1 class="pgc-h-arrow-right">HEAD</h1><p data-track="470"><strong>文档类型</strong></p><p data-track="471">为每个 HTML 页面的第一行添加标准模式（standard mode）的声明， 这样能够确保在每个浏览器中拥有一致的表现。</p><p data-track="472"><!DOCTYPE html></p><p data-track="473"><br></p><p data-track="474"><strong>语言属性</strong></p><p data-track="475"><!-- 中文 --></p><p data-track="476"><html lang="zh-Hans"></p><p data-track="477"><!-- 简体中文 --></p><p data-track="478"><html lang="zh-cmn-Hans"></p><p data-track="479"><!-- 繁体中文 --></p><p data-track="480"><html lang="zh-cmn-Hant"></p><p data-track="481"><!-- English --></p><p data-track="482"><html lang="en"></p><p data-track="483"><br></p><p data-track="494"><strong>字符编码</strong></p><p data-track="495">指定字符编码的 meta 必须是 head 的第一个直接子元素；</p><p data-track="496"><html></p><p data-track="497"><head></p><p data-track="498"><meta charset="utf-8"></p><p data-track="499">......</p><p data-track="500"></head></p><p data-track="501"><body></p><p data-track="502">......</p><p data-track="503"></body></p><p data-track="504"></html></p><p data-track="505"><br></p><p data-track="514"><strong>IE 兼容模式</strong></p><p data-track="515">优先使用最新版本的IE 和 Chrome 内核</p><p data-track="516"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></p><p data-track="517"><br></p><p data-track="518"><strong>SEO 优化</strong></p><p data-track="519"><head></p><p data-track="520"><meta charset="utf-8"></p><p data-track="521"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></p><p data-track="522"><!-- SEO --></p><p data-track="523"><title>Style Guide
viewport
viewport:一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
width: 浏览器宽度，输出设备中的页面可见区域宽度；
device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
initial-scale: 初始缩放比例；
maximum-scale: 最大缩放比例；
为移动端设备优化，设置可见区域的宽度和初始缩放比例。
iOS 图标
apple-touch-icon 图片自动处理成圆角和高光等效果;
apple-touch-icon-precomposed禁止系统自动添加效果，直接显示设计原图;
favicon
在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：
在 Web Server 根目录放置 favicon.ico 文件；
使用 link 指定 favicon；
HEAD 模板
Style Guide
总结，SEO站内优化是一项非常重要的工作，特别是网站TDK设置，H标签的使用，A标签的使用，A标签属性值的设置，img标签属性的设置和一些不利于抓取的标签都需要做到合理布局，这样才能解决搜索引擎的抓取，只有抓取后才有可能会收录，有了收录才能有排名，有了排名才能带来精准的流量，有了流量才有可能形成蕞终转化。
