前端编码规范之HTML规范

AS、SD

已于 2023-06-02 16:23:55 修改

阅读量130

点赞数

分类专栏： HTML 文章标签： html

于 2021-08-13 14:45:40 首次发布

本文链接：https://blog.csdn.net/qq_42988102/article/details/119675305

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通用规范

省略图片、样式、脚本以及其他媒体文件 URL 的协议部分（http:,https:），除非文件在两种协议下都不可用。

这种方案称为 protocol-relative URL，好处是无论你是使用 HTTPS 还是 HTTP,访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节。

– Example –
```
-html

<script src="https://example.com/example.js"></script>


<script src="//example.com/example.js"></script>
```
```
-css
/* 不推荐 */
.example {
  background: url("https://example.com/example.png");
}

/* 推荐 */
.example {
  background: url("//example.com/example.png");
}
```

HTML规范

HTML文件、文件夹名称规范
- 使用小写英文、-、_（-不能开头）组合成文件名、文件夹名。
  
  大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问。
  其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。
  你必须保持统一的风格，建议统一使用小写的文件名。
HTML文件后缀规范
- 统一使用.html为文件后缀。

HTML 格式规范

属性值用双引号。

– Example –

-html
<!-- 不推荐 -->
<a href='/'>Home</a>

<!-- 推荐 -->
<a href="/" alt="Home" title="Home">Home</a>

属性等号前后禁止使用空格。

– Example –

-html
<!-- 不推荐 -->
<a href = '/'>Home</a>

<!-- 推荐 -->
<a href="/" alt="Home" title="Home">Home</a>

缩进
- 用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。（包含HTML和css）
- 嵌套元素应当缩进一次（即两个空格）。
- 对于属性的定义，确保全部使用双引号，绝不要使用单引号。
- 不要在自闭合（self-closing）元素的尾部添加斜线 – HTML5 规范中明确说明这是可选的（例如：<br>或<img>）。
- 不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。

大小写

以下都应该用小写：

HTML：元素名称，属性，属性值（除非 text/CDATA）；
CSS：选择器，属性，属性值

– Example –

-html
<!-- 不推荐 -->
<A HREF="/">Home</A>

<!-- 推荐 -->
<img src="google.png" alt="Google">

-css
/* 不推荐 */
color: #E5E5E5;

/* 推荐 */
color: #e5e5e5;

文档类型

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明。

这样能够确保在每个浏览器中拥有一致的展现。

– Example –
```
-html
<!DOCTYPE html>
<html>
  <head></head>
</html>
```
语言属性

强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。

这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。
语言代码表

– Example –
```
-html
<html lang="zh-CN">
  
</html>
```

HTML 正确性

尽可能使用正确的 HTML。

正确闭合标签且必须闭合;
遵循xhtml strict标准来嵌套标签（如：内联元素不能包含块级元素等等）。

– Example –

-html
<!-- 不推荐 -->
<div>Test</div>
<article>This is only a test.

<!-- 推荐 -->
<!DOCTYPE html>
<meta charset="utf-8">
<div>Test</div>
<article>This is only a test.</article>

语义化
- 为什么要语义化？
  - 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
  - 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
  - 提升用户体验：例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
  - 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
  - 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。
- HTML5常用的语义元素
  常用的语义元素说明
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-79vq1XeH-1628837059890)(assets/html/semantic.jpg)]
- 实用为王
  
  尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
IE 兼容模式

IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。

– Example –
```
-html

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
```
字符编码

通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式

– Example –
```
-html
<head>
  
  <meta charset="UTF-8">
</head>
```
多媒体元素降级

对于像图片、视频、canvas 动画等多媒体元素，确保提供其他可访问的内容。图片可以使用替代文本（alt），视频和音频可以使用文字版本。

– Example –
```
-html
  
  <img src="example.png">

  
  <img src="example.png" alt="example">
```
实体引用

如果团队中文件和编辑器使用同样的编码方式，就没必要使用实体引用。除了一些在 HTML 中有特殊含义的字符（如 < 和 &）以及不可见的字符（如空格）。

– Example –
```
-html

欧元的货币符号是&ldquo;&eur;&rdquo;


欧元的货币符号是“€”
```

type 属性

在引用样式表和脚本时，不要指定 type 属性，除非不是 CSS 或 JavaScript。

因为 HTML5 中已经默认指定样式变的 type 是 text/css，脚本的type 是 text/javascript。

– Example –

-html
<!-- 不推荐 -->
<link rel="stylesheet" href="//example.com/example.css" type="text/css">
<script src="//example/example.js" type="text/javascript"></script>
<!-- 推荐 -->
<link rel="stylesheet" href="//example.com/example.css">
<script src="//example/example.js"></script>

关注分离

标记、样式和脚本分离，确保相互耦合最小化。
属性顺序

HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
- class
- id, name
- data-*
- src, for, type, href
- title, alt
- aria-*, role（aria与role都是HTML5针对html tag增加的属性，一般是为不方便的人士提供的功能，比如屏幕阅读器）
– Example –
```
-html
<a class="..." id="..." data-modal="toggle" href="#">Example link</a>

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

<img src="..." alt="...">
```
布尔（boolean）型属性
- 布尔型属性可以在声明时不赋值。
  
  元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。
  
  – Example –
