品优购day00

文章目录

  • 一、HTML规范
    • 1.1 书写风格
    • 1.2 类型属性
    • 1.3 元素属性
    • 1.4 特殊字符引用
    • 1.5 代码嵌套
  • 二、图片规范
    • 2.1 内容图
    • 2.1 背景图
  • 三、CSS规范
    • 3.1 代码格式化
    • 3.2 代码大小写
    • 3.3 选择器
    • 3.4 属性值引号
    • 3.5 属性书写顺序
    • 3.6 命名规范
    • 3.7 ClassName命名

一、HTML规范

1.1 书写风格

HTML标签名、类名、标签属性和大部分属性值统一用小写

<div class="demo">div>

1.2 类型属性

不需要为 CSS、JS 指定类型属性,HTML5 中默认已包含

<link rel="stylesheet" href="" >
<script src="">script>

1.3 元素属性

元素属性值使用双引号语法

<input type="text">
<input type="radio" name="name" checked="checked" >

1.4 特殊字符引用

在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符

<a href="#">more>>a>

1.5 代码嵌套

元素嵌套规范,每个块状元素独立一行,内联元素可选

<div>
    <h1>h1>
    <p>p>
div>	
<p><span>span><span>span>p>

段落元素与标题元素只能嵌套内联元素

<h1><span>span>h1>
<p><span>span><span>span>p>

二、图片规范

2.1 内容图

  • 推荐JPEG

2.1 背景图

  • 推荐PNG

三、CSS规范

3.1 代码格式化

统一使用展开格式书写样式

3.2 代码大小写

统一使用小写

3.3 选择器

  • 尽量少用通用选择器 *
  • 不使用 ID 选择器
  • 不使用无具体语义定义的标签选择器

3.4 属性值引号

css属性值需要用到引号时,统一使用单引号

/* 推荐 */
.jdc { 
	font-family: 'Hiragino Sans GB';
}

3.5 属性书写顺序

  1. 布局:display
  2. 自身:宽高
  3. 文本:颜色,对齐
  4. 其它(CSS3):border-radius

3.6 命名规范

目录命名

  • 项目文件夹:pinyougou
  • 样式文件夹:css
  • 脚本文件夹:js
  • 样式类图片文件夹:img
  • 产品类图片文件夹: upload
  • 字体类文件夹: fonts

3.7 ClassName命名

小写,下划线连接

  • .nav_top

你可能感兴趣的:(前端)