❌

阅读视图

发现新文章，点击刷新页面。

HTML代码规范

✇掘金 前端
hypnos_xy

HTML代码规范

缩进

建议缩进4个字符,在现代前端工程化,缩进4个字符比2字符更好的可读性。也不影响最终的结果

DOCTYPE 声明

统一使用HTML5声明<!DOCTYPE html>

meta 标签

  • 编码格式
<meta charset="utf-8"/>
  • SEO优化
<!-- 网页标题 -->
<title>网页标题</title>
<!-- 页面关键词 -->
<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=no 是指禁止用户进行缩放 yes 允许缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
  • 禁止自动识别页面中有可能是电话格式的数字
<meta name="format-detection" content="telephone=no"/>

pc端建议

<title>网页标题</title>
<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"/>

移动端建议

<title>网页标题</title>
<meta charset="utf-8"/>
<meta name="keywords" content="your keywords"/>
<meta name="description" content="your description"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>

标签

  • 所有标签都统一使用小写字母
  • 自闭合标签：写法<br/>后面的/不要省略，常用的自闭合标签：
<br/>
<img/>
<input/>
<link/>
<meta/>
<base/>
<source/>
  • 非自闭合标签必须有结束标签，且不要省略：
<html></html>
<body></body>
<head></head>
<script></script>
<style></style>
<iframe></iframe>
<noscript></noscript>
<title></title>
<!-- 普通标签 -->
<h1></h1>
<p></p>
<ul></ul>
<ol></ol>
<li></li>
<option></option>
<div></div>
<span></span>
<a></a>
<form></form>
<label></label>
<button></button>
<textarea></textarea>
<select></select>
<canvas></canvas>
<audio></audio>
<video></video>
<!-- 语义化标签 -->
<header></header>
<footer></footer>
<nav></nav>
<menu></menu>
<main></main>
<article></article>
<section></section>
<aside></aside>
<figure></figure>
<figcatption></figcaption>
<time></time>
<address></address>
  • 尽量减少标签数量：如果设计到div装饰的小物件，尽量使用伪元素实现，而不是先建立一个元素实现
  • vue组件自定义标签: 如果设计到多个单词便签不要使用驼峰法，而是使用-分割。且需要闭合标签
  • 对于<span>、<a>、等行内元素不要在嵌套其他块级元素。
  • 块元素不要和行内元素并列

转移字符

  1. &nbsp;空格
  2. &lt;小于
  3. &gt;大于
  4. &amp;和
  5. &quot;引号

元素属性

  • 元素属性值使用双引号语法
  • 自定义数据属性data-*,使用小写字符，避免使用特殊字符，多单词使用-分割

js 使用

// 获取属性data-user-id="123"
let userId = userDiv.dataset.userId
userId = userDiv.getAttribute('data-user-id');
// 修改
userDiv.dataset.userId = "456";
userDiv.setAttribute('data-user-id', '789');
// 删除属性
delete userDiv.dataset.userRole;
userDiv.removeAttribute('data-user-id');
//访问所有data
const allData = element.dataset; // 返回一个 DOMStringMap 对象

css 使用

[data-role="admin"] {
  background-color: #ffebee;
}
.tooltip::before {
  content: attr(data-tooltip);
  /* 其他样式 */
}

其他规范

  1. img必须（尽量）要使用alt属性
  2. 多个表单组合应该放入form表单内
  3. html 注释必须要单独一行，不能和任何标签同行
<!-- Comment Text -->
<div>...</div>
  1. 单行字数限制120字符比较合适
  2. 多属性建议分行写(属性超过3个建议分行）
<input type="text"
       class="form-control"
       id="exampleInputEmail1"
       placeholder="Enter email"
       data-attribute1="value1"
       data-attribute2="value2"/>
❌