前端代码规范——html

最新推荐文章于 2025-06-12 02:18:16 发布

原创最新推荐文章于 2025-06-12 02:18:16 发布 · 397 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端代码规范 #IE兼容 #SEO优化 #注释规范

前端代码规范同时被 2 个专栏收录

1 篇文章

订阅专栏

html的代码规范

1 篇文章

订阅专栏

本文详细介绍了前端HTML代码规范，包括基础规范、属性顺序、id/class命名规则、标签使用和注释规范，旨在提高代码质量和维护效率，确保良好的浏览器兼容性和SEO优化。

前端代码规范——html

规范目的：为了提高工作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，在网站建设中，使结构更加清晰，代码简明有序，有一个更好的前端框架

规范基本准则：符合web标准，使用具有语义的标签，使结构、表现、行为分离、兼容性优良。页面性能优化，代码间接、明了、有序，尽有可能的减少服务器的负载，保证最快的解析速度

创建好项目，打开html,就会看见下面这串代码,那我们该怎样是自己的html代码写得：明了、有序…我们接下来看解释吧

项目命名：全部采用小写方式，以下划线分隔，例：my_project_name

目录命名：参照项目命名规则；有复数结构时，要采用复数命名法。例：scripts, styles

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

一、基础规范

1、为每个HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现
2、 html根元素指定lang属性，从而为文档设置正确的语言。
3 、声明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码。根据页面内容和需求填写适当的keywords和description。
4、每个页面必须有且仅有一个title元素。
5、在引入CSS和JavaScript文件时一般不需要指定type属性，因为text/css和text/javascript分别是它们的默认值。
6、当link元素用于引用CSS文档时, 默认media是screen, 如为特殊终端提供样式, 请指定media属性, 如media=“print”。
7、 css 引用置于头部< head>标签内。
8 、 js 引用置于底部</ body>标签前。
9、缩进使用两个空格，不建议使用 tab。
10、内联元素不能嵌套块；（a除外）
11、对“<”“>”之类的特殊符号进行实体转义& lt; & gt;

二、属性顺序

class （class是为高可复用组件设计的，所以应处在第一位）、
id、name （id更加具体且应该尽量少使用，所以将它放在第二位）、
data-、src、for、type、href、value、placeholder、title、alt、aria-、role、required、readonly、 disabled

三、 id/class命名规则

1 、遵循“内容优先，表现为辅”的基本原则
首先根据内容命名，如header、footer。若根据内容无法找到合适的命名，再结合表现进行辅助，如col-main、blue-box。
2 、一律小写，多个单词以“-”连接，不能使用下划线和驼峰命名法，可基于最近的父元素名称作为前缀。
3 、在不影响语义的情况下，可适当使用缩写，缩写只用来表示结构，如col、nav、btn等，不可自造缩写。
4、避免广告拦截词汇
ad、ads、adv、banner、sponsor、gg、guangg、guanggao等，页面中尽量避免采用以上词汇来命名

四、标签使用

1、 base标签必须放在head内。
2 、 strong标签用于强调重要性, em标签用于表示内容的着重点。
3 、当link元素用于引用CSS文档时, 默认media是screen, 如为特殊终端提供样式, 请指定media属性, 如media=“print”;
4 、 img标签必须加alt( 在图片不能显示时，它能替代图片显示)，尤其是logo、商品图片等关键图片信息，对SEO友好。
5、减少标签的数量,
编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现.
6、所有html标签必须有结束符，img 标签, col标签, base标签, link 标签, meta 标签, input标签除外。
7、尽量少使用< br />来断行

五、注释规范

标题和语言可以让搜索引擎很快了解你页面的主题
< !-- start: XXX模块 -->
< !-- end: XXX模块 -->
或者：
< !-- XXX模块 -->
< !-- /XXX模块 -->

六、IE 兼容模式

优先使用最新版本的IE 和 Chrome 内核

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

七、SEO 优化

<title>你的标题</title>
<meta name="keywords" content="你的关键字"/>
<meta name="description" content="你的网页描述"/>
<meta name="author" content="作者,邮箱,地址"/>

八、viewport视图

为移动端设备优化，设置可见区域的宽度和初始缩放比例。==
1、viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
2、width: 浏览器宽度，输出设备中的页面可见区域宽度；
3、device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
4、initial-scale: 初始缩放比例；
5、maximum-scale: 最大缩放比例；

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

九、iOS 图标

1、apple-touch-icon 图片自动处理成圆角和高光等效果;
2、apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图;

<!-- iphone和itouch,默认57x57像素，必须有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-图片.png"/>
<!-- ipad,72x72像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-图片.png" sizes="72x72"/>
<!-- Retina iphone 和Retina itouch， 114x114像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-图片.png" sizes="114x114"/>
<!-- Retina ipad,144x144像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-图片.png" sizes="144x144"/>

十、.htm 和 .html 的区别

.htm 和 .html 的扩展名文件本质上是没有区别的。浏览器和 Web 服务器都会把它们当作 HTML 文件来处理。

1、区别在于：
.htm 应用在早期 DOS 系统，系统现在或者只能有三个字符。
在 Unix 系统中后缀没有特别限制，一般用 .html。
2、技术上区别：如果一个 URL 没有指定文件名 (如 http://www.runoob.com/css/), 服务器会返回默认的文件名。通常默认文件名为 index.html, index.htm, default.html, 和 default.htm。
如果服务器只配置了 “index.html” 作为默认文件，你必须将文件命名为 “index.html”, 而不是 “index.htm”。
但是，通常服务器可以设置多个默认文件，你可以根据需要设置默认文件名。
不管怎样，HTML 完整的后缀是 “.html”。