知识分享萌

外观

网站代码规范v.1.0

约 4375 字大约 15 分钟

2025-07-31

一、mate代码规范

1、PC：

\<head>
\<meta charset="UTF-8">  \<!--页面编码声明-->
\<title>标题\</title>
\<meta name="description" content="描述" />
\<meta name="keywords" content="关键词" />
\<meta name="applicable-device" content="pc">  \<!--页面端口声明-->
\<meta name="renderer" content="webkit|ie-stand">   \<!--优先极速、标准内核渲染，-->
\<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  \<!--浏览器兼容-->
\<meta http-equiv="Cache-Control" content="no-transform">  \<!--禁止转码-->
\<meta http-equiv="Cache-Control" content="no-siteapp">  \<!--禁止转码-->
\<link rel="shortcut icon" href="图标地址" type="image/x-icon">  \<!--网站ico图标说明-->
\<link rel="alternate" media="only screen and(max-width: 640px)" href="对应移动地址" >  \<!--对应移动-->
\<meta name="mobile-agent" content="format=html5;url=对应移动端地址">  \<!--对应移动-->
\<meta name="mobile-agent" content="format=xhtml;url=对应移动端地址">  \<!--对应移动-->
\<meta name="mobile-agent" content="format=wml;url=对应移动端地址">  \<!--对应移动-->
\</head>

2、m/wap移动：

\<head>
  \<meta charset="UTF-8"> \<!--页面编码声明-->
  \<title>标题\</title>
  \<meta name="description" content="描述" />
  \<meta name="keywords" content="关键词" />
  \<meta name="applicable-device" content="mobile"> \<!--页面端口声明-->
  \<meta name="format-detection" content="telephone=no,email=no">\<!--禁止把数字转化为拨号链接,禁止作为邮箱地址-->
  \<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">  \<!--页面初始缩放比例、是否可手动缩放说明-->
  \<meta http-equiv="Cache-Control" content="no-transform"> \<!--禁止转码-->
  \<meta http-equiv="Cache-Control" content="no-siteapp"> \<!--禁止转码-->
  \<link rel="canonical" href="当前页面对应PC地址"/> \<!--集权标签-->
  \<link rel="shortcut icon" href="图标地址" type="image/x-icon"> \<!--网站ico图标说明-->
\</head>

3、mip端：

\<head>
\<meta charset="UTF-8"> \<!--页面编码声明-->
\<title>标题\</title>
\<meta name="description" content="描述" />
\<meta name="keywords" content="关键词" />
\<meta name="applicable-device" content="mobile"> \<!--页面端口声明-->
\<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">  \<!--页面初始缩放比例、是否可手动缩放说明-->
\<meta http-equiv="Cache-Control" content="no-transform"> \<!--禁止转码-->
\<meta http-equiv="Cache-Control" content="no-siteapp"> \<!--禁止转码-->
\<link rel="canonical" href="当前页面对应m或wap地址/> \<!--集权标签-->
\<link rel="shortcut icon" href="图标地址"" type="image/x-icon"> \<!--网站ico图标说明-->
\</head>

二、时间因子

1、首页

\<meta property="bytedance:updated_time" content="这里调用内容更新时间" />
\<!--头条、上面的日期格式为2022-03-17T16:30:27-->
\<script type="application/ld+json">
    {
    "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
    "@id": "调用当前页面网址",
    "title": "调用当前页面head区的title",
    "description": "调用当前页面head区的description",
    "upDate": "调用当前页面更新时间"
}
\</script>
\<!--百度、上面的日期格式为2022-03-17T16:30:27-->

2、列表页

\<meta property="bytedance:updated_time" content="这里调用内容更新时间" />
\<!--头条、上面的日期格式为2022-03-17T16:30:27-->
\<script type="application/ld+json">
    {
    "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
    "@id": "调用当前页面网址",
    "title": "调用当前页面head区的title",
    "description": "调用当前页面head区的description",
    "upDate": "调用当前页面更新时间"
}
\</script>
\<!--百度、上面的日期格式为2022-03-17T16:30:27-->