```
-html
<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>
```
减少标签的数量
- 尽量避免多余的父元素嵌套。
JavaScript 生成的标签
- 能避免时尽量避免使用javaScript生成标签。
  
  通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。

注释

说明文案的注释方法
- （必须）注释文案两头空格。
```
-html

```
- （强烈建议）只有开始注释。
  
  和下一模块必须空行隔开
  
  – Example –
```
-html

<ul class="m-nav">
  <li><a href="#">NAV1</a></li>
  <li><a href="#">NAV2</a></li>
</ul>

<div class="m-content">
  content
</div>
```
- （建议）采用类似标签闭合的写法，与HTML统一格式。
  
  开始注释：（文案两头空格）
  结束注释：（文案前加“/”符号，类似标签的闭合）。
  
  – Example –
```
-html

<ul class="m-nav">
  <li><a href="#">NAV1</a></li>
  <li><a href="#">NAV2</a></li>
</ul>

```

代码本身的注释方法

单行代码的注释。

– Example –

-html
<!-- <div class="m-content">content</div> -->

多行代码的注释。

起始和结尾都另起一行并左缩进对齐。

– Example –

-html
<!-- 不推荐 -->
<!-- <ul class="m-nav">
  <li><a href="#">NAV1</a></li>
  <li><a href="#">NAV2</a></li>
</ul> -->

<!-- 推荐 -->
<!--
<ul class="m-nav">
  <li><a href="#">NAV1</a></li>
  <li><a href="#">NAV2</a></li>
</ul>
-->

任务项

用 TODO 来标记待办事项。

完成后必须删除。
VSCode可下载TODO Highlight（TODO高亮）、Todo Tree（TODO树）两个扩展插件

***-- Example --***
```html
-html
<!-- TODO: 未写当前导航样式 -->
<ul class="m-nav">
    <li><a href="#">NAV1</a></li>
    <li><a href="#">NAV2</a></li>
</ul>
```

结构顺序和视觉顺序基本保持一致
- 按照从上至下、从左到右的视觉顺序书写HTML结构。
- 有时候为了便于搜索引擎抓取，我们也会将重要内容在HTML结构顺序上提前。
- 用div代替table布局，可以使HTML更具灵活性，也方便利用CSS控制。
- table不建议用于布局，但表现具有明显表格形式的数据，table还是首选。

保持良好的简洁的树形结构

每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾的空格。
对于内容较为简单的元素，建议使用单行。

建议在大的模块之间用空行隔开，使模块更清晰。

– Example –

-html
<body>
<!-- 侧栏内容区 -->
<div class="m-side">
  <div class="side">
    <div class="sidein">
      <!-- 热门标签 -->
      <div class="sideblk">
        <div class="m-hd3"><h3 class="tit">热门标签</h3> </div>
        ...
      </div>

      <!-- 最热TOP5 -->
      <div class="sideblk">
        <div class="m-hd3">
          <h3 class="tit">最热TOP5</h3>
          <a href="#" class="s-fc02 f-fr">更多»</a>
        </div>
        ...
      </div>
    </div>
  </div>
</div>
<!-- /侧栏内容区 -->

<!-- 主体内容 -->
<div class="m-content">
  主体内容
</div>
</body>

关于SEO
- 页面必须有title标签，元数据的keywords、description数据，且数据恰当。
- a标签必须含有title属性，且数据恰当。
- a标签尽量使用href进行跳转，避免使用JavaScript跳转。
- img标签必须含有alt、title属性，且数据恰当。
- 针对首页不重要的入口链接都加nofollow屏蔽。
  – Example –
```
-html
<a href="login.html" rel="nofollow">登录</a>
```
- 有翻页的页面，用canonical 有利于页面集权。
  – Example –
```
-html
<head>
  <link rel="canonical" href="栏目页有多个翻页为第一页链接，内页为当前页链接" />
<head>
```
- 注意h、strong标签的使用和数量。
  
  h1标签只能出现一次，它是当前页面的主标题，对蜘蛛的吸引力是最强的。
  strong标签对关键词的强调作用仅次于h标签，用于加粗段落标题或是重点关键词。

关于代码长度

避免一行代码过长，每行代码尽量少于 80 个字符。

– Example –

-html
<!-- 推荐 -->
<a href="http://www.example.com" title="栏目页有多个翻页为第一页链接，内页为当前页链接" 
alt="栏目页有多个翻页为第一页链接，内页为当前页链接">链接</a>

关于空行
- 不要无缘无故添加空行。
- 为每个逻辑功能块添加空行，这样更易于阅读。
- 比较短的代码间不要使用不必要的空行和缩进。

关于IE

仅对IE生效.
– Example –

-html
<!-- IE6及以下生效，[if lte IE 7]表示IE7及以下生效 -->
<!--[if lt IE 7]> 
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" /> 
<![endif]-->

AS、SD

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端编码规范之HTML规范

通用规范省略图片、样式、脚本以及其他媒体文件 URL 的协议部分（http:,https:），除非文件在两种协议下都不可用。这种方案称为 protocol-relative URL，好处是无论你是使用 HTTPS 还是 HTTP,访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节。– Example –-html<script src="https://example.com/example.js"></scr
复制链接

扫一扫