【HTML】编码风格规范

最新推荐文章于 2021-06-09 14:36:34 发布

等时钟成长

最新推荐文章于 2021-06-09 14:36:34 发布

阅读量240

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/pangji0417/article/details/107685848

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML+CSS风格规范

文章目录

HTML+CSS风格规范

HTML部分

标签小写、属性名小写

HTML大小写不敏感，更推荐的风格是全部小写

<SECTION CLASS="red-text">
  <P>不好</p>
</SECTION>

<section class="red-text">
  <p>好</p>
</section>

唯一的例外是DOCTYPE，但是再强调一次，大小写都是无错的，这么写只是风格习惯

<!DOCTYPE html>

属性值永远使用引号

属性值内部没有空格的话，引号是可选的，但是推荐永远使用引号，双引号

<!-- 不好 -->
<table class=striped></table>
<table class='striped'></table>

<!-- 好 -->
<table class="striped"></table>

闭合标签

HTML5规范并不严格要求空元素的闭合，但是更规范的写法希望您永远加上斜线/进行闭合

<!-- 不好 -->
<p>这是一个没有为标签的段落
<img src="url">

<!-- 好 -->
<p>闭合的标签</p>
<img src="url" />

属性赋值的空格

在JavaScript中我们推崇在=左右加上空格，但是HTML中推荐**=前后不加空格**

<!-- 不好 -->
<link rel = "stylesheet" href = "style.css"/>

<!-- 好 -->
<link rel="stylesheet" href="style.css" />

属性换行

超过三个属性，换行会有更好的可读性

<!-- 不好 -->
<input class="form-style" id="main" type="password" />

<!-- 好 -->
<input
  class="form-style"
  id="main"
  type="password"
/>

CSS部分

分号

JavaScript中有ASI，所以很多人，包括尤雨溪等大神都推崇丢弃分号，但是CSS没有ASI，你需要永远加分号

/* 报错！ */
.great-style {
  border: 1px green solid
  background: red
}

/* 好 */
.great-style {
  border: 1px green solid;
  background: red;
}

花括号

花括号前留白，花括号换行

/* 不好 */
.great-style{border: 1px green solid;background: red;}

/* 好 */
.great-style {
  border: 1px green solid;
  background: red;
}

冒号

冒号后跟一空格

/* 不好 */
.great-style {
  border:1px green solid
  background:red
}

/* 好 */
.great-style {
  border: 1px green solid;
  background: red;
}

减少内联样式

少量的内联样式书写方便，但是大量使用内联样式会导致追踪困难，样式管理散乱

<!-- 不好 -->
<div style="padding: 5px;background: red;border-radius: 5px;"></div>

/* 好 */
<div class="great-style"></div>
<style>
.great-style {
  padding: 5px;
  background: red;
  border-radius: 5px;
}
</style>

测试时使用自定义属性

在e2e测试中进行元素选择时，优先添加data-cy属性

<button
  class="btn btn-large"
  id="main"
  name="submission"
  role="button"
  data-cy="submit"
>
  Submit
</button>

// 优先使用data-cy选择元素，其次content、id、class、tag
cy.get("[data-cy=submit]").click();
cy.contains("Submit").click();
cy.get("#main").click();
cy.get(".btn.btn-large").click();

等时钟成长

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【HTML】编码风格规范

HTML+CSS风格规范文章目录HTML+CSS风格规范HTML部分标签小写、属性名小写属性值永远使用引号闭合标签属性赋值的空格属性换行CSS部分分号花括号冒号减少内联样式测试时使用自定义属性HTML部分标签小写、属性名小写HTML大小写不敏感，更推荐的风格是全部小写<SECTION CLASS="red-text"> <P>不好</p></SECTION><section class="red-text"> <p
复制链接

扫一扫

专栏目录