第22篇代码规范与格式好代码不仅是给浏览器看的更是给下一个阅读它的人看的——那个人可能就是三个月后的你自己。学习目标掌握HTML代码的缩进、换行和空格规范学会编写有意义的类名和ID命名了解HTML注释的正确使用方式学会使用W3C验证工具检查代码质量核心知识点一、缩进与换行1. 缩进规范使用2个空格推荐或4个空格进行缩进不要用Tab或混合使用。!-- ✅ 正确一致的两空格缩进 --sectionh2产品介绍/h2divclasscard-listarticleclasscardh3基础版/h3p适合个人用户/p/articlearticleclasscardh3专业版/h3p适合小型团队/p/article/div/section!-- ❌ 错误缩进不一致混用了不同层级 --sectionh2产品介绍/h2divclasscard-listarticleclasscardh3基础版/h3/article/div/section2. 行长度限制单行代码不超过80-120个字符。超长的属性值或URL应该换行。!-- ✅ 长属性值换行对齐 --imgsrcimages/products/2024/summer-collection/main-banner.pngalt2024夏季新品bannerwidth1200height400!-- ❌ 单行过长阅读困难 --imgsrcimages/products/2024/summer-collection/main-banner.pngalt2024夏季新品bannerwidth1200height4003. 空行使用用空行分隔逻辑上独立的区块但不要滥用。!-- ✅ 适当空行分隔区块 --headernav...导航内容.../nav/headermainsection...主要内容.../section/mainfooter...页脚内容.../footer二、属性书写规范1. 属性顺序建议虽然没有强制标准但建议按以下顺序书写属性便于查找classidnamedata-*src,href,typealt,titlewidth,height其他属性布尔属性如disabled,checked放最后!-- ✅ 属性顺序一致 --inputclassform-inputidusernamenameusernametypetextplaceholder请输入用户名required2. 布尔属性写法布尔属性不需要写值直接写属性名即可。!-- ✅ 简写形式 --inputtypecheckboxcheckedinputtypetextrequireddisabledvideosrcmovie.mp4autoplayloopmuted/video!-- ❌ 不需要赋值虽然浏览器也支持 --inputtypecheckboxcheckedcheckedinputtypecheckboxcheckedtrue3. 属性值引号统一使用双引号包裹属性值。!-- ✅ --divclasscontaineridmain/div!-- ❌ 混合使用 --divclasscontaineridmain/div三、命名规范1. 类名class命名推荐使用BEM 命名法或kebab-case短横线连接。!-- ✅ BEM 命名法Block__Element--Modifier --navclassmain-navulclassmain-nav__listliclassmain-nav__itemaclassmain-nav__link main-nav__link--activehref/首页/a/liliclassmain-nav__itemaclassmain-nav__linkhref/about关于/a/li/ul/nav!-- ✅ kebab-case 命名 --divclassuser-profileimgclassuser-avatarsrcavatar.jpgalt用户头像spanclassuser-name张三/span/divBEM 含义Block块独立的功能组件如main-navElement元素块的组成部分如main-nav__linkModifier修饰符元素的状态或变体如main-nav__link--active命名方式示例适用场景kebab-caseuser-name,form-input简单项目通用类名BEMcard__title,btn--primary中大型项目组件化开发camelCaseuserName,formInput不推荐在HTML中使用2. ID 命名ID 应该是全局唯一的谨慎使用。命名同样使用 kebab-case。!-- ✅ ID 用于页面唯一的锚点或 JS 钩子 --navidmain-navigation...导航.../navsectionidcontact-form...联系表单.../section!-- ❌ ID 不要用于样式不要重复 --!-- 以下在页面中只能出现一次 --dividcard卡片1/divdividcard卡片2/div!-- ❌ 重复ID --四、注释规范1. 何时需要注释!-- ✅ 注释闭合标签长嵌套结构中特别有用 --sectionclassproduct-list.../section!-- /.product-list --!-- ✅ 注释复杂逻辑或特殊处理的原因 --!-- 注意此处iframe用于嵌入第三方地图sandbox属性限制其权限 --iframesrchttps://maps.example.com/embedsandboxallow-scripts allow-same-origintitle店铺位置地图/iframe!-- ❌ 不要注释显而易见的内容 --!-- 这是一个导航 --nav.../nav!-- ❌ 不要遗留调试代码的注释 --!-- div classdebug-info...调试信息.../div --2. 注释格式!-- 区块标题 --!-- 多行注释说明 - 用途xxx - 作者xxx - 修改日期xxx --五、文档基本结构每个HTML文件都应包含以下基础结构!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title页面标题 - 网站名称/titlemetanamedescriptioncontent页面描述用于搜索引擎展示/headbody!-- 页面内容 --/body/html必备检查清单!DOCTYPE html声明lang属性声明语言charsetUTF-8字符编码viewport元标签响应式必备有意义的title六、自闭合标签写法HTML5 中以下标签可以自闭合也可以不闭合。推荐不闭合的风格HTML5风格!-- ✅ HTML5 推荐风格 --imgsrcphoto.jpgalt照片inputtypetextnamesearchbrhrmetacharsetUTF-8linkrelstylesheethrefstyle.css!-- ✅ XHTML/XML 风格也能工作但要统一 --imgsrcphoto.jpgalt照片/inputtypetextnamesearch/br/建议项目中统一使用一种风格不要混用。七、W3C 验证工具使用W3C Markup Validation Service 是官方HTML验证工具可以检查代码中的语法错误。使用方法在线验证访问 validator.w3.org输入网址验证上传HTML文件直接粘贴代码常见错误类型错误类型示例修正未闭合标签p文本divp文本/pdiv标签嵌套错误pdiv.../div/pdivp.../p/div重复IDidheader出现两次改为 class 或确保唯一无效属性img srca.jpg altimg srca.jpg alt过时标签center,font使用CSS替代VS Code 实时验证安装扩展“HTMLHint”或“W3C Validation”可以在编码时实时提示问题。// .vscode/settings.json 示例配置{htmlhint.options:{tag-pair:true,tagname-lowercase:true,attr-lowercase:true,attr-value-double-quotes:true,id-unique:true,src-not-empty:true,alt-require:true}}动手练习练习 1格式化混乱代码将以下代码按规范重新格式化!doctypehtmlhtmlheadmetacharsetutf-8title我的页面/title/headbodydivclassheaderdivclasslogoimgsrclogo.png/divulclassnav-listliclassnav-itemahref/首页/a/liliclassnav-itemahref/about关于/a/li/ul/divdivclassmainh1欢迎来到我的网站/h1p这是一个示例页面。/p/div/body/html参考答案!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title我的页面/title/headbodyheaderclasssite-headerdivclasslogoimgsrclogo.pngalt网站Logo/divnavulclassnav-listliclassnav-itemahref/首页/a/liliclassnav-itemahref/about关于/a/li/ul/nav/headermainclassmainh1欢迎来到我的网站/h1p这是一个示例页面。/p/main/body/html改进点添加langzh-CN统一使用双引号添加alt属性使用语义化标签header、nav、main添加适当缩进和换行空行分隔逻辑区块练习 2找出命名问题以下类名和ID有哪些问题如何改进dividd1classred-boxdivclassleft/divdivclassbigText/div/div参考答案原命名问题建议改进idd1无意义idhero-banner或idintro-sectionclassred-box描述外观而非功能classalert-box或classwarning-panelclassleft描述位置classsidebar或classaside-contentclassbigText混合大小写描述外观classarticle-title或classsection-heading原则命名应该描述功能/内容而不是外观/位置。外观可能变但结构功能相对稳定。练习 3使用 W3C 验证器将练习1中的原始代码复制到 validator.w3.org记录所有报错和警告并逐条修正。预期的主要问题!doctype html应为大写!DOCTYPE html属性值缺少引号如charsetutf-8图片缺少alt属性缺少lang属性标签未正确换行缩进警告级别常见误区 ⚠️误区正确做法“Tab 和空格效果一样”统一用空格团队约定2或4个“class命名越短越好”要有意义btn-primary比bp好“ID 比 class 优先级高所以都用ID”ID 用于唯一元素样式多用 class“注释越多越好”注释解释为什么而非是什么“验证器通过 代码完美”验证器只检查语法不检查语义和可访问性“为了性能删掉所有空格”生产环境用构建工具压缩源代码保持可读速查卡片 代码格式规范项目规范缩进2个空格引号双引号行长度不超过120字符标签小写属性小写kebab-case布尔属性不写值required而非requiredrequired命名规范对比规范示例用途kebab-casemain-content类名、IDBEMblock__element--modifier组件化项目语义命名btn-primary,card-header描述功能而非外观文件头部必备!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title.../title/head验证工具清单工具用途地址W3C ValidatorHTML语法验证validator.w3.orgHTMLHintVS Code 实时检查扩展市场搜索WAVE可访问性检查wave.webaim.org扩展阅读Google HTML/CSS Style GuideW3C HTML ValidatorBEM 命名规范官方文档MDN: 代码规范指南HTMLHint 文档下一篇第23篇文件组织与路径管理
第22篇：代码规范与格式
发布时间：2026/6/9 20:53:11
第22篇代码规范与格式好代码不仅是给浏览器看的更是给下一个阅读它的人看的——那个人可能就是三个月后的你自己。学习目标掌握HTML代码的缩进、换行和空格规范学会编写有意义的类名和ID命名了解HTML注释的正确使用方式学会使用W3C验证工具检查代码质量核心知识点一、缩进与换行1. 缩进规范使用2个空格推荐或4个空格进行缩进不要用Tab或混合使用。!-- ✅ 正确一致的两空格缩进 --sectionh2产品介绍/h2divclasscard-listarticleclasscardh3基础版/h3p适合个人用户/p/articlearticleclasscardh3专业版/h3p适合小型团队/p/article/div/section!-- ❌ 错误缩进不一致混用了不同层级 --sectionh2产品介绍/h2divclasscard-listarticleclasscardh3基础版/h3/article/div/section2. 行长度限制单行代码不超过80-120个字符。超长的属性值或URL应该换行。!-- ✅ 长属性值换行对齐 --imgsrcimages/products/2024/summer-collection/main-banner.pngalt2024夏季新品bannerwidth1200height400!-- ❌ 单行过长阅读困难 --imgsrcimages/products/2024/summer-collection/main-banner.pngalt2024夏季新品bannerwidth1200height4003. 空行使用用空行分隔逻辑上独立的区块但不要滥用。!-- ✅ 适当空行分隔区块 --headernav...导航内容.../nav/headermainsection...主要内容.../section/mainfooter...页脚内容.../footer二、属性书写规范1. 属性顺序建议虽然没有强制标准但建议按以下顺序书写属性便于查找classidnamedata-*src,href,typealt,titlewidth,height其他属性布尔属性如disabled,checked放最后!-- ✅ 属性顺序一致 --inputclassform-inputidusernamenameusernametypetextplaceholder请输入用户名required2. 布尔属性写法布尔属性不需要写值直接写属性名即可。!-- ✅ 简写形式 --inputtypecheckboxcheckedinputtypetextrequireddisabledvideosrcmovie.mp4autoplayloopmuted/video!-- ❌ 不需要赋值虽然浏览器也支持 --inputtypecheckboxcheckedcheckedinputtypecheckboxcheckedtrue3. 属性值引号统一使用双引号包裹属性值。!-- ✅ --divclasscontaineridmain/div!-- ❌ 混合使用 --divclasscontaineridmain/div三、命名规范1. 类名class命名推荐使用BEM 命名法或kebab-case短横线连接。!-- ✅ BEM 命名法Block__Element--Modifier --navclassmain-navulclassmain-nav__listliclassmain-nav__itemaclassmain-nav__link main-nav__link--activehref/首页/a/liliclassmain-nav__itemaclassmain-nav__linkhref/about关于/a/li/ul/nav!-- ✅ kebab-case 命名 --divclassuser-profileimgclassuser-avatarsrcavatar.jpgalt用户头像spanclassuser-name张三/span/divBEM 含义Block块独立的功能组件如main-navElement元素块的组成部分如main-nav__linkModifier修饰符元素的状态或变体如main-nav__link--active命名方式示例适用场景kebab-caseuser-name,form-input简单项目通用类名BEMcard__title,btn--primary中大型项目组件化开发camelCaseuserName,formInput不推荐在HTML中使用2. ID 命名ID 应该是全局唯一的谨慎使用。命名同样使用 kebab-case。!-- ✅ ID 用于页面唯一的锚点或 JS 钩子 --navidmain-navigation...导航.../navsectionidcontact-form...联系表单.../section!-- ❌ ID 不要用于样式不要重复 --!-- 以下在页面中只能出现一次 --dividcard卡片1/divdividcard卡片2/div!-- ❌ 重复ID --四、注释规范1. 何时需要注释!-- ✅ 注释闭合标签长嵌套结构中特别有用 --sectionclassproduct-list.../section!-- /.product-list --!-- ✅ 注释复杂逻辑或特殊处理的原因 --!-- 注意此处iframe用于嵌入第三方地图sandbox属性限制其权限 --iframesrchttps://maps.example.com/embedsandboxallow-scripts allow-same-origintitle店铺位置地图/iframe!-- ❌ 不要注释显而易见的内容 --!-- 这是一个导航 --nav.../nav!-- ❌ 不要遗留调试代码的注释 --!-- div classdebug-info...调试信息.../div --2. 注释格式!-- 区块标题 --!-- 多行注释说明 - 用途xxx - 作者xxx - 修改日期xxx --五、文档基本结构每个HTML文件都应包含以下基础结构!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title页面标题 - 网站名称/titlemetanamedescriptioncontent页面描述用于搜索引擎展示/headbody!-- 页面内容 --/body/html必备检查清单!DOCTYPE html声明lang属性声明语言charsetUTF-8字符编码viewport元标签响应式必备有意义的title六、自闭合标签写法HTML5 中以下标签可以自闭合也可以不闭合。推荐不闭合的风格HTML5风格!-- ✅ HTML5 推荐风格 --imgsrcphoto.jpgalt照片inputtypetextnamesearchbrhrmetacharsetUTF-8linkrelstylesheethrefstyle.css!-- ✅ XHTML/XML 风格也能工作但要统一 --imgsrcphoto.jpgalt照片/inputtypetextnamesearch/br/建议项目中统一使用一种风格不要混用。七、W3C 验证工具使用W3C Markup Validation Service 是官方HTML验证工具可以检查代码中的语法错误。使用方法在线验证访问 validator.w3.org输入网址验证上传HTML文件直接粘贴代码常见错误类型错误类型示例修正未闭合标签p文本divp文本/pdiv标签嵌套错误pdiv.../div/pdivp.../p/div重复IDidheader出现两次改为 class 或确保唯一无效属性img srca.jpg altimg srca.jpg alt过时标签center,font使用CSS替代VS Code 实时验证安装扩展“HTMLHint”或“W3C Validation”可以在编码时实时提示问题。// .vscode/settings.json 示例配置{htmlhint.options:{tag-pair:true,tagname-lowercase:true,attr-lowercase:true,attr-value-double-quotes:true,id-unique:true,src-not-empty:true,alt-require:true}}动手练习练习 1格式化混乱代码将以下代码按规范重新格式化!doctypehtmlhtmlheadmetacharsetutf-8title我的页面/title/headbodydivclassheaderdivclasslogoimgsrclogo.png/divulclassnav-listliclassnav-itemahref/首页/a/liliclassnav-itemahref/about关于/a/li/ul/divdivclassmainh1欢迎来到我的网站/h1p这是一个示例页面。/p/div/body/html参考答案!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title我的页面/title/headbodyheaderclasssite-headerdivclasslogoimgsrclogo.pngalt网站Logo/divnavulclassnav-listliclassnav-itemahref/首页/a/liliclassnav-itemahref/about关于/a/li/ul/nav/headermainclassmainh1欢迎来到我的网站/h1p这是一个示例页面。/p/main/body/html改进点添加langzh-CN统一使用双引号添加alt属性使用语义化标签header、nav、main添加适当缩进和换行空行分隔逻辑区块练习 2找出命名问题以下类名和ID有哪些问题如何改进dividd1classred-boxdivclassleft/divdivclassbigText/div/div参考答案原命名问题建议改进idd1无意义idhero-banner或idintro-sectionclassred-box描述外观而非功能classalert-box或classwarning-panelclassleft描述位置classsidebar或classaside-contentclassbigText混合大小写描述外观classarticle-title或classsection-heading原则命名应该描述功能/内容而不是外观/位置。外观可能变但结构功能相对稳定。练习 3使用 W3C 验证器将练习1中的原始代码复制到 validator.w3.org记录所有报错和警告并逐条修正。预期的主要问题!doctype html应为大写!DOCTYPE html属性值缺少引号如charsetutf-8图片缺少alt属性缺少lang属性标签未正确换行缩进警告级别常见误区 ⚠️误区正确做法“Tab 和空格效果一样”统一用空格团队约定2或4个“class命名越短越好”要有意义btn-primary比bp好“ID 比 class 优先级高所以都用ID”ID 用于唯一元素样式多用 class“注释越多越好”注释解释为什么而非是什么“验证器通过 代码完美”验证器只检查语法不检查语义和可访问性“为了性能删掉所有空格”生产环境用构建工具压缩源代码保持可读速查卡片 代码格式规范项目规范缩进2个空格引号双引号行长度不超过120字符标签小写属性小写kebab-case布尔属性不写值required而非requiredrequired命名规范对比规范示例用途kebab-casemain-content类名、IDBEMblock__element--modifier组件化项目语义命名btn-primary,card-header描述功能而非外观文件头部必备!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title.../title/head验证工具清单工具用途地址W3C ValidatorHTML语法验证validator.w3.orgHTMLHintVS Code 实时检查扩展市场搜索WAVE可访问性检查wave.webaim.org扩展阅读Google HTML/CSS Style GuideW3C HTML ValidatorBEM 命名规范官方文档MDN: 代码规范指南HTMLHint 文档下一篇第23篇文件组织与路径管理
