一、什么是W3C规范

W3C规范是由万维网联盟（World Wide Web Consortium）发布的一系列标准和指南，用于确保网络技术的互操作性和可访问性。W3C规范定义了HTML、CSS、XML、DOM、SVG等一系列网页技术的标准，旨在促进网络技术的发展和标准化。这些标准和指南被广泛应用于网页设计、网站开发和浏览器制造商等领域。通过遵从W3C规范，可以确保网站的兼容性和可访问性，提升用户体验。一般来说，W3C规范是Web开发者、设计师和其他相关人员进行Web开发的指南和参考。

二、什么是web标准

Web标准是一组由W3C制定的规范，用来规范Web页面的设计、开发和实现。这些标准包括HTML、CSS、XML、JavaScript等技术，可以确保Web页面在不同浏览器和设备上的兼容性、可访问性、可用性和可维护性。使用Web标准可以提高页面的性能、提高搜索引擎排名、降低维护成本、提高用户体验等。

1. 命名规则

命名使用英文语义化，禁止使用特殊字符，禁止使用拼音，禁止使用中英文混合！
项目、目录、html/css/js等文件命名全部采用小写方式，以下划线分隔。如：my_project_name
html/css/js文件名一一对应参考微信小程序.如: login.html、login.css、login.js
class、图片、视频、音频采用小写方式，以下划线或中划线分隔；如：btn-play或btn_play
id可采用驼峰命名;如：play或playGame
变量名采用小写方式，以下划线分隔；应为名词,如： car,person
函数名采用驼峰命名，以动词开始。 getName(), 返回类型是布尔类型，一般以is开头，如: isEnable();
变量和函数命名，不要担心长度，一定要语义化合乎逻辑。

2. 注释

页面头部需要添加制作时间等信息

<head> 
 <title>页面名称</title>
<!-- 注释 -->
</head>

功能模块，在模块之间加入注释，中英文亦可

<!-- rules start -->
<!-- 模块开始 -->
<div class="rules-wrapper">
 <div class="rules-title">活动规则</div>
 <div class="rules-list">
 <div class="rules-item" v-for='item,index in rules_list'>
 <div class="rules-num">{{index+1}}</div>
 <div class="rules-text">{{item}}</div>
 </div>
 </div>
</div>
<!-- 模块结束 -->
<!-- rules end -->

3. HTML规范

Ⅰ. 页面头部

文档类型统一使用html5的doctype：
lang属性统一使用en，特殊场景特殊处理
字符编码统一指定为'UTF-8'
页面标题(Title)：页面名称-产品中文全称-官方网站-腾讯游戏-产品slogan，28个汉字以内
页面关键字(Keywords)： Keywords为产品名、专题名、专题相关名词，之间用英文半角逗号隔开
页面描述(Description) ：不超过150个字符，描述内容要和页面内容相关。
IE兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
移动端禁止缩放

PC端头部示例（源自CSGO国服官网）：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>CSGO官方网站 - 反恐精英:全球攻势 - 公平竞技 风靡全球</title>
 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 <meta name="keywords"
 content="CS,V社,csgo,CS:GO,FPS游戏,反恐精英,CSGO官网,CSGO国服,CSGO下载,CSGO预约,CSGO国服下载,csgo社区服,反恐精英全球攻势,激流大行动,csgo段位,PAL,PAL2020,CSGO PAL,狂牙大行动"/>
 <meta name="description"
 content="由Valve开发，完美世界代理的第一人称射击团队竞技游戏CS:GO，是享誉世界的CS正统续作。传承经典，枪林弹雨中争当最强精英。公平竞技，享受FPS枪战对决的顶级快感！"/>
</head>
<body>
</body>
</html>

移动端头部示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>页面标题</title>
 <!-- 禁止缩放 -->
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
 <!-- 为了防止页面数字被识别为电话号码，可根据实际需要添加： -->
 <meta name="format-detection" content="telephone=no">
 <!-- 让添加到主屏幕的网页再次打开时全屏展示，可添加： 删除默认的苹果工具栏和菜单栏 -->
 <meta content="yes" name="mobile-web-app-capable">
 <meta content="yes" name="apple-mobile-web-app-capable">
 <meta name="Description" content="页面的描述内容"/>
 <meta name="Keywords" content="页面关键字"/>
</head>
<body>
</body>
</html>

Ⅱ、HTML标签

标签必须合法且闭合、嵌套正确，标签名需小写；

标签语法无错误，需要符合语义化；

标签的自定义属性以data-开头；

除非有特定的功能、组件要求等，禁止随意使用id来定义元素样式。

学习感受

青训营开始已经十天了，学习的知识越来越丰富，考验也将随之而来，所以还是要脚踏实地学好每一课。为大项目积累经验。

Web开发标准、w3c规范 ｜ 青训营