3、详情页

\<meta property="bytedance:published_time" content="这里调用内容发布时间" />
\<meta property="bytedance:updated_time" content="这里调用内容更新时间" />
\<!--头条、上面的日期格式为2017-03-13T15:01:40+01:00-->
  \<script type="application/ld+json">
    {
    "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
    "@id": "调用当前页面网址",
    "title": "调用当前页面head区的title",
    "description": "调用当前页面head区的description",
    "pubDate": "调用当前页面发布时间",
    "upDate": "调用当前页面更新时间"
}
\</script>
\<!--百度、上面的日期格式为2022-03-17T16:30:27-->

前端SEO代码规范

什么是SEO？

搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。SEO是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为。

SEO分为站内优化和站外优化

站内优化指的是站长能控制的所有网站本身的调整，如网站结构、页面HTML代码

站外优化指的是外部链接建设及行业社群的参与互动，这些活动不是在网站本身进行的

SEO原理

页面抓取： 蜘蛛向服务器请求页面，获取页面内容

分析入库：对获取到的内容进行分析，对优质页面进行收录

检索排序：当用户检索关键词时，从收录的页面中按照一定的规则进行排序，并返回给用户结果

前端SEO代码规范–TKD规范

TDK是个缩写，页面标题，页面关键词以及页面描述

title设置规则：

<title>页面标题必须含有</title>

  • 一般不超过80个字符
  • 词语间要用英文“-”隔开
  • 一般是“网站名称_主关键词或一句含有主关键词的描述”，比如做“贷款”这个词，“网站名称_成都贷款公司_成都个人贷款_成都抵押贷款_成都小额贷款_成都信用贷款”

keywords设置规则：

<meta name=”keywords” content=”关键词1,关键词2,关键词3″>

  • 词语间要用英文“,”隔开
  • 首页keywords写法，一般是“网站名称,主要栏目名,主要关键词”，一般不超过5个
  • 栏目页keywords写法，一般是“栏目名称,栏目关键字,栏目分类列表名称”，一般不超过3个
  • 详情页keywords写法，一般是讲详情页主要描述的这个关键词吸入即可,一般不超过3个

description设置规则：

<meta name=”description” content=”你网页的简述”>

  • 一般是降页面的标题，关键词和一些特殊栏目的内容融合，携程简单的介绍
  • 字数一般不超过150个字符
  • 词语间的间隔一般使用英文符号

HEAD头部信息规范

SEO 优化

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- SEO -->
<title>Style Guide</title>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<link rel="alternate" href="网页权威链接"><!-- 不渲染 -->
<link rel="canonical" href="网页权威链接">
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
"name": "Party Coffee Cake"
}
</script>
</head>

  • title:指定网页标题，建议48个字符以内，一般不超过80字符，百度移动端最多显示48字符，且智能挑选飘红部分展现，会出现截取中间段情况；
  • description：指定网页描述，建议100字符以内，百度会抓取页面信息中与元信息最符合的信息进行展现，所以描述编写需考虑飘红因素；
  • keywords：指定网页关键词，百度会分析页面高频词，挑选符合页面主题的关键词。
  • author：指定页面作者信息，从用户角度来说，在搜索结果看到带有作者信息的内容，更加增加了可信程度。
  • alternate及canonical：指定网页权威页面，百度适配以及判断最优展现页面依据。
  • schema：结构化数据，是为了提供给搜索引擎按特殊展现样式，定制字段的代码。如时间因子，权威数据，定制提交等字段都属于schema。
favicon

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：

  • 在 Web Server 根目录放置 favicon.ico 文件；
  • 使用 link 指定 favicon；

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

关键词密度

一个页面或者一片软文的关键词密度应该在2%–8%之间

