HTML5代码规范

最新推荐文章于 2023-03-31 08:41:03 发布

枫叶时代

最新推荐文章于 2023-03-31 08:41:03 发布

阅读量262

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42278182/article/details/96989335

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

在这里插入图片描述

前言

前端是个更新节奏很快的行业，没有谁可以说掌握所有前端知识，我们都是在学习一些心的、更新一些旧的，抛弃一些被放弃的。

摘要

优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护

HTML 规范

缩进

统一两个空格缩进

命名规范

class 应以功能或内容命名，不以表现形式命名；
class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；

DOCTYPE 声明

HTML 文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：

<!DOCTYPE html>

meta 标签

统一使用 “UTF-8” 编码
```
<meta charset="utf-8">
```

SEO 优化

 <!-- 页面关键词 -->
 <meta name ="keywords" content =""/>
 <!-- 页面描述 -->
 <meta name ="description" content ="">
 <!-- 网页作者 -->
 <meta name ="author" content ="">

优先使用 IE 最新版本和 Chrome

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

为移动设备添加视口

<!-- device-width 是指这个设备最理想的 viewport 宽度 -->
<!-- initial-scale=1.0 是指初始化的时候缩放大小是1，也就是不缩放 -->
<!-- user-scalable=0 是指禁止用户进行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

禁止自动识别页面中有可能是电话格式的数字
```
<meta name="format-detection" content="telephone=no">
```

团队约定：

pc 端：

	<meta charset="utf-8">
	<meta name="keywords" content="your keywords">
	<meta name="description" content="your description">
	<meta name="author" content="author,email address">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

移动端：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">