前端代码开发规范-html篇

最新推荐文章于 2025-07-03 14:45:56 发布

sounder2a

最新推荐文章于 2025-07-03 14:45:56 发布

阅读量634

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_22010473/article/details/90473378

该博客介绍了HTML编写规范。头部方面，涉及标准模式声明、语言设置、编码、内核选择、SEO优化、移动端适配、图标与favicon设置等；主体部分强调标签闭合、class命名、属性顺序、嵌套约束等规则，还提及语义化标签的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、html 头部

1、为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的表现。

<!DOCTYPE html>

2、使用 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 。理由：参考：https://www.zhihu.com/question/20797118

3、使用 utf-8编码

<html>

<head>

......

</head>

<body>

......

</body>

</html>

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

5、seo优化

<head>

<title>Style Guide</title>

</head>

6、为移动端设备优化，设置可见区域的宽度和初始缩放比例。

7、iOS 图标

apple-touch-icon 图片自动处理成圆角和高光等效果;

apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图;

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">

8、favicon

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

在 Web Server 根目录放置 favicon.ico 文件；

使用 link 指定 favicon；

9、head模版

<!DOCTYPE html>

<head>

<title>Style Guide</title>

</head>

二、html 主体部分

1、所有的html标签要闭合，即使是空的html元素

// bad

<p>这是一个段落。

</section>

// good

<p>这是一个段落。

</section>

// bad

// good

2、class的命名要以功能或内容命名，不以表现形式命名。

3、HTML 属性应该按照特定的顺序出现以保证易读性。

绑定事件

class

name

data-xxx

src, for, type, href

title, alt

4、html属性的定义，统一使用双引号。

5、关于嵌套应注意以下约束

语义嵌套约束

<li> 用于 <ul> 或 <ol> 下；

<dd>, <dt> 用于 <dl> 下；

<thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下；

严格嵌套约束

inline-Level 元素，仅可以包含文本或其它 inline-Level 元素;

<a>里不可以嵌套交互式元素<a>、<button>、<select>等;

<p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。

6、html元素的多个属性之间要有空格隔开,尤其是在富文本传输的时候。虽然即便不这样做浏览器也会帮我们优化，但是在某些库或者引擎里解析会出错。

// bad

// good

7、图片要加上alt属性。理由：可以在网络不好时显示图片内容，有助于seo

// bad

// good

8、定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。

//bad

// good

9、一行代码不要写的过长，长度把握在 80个字符以内即可。atom编辑器中有一个竖线可以作为参考

10、较长的html注释可以用

包裹,因为这样可以清楚的知道注释覆盖的范围

<foot-slide title="物品保价" show="{{insuranceSlide.show}}" slide-status="{{insuranceSlide.slideStatus}}" use-custom-left="{{true}}" use-custom-right="{{true}}" bind:click-cancel="clickInsuranceCancel" bind:click-confirm="clickInsuranceGiveUp" bind:click-bg="clickInsuranceCancel" style="z-index: 1300;">

<text>已阅读并同意</text>

<text style="color:#348BED" bind:tap='goWebView' data-url='{{insuranceSlide.agreementUrl}}' >{{insuranceSlide.agreementName}}</text>

</view>

</view>

</foot-slide>

11、尽量少在html中书写内敛样式。理由：不利用后期维护；浏览器可以运用css样式的缓存，加快加载，减少传输字节数。

三、在适当的场景使用html语义化标签

标签	语义
<article>	独立的文档、页面、应用、站点
<section>	按主题将内容分组，通常会有标题
<sidebar>	表示与周围内容关系不太密切的内容,如广告
<p>	段落
<h1> <h2> <h3> ...	标题
<ul>	无序列表
<ol>	有序列表
<blockquote>	大段引用
<cite>	一般引用
<b>	为样式加粗而加粗
<strong>	为强调内容而加粗
<i>	为样式倾斜而倾斜
<em>	为强调内容而倾斜
code	代码标识
abbr	缩写