公式：这个关键词的字数 * 这个关键词出现的次数 / 软文总字数或者页面总字数 算出的这个值在2%–8%之间就符合关键词密度规则

HTML标签SEO相关列表

红色字体为seo相关配置代码，需前端人员注意使用规则。

文档元数据

ElementDescription
<head>代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。
<title>定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。
<base>定义页面上相对 URL 的基准 URL。
<link>用于链接外部资源到该文档。
<meta>定义其他 HTML 元素无法描述的元数据。
<style>用于内联 CSS。

脚本

ElementDescription
<script>定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。
<noscript>定义当浏览器不支持脚本时显示的替代文字。

章节

ElementDescription
<body>代表 HTML 文档的内容。在文档中只能有一个 元素。
<section>这个元素在 HTML5 中加入 定义文档中的一个章节。
<nav>这个元素在 HTML5 中加入 定义只包含导航链接的章节。
<article>这个元素在HTML5中加入定义可以独立于内容其余部分的完整独立内容块。
<aside>这个元素在 HTML5 中加入 定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>**标题元素实现了六层文档标题，****<h1>是最大的标题，<h6>**是最小的标题。标题元素简要地描述章节的主题。
<header>这个元素在HTML5中加入定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
<footer>这个元素在HTML5中加入定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
<address>定义包含联系信息的一个章节。
<main>这个元素在 HTML5 中加入定义文档中主要或重要的内容。

组织内容

ElementDescription
<p>定义一个段落。
<hr>代表章节、文章或其他长内容中段落之间的分隔符。
<pre>代表其内容已经预先排版过，格式应当保留 。
<blockquote>代表引用自其他来源的内容。
<ol>定义一个有序列表。
<ul>定义一个无序列表。
<li>定义列表中的一个列表项。
<dl>定义一个定义列表（一系列术语和其定义）。
<dt>代表一个由下一个 <dd>定义的术语。
<dd>代表出现在它之前术语的定义。
<figure>这个元素在 HTML5 中加入 代表一个和文档有关的图例。
<figcaption>这个元素在 HTML5 中加入 代表一个图例的说明。
<div>代表一个通用的容器，没有特殊含义。

文字形式

ElementDescription
<a>代表一个链接到其他资源的超链接 。
<em>代表强调 文字。
<strong>代表特别重要 文字。
<small>代表注释 ，如免责声明、版权声明等，对理解文档不重要。
<cite>代表作品标题 。
<dfn>代表一个术语包含在其最近祖先内容中的定义 。
<abbr>代表省略 或缩写 ，其完整内容在 title 属性中。
<time>这个元素在 HTML5 中加入 代表日期 和时间 值；机器可读的等价形式通过 datetime 属性指定。
<i>代表一段不同性质 的文字，如技术术语、外文短语等。
<b>代表一段需要被关注 的文字。
<u>代表一段需要下划线呈现的文本注释，如标记出拼写错误的文字等。
<mark>这个元素在 HTML5 中加入 代表一段需要被高亮的引用 文字。
<ruby>这个元素在 HTML5 中加入 代表被ruby 注释 标记的文本，如中文汉字和它的拼音。
<rt>这个元素在 HTML5 中加入 代表ruby 注释 ，如中文拼音。
<rp>这个元素在 HTML5 中加入 代表 ruby 注释两边的额外插入文本 ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。
<span>代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。
<br>代表换行 。

嵌入内容

ElementDescription
<img>代表一张图片 。
<video>这个元素在 HTML5 中加入 代表一段视频 及其视频文件和字幕，并提供了播放视频的用户界面。
<audio>这个元素在 HTML5 中加入 代表一段声音 ，或音频流 。
<track>这个元素在 HTML5 中加入 为 <video>或 <audio>这类媒体元素指定文本轨道（字幕） 。

HTML标签的SEO使用规则

  • h1
  • 适用于网站logo、网站导航的第一个超链接、分类名称、详情页标题名称
  • 里面不能包含html标签
  • 整个页面有且只有一个
  • 要注意的是，不论任何页面，h1标签只能出现一次，它是当前页面的主标题，权重最高, 所以要慎用 .
  • 一般情况下，如果有关键词的话最好是在h1里面出现
  • h2
  • 适用于分类模块主题、内容章节标题链接、列表名称，
  • 里面不包含html标签
  • 可以有多个
  • h3
  • 适用于细分页面标题链接、tag页面、相关产品内容；
  • h4~h6
  • 较少使用，建议用p代替
  • a
  • 必须写title，
  • href="链接"，如果不做任何操作href="javascript:;"，
  • 根据业务决定是否写target="_blank"，当前页面的a标签禁止使用"_blank",
      1)当前页 <a href="URL">当前页链接</a>
      2) 封面、列表等索引页页面跳转 <a href="URL" target="_blank">另一个页面</a>
    3) 详情页面跳转 <a href="URL">另一个页面</a>
  • img
  • 必须写alt，
  • 建议写title，
  • 要考虑onerror,onload,懒加载，
  • 如果该图片只是为了样式的话，用css的background代替img标签
  • strong/b
  • strong：表示非常重要,浏览器默认风格为粗体，搜索引擎会知道这是要强调的内容，在样式上为加粗；这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出
  • b：一样有加粗效果，但仅仅是样式
  • em/i
  • 表示强调,浏览器的默认风格为斜体，搜索引擎也会知道，在样式上为斜体；既可以让文档读起来更有趣,也可以被屏幕阅读器识别出来,并以不同的语调发出
  • i:一样有斜体效果，但仅仅是样式
  • 缩写abbr
  • abbr 最重要的应该是应该添加一个 title 属性对缩写进行描述
  • <abbr title="Web Developer" >WD</abbr>
  • 大段引用: <blockquote>，一般引用: <cite>

<blockquote>
之前就一直想写这样的一篇文章，分享一下如何去创造一个可访问性更好的页面。今天的计划里有一条把 HTML Tag 和 WCAG标准结合起来。我推荐你这样去写你的 HTML，让某些人的生活可以更容易。
</blockquote>
<p>某A给我印象最深刻的一句话是，<cite>“做前端要有爱。不要动不动就有朩有地对各种人使用咆哮体”</cite>。</p>

  • 格式化片段 <code>/<pre>
  • <code> 是指 computer code text, 而 <pre> 是指 preformatted text。<pre> 的范围更广，并且是块状元素，可能被使用来格式化各种文本，特别是代码。使用没有需要特别注意的，主要是语义上的正确使用，比如不要用 <pre> 来代替一般的 <p>
    <code>text-align:center</code>
    <pre>
    { ( 1 * 102 ) + ( 9 * 101 ) + ( 3 * 100 ) }
    </pre>
  • p
  • 慎用p标签和用带有content单词来命名id和class，蜘蛛会抓取p标签和content里面的内容，而如果这里面的内容不适用于蜘蛛抓取，蜘蛛会把这段文字内容作为网页的简要介绍或者正文看待
  • 什么情况下用p标签和content呢?只有希望蜘蛛抓取的内容才用这样的标签和id、class的命名单词
  • 在不是段落的地方的p标签，应该使用div代替

标签

  • 自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；
  • 可选的闭合标签（closing tag），需闭合 ( 例如：</ li>或 )；
  • 尽量减少标签数量；

<img src="https://atts.w3cschool.cn/attachments/image/cimg/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="...">

Class与ID

  • class 应以功能或内容命名，不以表现形式命名；
  • class 与 id 单词字母小写，多个单词组成时，采用中划线-或者_分割；
  • 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；

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

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

属性顺序

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

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

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

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

嵌套

a 不允许嵌套 div这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如a 不允许嵌套 a。

严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。

更新: 2022-09-06 13:43:13
原文: <https://www.yuque.com/seoers/uyyd4f/lpwn7d>

许可证：署名 4.0 国际 (CC-BY-4.0)